2.1jQuery选择器是什么

1.CSS选择器

选择器

示例

选择器

示例

标签选择器

a{ } p{ } ul{ }

ID选择器

#ID{ }

类选择器

.class{ }

群组选择器

td,p,div,a{ }

后代选择器

#link a{ }

通配符选择器

*{ }

2.jQuery选择器

*jQuery的行为规则都必须再获取到元素后才能生效

例：

<script type=”text/javascript”>

  function demo(){

		Alert(‘JavaScript demo’)

}

</script>

<p onclick = “demo();”>点击我.</p>

上述代码为元素设置onclick事件，但是JS和HTML混杂在一起不妥，应该将内容和行为分离：
<p class= “demo”>jQuery Demo</p>

<script type=”text/javascript”>

    $(“.demo”).click(function(){    //给class 为demo的元素添加行为

        Alert(“JQuery demo”);

})

</script>

2.2jQuery选择器的优势

①简洁的写法

②支持css1到css3选择器

③完善的处理机制

使用jQuery选择器不仅比使用传统的getElementById()函数简洁的多，而且能够避免某些错误

例：

<div>test</div>

<script type=”text/javascript”>

         document.getElementById(“tt”).styel.color = “red”;

</script>

运行上述代码会报错，原因是没有id为”tt”的元素

改进：

<div>test</div>

<script type=”text/javascript”>

         If(document.getElementById(“tt”)){     //判断id为tt是否存在

                  document.getElementById(“tt”).styel.color = “red”;

         }

</script>

效果达到了，却很复杂。使用jQuery则可以避免

<div>test</div>

<script type=”text/javascript”>

         $(“#tt”).css(“color”,”red”);               //这里无需判断id为tt是否存在

</script>

*$(“#tt”)获取的永远是对象， 即使网页上没有此元素。因此当用jQuery检查某个元素再网页上是否存在时，不能用以下代码:

If($(“#tt”)){

         //do something

}

而应该根据获取到元素的长度来判断：

if($(“#tt”).length >0 ){

         //do something

}

或者转化成DOM对象判断：

if($(“#tt”)[0] ){

         //do something

}

2.3jQuery选择器

①用js添加行为：（jQuery方法见2.4应用jQuery改写示例）

示例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="1" name="check" checked/>

         <input type="checkbox" value="2" name="check" >

         <input type="checkbox" value="3" name="check" checked/>  <!--checked 被选中状态-->

         <input type="button" value="你选中的个数" 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元素

③可见性过滤选择器

选择器

描述

返回

示例

:hidden

选取所有不可见元素

集合元素

$(“:hidden”)选取所有不可见元素，包括<input type=”hidden”/>,<div style=”display:none;”>和<div style=”visibility:hidden”>等元素，如果只选取<input>元素，使用$(“input:hidden”)

:visible

选取所有可见元素

集合元素

#(“div:visible”)选取所有可见<div>元素

④属性过滤选择器

过滤规则是通过元素的属性来获取相应的元素

选择器

描述

返回

示例

[attribute]

选取拥有此属性的元素

集合元素

$(“div[id]”)选取拥有属性id的元素

[attribute=value]

选取属性为value元素

集合元素

$(“div[title=test]”)选取属性title为”test”的<div>元素

[attribute!=value]

选取属性不等于value的元素

集合元素

$(“div[title!=test]”)选取属性title不等于”test”的<div>元素(*没有有title属性的<div>元素也会被选取)

[attribute^=value]

选取属性值以value开始的元素

集合元素

$(“div[title^=test]”)选取属性title以”test”开始的<div>元素

[attribute$=value]

选取属性值以value结束的元素

集合元素

$(“div[title$=test]”)选取属性title以”test”结束的<div>元素

[attribute*=value]

选取属性值含有value的元素

集合元素

$(“div[title*=test]”)选取属性title含有”test”的<div>元素

[selector1][selector2]

[selectorN]

用属性选择器合并成一个符合属性选择器，满足多个条件，每选择一次，缩小一次范围

集合元素

$(“div[id][title$=“test”]”)选取拥有属性id，并且属性title以”test”结束的<div>元素

⑤子元素过滤选择器

选择器

描述

返回

示例

:nth-child

(index/even/odd/

equation)

选取每个父元素下的第index个子元素或者奇偶元素(index从1算起)

集合元素

:eq(index)只匹配一个元素，而:nth-child将为每一个父元素匹配子元素，并且:nth-child(index)的index从1开始，而:eq(index)是从0开始

:first-child

选取每个父元素的第1个子元素

集合元素

:first只返回单个元素，而:first-child选择符将为每个父元素匹配第一个子元素。

例：$(“ul li:first-child”)选取每个<ul>中第一个<li>元素

:last-child

与上例相反

集合元素

与上例相反

:only-child

如果某个元素是它父元素中唯一的子元素，那么将会被匹配，如果父元素中含有其他元素，则不会被匹配

集合元素

$(“ul li:only-child”)在<ul>中选取是唯一子元素的<li>元素

* :nth-child()选择器是很常用的子元素过滤选择器，功能如下：

(1) :nth-child(even)能选取每个父元素下的索引值是偶数的元素

(2) :nth-child(odd) 能选取每个父元素下的索引值是奇数的元素

(3) :nth-child(2)   能选取每个父元素下的所以只等于2的元素

(4) :nth-child(3n)  能选取每个父元素下的索引值是3的倍数的元素（n从0开始）

(5) :nth-child(3n+1)能选取每个父元素下的索引值是（3n+1）的元素（n从0开始）

⑥表单对象属性过滤选择器

选择器

描述

返回

示例

:enabled

选取所有可用元素

集合元素

$(“#form1 :enabled”)选取id为”form1”的表单内的所有可用元素

:disabled

选取所有不可用元素

集合元素

$(“#form2 :disabled”)选取id为”form2”的表单内所有不可用的元素

:checked

选取所有被选中元素（单选框/复选框）

集合元素

$(“input :checked”)选取所有被选中的<input>元素

:selected

选取所有被选中的选项元素(下拉列表)

集合元素

$(“select :selected”)选取所有被选中的选项元素

2.3.4 表单选择器

选择器

描述

返回

示例

:input

选取所有<input>/<textarea>/<select>和<button>元素

集合元素

$(“:input”) 选取所有<input>/<textarea>/<select>和<button>元素

:text

选取所有的单行文本框

集合元素

$(“:text”)选取所有单行文本框

:password

选取所有密码框

集合元素

$(“:password”)选取所有密码框

:radio

选取所有单选框

集合元素

$(“:radio”)选取所有的单选框

:checkbox

选取所有多选框

集合元素

$(“:checkbox”)选取所有复选框

:submit

选取所有提交按钮

集合元素

$(“:submit”)

:image

选取所有图像按钮

集合元素

$(“:image”)

:reset

选取所有重置按钮

集合元素

$(“:reset”)

:button

选取所有按钮

集合元素

$(“:button”)

:file

选取所有的上传域

集合元素

$(“:file”)

:hidden

选取所有不可见元素

集合元素

$(“:hidden”)

第二章（jQuery选择器）的更多相关文章

  1. 第二章 jQuery选择器

    选择器是行为与文档内容之间的纽带,其目的是能轻松的找到文档中的元素. jQuery中的选择器继承了CSS的风格.利用jQuery选择器,可以非常便捷快速地找出特定的DOM元素,然后给它们添加相应的行为 ...

  2. 《jQuery权威指南》学习笔记之第2章 jQuery选择器

    2.1 jQuery选择器概述 2.1.1 什么使选择器 2.1.2 选择器的优势: 代码更简单,完善的检测机制  1.代码更简单   示例2-1     使用javascript实现隔行变色 < ...

  3. jQuery系列 第二章 jQuery框架使用准备

    第二章 jQuery框架使用准备 2.1 jQuery框架和JavaScript加载模式对比 jQuery框架的加载模式 <script> window.onload = function ...

  4. 《锋利的jQuery（第2版）》笔记-第2章-jQuery选择器

    选择器是jQuery的根基,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器.熟练使用选择器,不仅可以简化代码,而且可以达到事半功倍的效果. 2.1 jQuery选择器是什么 1. ...

  5. JQuery制作网页—— 第六章 jQuery选择器

    1.jQuery选择器:jQuery选择器类似于CSS选择器,用来选取网页中的元素.       Eg:$("h3").css("background",&qu ...

  6. 第1章jquery选择器

    一.jquery等价于$ jquery选择器继承了css选择器的风格. $("#ID")代替了document.getElementById()函数,即通过id获取元素. $(&q ...

  7. 第六章 jQuery选择器

    jQuery选择器概述: 选择器jQuery基础,在jQuery中,对事件处理,遍历DOM和Ajax操作都依赖于选择器. 什么是jQuery选择器: jQuery选择器拥有良好的浏览器兼容性,不用使用 ...

  8. 第二篇 jQuery 选择器

    2-1,2  table隔行变色 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "h ...

  9. 第二章 jQuery数组和字符串

    章节内容: 1.利用数组在列表中显示名字 (1)利用数组显示名字列表--join()方法 (2)从数组中获取名字并追加到有序列表--each()方法 (3)利用HTML元素创建数组和计算数组长度--g ...

  10. 第二章 jquery的dom操作

    三个方面    dom核心,html-dom和css-dom 一. 1.dom core核心 document.getElementsByTagName("form")  获取表单 ...

随机推荐

  1. Gitlab使用Webhook实现Push代码自动部署

    1.Jenkins 安装完成以后,首先我们在Jenkins中需要安装一下,Gitlab Hook Plugin 插件: 2.插件安装完成我们创建任务,在任务重构建触发器下获取回调URL: 注意: 注意 ...

  2. 18个你可能不相信是用CSS制作出来的东西

    与流行的看法相反,CSS不仅仅是用来提供一个WEB页面的基本风格,以使它看起来更有吸引力.还有很多其他的事情,CSS也可以做的很好.由于它创建动画和交互的能力,CSS集合HTML以及JavaScrip ...

  3. Fast Fourier Transform ——快速傅里叶变换

    问题: 已知$A=a_{0..n-1}$, $B=b_{0..n-1}$, 求$C=c_{0..2n-2}$,使: $$c_i = \sum_{j=0}^ia_jb_{i-j}$$ 定义$C$是$A$ ...

  4. 微服务框架下的思维变化-OSS.Core基础思路

    如今框架两字已经烂大街了,xx公司架构设计随处可见,不过大多看个热闹,这些框架如何来的,细节又是如何思考的,相互之间的隔离依据又是什么...相信很多朋友应该依然存在自己的疑惑,特别是越来越火热的微服务 ...

  5. EntityFramework6.X之概述

    实体框架(EF6.X)是一种对象/关系映射器(O/R Mapping解决方案),一套支持开发面向数据的软件应用技术,采用特定域对象和关系数据形式使用数据,而不必考虑存储这些数据的基础数据库表和列,上层 ...

  6. web socket教程

    web socket是一种网络通信协议,很多网页应用中都会使用到它,比如聊天室,选票等等. 一.为什么需要WebSocket? HTTP是无连接(无连接的含义是限制每次连接只处理一个请求.服务器处理完 ...

  7. 初码-Azure系列-文章目录

    系统迁移 初码-Azure系列-记一次MySQL数据库向Azure的迁移 初码-Azure系列-迁移PHP应用至Azure的一些实践记录和思考 初码-Azure系列-记一次从阿里云到Azure的迁移和 ...

  8. VR问题无关方向，VR全景为您领航，全景智慧城市已势不可当

    2016年,VR绝对是互联网科技圈的一个高频词. 在这一年里,Magic Leap获得阿里领投的近8亿美元的融资,VR公司的商业价值得到认可.Oculus Rift和HTC Vive的VR产品正式发货 ...

  9. 基于BUI开发Asp.net MVC项目

    因工作性质参于并开发过一些Web应用程序,前端项目框架也用了不少,比如MiniUI.ExtJS.以及定制的项目前端框架.无意中看到BUI前端框架,第一眼就被它的优雅布局所吸引.简洁的项目门户Banne ...

  10. 作为前端，我为什么选择 Angular 2？

    转自:https://sanwen8.cn/p/2226GkX.html 没有选择是痛苦的,有太多的选择却更加痛苦.而后者正是目前前端领域的真实写照.新的框架层出不穷:它难吗?它写得快吗?可维护性怎样 ...