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