Jquery选择器
Posted fyfighting
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Jquery选择器相关的知识,希望对你有一定的参考价值。
Jquery选择器主要分两种:
一.通过css选择器选取元素
二.通过条件过滤选取元素
css选择器选取元素又分为三种:
1.基本选择器
2.层次选择器
3.属性选择器
条件过滤选取元素又分为两种:
1.基础过滤选择器
2.可见性过滤选择器
名称 |
语法结构 |
描述 |
返回值 |
示例 |
标签选择器 |
element |
根据给定的标签名匹配元素 |
元素集合 |
$("h2")选取所有h2元素 |
类选择器 |
.class |
根据给定的class匹配元素 |
元素集合 |
$(".title")选取所有class为title的元素 |
ID选择器 |
#id |
根据给定的id匹配元素 |
单个元素 |
$("#title")选取id为title的元素 |
并集选择器 |
selector,selector2,..selectorN |
将每一个选择器匹配的元素合并后一起返回 |
元素集合 |
$("div,p,.title")选取所有div、p和拥有class为title的元素 |
交集选择器 |
element.cla或element#id |
匹配指定class或id的某元素或元素集合(若在同一页面中指定id的元素返回值,则一定是单个元素;若指定class的元素,则可以是单个元素,也可以是元素集合) |
单个元素或元素集合 |
$("h2.title")选取所有拥有class为title的h2元素 |
全局选择器 |
* |
匹配所有元素 |
集合元素 |
$("*")选取所有元素 |
层次选择器:
1、$(“div li”)获取div下的所有li标签(后代,子、子的子标签…)。
2、$(“div > li”)获取div下的直接li子标签。
3、$(“.menuitem + div”)获取样式名为menuitem之后的第一个div标签。
4、$(“.menuitem ~ div”)获取样式名为menuitem之后的所有div标签。
属性过滤选择器:
1、$(“div[id]”)选取有id属性的<div>。
2、$(“div[title=test]”)选取title属性为“text”的<div>。
3、$(“div[title!=test]”)选取title属性不为“text”的<div>。
基本过滤选择器:
1、:first选择第一个标签。$(“div:first”)选取第一个<div>。
2、:last选取最后一个标签。$(“div:last”)选取最后一个<div>。
3、:not选取不满足选择器条件的标签。$(“input:not(.myclass)”)选取样式名不是myclass的<input>标签。
4、:even、:odd,选取索引是奇数、偶数的标签:$(“input:event”)选取索引是奇数的<input>。
5、:eq、:gt、:lt选取索引等于、大于、小于索引序号的标签,比如$(“input:lt(1)”)选取索引小于1的<input>。
6、$(“:header”)选取所有的h1…h6标签
以上是关于Jquery选择器的主要内容,如果未能解决你的问题,请参考以下文章