2014
10-08

jQuery

19. jQuery7

一、DOM对象和jQuery对象

1、概念

DOM对象:通过DOM解析得到的HTML页面元素就是DOM对象,如var username = document.getElementById(“username”);

jQuery对象:通过jQuery包装DOM对象后产生之后的对象就是jquery 对象,如var $username = $(“#username”);

在jquery 里面只有一个对象jquery == $

jQuery对象不能使用DOM对象的属性和方法,DOM对象也不能使用jQuery对象的属性和方法。因此约定:如果获取的是jQuery对象,那么要在变量前面加上$。

2、相互转换

DOM对象 –> jQuery对象:var $username = $(username);

jQuery对象 –> DOM对象:两种方式:var username1 = $username[0];或var username2 = $username.get(0);

通过jQuery方式获取到的对象是一个DOM对象的数组。

 

jQuery相对DOM来讲,具有相对完善的错误处理机制:

当获取到一个不存在的页面元素后:

DOM方式:var username = document.getElementById(“username111″),打印username.value会出错。

jQuery方式:var $username = $(“#username111″),打印$username.val(),输出undefined。

二、jQuery选择器

jQuery中的选择器集成了Css中选择器的风格,都是用来选择页面上的DOM元素。且jQuery选择出来的元素都是一个DOM对象的数组。

1、基本选择器

直接通过元素id、class和标签名来查找DOM元素。

jQuery table01

2、层次选择器

通过DOM元素之间的层次关系(节点树)来获取特定元素,例如后代元素、子元素、相邻元素、兄弟元素等。

jQuery table02

注:

① 层次选择器包括两个基本选择器,选择的是后面的选择器。

后代元素子元素的区别:后代元素包括子元素!除了子元素外,孙子元素……也是后代元素。

③ “~” 只会选择prev之后的兄弟元素,要想选择所有的兄弟元素可用siblings()方法,如:$(“form”).siblings(“input”)表示匹配所有和form元素同级的input兄弟元素。

3、过滤选择器

通过特定的过滤规则来筛选出所需的DOM元素,该选择器都以 “:” 开头。按照不同的过滤规则,过滤选择器可分为基本过滤、内容过滤、可见性过滤、属性过滤、子元素过滤和表单对象属性过滤选择器。

1)基本过滤选择器

jQuery table03

2)内容过滤选择器

元素的内容包括:子元素、文本内容,内容过滤,即依据元素的子元素或文本内容进行过滤。

jQuery table04

3)可见性过滤选择器

依据元素的可见性(display:none / block)进行过滤

jQuery table05

注:

:hidden过滤选择器:若input 元素的 type 属性为 “hidden”,也会被匹配到。即display:none和input type=”hidden”的都会被匹配到。

/**
 * Demo:遍历所有隐藏域,并打印它们的值
 *    index:当前遍历的数组的索引(元素的数组)
 *    dom:当前遍历的dom元素,因为选择器选择的结果是一个数组对象,这个数组里面放的就是dom
 */
$("input:hidden").each(function(index,dom){
	alert($(dom).val());
})

4)属性过滤选择器

依据元素的属性进行过滤,该选择器没有以“:”开头。

jQuery table06

除此之外,属性过滤选择器还可以是以上选择器的组合(复合属性选择器),如:$(“input[id][name$='man']“),表示匹配所有含有id属性,并且它的name属性是以man结尾的input元素。

5)子元素过滤选择器

依据元素的子元素进行过滤

jQuery table07

注:

① :nth-child(index)的用法有点类似于:eq(index),只是nth-child的索引从1开始,eq的索引从0开始。除此之外,:nth-child还可以这么用::nth-child(even)、:nth-child(odd)、:nth-child(3n)、:nth-child(3n+1)等。

② (☆)在上面的示例中,父元素为ul,要匹配的子元素为li,所以可以写成:$(“ul li:nth-child(2)”)。当然,ul元素下如果只有li子元素,此时li可以不写,即写成$(“ul :nth-child(2)”),注意:此时冒号前面的空格一定不能丢!

6)表单对象属性过滤选择器

依据表单元素的属性进行过滤

jQuery table08

7)表单过滤选择器

jQuery table09

4、综合练习

Demo1:var $li=$(“ul>li:gt(3):not(‘:last’)”);

选择ul元素中第4个到倒数第二个li子元素。


jQuery》有 3 条评论

  1. 广东硅谷学院 说:

    #广东硅谷学院#学好IT好就业选硅谷IT,学技能拿文凭事半功倍,紧跟专业教师一起冲浪IT行业。我们有建设学习型专业师资团队,教师领跑学生紧随其后。(QQ:800015777,电话0754-88989555)

留下一个回复

你的email不会被公开。