| 前端开发清理缓存插件 |
| 前端开发插件 谷歌 |
| 火狐前端开发插件推荐 |
// 插入节点的一些方法
append（）： 创建节点 （多参 子级）
选择表达式在函数的前面，参数是将要插入的内容
.appendTo()：刚好相反，内容在方法前面；（多参 子级）
无论是一个选择器表达式 或创建作为标记上的标记；它都将被插入到目标容器的末尾。
html 代码
<script>
var $body = $(‘body’)
$body.on(‘click’, function() {
var div = $(
“<div class=’right’><div class=’aaron’>动态创建DIV元素节点</div></div>”,
)
$body.append(div)
})
$(‘#bt2’).on(‘click’, function() {
$(‘<div class=”appendTo”>通过appendTo方法添加的元素</div>’).appendTo(
$(‘.content’),
)
})
</script>
before ：在匹配元素集合中的每个元素前面插入元素 （多参 同级）
after： 在匹配元素集合中的每个元素后面插入元素 （多参 同级）
html 代码
<script>
$(‘#bt1’).on(‘click’, function() {
//在匹配test1元素集合中的每个元素前面插入p元素
$(‘.test1’).append(
‘<p style=”color:red”>before,在匹配元素之前增加’,
‘<p style=”color:red”>多参数’,
)
})
$(‘#bt2’).on(‘click’, function() {
//在匹配test1元素集合中的每个元素后面插入p元素
$(‘.test2’).after(
‘<p style=”color:blue”>after,在匹配元素之后增加’,
‘<p style=”color:blue”>多参数’,
)
})
</script>
prepend：指定元素插入到匹配元素里面作为它的第一个如果要作为最后一个子元素插入用.append()；
prependTo：正好相反，将要被插入的内容写在方法的前面，可以是选择器表达式或动态创建的标记，待插入内容的容器作为参数。
html 代码
<script>
$(‘#bt1’).on(‘click’, function() {
//找到class=”aaron1″的div节点
//然后通过prepend在内部的首位置添加一个新的p节点
$(‘.aaron1’).prepend(‘<p>prepend增加的p元素</p>’)
})
$(‘#bt2’).on(‘click’, function() {
//找到class=”aaron2″的div节点
//然后通过prependTo内部的首位置添加一个新的p节点
$(‘<p>prependTo增加的p元素</p>’).prependTo($(‘.aaron2’))
})
</script>
// 删除的一些方法
empty()：如果我们通过empty方法移除里面div的所有元素，它只是清空内部的html代码，但是标记仍然留在DOM中；
html 代码
<script type=”text/javascript”>
$(‘#bt1’).on(‘click’, function() {
$(‘.test1’).empty()
})
</script>
remove()：remove与empty一样，都是移除元素的方法，但是remove会将元素自身移除，同时也会移除元素内部的一切，包括绑定的事件及与该元素相关的jquery数据。
html 代码
<script type=”text/javascript”>
$(‘button:first’).on(‘click’, function() {
//删除整个 class=test1的div节点
$(‘.test1’).remove()
})
$(‘button:last’).on(‘click’, function() {
//找到所有p元素中，包含了3的元素
//这个也是一个过滤器的处理
$(‘p’).remove(“:contains(‘3’)”)
})
</script>
empty方法
严格地讲，empty()方法并不是删除节点，而是清空节点，它能清空元素中的所有后代节点
empty不能删除自己本身这个节点
remove方法
该节点与该节点所包含的所有后代节点将同时被删除
提供传递一个筛选的表达式，用来指定删除选中合
// 复制克隆
clone()：方法深度 复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点。
通过传递true，将所有绑定在原始元素上的事件处理函数复制到克隆元素上；（深度复制 事件什么的都复制）
html 代码
<script type=”text/javascript”>
//只克隆节点
//不克隆事件
$(‘.aaron1’).on(‘click’, function() {
$(‘.left’).append(
$(this)
.clone()
)
})
</script>
<script type=”text/javascript”>
//克隆节点
//克隆事件
$(‘.aaron2’).on(‘click’, function() {
console.log(1)
$(‘.left’).append(
$(this)
.clone(true)
)
})
</script>
| 前端开发插件api文档 |
| 前端开发小图标插件 |
| 前端开发 引用插件 |
前端开发者
评论前必须登录！
注册