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操作篇
