jquery CSS选择器及表单选择器

jquery CSS选择器及表单选择器

一 普通选择器

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

$('div').css('color','red');      //返回多个元素

$('#box').css('color', 'red');  //返回单个元素

$('.box').css('color', 'red');   //返回多个元素

二 进阶选择器

        $('span,em,.box').css('color','red');//群组选择器
	$('ul li a').css('color','red');     //后代选择器
	$('*').css('color','red');           //通配选择器，影响性能建议少用

三 过滤选择器
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')		选择当前被焦点的元素		集合元素

2 内容过滤器

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

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开始计算)

 集合元素

 

 

5 其他方法

方法名	jQuery 语法	说明	返回
is(s/o/e/f)	$('li').is('.red')	传递选择器、DOM、jquery对象	集合元素

四 表单选择器

方法名	描述	返回
:input	选取所有 input、textarea、select和 button元素	集合元素
:text	选择所有单行文本框，即 type=text	集合元素
:password	选择所有密码框，即 type=password	集合元素
:radio	选择所有单选框，即 type=radio	集合元素
:checkbox	选择所有复选框，即 type=checkbox	集合元素

:submit	选取所有提交按钮，即 type=submit	集合元素
:reset	选取所有重置按钮，即 type=reset	集合元素
:image	选取所有图像按钮，即 type=image	集合元素
:button	选择所有普通按钮，即 button元素	集合元素
:file	选择所有文件按钮，即 type=file	集合元素
:hidden	选择所有不可见字段，即 type=hidden	集合元素

五．表单过滤器

jQuery 提供了四种表单过滤器，分别在是否可以用、是否选定来进行表单字段的筛选过滤。

 表单过滤器

方法名		描述	返回
:enabled		选取所有可用元素	集合元素
:disabled		选取所有不可用元素	集合元素
:checked		选取所有被选中的元素，单选和复选字段	集合元素
:selected		选取所有被选中的元素，下拉列表	集合元素
$(':enabled').size();		//获取可用元素
$(':disabled).size();		//获取不可用元素
$(':checked).size();		//获取单选、复选框中被选中的元素
$(':selected).size();		//获取下拉列表中被选中的元素