宏晶第四阶段web基础jquery.pptxVIP

Web界面开发 Jquery -1 大纲 选择元素 操作元素的属性 操作元素的样式 动画效果 事件监听 重构DOM 预习请参考共享资料下面的：JQuery_1.4_API.CHM jQuery 简介 jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript. Site: 选择元素 jQuery支持使用css1至css3的选择器语法来选择元素 语法：$(选择字符串); Eg: $(“#id”); $(“.c1 .c2”); $(“table”); 参考：/TR/css3-selectors/ 返回的对象为jQuery对象，而不是普通的dom对象，所以不具备dom对象的方法和属性 操作元素的属性 var el = $(“#id”); 改变元素的name属性： el.attr(“name”, “newname”); 改变元素的src: el.attr(“src”, “x.png”); 改变元素的id: el.attr(“id”, “newid”); 增加属性x: el.attr(“x”, “somevalue”); 访问元素的属性： var p = el.attr(propName); Eg: p = el.attr(“name”); 操作元素的样式 访问样式 var size = el.css(“font-size”); 设置样式 el.css(“font-size”, “20px”); el.css(“float”, “right”); el.css(opacity, 0.5); el.hide(); el.show(); 动画效果 el.hide(1000); el.show(1000); 其它效果 toggle, slideDown, slideUp, slideToggle fadeIn, fadeOut, fadeTo 自定义动画 animate 事件监听 el.bind(“click”, function(event){ alert(this.id); }); 事件处理函数中的this指向绑定事件的对象 其它绑定方法 el.click(handler); el.blur(handler); … 事件监听 增强的事件监听功能 one(type, [data], fn) live(type, fn) hover(over, out) toggle(fn, fn) 事件监听 取消默认行为 在事件处理函数中return false即可 取消绑定 unbind([type], [data]); 重构DOM $(“some”).remove() $(“divhello/div”).append(document.body) 其它方法： append appendTo prepend prependTo after insertAfter before insertBefore wrap unwrap wrapAll wrapInner replaceWith replaceAll Thanks!