jq選擇器

1.獲取當前div下面的img的src

---

 html結構

div id='#tab1'

　　img src='a.jpg'

　　img src = ' b.jpg '

div id='#tab2'

　　img src='a.jpg'

　　img src = ' b.jpg '

 

需求：分別獲取div下面的img 的src

//注意：引號img前面必須有空格

$( '#' + id +' img' ).each(function(){

　　　　var imgName = $(this).attr('src')

})

 

2.根據元素id，獲取含有某個class名的子節點

的id

---

 

html部分

<div id='stateWork'>

　　<div id='tab1'  class='active '>

　　</div>

　　<div id='tab2'  class=' '>

　　</div>

</div>

 

這個active是相似於選項卡的那種，div是呈現狀態的時候。自動加上active。

var tab_id = $('#stateWork div.active')[0].id;

 

下面說的更詳細 

 

 

我用到這個是ajax請求數據，成功之後要統計當前頁面的內容

 3.關於jq的中延遲現象的解決

---

 

我用綁定的時候

html部分：

<ul>

　　<li id='li1'>

　　　　<a href='#li1_tab'>tab1</a>

　　</li>

　　<li id='li2'>

　　　　<a href='#li2_tab'>tab2</a>

　　</li>

　　<li id='li3'>

　　　　<a href='#li3_tab'>tab3</a>

　　</li>

</ul>

<div id="stateWork">

　　<div id="li1_tab">

　　　　<img src='1.jpg'/>

　　　　<img src='2.jpg'>

　　</div>

　　<div id='li2_tab'>

　　　　<img src='1.jpg'/>

　　　　<img src='2.jpg'>

　　</div>

　　<div id="li3_tab">

　　　　<img src='4.jpg'/>
　　　　<img src='5.jpg'>
　　</div>

</div>

 

我要作的事點擊li操做對應的div

最終方案

$('#stateWork li').each(function(id,elem){

　　$(this).click(funcion(){

　　　　var id=elem.id+'_tab';//經過id的拼接拿到對應的div，而後再當前的div中作相應的操做
　　　　workRunState.allRunStateNum(id);
　　})

})

 

 

走過的坑（好像是我執行click事件的時候，html尚未捕獲到個人active屬性）

這時候的html結構id值在div上經過父div的id來獲取當前執行的div，而後進行操做

$('li1').click(function(){

　　workRunState.allRunStateNum('tab1')

})

$('li2').click(function(){

　　workRunState.allRunStateNum('tab2')

})

 

$('#li1').on('click',workRunState.allRunStateNum('tab1'));

遍歷

遍歷也有延遲
for(var  i=0;i<7;i++){

　　$('#li'+i).click(function(){

　　　　workRunState.allRunStateNum('tab'+i);

　　})

}

4.圖片img的操做（獲取當前tab頁中imgsrc相同的個數）

---

 

html結構和3同樣

//第一種方法

function demo(id){

var a=0,b=0,c=0;

　　$('#'+id+' img').each(function(){

　　　　var imgName = $(this).attr('src');

　　　　if(imgName == '1.jpg'){

　　　　　　a+=1

　　　　}else if(imgName == '2.jpg'){

　　　　　　b+=1

　　　　}else if(imgName  == '3.jpg'){

　　　　　　c+=1;

　　　　}

　　})

}；

 

//第二種方法

function demo(id){

　　var a=0,b=0,c=0;

　　a=$('#'+id+' img[src="1.jpg"]').length;

　　b=$('#'+id+'img[src="2.jpg"]').length;

　　c=$('#'+id+'img[src="3.jpg"]').length;

}

 

//第三種方法

var obj = $('#'+id+' img');