基础-dom篇
1.节点创建于属性的处理
[plain] view plain copy
var $body = $('body');
$body.on('click', function() {
//通过jquery生成p元素节点
var p = $("<p class='right'><p class='aaron'>动态创建p元素节点</p></p>");
$body.append(p);
})
2.dom内部插入append()与appendto() (顺序相反的两个方法) [添加为子元素]
[plain] view plain copy
append：这个操作与对指定的元素执行原生的appendchild方法，将它们添加到文档中的情况类似。
$("#bt1").on('click', function() {
//.append(), 内容在方法的后面，
//参数是将要插入的内容。
$(".content").append('<p class="append">通过append方法添加的元素</p>')
})；
appendto：实际上，使用这个方法是颠倒了常规的$(a).append(b)的操作，即不是把b追加到a中，而是把a追加到b中。
$("#bt2").on('click', function() {
//.appendto()刚好相反，内容在方法前面，
//无论是一个选择器表达式 或创建作为标记上的标记
//它都将被插入到目标容器的末尾。
$('<p class="appendto">通过appendto方法添加的元素</p>').appendto($(".content"))
})；
3.dom内部插入after()与before() [添加为兄弟元素]
[html] view plain copy
after向元素的后边添加html代码，如果元素后面有元素了，那将后面的元素后移，然后将html代码插入
$("#bt1").on('click', function() {
//在匹配test1元素集合中的每个元素前面插入p元素
$(".test1").before('<p style="color:red">before,在匹配元素之前增加</p>', '<p style="color:red">多参数</p>');
})；
before向元素的前边添加html代码，如果元素前面有元素了，那将前面的元素前移，然后将html代码插
$("#bt2").on('click', function() {
//在匹配test1元素集合中的每个元素后面插入p元素
$(".test2").after('<p style="color:blue">after,在匹配元素之后增加</p>', '<p style="color:blue">多参数</p>');
})；
4.dom内部插入prepend()与perpendto() [添加为子元素]
[html] view plain copy
.prepend()方法将指定元素插入到匹配元素里面作为它的第一个子元素 (如果要作为最后一个子元素插入用.append()).
$("#bt1").on('click', function() {
//找到class="aaron1"的p节点
//然后通过prepend在内部的首位置添加一个新的p节点
$('.aaron1') .prepend('<p>prepend增加的p元素</p>');
})；
.prepend()和.prependto()实现同样的功能，主要的不同是语法，插入的内容和目标的位置不同
$("#bt2").on('click', function() {
//找到class="aaron2"的p节点
//然后通过prependto内部的首位置添加一个新的p节点
$('<p>prependto增加的p元素</p>').prependto($('.aaron2'))
})；<span style="font-family:'华文中宋';font-size:12pt;"></span>
5.dom外部插入insertafter()与insertbefore()
[html] view plain copy
insertafter将jquery封装好的元素插入到指定元素的后面，如果元素后面有元素了，那将后面的元素后移，然后将jquery对象插入
$("#bt1").on('click', function() {
//在test1元素前后插入集合中每个匹配的元素
//不支持多参数
$('<p style="color:red">测试insertbefore方法增加</p>', '<p style="color:red">多参数</p>').insertbefore($(".test1"));
});
insertbefore将jquery封装好的元素插入到指定元素的前面，如果元素前面有元素了，那将前面的元素前移，然后将jquery对象插入
$("#bt2").on('click', function() {
//在test2元素前后插入集合中每个匹配的元素
//不支持多参数
$('<p style="color:red">测试insertafter方法增加</p>', '<p style="color:red">多参数</p>').insertafter($(".test2"));
});<span style="font-family:'华文中宋';font-size:12pt;"></span>
6.dom节点删除之empty()的基本用法
[html] view plain copy
$("#test").empty()； 只会移除所有子节点，该节点本身并不会被移除
7.dom节点删除之remove()用法
[html] view plain copy
remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jquery数据。
$('.test').remove();
--------------------------------------------------ps
$("p").remove(":contains('3')")
$("p").filter(":contains('3')").remove();
$("p:contains('3')").remove();<span style="font-family:'华文中宋';font-size:12pt;"></span>
8.dom节点删除之保留数据的删除操作detach()
[html] view plain copy
让一个web元素托管。即从当前页面中移除该元素，但保留这个元素的内存模型对象。
var p;
$("#bt1").click(function() {
if (!$("p").length) return; //去重
//通过detach方法删除元素
//只是页面不可见，但是这个节点还是保存在内存中
//数据与事件都不会丢失
p = $("p").detach();
});
$("#bt2").click(function() {
//把p元素在添加到页面中
//事件还是存在
$("body").append(p);
});
9.dom拷贝
[html] view plain copy
.clone()复制结构，事件丢失 || .clone()复制结构，事件 元素数据（data）内对象和数组会被共享，不会复制
$(".aaron1").on('click', function() {
$(".left").append( $(this).clone().css('color','red') );
})；
$(".aaron2").on('click', function() {
console.log(1)
$(".left").append( $(this).clone(true).css('color','blue') );
})；
10.dom替换replacewith()与replaceall() (顺序相反的两个方法)
[html] view plain copy
replacewith( newcontent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
$(".bt1").on('click', function() {
//找到内容为第二段的p元素
//通过replacewith删除并替换这个节点
$(".right > p:first p:eq(0)").replacewith('<a style="color:red">replacewith替换第二段的内容</a>');
})；
replaceall()替换的目标与源相反，返回替换的新节点
$(".bt2").on('click', function() {
$('<a style="color:red">replaceall替换第六段的内容</a>').replaceall('.right > p:last p:last');
})；
11.dom包裹wrap()方法
[html] view plain copy
wrap( wrappingelement )：在集合中匹配的每个元素周围包裹一个html结构
$(".aaron1").on('click', function() {
//给所有p元素，增加父容器p
$('p').wrap('<p></p>')；
})；
12.dom包裹unwrap()方法
[html] view plain copy
将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。
$(".aaron1").on('click', function() {
//找到所有p元素，删除父容器p
$('p').unwrap('<p></p>')
})；
13.dom包裹wrapall()方法
[html] view plain copy
.wrapall()给集合中匹配的元素增加一个外面包裹html结构
$('p').wrapall('<p></p>')
14.dom包裹wrapinner()方法
[html] view plain copy
.wrapinner() 给集合匹配的元素内部，增加包裹的html结构
$('p').wrapinner('<p></p>') <p>233</p> -> <p><p>233</p></p>
15.jq遍历之children()方法
[html] view plain copy
$('.p').children() 得到所有子节点（第一层）
$('.p').children().eq(0) 得到所有子节点的第一个子节点
$('.p').children(':last') 得到所有子节点的最后一个节点 【筛选器】
16.jq遍历之find()方法
[html] view plain copy
$('.left').find('li') 获取class=left的下层节点li，无论是儿子还是孙子
$('.left').find('li:last') 获取最后一个li节点 【筛选器 等价于 $('.left li:last')】
优点：
jquery采取的是从右至左的顺序，而形如$("#tab p")使用从右至左的顺序的话效率将会很低（即先找出所有的p，再找id为tab的父元素），此处使用find将处理顺序变为从左至右，即$("#tab").find("p")，在dom树非常复杂的情况下可以提高效率。
17.jq遍历之parent()方法
[html] view plain copy
$('.level-3').parent().css('border','1px solid #666');
$('.item-a').parent(':last').css('border', '1px solid blue'); 【筛选器】
18.jq遍历之parents()方法
[html] view plain copy
parents()方法是查找所有上层元素【parents()与parent()的区别和find()与children()的区别一样】
$('.item-b').parents() 所有上次元素
$('.item-b').parents('.first-p') class=first-p的上层元素 【筛选器】
19.jq遍历之closest()方法
[html] view plain copy
粗看.parents()和.closest()是有点相似的，都是往上遍历祖辈元素
区别：
起始位置不同：.closest开始于当前元素 .parents开始于父元素
遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
20.jq遍历之next()方法
[html] view plain copy
紧邻当前元素的下一个元素
$('.item-2').next().css('border', '1px solid blue') 所有class=item-2的元素的紧邻兄弟节点
$('.item-2').next(':first').css('border', '1px solid blue') 所有class=item-2的元素的紧邻兄弟节点中的第一个节点
21.jq遍历之prev()方法
[html] view plain copy
紧邻当前元素的上一个元素
22.jq遍历之siblings()方法
[html] view plain copy
查询该节点的所有兄弟节点
$('.item-2').siblings() .css('border','1px solid red');
$('.item-2').siblings(':last') .css('border','1px solid red'); class=item-2的节点的所有兄弟节点的集合的最后一个节点
23.jq遍历之add()方法
[html] view plain copy
在已经确定的jq集合里添加新的元素，形成新的集合（选取复杂集合）
$('li').add('p').css('background', 'red');
24.jq遍历之each()方法
[html] view plain copy
//遍历所有的li
//修改每个li内的字体颜色
$("li").each(function(index, element) {
$(this).css('color','red');
});
$("li").each(function(index, element) { //回掉函数
if (index % 2) {
$(this).css('color','blue');
}
});
.总结
jq的操作比js真心简单多了>.<
如对本文有疑问， 点击进行留言回复！！
offset、client、scroll (width,height、left,top、X,Y)
我要评论
网友评论