<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jq里的操作 - 遍历</title>
</head>
<body>
<div>1</div>
</body>
<script type="text/javascript">
// 1 add(); add() 方法将元素添加到匹配元素的集合中
$('div').css('border','2px solid red')
.add('p')
.css('background','yellow');
// 2. children() find() 和 children 类似 不过后者只沿着DOM树向下遍历单一层级
$('div').children('.selected').css('color','blue');
// 3. cloest() 方法获得匹配选择器的第一个祖先元素，从当前元素沿DOM树向上
// 4. 找到段落中所有的文本节点， 并用粗体标签包装他们
// contents() 方法获得匹配元素集合中每个元素的子节点，包括文本和注释节点
$('p').contents().filter(function(){return this.nodeType != 1;}).wrap('<b/>');
$('.container').contents().filter(fucntion(){
return this.nodeType == 3;
})
.wrap('<p></P>')
.end()
.filter('br')
.remove();
// .contents() 和 children()方法类似 不同的是前者在结果jquery对象中包含了文本节点以及html 元素
// 5. each()
$('button').click(function(){
$('li').each(function(){
alert($(this).text())
});
});
// each的点击事件
mydd = $('.plist');
mydd.each(function(i){
$(this).click(function(){
mydd.eq(i).css('background','#000');
})
})
//6. end() 方法结束当前链条中的最近的筛选操作，并将匹配元素还原为之前的状态
// 选择所有段落，找到这些段落中的span元素, 然后将它们恢复为段落，并把段落设置为两像素的红色边框
$('p').find('span').end().css('border','2px solid red')
//7 .eq() 方法将匹配元素集缩到制定的index 上的一个
$('li').eq(2).css('background-color','red');
$('li').eq(-2).css('background-color','red'); //负数表示从末尾开始算
// 8. filter()
$('div').css('background','#fff')
.filter('.middle')
.css('border-color','red')
$('li').filter(':even').css('background-color','red');
$('li').filter(function(index){
return $('strong',this).length == 1;
}).css('background-color','red');
// 9.find()
var item1 = $('li.item-1')[0];
$('li.item-li').find(item1).css('background-color','red');
// 10.has() 检查某个元素是否在另一个元素中
$('ul').append("<li>" + ($('ul').has('li').length ? "yes" : 'no') + "</li>");
$('ul').has('li').addClass('full');
// 11. is()
// 返回false 因为input的元素的父元素是p元素
var isFormParent = $('input[type = "checkbox"').parent().is('form');
// 12 .map();
// map() 把每个元素通过函数传递到当前匹配集合中，生成包含新返回值的新的jqery对象
$('p').append($('input').map(function(){
return $(this).val();
}).get().join(","));
$('p').append($(':checkbox').map(function(){
return this.id;
}).get().join(','));
// 13 .next();
// 查找每个段落中的下一个同胞元素, 仅选中类名为'selected'的段落
$('p').next(".selected").css('background','yellow');
// 14 .nextAll();
// 查找第一个div之后的所有类名，并为他们添加类名
$('div:first').nextAll().addClass("after");
// 15 .nextUntil 获得每个元素所有跟随的同胞元素，但不包括被选择器和jqury对象匹配的元素 直到什么为止
$('#term-2').nextUntil('dt').css('background-color','red');
// 16 .not() 从包含所有段落中的集合中删除id为 "selected" 的段落
$('p').not("#selected")
// 17. parent() 当前元素的父元素 parents 当前元素的祖先元素
//18 .parentsUntil(a) 获取到当前匹配元素集合中每个元素的祖先元素，直到 a 为止
$('li.item-a').parentUntil(".leval-1")
.css('background-color','red')
// 19.检索每个段落，找到类名为 "selected" 的前一个同胞元素：
$("p").prev(".selected")
//20. 定位最后一个 div 之前的所有 div，并为它们添加类：
$("div:last").prevAll().addClass("before");
//21. prevUntil() 方法
$("#term-2").prevUntil("dt").css("background-color", "red");
// 22. 查找每个 p 元素的所有类名为 "selected" 的所有同胞元素：
$('p').siblings('.selected')
//选中所有段落，然后将所选内容缩减为只包含第一和第二个段落：
$("p").slice(0, 2).wrapInner("");
$('p').slice(2,4).css('background-color','red')
</script>
</html>
请使用手机"扫一扫"x