慕课网

jQuery基础(二)—DOM篇

最热最新

绅先生
append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。
appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
```
append()前面是被插入的对象，后面是要在对象内插入的元素内容
appendTo()前面是要插入的元素内容，而后面是被插入的对象
```
查看全部

0 采集收起来源：DOM内部插入append()与appendTo()
2018-12-03
v微

$("button:first").click(function() {
//遍历所有的li
//修改每个li内的字体颜色
$("li").each(function(index, element) {
$(this).css('color','red')
})
})
$("button:last").click(function() {
//遍历所有的li
//修改偶数li内的字体颜色
$("li").each(function(index, element) {
if (index % 2) {
$(this).css('color','blue')
}
else{
$(this).css('color','green')
}
})
})

查看全部

0 采集收起来源：jQuery遍历之each()
2018-11-19
v微

$("button:first").click(function() {
//把p元素添加到li的合集中
$('li').add('p').css('background', 'red')
})
$("button:last").click(function() {
//把html结构'<p>新的p元素</p>'
//加入到li的合集中，为了能够在页面上显示
//需要再重新appendTo到指定的节点处
//值得注意：整个结构位置都改变了
$('li').add('<p>新的p元素</p>').appendTo($('.right'))
})

查看全部

0 采集收起来源：jQuery遍历之add()方法
2018-11-19
v微

jQuery是一个合集对象，如果想快速查找指定元素集合中每一个元素紧邻的前面同辈元素的元素集合，此时可以用prev()方法
$("button:first").click(function() {
$('.item-3').prev().css('border', '1px solid red')
})
$("button:last").click(function() {
//找到所有class=item-2的li
//然后筛选出最后一个，加上蓝色的边
$('.item-3').prev(':last').css('border', '1px solid blue')
})

查看全部

0 采集收起来源：jQuery遍历之prev()方法
2018-11-19
v微

$("button:first").click(function() {
$('.item-1').next().css('border', '1px solid red')
})
$("button:last").click(function() {
//找到所有class=item-3的li
//然后筛选出第一个li，加上蓝色的边
$('.item-2').next(':first').css('border', '1px solid blue')
})

查看全部

0 采集收起来源：jQuery遍历之next()方法
2018-11-19
v微
$("button:first").click(function() {
$(".item-1").closest(".level-2").css("border","3px solid red")
})
1. 起始位置不同：.closest开始于当前元素 .parents开始于父元素
2. 遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
3. 结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象
查看全部

0 采集收起来源：jQuery遍历之closest()方法
2018-11-19
v微

$("button:first").click(function() {
$('.item-b').parents().css('border', '2px solid red')
})
$("button:last").click(function() {
//找到当前元素的所有祖辈元素,筛选出class="first-div"的元素
//并且附上一个边
$('.item-b').parents('.first-div').css('border', '2px solid blue')
})

查看全部

0 采集收起来源：jQuery遍历之parents()方法
2018-11-19
v微

$("button:first").click(function() {
$('.level-3').parent().css('border','1px solid red')
})
$("button:last").click(function() {
//找到所有class=item-a的父元素
//然后给每个ul,然后筛选出最后一个，加上蓝色的边
$('.item-a').parent(':last').css('border', '1px solid blue')
})

查看全部

0 采集收起来源：jQuery遍历之parent()方法
2018-11-19
v微

$("button:first").click(function() {
$('.left').find("li:last").css('border','1px solid blue');
})
$("button:last").click(function() {
//找到所有p元素，然后筛选出子元素是span标签的节点
//改变其字体颜色
var $spans = $('span');
$("p").find($spans).css('color', 'red');
})

查看全部

0 采集收起来源：jQuery遍历之find()方法
2018-11-19
v微

$("#bt1").click(function() {
$('.div').children().css('border', '3px solid red')
})

查看全部

0 采集收起来源：jQuery遍历之children()方法
2018-11-19
v微

<script type="text/javascript">
$(".aaron1").on('click', function() {
//给所有class=right1的div元素，增加内部包裹父容器p
$('.right1').wrapInner('<p></p>');
})
</script>
<script type="text/javascript">
$(".aaron2").on('click', function() {
//wrapInner接受一个回调函数
//每一次遍历this都指向了合集中每一个class=left1的div元素
$('.left1').wrapInner(function() {
return '<a></a>'
})
})
</script>

查看全部

0 采集收起来源：DOM包裹wrapInner()方法
2018-11-19
v微

$(".aaron1").on('click', function() {
//给所有p元素，增加父容器div
$('p').wrapAll('<div></div>');
})
$(".aaron2").on('click', function() {
//wrapAll接受一个回调函数
//每一次遍历this都指向了合集中每一个a元素
$('a').wrapAll(function() {
return '<div></div>'
})
})

查看全部

0 采集收起来源：DOM包裹wrapAll()方法
2018-11-19
v微

$(".aaron1").on('click', function() {
//找到所有p元素，删除父容器div
$('p').unwrap('<div></div>')
})
$(".aaron2").on('click', function() {
//找到所有p元素，删除父容器div
$('a').unwrap(function() {
return '<div></div>';
})
})

查看全部

0 采集收起来源：DOM包裹unwrap()方法
2018-11-19
v微

$(".aaron1").on('click', function() {
//给所有p元素，增加父容器div
$('p').wrap('<div></div>')
})
$(".aaron2").on('click', function() {
$('a').wrap(function() {
return '<div class="' + $(this).text() + '" />';
})
})

查看全部

0 采集收起来源：DOM包裹wrap()方法
2018-11-19
v微

//只克隆节点
//不克隆事件
$(".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') )
})

查看全部

0 采集收起来源：DOM拷贝clone()
2018-11-19

首页上一页 29 30 31 32 33 34 35 下一页尾页

0/150

提交

取消

开始学习

课程须知: 1、有HTML/CSS基础 2、有JavaScript基础

老师告诉你能学到什么？: 1、jQuery的语法 2、jQuery节点操作