[JQuery] 选择器
用JQuery选择器选择出来的是个JQuery对象,他只能用JQuery提供的方法来操作,不能用原生的!!如果想把一个JQuery对象变成原生对象可以这样写
$("#box")[0]
或者
$("#box").get(0)
1.基本选择器
**1) ID选择器 ** ->选择获取一个元素
语法:$("#box")
例子:
<body>
<div id="box"></div>
</body>
<script>
var box=document.
2)类选择器 ->JQ元素集合
$(".box")
标签选择器 ->JQ元素集合
$("div")
通配符选择器 ->JQ元素集合
$("*");
集合选择器 ->JQ元素集合
$("div,p,.box")
2.层次选择器
1) 后代选择器 ->JQ集合
$("#box1 p")
3) 子代选择器 ->JQ集合
$("#box>p")
下一个弟弟 ->
$("#box"+)
$("#box"+div)
$("#box+.box")
所有的弟弟 ->JQ元素集合
$("#box~div")
$("box~")
3.基本过滤选择器
:fist
$("div :first")
⬆️表示会找到所有的div;找到第一个有孩子的div 中第一个孩子元素
$("div:first")
⬆️表示所有的div中的第一个div
:last 只能选择一个
:not
$("div:not(.box)") 所有class名不是box的div
:odd ->奇数选择
$("div:odd") 表示索引是奇数的div
:even 偶数选择
$("div:even") ->索引是偶数的
:eq(索引) ->选取指定索引的元素
$("div:eq(1)") 选择索引为1 的div
gt(索引)
$("div:gt(2)") ->表示选取索引大于2的div
:lt(索引)
$("div:lt(2)") ->表示索引小于2的div
:header 选择所有的h(h1-h6)标签
$(".div :header") 表示类名为div下面的h标签
:animated ->选择所有进行动画的标签(JS动画,CSS动画获取不到)
4.内容过滤选择器
1) :contains("内容")
$("div:contains('我')") ->所有的div中内容含有"我"的div
2) :has()
$("div:has(p)") 所有包含p标签的div
3) :empty 空元素选择
4) :parent 非空元素选择
5.可见性过滤选择器
1) :hidden 隐藏元素选择
2) :visible 可见元素选择
6.属性过滤选择器
1) :
$("div[id]") 表示所有有ID名的div
$("div[class=box]") 所有class名等于box的div
$("div[class!=box]") 所有class不等于box的div
$("div[class^=box]") 所有以box开头的div
$("div[class$=box]") 所有以box结尾的div
$("div[class*=box]") 所有clss含有box的div
$("div[clss|=box]") 所有class名为box的或者是以box-作为前缀的div
$("div[class~=box]") 所有class以空格分开后的class名为box的div
7.子元素过滤选择器
1) nth-child(1) ->第一个孩子
$("div p:nth-child(1)")
2) nth-child(odd) 第奇数个孩子
$("div span:nth-child(odd)")
** :nth-child(even)** 第偶数个孩子
$("div span:nth-child(even)")
** :nth-child(3n)** n从1开始 是第3个倍数个孩子
$("div span:nth-child(3n)");
first-child
