当前位置: 代码迷 >> Web前端 >> 11级_Java_曹筑波 03.18 jQuery入门@选择器精讲
  详细解决方案

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

热度:196   发布时间:2013-03-21 10:08:17.0
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 对象

var variable = DOM 对象

DOM 对象转成 jQuery 对象

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

var oneDom=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 的元素也包含文本隐藏域 (<input  type=hidden>)和 visible:hidden 之类的元素

属性过滤选择器

属性过滤选择器的过滤规则是通过元素的属性来获取相应的元素

子元素过滤选择器

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

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

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

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

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

  相关解决方案