jQuery的选择器总结
jQuery的选择器
- 不会返回undefined或null
基本选择器
id选择器:$('#id')
element选择器:$('elem')
class选择器:$('.class')
通配符选择器:$('*') //可以匹配所有的元素,不建议使用
多项选择器
$("selector1, selector2, ... selectorN")
//当选择了重复的元素时,jquery并不会重复选择
//jquery会按照DOM中的元素顺序返回选择结果,并不会按照参数顺序返回选择结果
层级选择器
后代选择器:$('ancestor descendant')
直接后代选择器:$('parent > child')
二弟选择器:$('prev + next') //只会选择在prev后并且相邻的next
兄弟选择器:$('prev ~ sibling') //会选择出prev所有的sibling兄弟
属性选择器
属性名选择器:$('[attr]') //选择出包含该属性的所有元素
属性值选择器:$('[attr=value]') //选择属性为该值的所有元素
非属性值选择器:$('[attr!=value]') //选择属性不为该值的元素
属性值头字段选择器:$('[attr^=value]') //选择属性值开头为value字段的元素
属性值尾字段选择器:$('[attr$=value]') //选择属性值结尾为value字段的元素
属性值字段选择器:$('[attr*=value]') //选择属性值包含value字段的元素(正则)
多属性选择器:$('[selector1][selector2][selectorN]') //其中selector可以为上面任何一个选择器方法
过滤器
child系列
$('father:first-child')
$('father:last-child')
$('father:nth-child(n)') //n可以是数字(1开始)、even(表示偶数)、odd(表示奇数)、formula(方程)
$('father:nth-last-child(n)')
$('father:only-child')
//可以指定子标签的类型,通过$('father > tag : first-child')
//寻找father标签下的第一个标签是tag标签
type系列
$('father:first-of-type')
$('father:last-of-type)
$('father:nth-of-type(n)') //n可以是数字、even(表示偶数)、odd(表示奇数)、formula(加减乘除方程,如2n+1)
$('father:nth-last-of-type(n)')
$('father:only-of-type')
//可以指定子标签的类型,通过$('father > tag : first-of-type')
//寻找father标签下的第一个tag标签
表单相关
表单选择器:$(':input') //选择表单中input、textarea、select、button
表单元素选择器:$(':type')
//可以用来单独选择password、radio、checkbox、image、reset、button、file
表单状态选择器:$(':state')
//表单状态可以是enabled、disabled、checked(checkbox、select)、selected
查找和过滤
* expr:字符串值,包含供匹配当前元素集合的选择器表达式
* object:现有的jQuery对象,以匹配当前的元素
* element:一个用于匹配的DOM元素
* fn一个函数用来作为测试元素的集合
find(expr|object|element) //递归搜索所有与指定表达式匹配的元素
children([expr]) //在儿子中搜索与指定表达式匹配的元素
parent([expr]) //取得一个包含所有匹配元素的父元素集合
next([expr])、prev([expr]) //紧邻的后辈、前辈元素
eq(index|-index) //获取当前链式操作的第index个jQuery对象
sibling([expr]) //匹配元素集合的同辈元素集合
filter(expr|object|element|fn) //筛选出与指定表达式匹配的元素集合
jQuery的选择器总结的更多相关文章
- jQuery 的选择器常用的元素查找方法
jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...
- HTML 学习笔记 JQuery(选择器)
学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...
- jQuery的选择器中的通配符总结
1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...
- JQuery 层次选择器
<!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...
- jQuery过滤选择器
//基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...
- jquery相对选择器,又叫context选择器,上下文选择器;find()与children()区别
jquery相对选择器有两个参数,jQuery函数的第二个参数可以指定DOM元素的搜索范围(即以第二个参数指定的内容为容器查找指定元素). 第二个参数的不同的类型,对应的用法如下表所示. 类型 用法 ...
- jQuery之选择器
jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...
- 关于jquery ID选择器的一点看法
最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2. $( ...
- jQuery的选择器中的通配符[id^='code'] 【转】
JQuery 1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='cod ...
- jquery下 选择器整理
jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...
随机推荐
- 在Python中反向遍历序列(列表、字符串、元组等)的五种方式
1. reversed() a = [1, 2, 3, 4] for i in reversed(a): print(i) 2. range(len(a)-1, -1, -1) a = [1, 2, ...
- Java集合专题
1.Java 中常用的容器有哪些? 常见容器主要包括 Collection 和 Map 两种,Collection 存储着对象的集合,而 Map 存储着键值对(两个对象)的映射表. Collectio ...
- 记一次微信小程序的开发
使用工具: 1.微信Web开发者工具 2.Visual Studio 2019 前端采用color UI,后端采用c# .net 过程中的几个重点点记录 1.color UI使用 下载colorUI以 ...
- 框架用多了真的会死人的,spring-cloud全家桶与mybitais 集成完整示例(附下载)
题外话: 看到这一长串包含各种技术名词的标题,一路走来感觉研发深深的被各种框架给绑架了,从我们刚出生最简单的jsp,servlet打天下,到spring mvc的盛行,再到现在spring-boo ...
- 【新人填坑008】django升级2.x后报'WSGIRequest' object has no attribute 'session',
1.X 到2.x后中间件定义的名字也有所不同 改一下就好了 在setting文件中将原先的 MIDDLEWARE_CLASS 改成MIDDLEWARE 如果还运行不成功 注释掉标白线的那一行 删掉也 ...
- Django 模板变量之 forloop
1. 模板变量之forloop.counter:从1开始自增1 模板代码如下: {% for row in v %} <tr> <td>{{forloop.counter}}& ...
- Python入门基础学习(模块,包)
Python基础学习笔记(五) 模块的概念:模块是python程序架构的一个核心概念 每个以拓展名py结尾的python源代码文件都是一个模块 模块名同样也是一个标识符,需要符合标识符的命名规则 在模 ...
- 【tf.keras】ssl.SSLError: [SSL: DECRYPTION_FAILED_OR_BAD_RECORD_MAC] decryption failed or bad record mac (_ssl.c:1977)
问题描述 tf.keras 在加载 cifar10 数据时报错,ssl.SSLError: [SSL: DECRYPTION_FAILED_OR_BAD_RECORD_MAC] decryption ...
- springmvc 什么时候 set applicationContext 到 ServletConfig 的?
springmvc 什么时候 set applicationContext 到 ServletConfig 的? FrameworkServlet --> initWebApplicationC ...
- Java成员变量和局部变量区别
成员变量和局部变量区别 变量根据定义位置的不同,我们给变量起了不同的名字.如下图所示: 区别 在类中的位置不同 (重点) 成员变量:类中,方法外 局部变量:方法中或者方法声明上(形式参数) 作用范围 ...