- 兩種對象轉化
將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());