11级_Java_曹建波 03.18 jQuery入门@选择器精讲

jQuery简介

jQuery是继Prototype之后又一个优秀的JavaScript库

jQuery理念:写得少,做得多.优势如下:

轻量级

强大的选择器

出色的DOM操作的封装

可靠的事件处理机制

完善的Ajax

出色的浏览器兼容性

链式操作方式

……

jQuery:HelloWorld

jQuery(document).ready(function(){

alert("hello!!");

});

$(document).ready(function(){

alert("hello!!");

});

jQuery对象

jQuery对象就是通过jQuery($())包装DOM对象后产生的对象

jQuery对象是jQuery独有的.如果一个对象是jQuery对象,那么它就可以使用jQuery里的方法:$(“#persontab”).html();

jQuery对象无法使用DOM对象的任何方法,同样DOM对象也不能使用jQuery里的任何方法

约定：如果获取的是jQuery对象,那么要在变量前面加上$.

var$variable=jQuery对象

varvariable=DOM对象

DOM对象转成jQuery对象

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

varoneDom=document.getElementById("one");

var$one=$(oneDom);

转换后就可以使用jQuery中的方法了

Query对象转成DOM对象

jQuery对象不能使用DOM中的方法,但如果jQuery没有封装想要的方法,不得不使用DOM对象的时候,有如下两种处理方法:

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

var$one=$("#one");

oneDom=$one[0];

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

var$one=$("#one");

oneDom=$one.get(0);

jQuery选择器

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

基本选择器

基本选择器是jQuery中最常用的选择器,也是最简单的选择器,它通过元素id,class和标签名来查找DOM元素(在网页中id只能使用一次,class允许重复使用).

层次选择器

如果想通过DOM元素之间的层次关系来获取特定元素,例如后代元素,子元素,相邻元素,兄弟元素等,则需要使用层次选择器.

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

过滤选择器

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

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

基本过滤选择器

内容过滤选择器

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

可见性过滤选择器

可见性过滤选择器是根据元素的可见和不可见状态来选择相应的元素

可见选择器:hidden不仅包含样式属性display为none的元素,也包含文本隐藏域(<inputtype=“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的元素