jQuery选择器

web开发的两个要素

  • 在使用HTML开发页面时，有两个基本点
  • 选择HTML页面上的哪些元素
  • 在这些元素上做哪些动作

在JavaScript中有document.getElementById()等方式获取元素，但这种方式太古老。麻烦、局限

jQuery选择器

  • jQuery选择器用于选择器用于选中需要操作的页面元素
  • 语法1：jQuery（选择器表达式）
  • 语法2：$（选择器表达式）

jQuery选择器是一种更加快捷高效的方式：

上面的语法1和语法2是等价的，当在页面中引入jQuery文件后，使用jQuery关键字和$是完全等价的；符合需求，高效准确地选择器表达式是关键

jQuery基本选择器

  • 基本选择器是jQuery最基础也是最常用的选择器表达式

    语法 说明
    $(“#id”) ID选择器，指定id元素的对象
    $(“标签”) 元素选择器，选择指定标签名的选择器（例如a标签等）
    $(“.class”) 类选择器，选中拥有指定的CSS类的元素
    $(“S1,S2,SN”) 组合选择器，对元素进行组合

id选择器和类选择器最常用：

标签选择器有点提示页面元素间的耦合性，所以可能用的也不多；

jQuery基本选择器的范例

我们使用前面做过的jQuery的简单案例来试一下组合选择器

jquery3

jQuery层叠选择器

  • 层叠选择器睡觉哦根据元素的位置关系来获取元素的选择器表达式
    选中某一个节点的所有后代节点，后代节点包括子节点、子节点的子节点

  • 语法 说明
    $(“ancestor descendant”) 后代选择器
    $(“ancestor > descendant”) 子选择器
    $(“ancestor ~ descendant”) 兄弟选择器

jQuery后代选择器示例1

选择a标签，这个a标签必须是li标签的后代标签：

jquery4

jquery5

jQuery后代选择器示例2：

即使a标签不是div标签的直接子标签，但是后代选择器依旧能够选中

jquery6

jquery7

jQuery后代选择器示例3

span后的a标签

jquery8

jquery9

jQuery子选择器示例1

必须是直接子节点才会选中；

例如在这个jQuery简单案例中：a标签必须是li标签的直接子标签才会被选中

在这里是只有li标签后的a标签被选中然后jquery，span后的a标签不会被选中

jquery10

jquery11

jQuery兄弟选择器示例1

选择p标签，这个p标签需要是span标签的兄弟标签，是平级节点；

jquery12

jquery13

jQuery属性选择器

  • 属性选择器是根据元素的属性值来选择元素的选择器表达式

  • 语法 说明
    $(“selector[attribute=value]”) 选中的属性值完全等于具体值得组件
    $(“selector[attribute^=’value’]”) 选中得属性值以某值开头得组件
    $(“selector[attribute$=’value’]”) 选中属性值以某值结尾得组件
    $(“selector[attribute*=’value’]”) 选中属性值包含某值得组件

比如当前得需求是：获取超链接地址为”网易”的元素

属性选择器中，selector是前面讲到的选择器表达式，其他选择器后面跟着[]，[]中的是某个属性的属性值，相当于是再原有选择器的基础上二次筛选

jQuery属性选择器示例：完全匹配

完全匹配：a[href=”http://www.baidu.com"]:是选中a标签，这个a标签的href属性值是"http://www.baidu.com"；

所以这里只有百度的标签是高亮的

jquery14

jQuery属性选择器示例2：开头匹配

拿到所有邮箱的超链接：a[href^=’http://mail']

jquery15

jQuery属性选择器示例3：结尾匹配

拿到所有中国名校的超链接：a[href$=’edu.cn’]

jquery16

jquery17

jQuery属性选择器示例4：包含匹配

拿到所有包含”edu.cn”字段的标签属性并增加css样式：a[href*=’edu.cn’]

jquery16

jquery18

jQuery属性选择器说明

说明1：属性选择器中，属性可以是其他任何属性不止只有上面的a标签可以用，页面中的input属性也是可以用的：input[type=’text’];这个意思是选择input标签，且器type属性为text的元素

jquery19

说明2：如上input[type=’text’];为什么选择左边的那个文本框，而不是选择右边的文本框呢？这是因为，属性选择器明确书写了某个属性的元素：

jquery20

说明3：如上input[type=”text”];形如这个，其需要用单引号的；

很显然是因为：$(“input[type=”text]”).addClass(“highlight”);所以需要使用单引号

jQuery位置选择器

  • 位置选择器是指通过位置获取指定的元素，例如”获取第三个元素”

    语法 说明
    $(“selector:first”) 获取第一个元素
    $(“selector:last”) 获取最后一个元素
    $(“selector:even”) 获取偶数位置的元素(从0开始)
    $(“selector:odd”) 获取奇数位置的元素(从0开始)
    $(“selector:eq(n)”) 获取指定位置的元素(从0凯斯)

jQuery位置选择器示例1：获取第一个元素

获取class=”myclass”的第一个元素：.myclass:first

jquery21

jquery22

jQuery表单选择器

  • 表单选择器是获取表单元素的简化形式，例如：获取所有的文本框

  • 之所以叫表单选择器，是因为这个选择器是直接针对表单中的元素进行选择的

    语法 说明
    $(“selector:input”) 所有表单输入的集合元素
    $(“slector:text”) 获取表单汇总文本框
    $(“selector:password”) 获取表单中密码框
    $(“welector:submit”) 获取提交的按钮
    $(“selecrror”) 获取重置的按钮
    ……

jQuery表单选择器示例1:获取表单中输入框中的值

:input是选择页面中的所有输入框中的值

​ jquery23

​

jQuery表单选择器示例2：获取表单汇总文本框

​ jquery24

​ jquery25

jQuery表单选择器总结

(1):input选取所有input、textarea、select和button元素-集合元素；

(2):text选择所有单行文本框，即type=text-集合元素；

(3):password选择所有密码框，即type=password-集合元素；

(4):radio选择所有单选框，即type=radio-集合元素；

(5):checkbox选择所有复选框，即type=checkbox-集合元素；

(6):submit选取所有提交按钮，即type=submit-集合元素；

(7):reset选取所有重置按钮，即type=reset-集合元素；

(8):image选取所有图像按钮，即type=image-集合元素；

(9):button选择所有普通按钮，即button元素-集合元素；

(10):file选择所有文件按钮，即type=file-集合元素；

(11):hidden选择所有不可见字段，即 type=hidden-集合元素；

标签选择器和表单选择器的区别

经过测试：如果使用input标签选择器时候，其会选中所有的input标签，不是input的标签不会被选中；即使标签选择器很严谨，也很明确；使用：input表单选择器的时候，会选取所有input、textarea、select和button元素；即其范围会大一些

所以目前可以暂时认为：（1）标签选择器和表单选择器作用基本类似，但在某些情况下。表单选择器可能范围更大一些；（2）感觉标签选择器更加明确，在实际业务中，当然更倾向标签选择器；

不同选择器的可以组合使用

尤其是其他选择器和位置选择器的组合，以应对某些特别的需求

示例1：

如：:input:last先使用表单选择器选中input，然后通过位置选择器二次筛选，选中最后一个

jquery26

示例2：

li a:last；先使用层叠选择器选中li标签的后代a标签，然后选择最后一个

jquery27