Jquery—常用遍历元素的api

简单记录下，还是要多看文档

遍历过滤方法

//eq()，first()，last()，has()，is()，filter()，map()，not()，slice()
//eq()，匹配指定索引的那一个元素，参数是元素的下标
$('ul.g li').eq(2).css('background-color','orange');

//first()，选择匹配元素集合中的第一个元素
$('ul.g li').first().css('background-color','black');

//last()，选择匹配元素集合中的最后一个元素
$('ul.g li').last().css('background-color','black');

//has()，选择匹配元素中拥有元素或选择器，这里选择了strong标签
$('ul.g li').has('strong').css('border','1px solid');

//is()，判断当前匹配的是否是一个元素，对象或DOM元素，返回Boolean值
$('ul.g li').click(function(event){
    var target = $(event.target);
    if(target.is('li')){
        target.css('background-color','orange');
    }
});

//filter()，是从下标0开始计数，这里是把过滤出来的奇数下标添加红色背景
$('ul li').filter(':odd').css('background-color','red');

//map()，是返回一个新的jq对象，接收一个回调函数
$('ul li').map(function(){
   console.log($(this).html());
});
var arr = [1,2];
console.log(arr.map(function(n){
    return n+1; //[2,3]
}));

//not()，从匹配的元素中移除指定的元素
$('ul li').not(':odd').css('background','yellow');

//slice()，是选择从哪里开始截取[start,end)，一个参数时截取该下标到end的所有元素
$('ul li').slice(0).css('background-color','pink');

//其他过滤的几种方法，add()，contents()，end()
//add是添加元素到匹配的元素集合，合并到一起进行操作，这里是p和a标签同一操作
$('p').add('a').css('color','pink');

//contents包含所选元素里面的所有元素，元素，属性，文本，wrap是外包裹的意思，这里匹配是nodeTpe!=1的节点
$('p').contents().filter(function(){
    //元素节点的 nodeName 是标签名称
    //属性节点的 nodeName 是属性名称
    //文本节点的 nodeName 永远是 #text
    //对于元素节点，nodeType=1
    //对于文本节点，nodeType=3
    //对于属性节点，nodeType=2
    console.log(this.nodeType,this.nodeName,this.nodeValue);
    return this.nodeType!=1;
}).wrap('<b/>');

//end是保存之前选择器修改的操作，之前操作终止了，重新进行其他操作，find是找到该元素
$('ul').find('#a').css('background-color','red').end().find('#b').css('background-color','green');

---

树遍历(遍历父元素也可遍历子元素)

//children()，匹配元素集合中的每个元素的直接子元素，参数是选择器可无
$('ul').children().css('border','1px solid');

//closest()，从选择元素开始遍历，向上级DOM匹配，返回最近的祖先元素，参数必须的选择器，条件
console.log($('p').closest('li'));

//find()，从匹配元素中寻找匹配的元素
$('ul').find('span').css('background','red');

//next()，匹配每一个选择元素紧邻的兄弟元素，参数为选择器时，后面的元素满足条件时才返回
$('p').next('div').css('background-color','yellow');

//nextAll()，选择匹配元素下面所有的兄弟元素，参数为选择器时，返回选择器的兄弟元素
$('#a').nextAll('div').css('background','green');

//parent()，选择匹配元素集合中每个元素的父元素，参数可为选择器可无
console.log($('p').parent());

//parents()，选择匹配元素中每个元素的祖先元素，参数为选择器可无
console.log($('p').parents());

//offsetParent()，取得离指定元素最近的有定位信息的祖先元素，CSS有position属性的祖先元素，无参数
console.log($('p').offsetParent());

//prev()，取得一个匹配元素集合中每个元素紧邻的前一个兄弟元素的元素集合，参数为选择器
$('p#aaa').prev().css('background-color','pink');

//prevAll()，取得每个匹配元素所有前面的兄弟元素，参数为选择器可无
$('p#aaa').prevAll().css('background-color','grey');

//siblings()，匹配元素集合中每个元素的兄弟元素，可以有选择器
$('p#aaa').siblings().css('background-color','red');