首页 > IT职业 > IT图书 > jQuery DOM篇 学习手记
一、 jQuery节点创建与属性的处理
Query创建节点的方式,保留了HTML的结构书写方式,直接在$(" ")中按照HTML结构书写即可,例如:
$("
$("
二、 节点的插入
内部插入append()与appendTo(),prepend()与prependTo()
.append(content) 为每个匹配的元素内部追加内容,作为最后一个元素。
.appendTo(content) 把所有的匹配的元素追加到另一个、指定的元素集合中,作为最后一个元素。
.prepend() 为每个匹配的元素内部追加内容,作为第一个元素。
.prependTo() 把所有的匹配的元素追加到另一个、指定的元素集合中,作为第一个元素。
.insertAfter(content) 将每个匹配的元素集合插入到参数所指定元素后边,
即将匹配的元素插入到content后。
.insertBefore(content) 将每个匹配的元素集合插入到参数所指定元素前边 。
insertAfter()与insertBefore()不支持多元素。
三、 DOM节点的删除
remove()的用法 无参数,有参数
remove()会将元素自身移除,同时也会移除元素内部的一切,包括绑定的事件及与该元素相关的jQuery数据。
remove比empty好用的地方就是可以传递一个选择器表达式用来过滤将被移除的匹配元素集合,可以选择性的删除指定的节点。例如:
$("p").remove(":contains('3')")
或者
$("p").filter(":contains('3')").remove()
四、 DOM节点的复制与替换
//clone处理一
$("div").clone() //只克隆了结构,事件丢失
//clone处理二
$("div").clone(true) //结构、事件与数据都克隆
DOM替换replaceWith()和replaceAll()
.replaceWith( newContent ):用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
.replaceAll( target ) :用集合的匹配元素替换每个目标元素
包裹wrap()方法 增加父级元素
.wrap( wrappingElement ):在集合中匹配的每个元素周围包裹一个HTML结构
p元素
p元素
.unwrap()方法 删除父级元素
.unwarp()方法 ,作用与wrap方法是相反的。将匹配元素集合的父级元素删除,保留自身(和兄弟元素,如果存在)在原来的位置。
.wrapAll()方法
wrap是针对单个dom元素处理,而wrapAll给集合中匹配的元素增加一个外面包裹HTML结构。
五、 jQuery遍历方法
children()方法 查找子元素
如果想快速查找合集里面的第一级子元素,此时可以用children()方法。这里需要注意:.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素(仅儿子辈,这里可以理解为就是父亲-儿子的关系)
.children()方法括号中的参数可接受选择器表达式。
find()方法 查找后代元素,()中须有参数
如果想快速查找DOM树中的这些元素的后代元素,此时可以用find()方法,这也是开发使用频率很高的方法。这里要注意 children与find方法的区别,children是父子关系查找,find是后代关系(包含父子关系)
例如:
parent()方法 查找父元素
如果想快速查找合集里面的每一个元素的父元素(这里可以理解为就是父亲-儿子的关系),此时可以用parent()方法。方法括号中的参数可接受选择器表达式。
closest()方法 查找祖辈元素,返回找到的第一个值。
从元素本身开始,在DOM 树上逐级向上级元素匹配,并返回最先匹配的祖先元素。括号中为匹配项。
next()方法 查找相邻的后边的同辈元素。
快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合,此时可以用next()方法。
prev()方法 查找相邻的前边的同辈元素
查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合,此时可以用prev()方法。
siblings()方法 查找所有同辈元素
查找指定元素集合中每一个元素的同辈元素,此时可以用siblings()方法。
add()方法 增加指定的元素
例如:
$('li').add('p').css('background', 'red') //将li元素和p元素都选中,添加样式
$("li").each(function(index, element) {
if (index % 2) {
$(this).css('color','blue')
}
}) //遍历所有的li,修改偶数li内的字体颜色
来自 “ ITPUB博客 ” ,链接:https://blog.itpub.net/2317/viewspace-2807437/ ,如需转载,请注明出处,否则将追究法律责任。