jquery选择器

jquery选择器就是为了选择界面上的元素的。

jquery 选择器=css选择器选择器{属性:属性值}+自定义选择器

jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。

jQuery 选择器基于元素的 id、类、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器,除此之外,它还有一些自定义的选择器。

jQuery 中所有选择器都以美元符号开头:$()。

1.基本选择器

1. 元素选择器:基于元素名选取元素。

最常见的css选择器当属元素选择器了,在HTML文档中该选择器通常是指某种HTML元素

比如p,h2,span,a,div乃至html

使用方式:$("element")

多个元素:$("element1,element2,element3,...")

2.类选择器 .class 通过指定的 class 查找元素。

2.1 单类选择器

单纯的元素选择器似乎还过于粗糙了,比如我们希望在文档中突出加粗显示某种重要的内容,例如稿件的截至日期。问题在于我们不能确定稿件的截至日期将会出现在哪种元素中,或者它可能出现在多种不同的元素中。这个时候,我们可以考虑使用类选择器(class selector)要使用类选择器我们需要首先对文件元素添加一个class属性,

使用方法:点号”.”加上类名就组成了一个类选择器$(".class")

2.2 多类选择器

在实践的做法中,元素的calss属性可能不止包含一个单词,而是一串单词,各个单词之间用空格隔开。

注意会选择含有此类的元素,不管该元素还包含多少其他的类,也不管他们在类列表中出现的顺序。

使用方式:$(".class1,.class2")

3.id选择器:#id 唯一 元素添加一个id属性,

ID选择器和类选择器有些类似,但是差别又十分显著。首先一个元素不能像类属性一样拥有多个类,一个元素只能拥有一个唯一的ID属性。其次一个ID值在一个HTML文档中只能出现一次,也就是一个ID只能唯一标识一个元素(不是一类元素,而是一个元素)。类似类属性,在使用ID选择器前首先要在元素中添加ID属性。id 选择器可以为标有特定 id 的 HTML 元素指定特定的样式。id 选择器以 "#" 来定义。它是唯一属性,区别于类选择器。

使用方式:$("#id值")

4.通配符选择器 *

选取所有的元素$("*")

5.上下文选择器 (contextual selectors)

,后代选择器的规则就是用空格连接2个或多个选择器。空格的含义为:…的后代。多个选择器的情况如下: ul li li { ...}

6. 组合选择器

$(".classname .classname1 #id1") 使用空格分开就是取交集 同时满足 与后面的属性选择器相似

$(".classname,.classname1,#id1") 使用逗号分开就是取并集

2.层级选择器

ancestor descendant //后代元素选择器

("parent descendant")选择器选取指定元素的后代的所有元素。

$("#id .classname ")

parent > child //子元素选择器。

$("#id>.classname ") 选取指定元素的直接子元素的所有元素

prev + next //相邻兄弟元素选择器 匹配所有紧接在 prev 元素后的 next 元素

$("#id + .classname ")

prev ~ sibling //通用兄弟元素选择器 匹配 prev 元素之后的所有同辈 siblings 元素

$("#id ~ .classname ")

3.过滤选择器:基本过滤;内容过滤;可见性过滤;属性过滤;子元素过滤;表单对象属性过滤.

基本过滤选择器

:first 相同的多个元素时选取第一个,不用管该元素属于谁

$("li:first")

:last

$("li:last") //最后一个li

:not(selector)

$("li:not(#runoob)") //挑选除 id="runoob" 以外的所有li

注意选择器不需要使用引号

:even

$("li:even") //挑选下标为偶数的li

:odd

$("li:odd") //挑选下标为奇数的li

:eq(index)

$("li:eq(4)") //下标等于 4 的li(第五个 li 元素)

:gt(index)

$("li:gt(2)") //下标大于 2 的li 不包括2

:lt(index) 匹配所有小于给定索引值的元素

$("li:lt(2)") //下标小于 2 的li 不包括2

:header 匹配如 h1, h2, h3之类的标题元素

:animated 匹配所有正在执行动画效果的元素

:focus 匹配当前获取焦点的元素。

lang 选择匹配语言的元素

对于HTML元素,语言值由lang属性决定,也可能由来自meta元素或HTTP头信息决定。

target

root

在HTML中,文档的根元素,和$(":root")选择的元素一样, 永远是<html>元素。

内容过滤选择器

:empty

匹配所有不包含子元素或者文本的空元素

:parent

匹配包含文本(text)或者含有子元素的元素

:has(selector)

包含指定子元素的元素

:contains(text)

包含指定文本内容的指定元素

使用方式:$("元素名称:empty")

可见性过滤选择器

$("li:hidden") //匹配所有不可见元素,或type为hidden的元素

$("li:visible") //匹配所有可见元素

属性过滤选择器

注意属性与属性值的区别

[attribute] 选择含有属性attr的元素

[attribute=value] 选择属性值等于value的元素

[attribute!=value] 选择属性值不等于value的元素

[attribute^=value] 选择属性值以value开始的元素

[attribute$=value]选择属性值以value结束的元素

[attribute*=value]选择属性值包含value结束的元素

[attrSel1][attrSel2][attrSelN] 选取同时满足多个属性的条件的元素

$("div[id]") //所有含有 id 属性的 div 元素

$("div[id='123']") // id属性值为123的div 元素

$("div[id!='123']") // id属性值不等于123的div 元素

$("div[id^='qq']") // id属性值以qq开头的div 元素

("div[id='zz']") // id属性值以zz结尾的div 元素

$("div[id*='bb']") // id属性值包含bb的div 元素

("input[id][name='man']") //多属性选过滤,同时满足两个属性的条件的元素

子元素过滤选择器

:first-child

:last-child

:nth-child

:only-child

:nth-last-child()

:first-of-type

:last-of-type

:nth-last-of-type()

:nth-of-type()

:only-of-type

表单对象属性过滤选择器

:enabled 匹配所有可用元素

:disabled 匹配所有不可用元素

:checked 匹配所有选中的被选中元素(复选框、单选框等,不包括select中的option)

:selected 匹配所有选中的option元素

$("input:enabled") // 匹配可用的 input

$("input:disabled") // 匹配不可用的 input

$("input:checked") // 匹配选中的 input

$("option:selected") // 匹配选中的 option

4.表单选择器

$(":input") //匹配所有 input, textarea, select 和 button 元素

(":text") //所有的单行文本框,(":text") 等价于("[type=text]"),推荐使用("input:text")效率更高,下同

$(":password") //所有密码框

$(":radio") //所有单选按钮

$(":checkbox") //所有复选框

$(":submit") //所有提交按钮

$(":reset") //所有重置按钮

$(":image") //匹配所有图像域

$(":hide") //匹配所有不可见元素,或者type为hidden的元素

$(":button") //所有button按钮

$(":file") //所有文件域

5.其他选择器

this选择器

| $(this) | 选取当前 HTML 元素 |

©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 215,539评论 6 497
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 91,911评论 3 391
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 161,337评论 0 351
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 57,723评论 1 290
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 66,795评论 6 388
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 50,762评论 1 294
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 39,742评论 3 416
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 38,508评论 0 271
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 44,954评论 1 308
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 37,247评论 2 331
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 39,404评论 1 345
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 35,104评论 5 340
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 40,736评论 3 324
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 31,352评论 0 21
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,557评论 1 268
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 47,371评论 2 368
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 44,292评论 2 352

推荐阅读更多精彩内容