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的选择器总结的更多相关文章

  1. jQuery 的选择器常用的元素查找方法

    jQuery 的选择器常用的元素查找方法 基本选择器: $("#myELement")    选择id值等于myElement的元素,id值不能重复在文档中只能有一个id值是myE ...

  2. HTML 学习笔记 JQuery(选择器)

    学习前端也有一段时间了,今天终于进入到JQuery阶段了,对于新手来讲,JQuery的选择器类型之多 功能之强大实在不是一天两天能够记得完的.现在,就采用边学边记录的方式.以后要是忘了的话,也有一个地 ...

  3. jQuery的选择器中的通配符总结

    1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='code']&quo ...

  4. JQuery 层次选择器

    <!DOCTYPE HTML> <html> <head> <title> 使用jQuery层次选择器 </title> <scrip ...

  5. jQuery过滤选择器

    //基本过滤器$('li:first').css('background','#ccc');//第一个元素$('li:last').css('background','red');//最后一个元素$( ...

  6. jquery相对选择器,又叫context选择器,上下文选择器;find()与children()区别

    jquery相对选择器有两个参数,jQuery函数的第二个参数可以指定DOM元素的搜索范围(即以第二个参数指定的内容为容器查找指定元素). 第二个参数的不同的类型,对应的用法如下表所示. 类型 用法 ...

  7. jQuery之选择器

    jQuery元素选择器和属性选择器允许您通过标签名.属性名或内容对 HTML 元素进行选择和操作,而在 HTML DOM中,选择器可以对DOM元素组或单个DOM 节点进行操作.通俗点说,选择器的作用就 ...

  8. 关于jquery ID选择器的一点看法

    最近看到一道前端面试题: 请优化selector写法:$(".foo div#bar:eq(0)") 我给出的答案会是: 1. $("#bar") 2.  $( ...

  9. jQuery的选择器中的通配符[id^='code'] 【转】

    JQuery 1.选择器 (1)通配符: $("input[id^='code']");//id属性以code开始的所有input标签 $("input[id$='cod ...

  10. jquery下 选择器整理

    jQuery 的选择器可谓之强大无比,这里简单地总结一下常用的元素查找方法 $("#myELement") 选择id值等于myElement的元素,id值不能重复在文档中只能有一个 ...

随机推荐

  1. Thinkphp 5.1.24 parseKey缺陷导致聚合注入 分析

    测试url: http://127.0.0.1/thinkphp/thinkphp_5.1.24/public/index.php/index/index/sqli2?id=2 控制器是获取id参数作 ...

  2. centos添加用户并赋予管理员权限

    用centos时,root用户一般都是超级管理员使用的,一般不轻易给别人,但是有时候同事安装软件时需要root账号,又不得不给,只能重新建一个用户,并赋予管理员权限.下面介绍创建用户并赋予管理员权限的 ...

  3. Python:有参装饰器与多个装饰器装饰一个函数

    有参装饰器 def timmerout(flag1): #flag1 =flag def timmer(f): def inner(*args,**kwargs): if flag1: start_t ...

  4. java版本的Kafka消息写入与读取

    安装zookeeper:  https://www.cnblogs.com/guoyansi19900907/p/9954864.html 并启动zookeeper 安装kafka https://w ...

  5. swoole2——Worker与TaskWorker进程

    1.swoole 的进程模型 swoole是一个多进程模型的框架,当启动一个进程swoole应用时,一共会创建2+n+m个线程,n为worker进程数,m为TaskWorker进程数,1个master ...

  6. hadoop节点动态删除与增加

    动态删除 1)修改配置文件 修改hdfs-site.xml文件,适当减小dfs.replication的数量,增加dfs.hosts.exclude选项 vi hdfs-site.xml <pr ...

  7. Python函数名做参数,闭包,装饰器

    简单讲解闭包的写法和应用,在这之前,先声明,你定义的任意一个函数都可以作为其他函数的参数.就像下面这段代码的参数func,接收的参数就是一个函数名,在函数体内部使用了func()调用执行函数. 请看下 ...

  8. Codeforces Round #578 (Div. 2)

    Codeforces Round #578 (Div. 2) 传送门 A. Hotelier 暴力即可. Code #include <bits/stdc++.h> using names ...

  9. angular路由事件

    Angular 4检测路由变化,可以使用router.events来监听: 支持的事件类型: NavigationStart:导航开始 NavigationEnd:导航结束 NavigationCan ...

  10. React中引用CSS样式的方法

    相对于html中引用css的三种方法,react中也有三种方法,一一相对: 1. 行内样式:直接在组件内部定义 <div style={{width:'20px',height:'30px'}} ...