jQuery 选择器

jQuery 是一个优秀的 JavaScript 库.

jQuery 理念: 写得少, 做得多.

jQuery 对象就是通过 jQuery($()) 包装 DOM 对象后产生的对象. jQuery 对象是 jQuery 独有的jQuery 对象无法使用 DOM 对象的任何方法, 同样 DOM 对象也不能使用 jQuery 里的任何方法.

约定:如果获取的是 jQuery 对象, 那么要在变量前面加上 $.  : var $variable = jQuery 对象;    var variable = DOM 对象.

使用jQuery前要先导入jQuery库。<script type="text/javascript" src="jquery-1.7.2.js"></script>

$(function(){代码}) 相当于 window.onload = function(){代码}

转换

  1. jQuery 对象转成 DOM 对象:

    (1) jQuery 对象是一个数组对象, 可以通过 [index] 的方法得到对应的 DOM对象.

    (2) 使用 jQuery 中的 get(index) 方法得到相应的 DOM 对象。

  2. DOM 对象转成 jQuery 对象:

    对于一个 DOM 对象, 只需要用 $() 把 DOM 对象包装起来(jQuery 对象就是通过 jQuery 包装 DOM 对象后产生的对象), 就可以获得一个 jQuery 对象.

jQuery 选择器

选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器。

1. 基本选择器

  它通过元素 id, class 和标签名来查找 DOM 元素(在网页中 id 只能使用一次, class 允许重复使用).

  

2. 层次选择器

  获取后代元素, 子元素, 相邻元素, 兄弟元素等。

  

注意:  (“prev ~ div”) 选择器只能选择 “# prev ” 元素后面的同辈元素; 而 jQuery 中的方法 siblings() 与前后位置无关, 只要是同辈节点就可以选取

3. 过滤选择器

  过滤选择器主要是通过特定的过滤规则来筛选出所需的 DOM 元素, 该选择器都以 “:” 开头。

  按照不同的过滤规则, 过滤选择器可以分为基本过滤, 内容过滤, 可见性过滤, 属性过滤, 子元素过滤和表单对象属性过滤选择器.

基本过滤选择器:

  

内容过滤选择器:

  内容过滤选择器的过滤规则主要体现在它所包含的子元素和文本内容上。

  

可见性过滤选择器:

  根据元素的可见和不可见状态来选择相应的元素

  

  (1) show(time): 可以使不可见的元素变为可见, time 表示时间, 以毫秒为单位

  (2) 可见选择器 :hidden 不仅包含样式属性 display 为 none 的元素, 也包含文本隐藏域 (<input  type=“hidden”>)和 visible:hidden 之类的元素

属性过滤选择器:

  通过元素的属性来获取相应的元素

  

 子元素过滤选择器:

  

  nth-child() 选择器详解如下:

    (1) :nth-child(even/odd): 能选取每个父元素下的索引值为偶(奇)数的元素

    (2):nth-child(2): 能选取每个父元素下的索引值为 2 的元素

    (3):nth-child(3n): 能选取每个父元素下的索引值是 3 的倍数 的元素

    (3):nth-child(3n + 1): 能选取每个父元素下的索引值是 3n + 1的元素

  注意:选取子元素, 需要在选择器前添加一个空格.

表单对象属性过滤选择器:

  此选择器主要对所选择的表单元素进行过滤

  

表单选择器:

  

  对于下拉框:实际被选择的不是 select, 而是 select 的 option 子节点,所以要加一个 空格.

  jQuery 对象遍历的方式使 each, 在 each 内部的 this 是正在得到的 DOM 对象, 而不是一个 jQuery 对象。

$("select :selected").each(function(){
	alert(this.value);
});

 

posted @ 2016-06-01 10:01  岳灵珊  阅读(149)  评论(0编辑  收藏  举报