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');

 

posted @ 2017-12-12 13:27  一只爱study的girl  阅读(227)  评论(0编辑  收藏  举报