jQuery CDN和下载地址

jQuery CDN地址 : http://www.bootcdn.cn/jquery/;

jQuery对象与互换DOM对象之间的转换

$(function(){
  var jQueryObject = $('div');  //获取div的jquery对象
  var DOMObject = document.getElementsByTagName('div');  //获取一个DOM对象
  
  consloe.log(jQueryObject.get(0));  //jQuery对象转换为DOM对象
  consloe.log($(DOMObject));  //DOM对象转换为jQuery对象
});

jQuery的选择器

1.简单选择器

选择器	jQuery代码	描述
元素名	$('div')	获取所有div的DOM对象
ID	$('#box')	获取一个ID为box元素的DOM对象
类(class)	$('.box')	获取一个class为box元素的DOM对象

2.进阶选择器

选择器	jQuery代码	描述
后代选择器	$('ul li a')	获取追溯到的多个 DOM 对象
子选择器	$('div > p')	只获取子类节点的多个 DOM 对象
next 选择器	$('div + p')	只获取某节点后一个同级 DOM对象
nextAll 选择器	$('div ~ p')	获取某节点后面所有同级 DOM对象

jQuery还提供了效率相对于选择器稍高的方法

后代选择器

$('#box p').css('color', 'red'); //全兼容

jQuery 为后代选择器提供了一个等价 find()方法

$('#box').find('p').css('color', 'red'); //和后代选择器等价

---

子选择器，孙子后失效

$('#box > p').css('color', 'red'); //兼容 IE6

jQuery 为子选择器提供了一个等价 children()方法：

$('#box').children('p').css('color', 'red'); //和子选择器等价

---

next 选择器(下一个同级节点)

$('#box+p').css('color', 'red'); //兼容 IE6

jQuery 为 next 选择器提供了一个等价的方法 next()：

$('#box').next('p').css('color', 'red'); //和 next 选择器等价

---

nextAll 选择器(后面所有同级节点)

$('#box ~ p').css('color', 'red'); //兼容 IE6

jQuery 为 nextAll 选择器提供了一个等价的方法 nextAll()：

$('#box').nextAll('p').css('color', 'red'); //和 nextAll 选择器等价

---

3.属性选择器

css模式	jQuery模式	描述
a[title]	$('a[title]')	获取具有这个属性的 DOM 对象
a[title=num]	$('a[title=num]')	获取具有这个属性=这个属性值的 DOM对象
a[title^=num]	$('a[title^=num]')	获取具有这个属性且开头属性值匹配的DOM 对象
a[title	=num]	$('a[title	=num]');	获取具有这个属性且等于属性值或开头属性值匹配后面跟一个“-”号的 DOM 对象
a[title$=num]	$('a[title$=num]');	获取具有这个属性且结尾属性值匹配的DOM 对象
a[title!=num]	$('a[title!=num]');	获取具有这个属性且不等于属性值的DOM 对象
a[title~=num]	$('a[title~=num]');	获取具有这个属性且属性值是以一个空格分割的列表，其中包含属性值的 DOM 对象
a[title*=num]	$('a[title*=num]')	获取具有这个属性且属性值含有一个指定字串的 DOM 对象
a[bbb][title=num1]	$('a[bbb][title=num1]')	获取具有这个属性且属性值匹配的 DOM对象

jQuery的过滤器

1.基本过滤器

过滤器名	jQuery语法	说明	返回
:first	$('li:first')	选取第一个元素	单个元素
:last	$('li:last')	选取最后一个元素	单个元素
:not(selector)	$('li:not(.red)')	选取 class 不是 red 的 li 元素	集合元素
:even	$('li.even')	选择索引(0 开始)是偶数的所有元素	集合元素
:odd	$('li:odd')	选择索引(0 开始)是奇数的所有元素	集合元素
:eq(index)	$('li:eq(2)')	选择索引(0 开始)等于 index 的元素	单个元素
:gt(index)	$('li:gt(2)')	选择索引(0 开始)大于 index 的元素	集合元素
:lt(index)	$('li.lt(2)')	选择索引(0 开始)小于 index 的元素	集合元素
:header	$(':header')	选择标题元素，h1 ~ h6	集合元素
:animated	$(':animated')	选择正在执行动画的元素	集合元素
:focus	$(':focus')	选择当前被焦点的元素	集合元素

jQuery 为最常用的过滤器提供了专用的方法，已达到提到性能和效率的作用：

$('li').eq(2).css('background', '#ccc'); //元素 li 的第三个元素，负数从后开始
$('li').first().css('background', '#ccc'); //元素 li 的第一个元素
$('li').last().css('background', '#ccc'); //元素 li 的最后一个元素
$('li').not('.red').css('background', '#ccc'); //元素 li 不含 class 为 red 的元素

2.内容过滤器

过滤器名	jQuery 语法	说明	返回
:contains(text)	$(':contains("ycku.com")')	选取含有"ycku.com"文本的元素	元素集合
:empty	$(':empty')	选取不包含子元素或空文本的元素	元素集合
:has(selector)	$(':has(.red)')	选取含有 class 是 red 的元素	元素集合
:parent	$(':parent')	选取含有子元素或文本的元素	元素集合

jQuery 提供了一个 has()方法来提高:has 过滤器的性能：

$('ul').has('.red').css('background', '#ccc'); //选择子元素含有 class 是 red 的元素

jQuery 提供了一个名称和:parent 相似的方法，但这个方法并不是选取含有子元素或文本的元素，而是获取当前元素的父元素，返回的是元素集合。

$('li').parent().css('background', '#ccc'); //选择当前元素的父元素
$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及祖先元素
$('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到 div 父元素停止

3.可见性过滤器

过滤器名	jQuery 语法	说明	返回
:hidden	$(':hidden')	选取所有不可见元素	集合元素
:visible	$(':visible')	选取所有可见元素	集合元素

4.子元素过滤器

过滤器名	jQuery 语法	说明	返回
:first-child	$('li:first-child')	获取每个父元素的第一个子元素	集合元素
:last-child	$('li:last-child')	获取每个父元素的最后一个子元素	集合元素
:only-child	$('li:only-child')	获取只有一个子元素的元素	集合元素
:nth-child(odd/even/eq(index))	$('li:nth-child(even)')	获取每个自定义子元素的元素(索引值从 1 开始计算)	集合元素

下一篇: jQuery的基础DOM,CSS操作篇