-
append：这个操作与对指定的元素执行原生的appendChild方法，将它们添加到文档中的情况类似。
appendTo：实际上，使用这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。
append()前面是被插入的对象，后面是要在对象内插入的元素内容 appendTo()前面是要插入的元素内容，而后面是被插入的对象
查看全部 -
$("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')
}
})
})
查看全部 -
$("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'))
})
查看全部 -
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')
})
查看全部 -
$("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')
})
查看全部 -
$("button:first").click(function() {
$(".item-1").closest(".level-2").css("border","3px solid red")
})
起始位置不同：.closest开始于当前元素 .parents开始于父元素
遍历的目标不同：.closest要找到指定的目标，.parents遍历到文档根元素，closest向上查找，直到找到一个匹配的就停止查找，parents一直查找到根元素，并将匹配的元素加入集合
结果不同：.closest返回的是包含零个或一个元素的jquery对象，parents返回的是包含零个或一个或多个元素的jquery对象
查看全部 -
$("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')
})
查看全部 -
$("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')
})
查看全部 -
$("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');
})
查看全部 -
$("#bt1").click(function() {
$('.div').children().css('border', '3px solid red')
})
查看全部 -
<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>
查看全部 -
$(".aaron1").on('click', function() {
//给所有p元素，增加父容器div
$('p').wrapAll('<div></div>');
})
$(".aaron2").on('click', function() {
//wrapAll接受一个回调函数
//每一次遍历this都指向了合集中每一个a元素
$('a').wrapAll(function() {
return '<div></div>'
})
})
查看全部 -
$(".aaron1").on('click', function() {
//找到所有p元素，删除父容器div
$('p').unwrap('<div></div>')
})
$(".aaron2").on('click', function() {
//找到所有p元素，删除父容器div
$('a').unwrap(function() {
return '<div></div>';
})
})
查看全部 -
$(".aaron1").on('click', function() {
//给所有p元素，增加父容器div
$('p').wrap('<div></div>')
})
$(".aaron2").on('click', function() {
$('a').wrap(function() {
return '<div class="' + $(this).text() + '" />';
})
})
查看全部 -
//只克隆节点
//不克隆事件
$(".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') )
})
查看全部
举报