Day02jQuery遍歷

  1. 兩種對象轉化

將dom對象——轉化爲——jquery對象

        $(dom對象)                  eg:$(dom)

將jquery對象——轉化爲——dom對象

        jquery對象.get(0);            eg:  jquery.get(0)

2.遍歷

$(selector) ——jquery對象 ——–size()或者length //元素個數
—————————-eq(index) //獲得index下標位置元素(jquery對象)
1)純jquery方式操作數組

var spans = $('span');
for(var i=0; i<spans.size();i++){
    //獲得當前i下標元素
    var sp = spans.eq(i);//獲得當前i下標元素(jq對象)
    console.log(sp.text());
}

2)使用js中dom對象方式來遍歷
jquery對象.get(i),獲取的是dom對象
eg: spans.get(i),獲得當前i下標對應dom對象

//divs.size()等價於divs.length
//使用js中dom對象遍歷
var divs = $('div');
for(var i=0; i<divs.length;i++){
        var d = divs.get(i);//獲得當前i下標元素(dom對象)
        console.log(d);//可以用dom對象直接輸出
        console.log($(d));//也可以轉化爲jq對象輸出               
    }

3)jquery特有的each()遍歷

divs.each(); //遍歷divs數組

//使用jquery特有的each方法進行遍歷
            var divs3 = $('div');
            divs3.each(function(){
                //this-------當前被遍歷的dom對象
                //$(this)------當前被遍歷的jquery對象
                console.log(this);
                console.log($(this));
            })

3.遍歷篩選附近元素

1)parent() //返回指定元素的父標籤


console.log($('#id2').parent());

2)children() //獲得當前對象所有的子對象


console.log($('#tb').children());

3)prev() //直接相鄰哥哥標籤


console.log($('#tb').prev());

4):next() //直接相鄰弟弟標籤


console.log($('#tb').next());
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章