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. Android studio 断点技巧

    写代码不可避免有Bug,通常情况下除了日志最直接的调试手段就是debug:那么你的调试技术停留在哪一阶段呢?仅仅是下个断点单步执行吗?或者你知道 Evaluate Expression , 知道条件断 ...

  2. springcloud(四)：熔断器Hystrix

    说起springcloud熔断让我想起了去年股市中的熔断,多次痛的领悟,随意实施的熔断对整个系统的影响是灾难性的,好了接下来我们还是说正事. 熔断器 雪崩效应 在微服务架构中通常会有多个服务层调用,基 ...

  3. kotlin 语言入门指南(二)--代码风格

    语言风格 这里整理了 kotlin 惯用的代码风格,如果你有喜爱的代码风格,可以在 github 上给 kotlin 提 pull request . 创建DTOs(POJSs/POCOs) 文件: ...

  4. 【WPF MaterialDesign 示例开源项目】 Work Time Manager

    转岗写了将近一年的 PHP 最近因为 工作太多太杂, 在汇报工作的时候经常会忘记自己做了些什么,本来想只是使用excel来记录,但是发现了excel的很多局限性,光是无法共享就郁闷死了,习惯了下班不带 ...

  5. aws上redhat安装redis服务记

    1.准备 官网下载

  6. PHP开发微信模版消息换行的问题

    微信是个坑!微信是个坑!微信是个坑!重要的时间说三遍 关键的地方是空白换行符到底是什么也不说,百度说是"\n":但是在发送消息的时候发现原样输出,发现json_encode对\n进 ...

  7. 12款Linux系统恢复工具

    电脑死机,硬盘崩溃,花巨大的money搞个急救保护器……这都是计算机的阴暗面.时间一直这样走着,走着,不定哪天背点儿.对于电脑损坏造成的损失,着急抓狂毫无意义.相反,使用恰当的工具反而会最小化损失.你 ...

  8. A Bayesian election prediction, implemented with R and Stan

    If the media coverage is anything to go by, people are desperate to know who will win the US electio ...

  9. Venn Diagram Comparison of Boruta, FSelectorRcpp and GLMnet Algorithms

    Feature selection is a process of extracting valuable features that have significant influence ondep ...

  10. void main（）， int main() 和int main（void）的区别

    1.区别是main()函数是否有返回值.2.void定义的函数没有返回值,int定义的函数返回整型值.3.void,字面意思是"无类型",常用在程序编写中对定义函数的参数类型.返回 ...