[关闭]
@guoxs 2015-07-30T15:47:21.000000Z 字数 3926 阅读 3454

jQuery基础之选择器

jQuery


1、引用jQuery

  1. <script src="http://libs.baidu.com/jquery/1.9.0/jquery.js" type="text/javascript"></script>

JavaScript代码:

  1. var page_ps = document.getElementByTagName("p");
  2. for(var i = 0; i< page_pslength;i++){
  3. page_ps[i].innerHTML = "Hello world";
  4. }

对应的jQuery代码:

  1. $("p").html("Hello imooc!");

jQuery更加的简洁方便,我们在处理DOM时不必关心功能的实现细节。 $()就是jQuery中的函数,它的功能是获得()中指定的标签元素。如示例中$("p")会得到一组P标签元素,其中“p”表示CSS中的标签选择器。$()中的()不一定是指定元素,也可能是函数。

在jQuery中 $()方法等价于jQuery()方法,前者比较常用,是后者的简写。一般只有在$()与其它语言冲突时才会使用jQuery()方法。

2、jQuery基础选择器

id选择器

  1. $("#my_id") //其中#my_id表示根据id选择器获取页面中指定的标签元素,且返回唯一一个元素。
  1. $("#default").html($("#divtest").html()); //html()方法的功能是设置或获取元素中显示的内容

element选择器

  1. $("element")
  2. $("button").attr("disabled","true"); //将按钮灰度去掉

class选择器

  1. $(".class")

类似的有其他选择器:

  1. $("*")
  2. $("form *").attr("disabled", "true"); // 将<form>元素包含下的全部表单型元素都设为不可用。

sele1,sele2,seleN选择器

  1. $("sele1,sele2,seleN")
  2. 其中参数sele1sele2seleN为有效选择器,每个选择器之间用“,”号隔开,它们可以是之前提及的各种类型选择器,如$("#id")、$(".class")、$("selector")选择器等。

ance desc选择器

在实际应用开发中,常常是多个元素嵌套在一起,形成复杂的层次关系,通过层次选择器,可以快速定位某一层次的一个或多个元素,ance desc选择器就是其中之一,它的调用格式如下:

$("ance desc")

其中ance desc是使用空格隔开的两个参数。ance参数(ancestor祖先的简写)表示父元素;desc参数(descendant后代的简写)表示后代元素,即包括子元素、孙元素等等。两个参数都可以通过选择器来获取。

parent > child选择器

$("parent > child")
child参数获取的元素都是parent选择器的子元素,它们之间通过“>”符号来表示一种层次关系

prev + next选择器

通过prev + next选择器就可以查找与“prev”元素紧邻的下一个“next”元素,格式如下:
$("prev + next")
其中参数prev为任何有效的选择器,参数“next”为另外一个有效选择器,它们之间的“+”表示一种上下的层次关系,也就是说,“prev”元素最紧邻的下一个元素由“next”选择器返回的并且只返回唯的一个元素。

prev ~ siblings选择器

prev 元素后面全部相邻的元素,它的调用格式如下:
$("prev ~ siblings")
其中参数prev与siblings两者之间通过“~”符号形成一种层次相邻的关系,表明siblings选择器获取的元素都是prev元素之后的同辈元素

3、jQuery过滤选择器

:first过滤选择器

获取一组相同标签元素中的第1个元素
$("li:first")
:first过滤选择器的功能是获取第一个元素,常常与其它选择器一起使用,获取指定的一组元素中的第一个元素。

:eq(index)过滤选择器

如果想从一组标签元素数组中,灵活选择任意的一个标签元素,我们可以使用
:eq(index)

  1. $("li:eq(3)") //取得第四个li

其中参数index表示索引号(即:一个整数),它从0开始,如果index的值为3,表示选择的是第4个元素。

:contains(text)过滤选择器

:contains('text')
选择包含指定字符串的全部元素,它通常与其他元素结合使用,获取包含“text”字符串内容的全部元素对象。其中参数text表示页面中的文字。

  1. <ol>
  2. <li>强大的"jQuery"</li>
  3. <li>"javascript"也很实用</li>
  4. <li>"jQuery"前端必学</li>
  5. <li>"java"是一种开发语言</li>
  6. <li>前端利器——"jQuery"</li>
  7. </ol>
  8. <script type="text/javascript">
  9. $("li:contains('jQuery')").css("background", "green");
  10. </script>

:has(selector)过滤选择器

:has(selector)过滤选择器的功能是获取选择器中包含指定元素名称的全部元素,其中selector参数就是包含的元素名称,是被包含元素。

:hidden过滤选择器

:hidden过滤选择器的功能是获取全部不可见的元素,这些不可见的元素中包括type属性值为hidden的元素。

  1. <input id="hidstr" type="hidden" value="我已隐藏起来"/>
  2. <div></div>
  3. <script type="text/javascript">
  4. var $strHTML = $("input:hidden").val();
  5. $("div").html($strHTML);
  6. </script>

:visible过滤选择器

:hidden过滤选择器相反,:visible过滤选择器获取的是全部可见的元素,也就是说,只要不将元素的display属性值设置为“none”,那么,都可以通过该选择器获取。

[attribute=value]属性选择器

[attribute=value]属性选择器的功能是获取与属性名和属性值完全相同的全部元素,其中[]是专用于属性选择器的括号符,参数attribute表示属性名称,value参数表示属性值。

相反,[attribute!=value]属性选择器的功能是获取不包含属性名,或者与属性名和属性值不相同的全部元素。

[attribute*=value],它可以获取属性值中包含指定内容的全部元素。

:first-child子元素过滤选择器

使用:first过滤选择器可以获取指定父元素中的首个子元素,但该选择器返回的只有一个元素,并不是一个集合,而使用:first-child子元素过滤选择器则可以获取每个父元素中返回的首个子元素,它是一个集合,常用多个集合数据的选择处理。
相反有:last-child过滤器

4、jQuery表单选择器

:input表单选择器

:input表单选择器的功能是返回全部的表单元素,不仅包括所有<input>标记的表单元素,而且还包括<textarea><select><button>标记的表单元素,因此,它选择的表单元素是最广的。

  1. $("#frmTest :input").addClass("bg_blue"); //将input背景变为蓝色,注意空格
  2. addClass()方法的功能是为元素添加指定的样式类别名称。

:text表单文本选择器

:text表单文本选择器可以获取表单中全部单行的文本输入框元素,单行的文本输入框就像一个不换行的字条工具,使用非常广泛。

:password表单密码选择器

:password选择器的功能是获取表单中全部的密码输入文本框元素。

:radio单选按钮选择器

:radio选择器可轻松获取表单中的全部单选按钮元素。

:checkbox复选框选择器

:checkbox选择器可以快速定位并获取表单中的复选框元素。

:submit提交按钮选择器

通常情况下,一个表单中只允许有一个“type”属性值为“submit”的提交按钮,使用:submit选择器可获取表单中的这个提交按钮元素。

  1. jQuery(("#frmTest input:submit").addClass("bg_red");)

:image图像域选择器

当一个<input>元素的“type”属性值设为“image”时,该元素就是一个图像域,使用:image选择器可以快速获取该类全部元素。例如,在表单中添加两种类型的图像元素,使用:image选择器获取其中的一种图像元素,并改变该元素的边框样式。
:image<input><img>

:button表单按钮选择器

:button选择器能获取且只能获取“type”属性值为“button”的<input><button>这两类普通按钮元素。

:checked选中状态选择器

有一些元素存在选中状态,如复选框、单选按钮元素,选中时“checked”属性值为“checked”,调用:checked可以获取处于选中状态的全部元素

:selected选中状态选择器

与:checked选择器相比,:selected选择器只能获取<select>下拉列表框中全部处于选中状态的<option>选项元素。

添加新批注
在作者公开此批注前,只有你和作者可见。
回复批注