<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<script src="http://code.jquery.com/jquery-latest.js"></script>
<style>
.left,
.right {
width: 300px;
height: 120px;
}
.left div,
.right div {
width: 100px;
height: 90px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
}
.left div {
background: #bbffaa;
}
.right div {
background: yellow;
}
/*-------------------*/
.content {
width: 300px;
}
.append{
background-color: blue;
}
.appendTo{
background-color: red;
}
.aaron{
border: 1px solid red;
}
.aaron1{
border: 1px solid red;
}
.aaron1 p {
color: red;
}
.aaron2{
border: 1px solid blue;
}
.aaron2 p {
color: blue;
}
.test1 {
background: #bbffaa;
}
.test2 {
background: yellow;
}
p{
border: 1px solid red;
}
/*-------------------------*/
.left,
.right {
width: 300px;
height: 120px;
}
.left div,
.right div {
width: 100px;
height: 90px;
padding: 5px;
margin: 5px;
float: left;
border: 1px solid #ccc;
background: #bbffaa;
}
</style>
</head>
<body>
--------------------------jQuery遍历-----------------------
.each() 方法就是一个for循环的迭代器，它会迭代jQuery对象合集中的每一个DOM元素。
$("li").each(function(index, element) {
$(this).css('color','red')
})
jQuery为此提供add方法，用来创建一个新的jQuery对象 ，元素添加到匹配的元素集合中
$('li').add('p')
$('li').add('<p>新的p元素</p>').appendTo(目标位置)
next()方法快速查找指定元素集合中每一个元素紧邻的后面同辈元素的元素集合，向后查找
找到所有class=item-2的li 然后给每个li加上红色的边
$('.item-1').next().css('border','3px solid red')
prev() 方法相反
找到所有class=item-2的li 然后筛选出最后一个，加上蓝色的边
$('.item-3').prev(':last').css('border', '1px solid blue')
siblings()方法 查找指定元素集合中每一个元素的同辈元素
找到class=item-2的所有兄弟节点然后给每个li加上红色的边
$('.item-2').siblings(':last').css('border', '2px solid blue')
<li class="item-1">1</li>
<li class="item-2">2</li>
<li class="item-3">3</li>
-------------------------------向上查找-------------------
closest向上查找，直到找到一个匹配的就停止查找，
parents一直查找到根元素，并将匹配的元素加入集合
closest()方法从元素本身开始，在DOM 树上逐级向上级元素匹配，并返回最先匹配的祖先元素
$("div").closet("li') 只返回匹配的一个元素
parent()方法 查找合集里面的每一个元素的父元素
（这里可以理解为就是父亲-儿子的关系） $(ul).parent()
parents()方法 快速查找合集里面的每一个元素的所有祖辈元素
-----------------------------向内查找-----------------
1.children只查找第一级的子节点
2.find查找范围包括子节点的所有后代节点
选择器表达式对于 .find() 是必需的参数。 或者用* 取所有
.children(selector) 方法是返回匹配元素集合中每个元素的所有子元素
（仅儿子辈，这里可以理解为就是父亲-儿子的关系）
jQuery是一个合集对象，所以通过children是匹配合集中每一给元素的第一级子元素
$("div").children(".selected")
.children()方法选择性地接受同一类型选择器表达式
children()无参数 $("div").children()
-------------------------DOM的复制和替换-------------------
.wrapInner( wrappingElement )：给集合中匹配的元素的内部，增加包裹的HTML结构
$('div').wrapInner('<p></p>')
<div>
<p>p元素</p>
</div>
wrapAll() 给集合中匹配的元素增加一个外面包裹HTML结构
将匹配元素集合的父级元素删除，保留自身（和兄弟元素，如果存在）在原来的位置。
但是如果我还要保留内部元素p 用unwrap()方法
.wrap( wrappingElement )：在集合中匹配的每个元素周围包裹一个HTML结构
$('p').wrap('<div></div>')
$('p').wrap(function(){
return '<div></div>';
})
.replaceWith( newContent )：用提供的内容替换集合中所有匹配的元素并且返回被删除元素的集合
$(".right > div:first p:eq(1)")
.replaceWith("<a style="color:red">replacewith替换第二段的内容</a>")
.replaceAll( target ) ：用集合的匹配元素替换每个目标元素
$('<a style="color:red">替换第二段的内容</a>').replaceAll('p:eq(1)')
------------------------------------------------------
<h2>通过clone克隆元素</h2>
<div class="left">
<div class="aaron1">点击,clone浅拷贝</div>
<div class="aaron2">点击,clone深拷贝,可以继续触发创建</div>
</div>
<script type="text/javascript">
//只克隆节点 不克隆事件 也可以增加样式i
$('.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'))
})
</script>
----------------------------DOM节点删除--------------------------
但是remove会将元素自身移除，同时也会移除元素内部的一切，
包括绑定的事件及与该元素相关的jQuery数据。
找到所有p元素中，包含了3的元素,是一个过滤器的处理
$("p").filter(":contains('3')").remove()
empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中
empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点,
不能删除自己本身这个节点
remove方法
该节点与该节点所包含的所有后代节点将同时被删除
提供传递一个筛选的表达式，删除指定合集中的元素
detach从字面上就很容易理解。让一个web元素托管。
即从当前页面中移除该元素，但保留这个元素的内存模型对象。
$("div").detach()这一句会移除对象，仅仅是显示效果没有了。但是内存中还是存在的。
当你append之后，又重新回到了文档流中。就又显示出来了。
p = $("p").detach()
$("body").append(p);
---------------------------------------------------------------
<h3>给页面2个p元素节点绑定点击事件,点击后弹出自己本身的节点内容</h3>
<p>元素p1，同时绑定点击事件</p>
<p>元素p2，同时绑定点击事件</p>
<h3>通过点击2个按钮后观察方法处理的区别</h3>
<button>点击通过remove处理元素p1</button>
<button>点击通过detach处理元素p2</button>
<script type="text/javascript">
$('p').click(function(e){
alert(e.target.innerHTML)
})
$('button:first').click(function(e){
var p = $("p:first").remove();
p.css('color','red').text('p1通过remove处理后,点击该元素,事件丢失')
$('body').append(p);
});
$('button:last').click(function(e){
var p = $('p:last').detach();
p.css('color','blue').text('p2通过detach处理后,点击该元素,事件存在')
$('body').append(p);
})
</script>
--------------------------- DOM节点的插入------------------
对于before()选择表达式在函数前面，内容作为参数，
而.insertBefore()刚好相反，内容在方法前面，它将被放在参数里元素的前面
对于after()选择表达式在函数的前面，参数是将要插入的内容。
对于 .insertAfter(), 刚好相反，内容在方法前面，它将被放在参数里元素的后面
<h2>通过insertBefore与insertAfter添加元素</h2>
<button id="bt1">点击通过jQuery的insertBefore添加元素</button>
<button id="bt2">点击通过jQuery的insertAfter添加元素</button>
<div class="aaron">
<p class="test1">测试insertBefore,不支持多参数</p>
</div>
<div class="aaron">
<p class="test2">测试insertAfter,不支持多参数</p>
</div>
<script type="text/javascript">
$("#bt1").on('click', function() {
//在test1元素前后插入集合中每个匹配的元素
//不支持多参数
$('<p style="color:red">测试insertBefore方法增加</p>',
'<p style="color:red">多参数</p>').insertBefore($(".test1"))
})
$("#bt2").on('click', function() {
//在test2元素前后插入集合中每个匹配的元素
//不支持多参数
$('<p style="color:red">测试insertAfter方法增加</p>',
'<p style="color:red">多参数</p>').insertAfter($(".test2"))
})
</script>
------------------------------------------------------------
append()向每个匹配的元素内部追加内容
prepend()向每个匹配的元素内部前置内容
appendTo()把所有匹配的元素追加到另一个指定元素的集合中
prependTo()把所有匹配的元素前置到另一个指定的元素集合中
<h2>通过prepend与prependTo添加元素</h2>
<button id="bt1">点击通过jQuery的prepend添加元素</button>
<button id="bt2">点击通过jQuery的prependTo添加元素</button>
<div class="aaron1">
<p>测试prepend</p>
</div>
<div class="aaron2">
<p>测试prependTo</p>
</div>
<script type="text/javascript">
//指定元素插入到匹配元素里面作为它的第一个子元素
$('#bt1').on('click',function(){
$('.aaron1').prepend('<p>prepend增加的p元素</p>')
})
//将要被插入的内容写在方法的前面，待插入内容的容器作为参数。
$('#bt2').on('click',function(){
$('<p>prepend增加的p元素</p>').prependTo('.aaron2')
})
</script>
-----------------------------------------------------
在元素外面，前后 换行跟内容
<h2>通过before与after添加元素</h2>
<button id="bt1">点击通过jQuery的before添加元素</button>
<button id="bt2">点击通过jQuery的after添加元素</button>
<div class="aaron">
<p class="test1">测试before</p>
</div>
<div class="aaron">
<p class="test2">测试after</p>
</div>
<script type="text/javascript">
//在匹配元素前面加入内容
$('#bt1').on('click',function(){
$('.test1').before("<p style='color:red'>before，在匹配元素之前增加 </p>",'<p style="color:red">多参数</p>')
})
//在匹配元素集合中的每个元素后面插入参数所指定的内容
//，作为兄弟节点
$('#bt2').on('click',function(){
$('.test2').after('<p style="color:blue">after,在匹配元素之后增元素</p>','<p style="color:blue">多参数</p>')
})
</script>
--------------------------------------------------
元素内部 后置 紧跟内容
<h2>通过append与appendTo添加元素</h2>
<button id="bt1">点击通过jQuery的append添加元素
append()前面是被插入的对象，后面是要在对象内插入的元素内容</button>
<button id="bt2">点击通过jQuery的appendTo添加元素
appendTo()前面是要插入的元素内容，而后面是被插入的对象</button>
<div class="content"></div>
<script type="text/javascript">
//.append(), 内容在方法的后面，参数是将要插入的内容。
$('#bt1').on('click',function(){
$('.content').append("<div class='append'> 通过append方法添加的元素 </div>")
})
//内容在方法前面 它都将被插入到目标容器的末尾
$('#bt2').on('click',function(){
$("<div class='appendTo'>通过appendTo添加元素</div>").appendTo($('.content'))
})
</script>
-----------------------------------------------------
<h2>使用javascript动态创建元素节点</h2>
<div class="left">
<div class="aaron">点击body区域会动态创建元素节点</div>
</div>
<script type="text/javascript">
var body = document.querySelector('body');
document.addEventListener('click',function(){
//创建两个元素
var rightdiv = document.createElement('div')
var rightaaron = document.createElement("div");
rightdiv.setAttribute('class','right')//设置属性
//修改名字为aaron，替代上面的class
rightaaron.className = 'aaron'
//添加文本，覆盖上面class的内容
rightaaron.innerHTML = '动态创建div元素节点';
//加入文档 两个div合并成包含关系
rightdiv.appendChild(rightaaron)
body.appendChild(rightdiv)
},false)
</script>
-------------------------------------------------------
<h2>使用jQuery动态创建元素节点</h2>
<button>点击通过jQuery动态创建元素节点</button>
<script type="text/javascript">
var $body = $('body');
//通过jQuery方式创建节点
$body.on('click',function(){
var div = $("<div class='right'><div class='aaron'>动态创建div元素节点</div></div>")
$body.append(div)
})
</script>
</body>
</html>
扫一扫
97
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
