jQuery的中文文档十分详细,并且权威.
W3C的jQuery文档更加简单实用。

jQuery 1.9.0

jQuery中文文档
W3C的jQuery文档

jQuery操作DOM元素

元素本身

attr() ???获得元素的某项属性,更改或添加元素的属性值 ???实例 ???????var className= $("div").attr("class") ???????获得元素的类名 ???????attr("property",‘value1‘) ?更改一项属性 ???????attr({property1: ‘value1‘, ???????????property2: ‘value2‘ }) 更改多项属性css() ???为元素添加或修改某项或多项属性 ???var className= $("div").css("propertyName") ????css("propertyname","value") ?更改一项属性 ???$("div").css({"background":"red","width":"100px"}) 多项属性 ???注意： ???????多项属性时之间要用","隔开 ???????且与attr()的不同,设置多个属性时其类名也加上引号

addClass() ???为元素添加新类名,来改变样式 ???$("div").addClass("red") ???为div元素添加样式 ???注意： ???????为元素添加新样式时不取消原有样式。 ???????addClass()的中类名不再加"." ???????一次添加多项样式时之间要用" "空格隔开removeClass() ???反 addClass()removeAttr() ???反 css(),无需加属性值clone() ???复制元素整体 ???$(selector).clone() ???实例 ???????var a=$("#div1").clone() ???????将id为div1的元素赋值给变量a

包裹元素和内容

wrap() ???用于包裹元素本身 ???$(selector).wrap(wrapper) ???实例 ???$("#div1").wrap("<div></div>") ???id为div1的元素整体被div标签包裹wrapInner() ???实例 ???$("#div1").wrapInner("<div id="div2"></div>") ???id为div1的元素的所有子元素被div2包裹,而div2又被div1包裹

元素的子元素

append(content) ???向指定的元素中追加内容,被追加的content参数, ???可以是字符 HTML元素标记还可以是字符串的标记 ???默认在该元素的子元素的最后面 ???实例 ???js: ???$html="<p class="green">asdawdasdwadsawdsa</p>" ???$("div").append($html) ???相当于在div元素内部又加入p标签appendTo() ???用法 ???????$(content).appendTo(selector) ???实例 ???????js: ???????$html="<p class="green">asdawdasdwadsawdsa</p>" ???????$($html).appendTo("div") ???????将p标签加入到div标签的末尾处

remove() ???删除所选元素本身和子元素 ???实例 ???????<span class="green">asd</span> ???????<span class="red">asd</span> ???????js: ???????????$("span").remove(".red") ???????????删除span标签中类名为red的元素,此时该span标签不再存在empty() ???删除元素的所有子元素 ???实例 ???<span class="green">asd</span> ???js: ???????$("span").empty() ???????知识删除了asd文本节点span标签依然存在

层级之内

before()和 after() ???在元素的前后插入内容 ???$(selector).before(content) ???$(selector).after(content)

替换内容

replaceWith() 和 replaceAll() ???格式 ???????$(selector).replaceWith(content) ???????$(content).replaceAll(selector) ???实例 ???????$("#div1").replaceWith("<p>asdwsadaw</p>") ???????把id为#div1的整个元素换为p标签

遍历元素

each() ???格式:$(selector).each(function(index)) ???实例： ???????<span class="green1"></span> ???????<span class="green2"></span> ???????<span class="green3"></span> ???????<span class="green4"></span> ???????js: ???????$("span").each(function(){ ???????????if(index==2){ ???????????????$(this).addClass("red") ???????????} ???????})) ???????为类为 green4的span元素添加red样式 ???????注意 ???????????this的使用$(this)此时不加双引号

jQuery事件与应用

jQuery并没有创建太多新的事件,而是为绑定事件时提供了方便。

注意:这里得事件名称没有‘on‘,绑定鼠标点击事件时只需click即可

新事件

ready事件 ???ready事件类似于onLoad事件，但前者只要页面的DOM结构 ???加载后便触发，而后者必须在页面全部元素加载成功才触发， ???ready()可以写多个，按顺序执行。 ???注意: ???????$(document).ready(function(){})等价于$(function(){});focus和blur事件 ???文本框的focus和blur事件 ???focus事件:当点击文本框时,触发该事件 ???blur事件:当文本框失去焦点时,触发该事件change 事件 ???当一个元素的值(value)发生改变时,将触发该事件 ???实例： ???????当改变下拉列表框的opnion时,将触发该事件

绑定事件的方法

bind() 方法 ???通过bind()方法可以为获得的DOM对象绑定任意的事件 ???$(selector).bind(event,[data],function) ???实例 ???????$("#btntest").bind("click mouseout",function(){ ???????????$(this).attr("value","OK") ???????}) ???????当鼠标点击id为btntest的按钮时改变其值为OK ???注意： ???????事件要加引号 ???????多个事件一起绑定时当中空格隔开

绑定事件新方法

one() 方法 ???$(selector).one(event,func) ???可以绑定任何有效的事件,但该事件函数只会触发一次hover() 方法 ???$(selector).hover(function1,function2) ???当鼠标移到所选元素上时,执行的function1,鼠标移出时执行function2toggle() 方法 ???$(seleector).toggle(func1,func2,func3,funcN) ???当第一次点击元素对象时执行func1,第二次点击元素对象时执行func2.. ???当执行完最后一个函数时,再次点击将返回执行的第一个函数

卸载绑定事件方法

unbind() 方法 ???可以移除元素已经绑定的事件 ???$(selector).unbind(event[,fun]) ???注意： ???????若fun没有指定将移除所有的触发函数

模拟事件的触发

trigger() 方法 ???该方法可以直接触发元素指定的事件 ???$(selector).trigger(event) ???实例 ???????$("#form1 input:submit").trigger("click") ???????当执行该语句是相当于点击提交按钮,表单元素将被提交

精彩集锦

1.this指针的使用$("span").each(function(){ ???if(index==2){$(this).addClass("red")}})2.易错点睛 ???var speed=‘24px’ 或var speed=24 ???不可以 var speed=24px