首页 > 代码库 > 第二章（2.3jQuery选择器）

第二章（2.3jQuery选择器）

2024-08-18 18:28:20   220人阅读

2.3jQuery选择器

①用js添加行为：

示例1：给每个p元素添加行为

步骤：1获取所有元素 

　　   2对元素进行循环（因为获取的是数组对象）

　　   3给每个元素添加行为

var items = document.getElementsByTagName(“p”);   //获取网页中所有P元素

for(var i=0;i<items.length;i++){

         items[i].onclick = function(){

         //doing something

}

}

 

示例2：使一个特定的表格隔行变色

步骤：1根据表格id获取表格

        2在表格内获取<tbody>元素

        3在<tbody>元素下获取<tr>元素

        4循环输出获取的<tr>元素

        5对<tr>元素的索引值除以2取模，然后根据奇偶设置不同背景色

       

 <script type="text/javascript">

                   window.onload = function(){

                            var item = document.getElementById("tb"); 

                   var tbody = item.getElementsByTagName("tbody")[0];  //获取表格的第1个tbody元素

                   var trs = tbody.getElementsByTagName("tr");

                   for(var i = 0 ;i<trs.length;i++){

                            if(i%2==0){

                                     trs[i].style.backgroundColor = "#888";

                                     }

                            }}

</script>

</head>

<body>

         <table id="tb">

         <tbody>

                   <tr><td>第一行</td><td>第一行</td></tr>

                   <tr><td>第二行</td><td>第二行</td></tr>

                   <tr><td>第三行</td><td>第三行</td></tr>

                   <tr><td>第四行</td><td>第四行</td></tr>

                   <tr><td>第五行</td><td>第五行</td></tr>

                   <tr><td>第六行</td><td>第六行</td></tr>

         </tbody>

         </table>

 

</body>

 

效果如图技术分享

示例3：对多选框进行操作，输出选中的多选框个数

步骤：  1新建数组

           2获取所有name为”check”的多选框

           3循环判断多选框是否被选中，如果被选中则添加到数组里

           4获取输出按钮，然后为按钮添加onclick事件，输出数组的长度

<body>

         <input type="checkbox" value="http://www.mamicode.com/1" name="check" checked/>

         <input type="checkbox" value="http://www.mamicode.com/2" name="check" >

         <input type="checkbox" value="http://www.mamicode.com/3" name="check" checked/>  <!--checked 被选中状态-->

         <input type="button" value="http://www.mamicode.com/你选中的个数" id="btn">

                  

<script type="text/javascript">

                   var btn = document.getElementById("btn");

                   btn.onclick = function(){    //给btn按钮添加事件

                            var arrays = new Array();

                            var items = document.getElementsByName("check");

                            for(var i = 0;i<items.length;i++){

                                     if(items[i].checked){

                                               arrays.push(items[i].value);

                                     }

                            }alert("选中的个数为："+arrays.length)

                   }

         </script>

</body>

 

 

2.3.1基本选择器

选择器

描述

返回

示例

#id

根据id匹配

单元素

$(“#id”)

.class

根据类名匹配

集合

$(“.class”)

element

根据原色名匹配

集合

$(“element”)

*

匹配所有

集合

$(“*”)

Selector1,selector2….

将每个选择器匹配到元素合并后一起返回

集合

$(“div,span,p.myClass”)选取所有div，span和clss为myClass的p标签的一组元素

 

2.3.2层次选择器（后代，子元素，相邻，兄弟元素等）

选择器

描述

返回

示例

$(“p span”)

P元素里所有span元素

集合元素

$(“div span”)选取div里所有的span元素

$(“parent>child”)

选取parent下的子元素

集合元素

$(“div > span”)选取div下元素名为span的子元素

$(“prev + next”)

选取紧接prev元素后的next元素

集合元素

$(“.one+div”)选取class为one的下一个div元素

$(“prev ~ siblings”)

选取prev元素之后所有siblings元素

集合元素

$(“#two ~div”)选取id为two的元素后面所有div兄弟元素

 

*$(“prev + next”)和$(“prev ~ siblings”)用的比较少，有更简单的方法代替

$(“prev + next”)与next()方法的等价关系

 

选择器

方法

等价关系

$(“.one + div”)

$(“.one”).next(“div”)

 

$(“prev ~ siblings”)和nextAll()方法的等价关系

 

选择器

方法

等价关系

$(“#prev~div”)

$(“#prev”).nextAll(“div”)

 

*$(“#prev~div”)选择器只能选择“#prev”元素后面同辈<div>元素，而siblings()方法与位置无关

$(“#prev ~ div”).css(“”,””);   //选取#prev之后的同辈div元素

$(“#prev”).nextAll(“div”).css(“”,””)   //同上

$(“#prev”).siblings(“div”).css(“”,””)   //选取#prev所有的同辈div元素，无论前后位置

 

2.3.3过滤选择器

过滤选择器类似于伪类选择器 以：开头。分为：基本过滤，内容过滤，可见性过滤，属性过滤，子元素过滤和表单对象属性过滤选择器

 

①基本过滤选择器

选择器

描述

返回

示例

:first

获取第一个元素

单个元素

$(“div:first”)获取div中第一个div

:last

获取最后一个元素

单个元素

$(“div:last”)获取div中最后一个div

:not(selector)

去除所有与给定选择器匹配的元素

集合元素

$(“input:not(:myClass)”)选取class不是myClass的input元素

:even

选取索引是偶数的所有元素，索引从0开始

集合元素

$(“input:event”)选取索引是偶数的input元素

:odd

奇数

 

 

:eq(index)

选取索引等于index的元素(index从0开始)

单个元素

$(“input:eq(1)”)选取索引等于1的input元素

:gt(index)

选取索引大于index的元素

集合元素

$(“input:gt(1)”)选取索引大于1的input元素(*大于1，不包括1)

:lt(index)

选取索引小于index的元素

集合元素

与:gt()相反

:header

选取所有标题元素

集合元素

$(“:header”)选取网页中所有标题

:animated

选取当前正在执行动画的所有元素

集合元素

$(“div:animated”)选取正照执行动画的div元素

 

②内容过滤器

选择器

描述

返回

示例

:contains(text)

选取含有文本内容为”text”的元素

集合元素

$(“div:contains(“我”)”) 选取含有”我”的div元素

:empty

选取不包含子元素或文本的空元素

集合元素

$(“div:empty”)选取不包含子元素（包括文本元素）的div元素

:has(selector)

选取含有选择器所匹配的元素的元素

集合元素

$(“div:has(p)”)选取含有p元素的div元素

:parent

选取含有子元素或者文本的元素

集合元素

$(“div:parent”)选取拥有子元素（包括文本元素）的div元素

 

③可见性过滤选择器

第二章（2.3jQuery选择器）


联系
我们