jQuery的选择器

简介: 和使⽤ JS 操作Dom⼀样,获取⽂档中的节点对象是很频繁的⼀个操作,在jQuery中提供了简便的⽅式供我们查找|定位元素,称为jQuery选择器,选择器可以说是最考验⼀个⼈ jQuery 功⼒的地⽅,通俗的讲, Selector 选择器就是"⼀个表示特殊语意的字符串"。只要把选择器字符串传⼊上⾯的⽅法中就能够选择不同的 Dom 对象并且以 jQuery 包装集的形式返回。

前言

和使⽤ JS 操作Dom⼀样,获取⽂档中的节点对象是很频繁的⼀个操作,在jQuery中提供了简便的⽅式
供我们查找|定位元素,称为jQuery选择器,选择器可以说是最考验⼀个⼈ jQuery 功⼒的地⽅,通俗的
讲, Selector 选择器就是"⼀个表示特殊语意的字符串"。 只要把选择器字符串传⼊上⾯的⽅法中就能够选
择不同的 Dom 对象并且以 jQuery 包装集的形式返回。

基础选择器

id选择器----------------格式 $("#testDiv")-------------------选择id为testDiv的元素
元素名称选择器------ 格式$("div")---------------------------选择所有div元素
类选择器----------------格式$(".blue")------------------------选择所有class=blue的元素
选择所有元素 ---------格式$("*")------------------------------选择⻚⾯所有元素
组合选择器------------ 格式$("#testDiv,span,.blue")----同时选中多个选择器匹配的元素

层次选择器

后代选择器 $("#parent div")(空格)选择id为parent的元素的所有div元素--所有子孙
⼦代选择器 $("#parent>div")(大于号)选择id为parent的直接div⼦元素--儿字辈
相邻选择器 $(".blue + img")(加号)选择css类为blue的下⼀个img元素--下面的邻居
同辈选择器 $(".blue ~ img")(波浪号)选择css类为blue的之后的img元素--所有的弟弟

表单选择器

表单选择器 :input 查找所有的input元素: $(":input")
注意:会匹配所有的input、 textarea、 select和button元素。
⽂本框选择器 :text 查找所有⽂本框: $(":text")
密码框选择器 :password 查找所有密码框: $(":password")
单选按钮选择器 :radio 查找所有单选按钮: $(":radio")
复选框选择器 :checkbox 查找所有复选框: $(":checkbox")
提交按钮选择器 :submit 查找所有提交按钮: $(":submit")
图像域选择器 :image 查找所有图像域: $(":image")
重置按钮选择器 :reset 查找所有重置按钮: $(":reset")
按钮选择器 :button 查找所有按钮: $(":button")
⽂件域选择器 :file 查找所有⽂件域: $(":file")

相关文章
N..
|
5月前
|
JavaScript 前端开发 开发者
jQuery选择器
jQuery选择器
N..
38 1
|
6天前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
23 5
|
4月前
|
JavaScript 前端开发
jQuery 选择器
jQuery 选择器
26 0
|
4月前
|
JavaScript 前端开发 索引
jQuery的选择器与自带函数详解
jQuery的选择器与自带函数详解
|
6天前
|
JavaScript 前端开发 CDN
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
本文是关于jQuery的学习笔记,涵盖了jQuery的简介、语法、选择器、事件处理以及hide()、show()、toggle()等方法的使用。
jQuery学习记录--jQuery语法,选择器,事件及hide(),show(), toggle()
|
15天前
|
JavaScript
jQuery 选择器
jQuery 选择器
20 3
|
20天前
|
JavaScript 索引
jQuery 选择器
jQuery 选择器
23 1
|
2月前
|
JavaScript 索引
jQuery的选择器有几种?
jQuery的选择器有几种?
31 1
|
5月前
|
JavaScript 前端开发 搜索推荐
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
JQuery EasyUI -- 日历选择器,2024年最新程序员经验分享
|
5月前
|
JavaScript 前端开发
【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?
【5月更文挑战第1天】【Web 前端】 jQuery 里的 ID 选择器和 class 选择器有何不同?