JQuery随笔（1） 选择器

JQuery选择器

  选择器可以让让我们选择html元素(标签)，并进行相应的操作。CSS样式中，使用选择器可以给特定的元素添加叠层样式，使得HTML元素展示出来的更加丰富多彩。而JQuery作为JavaScript的一个框架，其目的就是简化JS中的DOM操作，可以让我们写更少的代码来达到自己的目的。其对HTML元素的选择也是采用的CSS选择器的方式，JQuery1.xx版本的共有五十多个选择器。

  选择器更像是一种语义的规范，可以使我们相对精准的获取到自己想要的元素，而不用像DOM操作那样写上大量的代码。

JQuery中选择器的基本使用：

<script>
    var elements = $("selector");
</script>

 

选择器分类：

基本选择器

$("*")	选择所有的元素
$(“element”)	选择对应的元素，有多个时返回一个类似数组的对象
$("#idName")	id选择器,选择对应id = “idName“的元素
$(".className")	类选择器，选择对应的class="className"的元素
$(“selector1, selector2,…”)	对应选择器中所有的元素都会被选中，也是返回类似数组对象

 

层级选择器

$(“祖先元素 子孙元素”)	选择对应祖先元素下的所有子孙元素，例如$(“form input”)则选择所有form标签下的所有input标签
$(“parent > child”)	选择父节点的直接孩子节点

注：上述祖先节点，父节点，孩子节点可以类比数据结构中树结构的定义。
 

元素属性选择器

属性名称选择器	$(“element[attribute]”)	选择元素element下有属性attribute的元素
属性值选择器	$(“element[attribute=‘value’]”)	选择属性对应的属性值为value的元素，可以比上面的更加精确选中想要的元素
复合属性选择器	$(“element[attribute] [attribut2=‘value’]”)	可以看成是上两种的混合，就跟选择二维数组中的元素一样（注意这里两个方括号之间是没有空格的）

附：

使用属性值进行选择是，除了‘=’还可以用其他的来更达到我们要选择的目的：

例如

• $(“element[attribute != ‘value’]”)：可以选择属性值不为value的元素

• $(“element[attribute ^= ‘str’]”)： 可以选择属性值开头匹配str字符串的元素

• $(“element[attribute $= ‘str’]”)：可以选择属性值结尾匹配str字符串的元素

  等等~

过滤选择器

$(“element:first”)	选择所有标签名element的第一标签（元素）
$(“element:last”)	选择所以标签名为element的最后一个元素
$(“element:gt(index)”)	选择所有标签名为element中下标大于index的元素，可以看成是获取所有element名元素，在选择其小于index的元素
$(“element:eq(index)”)	选择所有标签名为element中下标大于index的元素
$(“element:lt(index)”)	选择所有标签名为element中下标小于index的元素
$(“element:even”)	选择所有标签名为element中下标为偶数的元素
$(“element:odd”)	选择所有标签名为element中下标为奇数的元素
$(“element:not(“selector”)”)	选择所有标签名为element，但是不被selector选择器选中的元素
$(":header")	选择标题元素，如<h1> ,<h2>等

 

表单对象属性选择器

$(“input:enabled”)	选择input标签下没有disabled属性标签
$(“input:disabled”)	选择input标签下有disabled属性标签
$(“input[name=‘checkboxName’]:checked”)	选择所有复选框中选中的元素，返回值可以当成数组使用
$(“select > option:selected”)	选择下拉框中选中的所有元素，可以设置多选

注意：这里下拉框中要写$("select>option:selected")而不能写$(“select:selected”),不然就只是选择select元素了，而不是选中对应的选项。

 
关于选择器的更多信息可：查看官方文档
JQuery本地文档下载：CSDN下载
JQuery各个版本下载：CSDN下载