JQuery的过滤选择器

时间:2022-03-12 08:27:35

1.eg(num):查找索引num位置的元素,索引从0开始。

2.lt(num):查找索引小于num位置的元素,索引从0开始。

3.gt(num):查找索引大于num位置的元素,索引从0开始。

示例:

<ul id="france">
        <li id="a1">1</li>
        <li id="a2">2</li>
        <li id="a3">3</li>
        <li id="a4">4</li>

</ul>

实现:

$("li:eq(2)").css("background", "red"); //找到第三个<li>元素并改变背景色,索引从0开始
$("#france li:lt(2)").css("background", "red"); //找到id为france下<li>元素索引小于2的元素并改变背景色
$("#france li:gt(2)").css("background", "red");// 找到id为france下 < li > 元素索引大于2的元素并改变背景色

二.查找所有标题元素的选择器$(":header"):

示例:

<h1>holle!!</h1>
<h2>holle!!</h2>
 <h3>holle!!</h3>
 <p>你好!朋友</p>

实现:

$(":header").text("www.qq.com").css("background", "red"); //$(":header")获取所有的标题元素即<h1>,<h2>,<h3>,并改变其内容与背景色

三.查找所有实现动画元素的选择器$(":animated"):

示例:

<div style=" width:200px; height:120px ; display:none; " id="test"> 我是动画div</div>
    <h1>baidu.com</h1>
    <h2>sina.com</h2>
    <h3>3g.qq.com</h3>

实现:

$(document).ready(function () {
            DivSlideToggle();
            $(":animated").html("<b style=\"color:Red; font-size:30px\">www.123456789@qq.com.cn</b>"); //$(":animated")获得所有动画元素
        })
        //执行动画效果
        function DivSlideToggle() {
            $("#test").slideToggle(); //实现滑动效果
            setTimeout('DivSlideToggle()', 1000); //每秒钟执行一次DivSlideToggle()方法
         }