$(function () {}); //执行一个匿名函数
$(‘#box’); //进行执行的ID元素选择
$(‘#box’).css(‘color’, ‘red’); //执行功能函数
$(document).ready(function () {}); //jQuery等待加载
alert($('#box').get(0)); //ID 元素的第一个原生 DOM
多个库之间的冲突,,,如果还加了一个base库,后置的灰取得$所有权,就可以这样:
jQuery.noConflict(); //将$符所有权剔除
var $$ = jQuery;
选择器 CSS 模式 jQuery 模式 描述
元素名 div {} $('div') 获取所有 div 元素的 DOM 对象
ID #box {} $('#box') 获取一个 ID 为 box 元素的 DOM 对象
类(class) .box{} $('.box') 获取所有class为box的所有DOM对象
选择器 CSS 模式 jQuery 模式 描述
群组选择器 span,em,.box {} $('span,em,.box') 获取多个选择器的 DOM 对象
后代选择器 ul li a {} $('ul li a') 获取追溯到的多个 DOM 对象
通配选择器 * {} $('*') 获取所有元素标签的 DOM 对象
选择器 CSS 模式 jQuery 模式 描述
后代选择器 ul li a {} $('ul li a') 获取追溯到的多个 DOM 对象
子选择器 div > p {} $('div p') 只获取子类节点的多个 DOM 对象
next 选择器 div + p {} $('div + p') 只获取某节点后一个同级DOM对象
nextAll 选择器 div ~ p {} $('div ~ p') 获取某节点后面所有同级DOM对象
CSS 模式 jQuery 模式 描述
a[title] $('a[title]') 获取具有这个属性的 DOM 对象
a[title=num1] $('a[title=num1]') 获取具有这个属性=这个属性值的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 语法 说明 返回
: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') 选择当前被焦点的元素 集合元素
主意:focus 过滤器,必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。
而不是鼠标点击或者 Tab 键盘敲击激活的。
$('input').get(0).focus(); //先初始化激活一个元素焦点
$(':focus').css('background', 'red'); //被焦点的元素
内容过滤器
过滤器名 jQuery 语法 说明 返回
:contains(text) $(':contains("ycku.com")') 选取含有"ycku.com"文本的元素 元素集合
:empty $(':empty') 选取不包含子元素或空文本的元素 元素集合
:has(selector) $(':has(.red)') 选取含有 class 是 red 的元素 元素集合
:parent $(':parent') 选取含有子元素或文本的元素 元素集合
$('li').parent().css('background', '#ccc'); //选择当前元素的父元素
$('li').parents().css('background', '#ccc'); //选择当前元素的父元素及祖先元素
$('li').parentsUntil('div').css('background', '#ccc'); //选择当前元素遇到 div 父元素停止
可见性过滤器
过滤器名 jQuery 语法 说明 返回
:hidden $(':hidden') 选取所有不可见元素 集合元素
:visible $(':visible') 选取所有可见元素 集合元素
子元素过滤器
过滤器名 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 语法 说明 返回
is(s/o/e/f) $('li').is('.red') 传递选择器、DOM、jquery 对象 集合元素
或是函数来匹配元素结合
hasClass(class) $('li').eq(2).hasClass('red')其实就是 is("." + class) 集合元素
slice(start, end) $('li').slice(0,2) 选择从 start 到 end 位置的元素, 集合元素
如果是负数,则从后开始
filter(s/o/e/f) $('li').filter('.red')
end() $('div').find('p').end() 获取当前元素前一次状态 集合元素
contents() $('div').contents() 获取某元素下面所有元素节点, 集合元素
包括文本节点,如果是 iframe,
则可以查找文本内容
$('li').filter('.red, :first, :last').css('background','#ccc'); //增加了首尾选择
//特殊要求函数返回
$('li').filter(function () {
return $(this).attr('class') == 'red' && $(this).attr('title') == '列表 3';
}).css('background', '#ccc');