jQuery中的一些选择器

① CSS选择器
选择器 语法 示例
标签选择器 D{CSS} td{font-size:14px;}
ID选择器 #ID{CSS} #header{font-size:14px;}
类选择器 D.calssName{Css} .dream{font-size:14px;}
群组选择器 E1,E2,E3{CSS} td,p,div,a{margin:0px;}
后代选择器 E F{Css} #Link a{color:red;}
通配符选择符 *{CSS} *{font-size:14px;}

②jQuery基本选择器
选择器 jQuery 返回
标签选择器 Element $("tagName") 集合元素
ID选择器 #id $("#ID") 单个元素
类选择器 .class $(".demo") 集合元素
群组选择器 selector,2 $("div,span,p,myclass") 集合元素
通配符选择符 $("*") 集合元素

③层次选择器
选择器 jQuery
$("ancestor descemdant") $("div span")选取div中所有的span(集合元素)
$("parent>child") $("div>span")选取所有div元素下名为span的子元素(集合元素)
$("prev+next") $(".one+div")选取class为.one的下一个div元素(集合元素)
$("prev^sibling") $("#two-div")选取id为two的元素后面所有的div兄弟元素(集合元素)

④基本过滤选择器
过滤器 jQuery
:first $("div:first")选取所有<div>元素中的第一个<div>元素(单个元素)
:last $("div:last")选取所有<div>元素中的最后一个<div>元素(单个元素)
:not(selector) $("input:not(.myClass)")选取class不是myClass的<input>元素(集合元素)
:even $("input:even")选取索引是偶数的<input>元素(索引从0开始)(集合元素)
:odd $("input:odd")选取索引是奇数的<input>元素(索引从0开始)(集合元素)
:eq(index) $("input:eq(1)")选取索引等于1的<input>元素(单个元素)
:gt(index) $("input:gt(1)")选取索引大于1的<input>元素(集合元素)
:It(index) $("input:It(4)")选取索引小于4的<input>元素(集合元素)
:header $(":header")选取所有标题元素<h1><h2><h3>(集合元素)
:animated $("div:animated")选取正在执行动画的<div>元素(集合元素)

⑤内容过滤选择器
过滤器 jQuery
:contains(text) $("div:contains(我)")选取含有文本"我"的<div>元素(集合元素)
:empty $("div:empty")选取不包含子元素(文本元素)的<div>空元素(集合元素)
:has(selector) $("div:has(p)")选取含有<p>元素的<div>元素(集合元素)
:parent $("div:parent")选取拥有子元素(包括文本元素)的<div>元素(集合元素)

⑥属性过滤选择器
过滤器 jQuery
[attribute] $("div[id]")选取所有拥有id属性的元素(集合元素)
[attribute=value] #("div[title=test]")选取元素属性title值为test的<div>元素(集合元素)
[attribute!=value] $("div[title!=test]")选取元素属性title值不为test的<div>元素(集合元素)
[attribute^=value] $("div^=test")选取属性title值为test开头的div元素(集合元素)
[attribute$=value] $("div$=test")选取属性title值为test结尾的div元素(集合元素)
[attribute*=value] $("div*=test")选取属性title值中包含test的div元素(集合元素)
[selector][selector2][selectorN] $("div[id][title$="test"]")选取拥有id属性,且title属性值以test结尾的所有div元素

⑦子元素过滤选择器
过滤器 jQuer
:nth-child(index/even/odd/equation) :eq(index)只匹配一个元素,而:nth-child将为每一个父元素匹配子元素,并且:nth-child(index)下标从1开始,而:eq(index)是从0开始
:nth-child(even) 选取每个父元素下的索引值是偶数的元素
:nth-child(odd) 选取每个父元素下的索引值是奇数的元素
:nth-child(3n)选取每个父元素下的索引值是3的倍数的元素

:first-child :frist只返回单个元素,而:first-child选择符将为每一父元素匹配第一个子元素。
例如$(“ul li:first-child”);选取每个<ul>中的第一个<li>元素
注意
$(“ul li :first-child”);选取每个<ul>中的每一个<li>元素中的第一个子元素

:last-child :last只返回单个元素而:last-child选择器将为每个父元素匹配最后一个子元素
例如$(“ul li:last-child”);选择每个<ul>中最后一个<li>元素

:only-child $("ul li:only-child")在<ul>中选取是唯一子元素的<li>元素。

⑧表单对象属性过滤选择器
选择器 jQuery
:emabled $("#form1:enabled")选取id为form1的表单内所有可用的元素(集合元素)
:disabled $("#form1:disabled")选取id为form2的表单内所有不可用的元素(集合元素)
:checked $("input:checked")选取所有被选中的<input>元素(集合元素)
:selected $("select:selected")选取所有被选中的选项元素 下拉列表(集合元素)

⑨表单选择器
过滤器 jQuery
:input $(“:input”)选取所有<input><textarea><select>和<button>(集合元素)
:text $(":text")选取所有单行文本框(集合元素)
:password $(":password")选取所有的密码框(集合元素)
:radio $(":radio")选取所有的单选框
:checkbox $(":checkbox")选取所有复选框
:submit $(":submit")选取所有提交按钮
:image $(":image")选取所有图像按钮
:reset $(":reset")选取所有重置按钮
:button $(":button")选取所有按钮
:file $(":file")选取所有上传域
:hidden $(":hidden")选取所有不可见元素

原文地址:https://www.cnblogs.com/192-168-D/p/9949383.html

时间: 2024-11-09 20:58:31

jQuery中的一些选择器的相关文章

jQuery入门(1)jQuery中万能的选择器

jQuery入门(1)jQuery中万能的选择器 jQuery入门(2)使用jQuery操作元素的属性与样式 jQuery入门(3)事件与事件对象 jQuery入门(4)jQuery中的Ajax()应用 编写任何JavaScript程序我们要首先获得对象,jQuery选择器能彻底改变我们平时获取对象的方式,可以获取几乎任何语意的对象,比如 “拥有title属性并且值中包含test的<a>元素”,完成这些工作只需要编写一个jQuery选择器字符串, 学习jQuery选择器是学习jQuery最重要

jQuery中的:input选择器

jQuery中的:input选择器 jQuery中的:input选择器包含input, textarea, select 和 button这些标签. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style type="text/css"&g

JQuery中的id选择器含有特殊字符时,不能选中dom元素的解决方法

1.jquery类库在我们实际项目中用的很多,大家经常需要根据控件的id,获取对应的html元素.但是:当id含有特殊字符的时候,是不能选中的. 2.自己简单的测试了下,jquery的id选择器只支持,单词.阿拉伯数字.下划线.中划线.其中单词,包括英文字母.汉字,但是控件id属于客户不可见内容,实际中开发人员是不用汉字作为id的,这里不考虑. 3.自己写了一个工具方法,开人人员只要将id转义后,jquery就能选中了,不用再考特殊字符的问题.代码是基于jquery1.6版本. function

jquery 中多条件选择器,相对选择器,层次选择器的区别

一.Jquery常用的过滤选择器如下所示: 1.:first,选取第一个元素,比如$("div:first")选取第一个div元素 2.:last,选取最后一个元素,比如$("div:last")选取最后一个div元素 3.:not(选择器),选取不满足“选择器”条件的元素,比如$("div:not(.className)"),选取样式不是className的所有div元素 4.:even/:odd,选取索引为偶数/奇数的元素,比如$("

JQuery中常用的选择器

属性选择器 1>  [attribute] 概述:匹配包含给定属性的元素. 示例 jQuery 代码:$("div[id]") 描述:查找所有含有 id 属性的 div 元素 2>  [attribute=value] 概述:匹配给定的属性是某个特定值的元素 3> [attribute!=value] 概述:匹配所有不含有指定的属性,或者属性不等于特定值的元素. 4> [attribute^=value] 概述:匹配给定的属性是以某些值开始的元素 5> [

JQuery中的id选择器含有特殊字符时,不能选中dom元素

1.jquery类库在我们实际项目中用的很多,大家经常需要根据控件的id,获取对应的html元素.但是:当id含有特殊字符的时候,是不能选中的 2.jquery的id选择器只支持,单词.阿拉伯数字.下划线.中划线.其中单词,包括英文字母.汉字,但是控件id属于客户不可见内容,实际中开发人员是不用汉字作为id的,这里不考虑

jQuery中的筛选选择器

1.chiledren()  子代选择器 子代选择器与$('#list>li')的功能类似,优点是可以完善链式编程操作 如果不书写选择器参数表示获取所有的子元素,如果书写了选择器参数表示选择制定的部分内容 2.find()   后代选择器 注:如果不设置选择器参数,不会生效 3.parent()    父元素获取,相当于parentNode 由于jQuery对象中可能具有多个DOM对象,所以parent()获取的结果可能为多个元素 4.parents()    祖先元素 注:parents()方

jquery中4种层级选择器的差别和使用

我使用的是JQuery-2.1.1版本,在这个版本以及之前,JQuery中的层级选择器有4种.我们通过这4种选择器,来操作下面的HTML. <div id="outer"> <input type="button" id="button1"> <input type="button" id="button2"> <input type="button&qu

JQuery中的$符号的作用----网摘

jQuery中的“$” 在jQuery中,最频繁使用的符号“$”.$提供了各种各样丰富的功能, 包括选择页面中的一个或是一类元素,作为功能函数的前缀,window.onload的 完善,创建页面的DOM节点等... 1.选择器 在CSS中选择器的作用是选择页面中某一类(类别选择器)元素或者某一个元素(ID选择器) ,而jQuery中的"$"作为选择器,同样是选择某一类或某一类元素,只不过jQuery提供了 更多更全面的选择方式.并且为用户处理了浏览器的兼容问题 CSS可以通过如下代码来