1. jQuery中的DOM操作


1)查找节点
通过jQuery选择器来完成
2)创建节点
创建元素节点:var newTd = $("<td></td>")
创建文本节点:在创建元素节点时直接把文本内容写出来。var newTd = $("<td>文本内容</td>")
3)插入节点:
append()
在每个匹配元素里面的末尾处插入参数内容。作为它的最后一个子元素。
参数 一个或多个DOM 元素,DOM元素数组,HTML字符串,或者jQuery对象,用来插在每个匹配元素里面的末尾。
【注意】如果将页面上一个元素A插入到另一个元素B,元素A会被从老地方移走
appendTo(target)
颠倒了 $(A).append(B)的效果,$(A).appendTo(B)将A追加到B中,将匹配的元素插入到目标元素的最后面
prepend()
将参数内容插入到每个匹配元素的前面(元素内部)。也就是当前元素中的第一个子元素
prependTo(target)
颠倒了 $(A).prepend(B)的效果.
after()
在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点插在每个匹配元素的后面
insertAfter(target)
在目标元素后面插入集合中每个匹配的元素(插入的元素作为目标元素的兄弟元素)。颠倒了 $(A).after(B)的效果
before()
在匹配元素的前面插入内容(外部插入)作为其兄弟节点插在集合中每个匹配元素前面。
insertBefore(target)
颠倒了 $(A).before(B)的效果
4)删除节点
remove([selector])
从DOM中删除所有匹配的元素,返回值是一个指向已经被删除的节点的引用,可以在以后再使用这些元素。该方法会移除元素,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据
包括节点本身
参数:对已选中的dom节点进行删选
detach( [selector ] )
.detach() 方法和.remove()类似, 但是.detach()保存所有jQuery数据和被移走的元素相关联事件。
empty()
无参数。从DOM中移除集合中匹配元素的所有后代节点。

5)复制节点
$("#id").clone(false)
深复制
该方法返回的是一个节点的引用,参数默认为false,clone()方法中传递了一个参数true,含义是复制元素的同时复制元素中所绑定的事件
6)替换节点
replaceWith(newContent):
用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合。该方法会删除与节点相关联的所有数据和事件处理程序
参数 用来插入的内容,可能是HTML字符串,DOM元素,或者jQuery对象。

replaeAll(target ) :
用集合的匹配元素替换每个目标元素。颠倒了replaceWith()操作效果

7)包裹节点
wrap([wrappingElement])
在每个匹配的元素外层分别包上一个html元素。
wrapAll([wrappingElement]) :
将所有匹配的元素用一个元素来包裹,在所有匹配元素外面包一层HTML结构。这种结构可以嵌套多层,但是最内层只能有一个元素。所有匹配元素将会被当作是一个整体,在这个整体的外部用指定的 HTML 结构进行包裹。
匹配到的其他项位置移到第一个匹配项后,再被整体包裹。
wrapInner([wrappingElement]):
每个匹配元素里面内容(子元素)分别都会被这种结构包裹。
8)节点遍历
注意:使用这些方法去解析html文档和xml文档都是可以的,因为html文档和xml文档都可以转换为dom模型.(也就是说在ajax中,如果后台传过来的是xml文档,那么我们使用jquery也可以用下面方法解析)
children([selector])
用于取得匹配元素的子元素集合(只考虑子元素而不考虑任何后代元素)
$(".content>.inner")
=>
$(".content").children(".inner");
不加参数,则为所有的直接子代元素
find(selector)
在当前元素对象中的后代元素中查找,和参数选择器所匹配的所有的后代元素集合。
获得当前匹配元素集合中每个元素的后代,由选择器进行筛选
$("body").find("span:nth-first(2)")
next([selector])
取得匹配的元素集合中每一个元素紧邻的后面兄弟元素。
.next()
nextAll([selector])
查找当前元素之后所有的同辈元素。
prev([selector])
取得匹配元素前面紧邻的兄弟元素
prevAll([selector])
查找当前元素之前所有的同辈元素。
siblings([selector])
取得匹配元素前后所有的兄弟元素
前面这些都可以不加参数选择器进行匹配
closest( selector)
取得和参数匹配的最近的祖先元素,如果匹配不上继续向上查找父元素(从当前元素开始向上找,即自己可以是(优先是)自己的最近的closest父元素)
parent([selector])
取得匹配元素集合中,每个元素的父元素(从父元素开始,不包含自己(换句话说自己不是自己的父元素))
parents([selector])
获得集合中每个匹配元素的祖先元素,
filter(selector)
把当前所选择的所有元素再进行筛选过滤
9)jQuery中属性设置函数
attr( key|key,val|{key:val,key2:val2} )
获取匹配的元素集合中的第一个元素的属性的值或设置每一个匹配元素的一个或多个属性。
removeAttr( attributeName )
为匹配的元素集合中的每个元素中移除一个属性(attribute)。
10)css属性设置
css( key|key,val|{key:val,key2:val2} )
获取匹配元素集合中的第一个元素的样式属性的计算值 或设置每个匹配元素的一个或多个CSS属性。
addClass( className )
为每个匹配的元素添加指定的样式类名
hasClass( className )
确定任何一个匹配元素是否有被分配给定的(样式)类。
removeClass([className ])
移除集合中每个匹配元素上一个,多个或全部样式。
toggleClass(className):
如果有,就移除,如果,没有就添加

11)jQuery中的html() text() val() 方法
val([value])用来读取或修改【表单元素】的value属性的值。
参数:
无参 获取value值
参数 value,设置value的值
参数 function(index,oldVal) 回调函数,index索引,oldVal当前val,return值为设置的value值
html([html])用为读取和修改元素的HTML标签
参数:(innerHTML)
无参 获取html的值
参数 html,设置html的值
参数 function(index,oldhtml) 回调函数,index索引,oldhtml当前html,return值为设置的html代码值
text([text])用来读取或修改元素的纯文本内容
参数:
无参 获取文本值
参数 text,设置文本值
参数 function(index,oldText) 回调函数,index索引,oldText当前text,return值为设置的text文本值
3. 事件
1.bind(eventType[,eventData ],handler(eventObject) )
eventType:一个或多个事件类型 ,字符串 'click' 'submit'多个事件类型可以通过用空格隔开一次性绑定'click submit'(多个事件绑定同一个函数)
eventData:向处理函数传递数据,一个对象,可选不常用
handler :事件处理函数,每次触发该事件时执行它
eventObject: 事件对象
currentTarget 在事件冒泡过程中的当前DOM元素。
target 触发事件的DOM元素。
preventDefault()阻止默认事件行为
stopPropagation()防止事件冒泡到DOM树上
type 描述事件的性质。
data 传递给一个事件方法的数据对象
metaKey 表示事件触发时哪个Meta键被按下
pageX 鼠标相对于文档的左边缘的位置
pageY 鼠标相对于文档的顶部边缘的位置

可以同时绑定多个事件处理函数(多个事件绑定不同函数),只要传入一个{事件类型:处理函数,....}的对象:

1.2bind(events)
events :一个对象,包含了一个或多个DOM事件类型,以及要对它们执行的函数,key为事件类型,val为事件处理函数
events = {
click: function() {},
mouseenter: function() {}
}
2. unbind([eventType][,handler(eventObject)])
从元素上删除一个以前附加事件处理程序。
无参时 .unbind() 将移除元素上所有绑定的处理程序。
参数为某事件类型时,移除该事件类型上的所有绑定的处理程序
参数为事件类型,事件处理函数,移除该事件类型上绑定的该处理函数

unbind( event )
3.on( events[,childSelector][,data],handler(eventObject))
在选定的元素上绑定一个或多个事件处理函数。
childSelector:一个选择器字符串,用于过滤出被选中的元素中能触发事件的“后代元素”。如果选择器是 null 或者忽略了该选择器,那么被选中的元素总是能触发事件。

绑定动态元素(未来元素)事件
.on(events, callback) 只能绑定页面已有元素的事件。
.on(events, childSelector, callback) 则是在 已有的元素 上绑定 代理的 事件处理器,但只有事件的实际 source 是其子代元素并且符合 selector 时, callback 才会以该实际。(把元素绑在页面中已存在的,的未来元素的祖先元素上)
4.off( events [, selector ] [, handler ] )
移除一个事件处理函数。


推荐使用on/off的方式
4.2//$es.click(handler );
5.trigger( eventType[,extraParameters])
根据绑定到匹配元素的给定的事件类型执行所有的处理程序和行为。extraParameters 传递给事件处理程序的额外参数。为数组类型

$("#one").trigger("click");//模拟点击
向事件中传入任意的数据:
$("p").click( function (event, a, b) {

}).trigger("click", ["foo", "bar"]);

6. 其他事件方法
鼠标事件
click()
dblclick()
focusin()
focusout()
hover() 1.7 mouseenter 和 mouseleave 事件。(不包括子节点,只有在鼠标指针穿过/离开被选元素时)
1.8 mouseover 和 mouseout 事件。(包括子节点,不论鼠标指针穿过/离开被选元素或其子元素)
mousedown()
mouseup()
mouseenter()
mouseleave()
mouseout()
mouseover();
mousemove()
键盘事件:
keypress()
keyup()
keydown()
表单事件:
blur()
change()
focus()
select()
suubmit()
2. jQuery中常用API
1)jQuery中的工具方法
get()
无参 调用这个方法将会返回所有匹配的DOM节点,这些节点包含在一个标准的数组中
参数 index: 索引,从0开始计数,用来确定获取索引指定元素。如果index的值超出范围 小于元素数量的负数或等于或大于元素的数量 - 那么它将返回undefined
toArray()
无参 返回一个包含jQuery对象集合中的所有DOM元素的数组。
eq(index)
参数 index,用于指示元素的索引,当为负数时从集合中的最后一个元素开始倒数
返回值 jQuery对象
filter() 过滤器函数
参数 选择器字符串
参数 function(index){} 匿名函数,如果函数返回true ,该元素将被包含在筛选集合中;
返回值 : jQuery对象

map() 该方法特别适用于获取或设置元素集合中的值
参数 function(index,item){}回调函数

例如
可以得到一个用逗号分隔的复选框 ID:
$(':checkbox').map(function() {
return this.id;
}).get().join();
each() 遍历一个jQuery对象,为每个匹配元素执行一个函数。
参数 function(index, Element/item)
first() 获取匹配元素集合中第一个元素。无参数
last() 获取匹配元素集合中最后一个元素。无参数
has() 参数 :selector
将匹配元素集合缩减为包含特定元素的后代的集合,
选择器用于检测匹配元素的后代;如果任何后代元素匹配该选择器,该元素将被包含在结果中。
is() 参数 :selector
根据选择器检查当前匹配元素集合,如果存在至少一个匹配元素,则返回 true,至少有一个匹配
返回值 : boolean类型
not() 参数 :selector
从匹配的元素集合中移除指定的元素。不匹配该选择器的元素会被包含在结果中。
slice()根据指定的下标范围,过滤匹配的元素集合,并生成一个新的 jQuery 对象。
参数(start [, end ])
start整数,从0开始计数的下标。代表将要被选择的元素的起始下标。如果指定的下标是一个负数,那么代表从末尾开始计数。
end整数,从 0 开始计数的下标。代表将要被选择的元素的结束下标。如果指定的下标是一个负数,那么代表从末尾开始计数。如果忽略此参数,则选择的范围是从 start 开始,一直到最后。
包含开始,不包含结束

 

posted @ 2018-02-05 16:44  风中之烛_清  阅读(140)  评论(0编辑  收藏  举报