【基础】新手任务,五分钟全面掌握JQuery选择器
1. 基本选择器
1.1 ID选择器:
//选中id为myDiv的元素,速度最快
$("#myDiv")
1.2 类选择器:
//选中class属性为red的所有元素
$(".red")
1.3 元素选择器:
//选中所有div元素
$("div")
1.4 通配符选择器:
//选中所有元素
$("*")
1.5 复合选择器:
//选中所有span元素和所有id为myDiv的元素
$("span,#myDiv")
2. 层次选择器
2.1 选择器1 选择器2:
//选中body内的所有div元素
$("body div")
2.2 选择器1 > 选择器2:
//选中body内的所有直接div元素,不查找间接元素
$("body > div")
2.3 选择器1 + 选择器2:
//选中所有class为red的下一个div元素
$(".red + div")
2.4 选择器1 ~ 选择器2:
//选中id为myDiv后面的所有div兄弟元素
$("#myDiv ~ div")
3. 基本过滤选择器
3.1 第一个元素选择器
//选中第一个div元素
$("div:first")
3.2 最后一个元素选择器
//选中最后一个div元素
$("div:last")
3.3 排除选择器
//选中class不为red的所有div元素
$("div:not(.red)")
3.4 偶数选择器
//选中索引值为偶数的div元素
$("div:even")
3.5 奇数选择器
//选中索引值为奇数的div元素
$("div:odd")
3.6 索引值选择器
//选中索引值为2的div元素
$("div:eq(2)")
//选中索引值大于2的div元素
$("div:gt(2)")
//选中索引值小于2的div元素
$("div:lt(2)")
4. 内容过滤选择器
//选中所有包含文本ok的div元素
$("div:contains(ok)")
//选中所有为空的div元素
$("div:empty")
//选中所有包含class为red的div元素
$("div:has(.red)")
//选中所有不为空的div元素
$("div:parent")
5. 可见性过滤选择器
//选中所有不可见的div元素
$("div:hidden")
//选中所有可见的div元素
$("div:visible")
6. 属性过滤选择器
//选中所有包含属性title的div元素
$("div[title]")
//选中所有属性title等于ok的div元素
$("div[title=ok]")
//选中所有属性title不等于ok的div元素
$("div[title!=ok]")
//选中所有属性title值以ok开头的div元素
$("div[title^=ok]")
//选中所有属性title值含有ok的div元素
$("div[title*=ok]")
//选中所有包含属性id,并且属性title值以ok开头的div元素
$("div[id][title^=ok]")
7. 子元素过滤选择器
//选中所有是第二个子结点的div元素
$("div:nth-child(2)")
//选中所有是第一个子结点的div元素
$("div:first-child")
//选中所有是最后一个子结点的div元素
$("div:last-child")
//选中所有是唯一子结点的div元素
$("div:only-child")
8. 表单属性过滤选择器
//选中表单内可用input
$("#form1 input:enabled")
//选中表单内不可用input
$("#form1 input:disabled")
//选中表单内所有选中的元素
$("#form1 input:checked")
//选中下拉列表中选中的元素
$("select > option:selected")
【基础】新手任务,五分钟全面掌握JQuery选择器的更多相关文章
- 数据可视化基础专题(六):Pandas基础(五) 索引和数据选择器(查找)
1.序言 如何切片,切块,以及通常获取和设置pandas对象的子集 2.索引的不同选择 对象选择已经有许多用户请求的添加,以支持更明确的基于位置的索引.Pandas现在支持三种类型的多轴索引. .lo ...
- 深入学习jQuery选择器系列第一篇——基础选择器和层级选择器
× 目录 [1]id选择器 [2]元素选择器 [3]类选择器[4]通配选择器[5]群组选择器[6]后代选择器[7]兄弟选择器 前面的话 选择器是jQuery的根基,在jQuery中,对事件处理.遍历D ...
- JQuery基础知识==jQuery选择器
选择器是jQuery的基础,在jQuery中,对事件处理.遍历DOM和Ajax操作都依赖于选择器 1. CSS选择器 1.1 CSS是一项出色的技术,它使得网页的结构和表现样式完全分离.利用CSS选择 ...
- jQuery基础(2)-- jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作.jQuery 选择器基于元素的 id.类.类型.属性.属性值等"查找"(或选择)HTML 元素. 它基于已经存在的 ...
- jQuery 选择器 (基础恶补之三)+Ajax
jQuery load() 方法 jQuery load() 方法是简单但强大的 AJAX 方法. load() 方法从服务器加载数据,并把返回的数据放入被选元素中. 语法: $(selector). ...
- jQuery 选择器 (基础恶补)
jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...
- 【jQuery基础学习】01 jQuery选择器
关于CSS选择器 jQuery选择器涉及到CSS,CSS技术使得网页的结构与表现样式完全分离. 同样CSS也需要找到某个网页的结构才能改变其样式,这就是CSS选择器. 常用的CSS选择器如下: 标签选 ...
- jQuery基础学习(二)—jQuery选择器
一.jQuery基本选择器 1.CSS选择器 在学习jQuery选择器之前,先介绍一下之前学过的CSS选择器. 选择器 语法 描述 示例 标签选择器 E { ...
- jQuery选择器(基础及应用)
jQuery选择器 jQuery的核心思想就是:选取元素,对其操作. jquery选择器对开发有以下优势:写法简洁,不需要考虑主流浏览器是否支持某些选择器(jquery支持css1-css3),不需要 ...
随机推荐
- 老李分享:《Linux Shell脚本攻略》 要点(八)
老李分享:<Linux Shell脚本攻略> 要点(八) 1.打印进程 [root@localhost program_test]# ps -e | head PID TTY ...
- Web worker 与JS中异步编程的对比
0.从一道题说起 var t = true; setTimeout(function(){ t = false; }, 1000); while(t){ } alert('end'); 问,以上代码何 ...
- 基础:获得servletAPI
package com.learning.web.action; import javax.servlet.ServletContext; import javax.servlet.http.Http ...
- 单片机课程设计——《基于AT89S52单片机和DS1302时钟芯片的电子时钟(可蓝牙校准)》
引言 本设计以AT89S52单片机为控制核心,时钟芯片DS1302提供时钟源,配合LCD1602液晶显示模块,组成基本硬件系统,同时利用HC-05嵌入式蓝牙串口通讯模块,可在手机端进行日期.时间的校准 ...
- kafka集群中常见错误的解决方法:kafka.common.KafkaException: Should not set log end offset on partition
问题描述:kafka单台机器做集群操作是没有问题的,如果分布多台机器并且partitions或者备份的个数大于1都会报kafka.common.KafkaException: Should not s ...
- oh-my-zsh 安装和使用
oh-my-zsh是github用户robbyrussell的一款为简化zsh配置而开发的开源项目. 其github地址:https://github.com/robbyrussell/oh-my-z ...
- 学习MVC之租房网站(五)-权限、角色、用户管理
在上一篇<学习MVC之租房网站(四)-实现Service层并进行单元测试>中,记录了实现Service层并进行单元测试的过程,接下来该到"正题"-MVC了,也就是UI层 ...
- 创建,删除DOM
需求说明: 1.上传图片,有删除功能,可上传5张,至少上传一张 html代码如下 <div class="imgUpBox"> <div class=" ...
- Cygwin在线安装指南
详细说明请看文章http://www.crifan.com/files/doc/docbook/cygwin_intro/release/htmls/install_cygwin_setup_exe. ...
- poj3020二分图匹配
The Global Aerial Research Centre has been allotted the task of building the fifth generation of mob ...