jQuery 选择器的写法是 $("") , $是函数名称,后面紧跟着的是函数参数,它会根据传参数值来返回不同的选择器对象。如 $("#box"),它会找到并返回 id 为 box 的元素。

语法描述
$("#id")i d 选择器
$(".class")class 选择器
$("div")标签选择器
$("div a")后代选择器
等等..........

属性选择器

属性选择器,会根据属性值来匹配 HTML 元素.

语法描述
$("[属性名]")匹配具有指定属性的元素
$("[属性名='属性值']")匹配与值相等的元素
$("[属性名!='属性值']")匹配与值不相等的元素
$("[属性名^='属性值']")匹配以值开头的元素
$("[属性名$='属性值']")匹配以值结尾的元素
$("[属性名*='属性值']")匹配包含值的元素

以 Box 设置背景和宽高为例.

1.匹配指定属性的元素

<div id="Box"></div>
<script type="text/javascript">
    $("[id]").css({"width":"100px","height":"100px","background-color":"#000000"});
</script>

2.匹配与值相等的元素

<div id="Box"></div>
<script type="text/javascript">
    $("[id='Box']").css({"width":"100px","height":"100px","background-color":"#000000"});
</script>

3.匹配与值不相等的元素

<div id="Box2"></div>
<script type="text/javascript">
    $("[id!='Box']").css({"width":"100px","height":"100px","background-color":"#000000"});
</script>

4.匹配以值开头的元素

<div id="Box"></div>
<script type="text/javascript">
    $("[id^='B']").css({"width":"100px","height":"100px","background-color":"#000000"});
</script>

5.匹配以值结尾的元素

<div id="Box"></div>
<script type="text/javascript">
    $("[id$='x']").css({"width":"100px","height":"100px","background-color":"#000000"});
</script>

6.匹配包含值的元素

<div id="BoxDiv"></div>
<script type="text/javascript">
    $("[id*='Div']").css({"width":"100px","height":"100px","background-color":"#000000"});
</script>

位置选择器

位置选择器是 jQuery 用于快速匹配处于某个位置的 HTML 元素的一种选择器.

选择器描述
$("selector:first")匹配第一个元素
$("selector:last")匹配最后一个元素
$("selector:odd")匹配索引值为奇数的元素
$("selector:even")匹配索引值为偶数的元素
$("selector:eq(n)")匹配集合中索引为 n 的元素
$("selector:gt(n)")匹配集合中索引大于 n 的元素
$("selector:lt(n)")匹配集合中索引小于 n 的元素

选择器对象方法

选择器找的是网页元素 , 而选择器的方法可以做一些特别操作

方法描述
$("选择器").not()去除某个元素
$("选择器").add()追加某个元素
$("选择器").parent()查找父级元素
$("选择器").chidren()查找下级元素
$("选择器").fin()相当于后代选择器
$("选择器").siblings()查找兄弟节点
$("选择器").nextAll()查找元素全部的下级元素
$("选择器").prevtAll()查找元素全部的上级元素
$("选择器").hasClass()查找是否含有特定的类,返回布尔