您的位置：首页 > Web前端 > JQuery

jquery遍历

2015-10-24 18:02 633 查看
1,addSelf()<!DOCTYPEhtml>
<html>
<head>
<scripttype="text/javascript"src="/jquery/jquery.js"></script>
<style>
p,div{margin:5px;padding:5px;}
.border{border:2pxsolidred;}
.background{background:yellow;}
</style>
</head>
<body>
<div>
<p>FirstParagraph</p>
<p>SecondParagraph</p>
</div>
<script>
$("div").find("p").andSelf().addClass("border");//找到div下的所有p标签，将p标签和div标签合并，使addClass的样式也可以应用于div
$("div").find("p").addClass("background");//找到div下的所有p标签，将p标签的样式改为addClass的样式
</script>
</body>
</html>注：<ul><li>listitem1</li><li>listitem2</li><liclass="third-item">listitem3</li><li>listitem4</li><li>listitem5</li></ul>
$("li.third-item").nextAll().andSelf().css("background-color","red");//.nextAll()获得前面所指定元素的下面的所有元素，将下面的所有元素和前面的元素合并

2，each()
$("button").click(function(){
$("li").each(function(){//每一个li标签都要执行这个功能
alert($(this).text())
});
});

3,end()

<!DOCTYPEhtml>
<html>
<head>
<scripttype="text/javascript"src="/jquery/jquery.js"></script>
</head>
<body>
<ulclass="first">
<liclass="foo">listitem1</li>
<li>listitem2</li>
<liclass="bar">listitem3</li>
</ul>
<ulclass="second">
<liclass="foo">listitem1</li>
<li>listitem2</li>
<liclass="bar">listitem3</li>
</ul>
<script>
$('ul.first').find('.foo').css('background-color','red')
.end().find('.bar').css('background-color','green');//现查找ul.first下的.foo元素，将这个样式改为背景色是红色，接着个结束这个.foo元素，回到ul.first元素，继续查找.bar的元素，修改.bar的背景色为绿色
</script>
</body>
</html>
4,eq()
$("body").find("div")[code].eq(2)
.addClass("blue");//匹配body下面的div的index,这里寻找body下面的第二个div标签，再修改样式5，filter()方法
<!DOCTYPEhtml>
<html>
<head>
<style>
div{width:60px;height:60px;
margin:5px;float:left;
border:2pxwhitesolid;}
</style>
<scripttype="text/javascript"src="/jquery/jquery.js"></script>
</head>
<body>
<div></div>
<divclass="middle"></div>
<divclass="middle"></div>
<divclass="middle"></div>
<divclass="middle"></div>
<div></div>
<script>
$("div").css("background","#c8ebcc")
.filter(".middle")//过滤出所有.middle的元素
.css("border-color","red");
</script>
</body>
</html>注：
[/code]
<ul>
<li>listitem1</li>
<li>listitem2</li>
<li>listitem3</li>
<li>listitem4</li>
<li>listitem5</li>
<li>listitem6</li>
</ul>


$('li').filter(':even').css('background-color','red');//默认设置的是奇数行的样式

$('li').filter(':odd').css('background-color','red');//默认设置的是偶数行的样式
6,first()

<ul>
<li>listitem1</li>
<li>listitem2</li>
<li>listitem3</li>
<li>listitem4</li>
<li>listitem5</li>
</ul>
$('li')[code].first()
.css('background-color','red');//匹配第一个li下面的元素7，has()
[/code]
<ul>
<li>listitem1</li>
<li>listitem2
<ul>
<li>listitem2-a</li>
<li>listitem2-b</li>
</ul>
</li>
<li>listitem3</li>
<li>listitem4</li>
</ul>

$('li')[code].has('ul')
.css('background-color','red');//将含有ul标签的li的样式改一下[/code]




                                            

                                        

                        
                        内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息 
                    

                    

                    

                        

                         标签： 
                                                

                        

                    


                

            


            

                
相关文章推荐

                

                
            

        

        

            

            
            

                

                    
新的分享

                    

                        
                    

                

            


            

                

                    
章节导航