(jQuery笔记)基础核心 选择器

$(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');