您的位置:首页 > Web前端 > JQuery

Jquery 选择器

2016-01-15 15:26 656 查看
// 这里的tagName指的是具体的标签名
//用于匹配所有HTML标签名为tagName的元素
jQuery( "tagName" )

//这里的selector1、selector2、selectorN都是具体的选择器
//用于将多个不同选择器获取的元素合并到一起
jQuery( "selector1, selector2 [, selectorN...]" )

//jQuery的ancestor descendant选择器(后代选择器)用于匹配ancestor元素内所有的descendant元素
// 这里的ancestor表示具体的祖先选择器
// 这里的descendant表示具体的后代选择器
jQuery( "ancestor descendant" )

//jQuery的parent > child选择器(子代选择器)用于匹配parent元素的所有子辈child元素
// 这里的parent表示具体的父辈选择器
// 这里的child表示具体的子辈选择器
jQuery( "parent > child" )

//jQuery的prev + next选择器用于匹配紧接在prev元素后面的同辈next元素
// 这里的prev表示具体的选择器
// 这里的next表示具体的选择器
jQuery( "prev + next" )

//jQuery的prev ~ siblings选择器用于匹配prev元素之后的所有同辈的siblings元素
// 这里的prev表示具体的选择器
// 这里的siblings表示具体的选择器
jQuery( "prev ~ siblings" )

//jQuery的:first选择器用于获取匹配到的第一个元素
// 这里的selector表示具体的选择器
jQuery( "selector:first" )

//jQuery的:last选择器用于获取匹配到的最后一个元素
// 这里的selector表示具体的选择器
jQuery( "selector:last" )

//jQuery的:even选择器用于匹配所有索引值为偶数的元素
// 这里的selector表示具体的选择器
jQuery( "selector:even" )

//jQuery的:odd选择器用于匹配所有索引值为奇数的元素
// 这里的selector表示具体的选择器
jQuery( "selector:odd" )

//jQuery的:eq(index)选择器用于获取匹配的元素中指定索引的元素
// 这里的selector表示具体的选择器
// 这里的index表示指定的索引值
jQuery( "selector:eq(index)" )

//jQuery的:gt(index)选择器用于匹配所有大于指定索引的元素
// 这里的selector表示具体的选择器
// 这里的index表示指定的索引值
jQuery( "selector:gt(index)" )

//jQuery的:lt(index)选择器用于匹配所有小于指定索引的元素
// 这里的selector表示具体的选择器
// 这里的index表示指定的索引值
jQuery( "selector:lt(index)" )

//jQuery的:first-child选择器用于匹配作为父元素的第一个子元素的元素
// 这里的selector表示具体的选择器
jQuery( "selector:first-child" )

//jQuery的:last-child选择器用于匹配作为父元素的最后一个子元素的元素
// 这里的selector表示具体的选择器
jQuery( "selector:last-child" )

//jQuery的:only-child选择器用于匹配作为父元素的唯一子元素的元素
// 这里的selector表示具体的选择器
jQuery( "selector:only-child" )

//jQuery的:nth-child(n)选择器用于匹配作为父元素下的第n个(或特定顺序的)子元素的元素
// 这里的selector表示具体的选择器
// 这里的n表示具体的序号或者符合要求的表达式
jQuery( "selector:nth-child(n)" )

//jQuery的:nth-last-child(n)选择器用于匹配作为父元素下的倒数第n个子元素或符合特定顺序规则的元素
// 这里的selector表示具体的选择器
// 这里的n表示具体的序号或者符合要求的表达式
jQuery( "selector:nth-last-child(n)" )

//jQuery的:first-of-type选择器用于匹配作为父元素的第一个该类型的子元素的元素,将其封装为jQuery对象并返回
// 这里的selector表示具体的选择器
jQuery( "selector:first-of-type" )

//jQuery的:last-of-type选择器用于匹配作为父元素的最后一个该类型的子元素的元素
// 这里的selector表示具体的选择器
jQuery( "selector:last-of-type" )

//jQuery的:only-of-type选择器用于匹配作为父元素唯一一个该类型的子元素的元素
// 这里的selector表示具体的选择器
jQuery( "selector:only-of-type" )

//jQuery的:nth-of-type(n)选择器用于匹配作为父元素的同类型子元素中的第n个(或符合特定顺序的)元素
// 这里的selector表示具体的选择器
// 这里的n表示具体的数字序号
jQuery( "selector:nth-of-type(n)" )

//jQuery的:nth-last-of-type(n)选择器用于匹配作为父元素的同类型子元素中的倒数第n个(或符合特定倒数顺序的)元素
// 这里的selector表示具体的选择器
// 这里的n表示具体的数字序号
jQuery( "selector:nth-last-of-type(n)" )

//jQuery的:has(selector)选择器用于匹配所有包含selector元素的元素
// 这里的selector表示具体的选择器
jQuery( ":has(selector)" )

//jQuery的:not(selector)选择器用于排除所有与选择器selector匹配的元素
// 这里的selector表示具体的选择器
jQuery( ":not(selector)" )

//jQuery的:contains(text)选择器用于匹配包含指定文本的元素
// 这里的text表示具体的文本字符串
jQuery( ":contains(text)" )

//jQuery的:parent选择器用于匹配所有有内容的元素
jQuery( ":parent" )

//jQuery的:empty选择器用于匹配所有空的元素
jQuery( ":empty" )

//jQuery的:visible选择器用于匹配所有可见的元素
jQuery( ":visible" )

//jQuery的:hidden选择器用于匹配所有不可见的元素
jQuery( ":hidden" )

//jQuery的:header选择器用于匹配所有的标题元素(h1 ~ h6)
jQuery( ":header" )

//jQuery的:focus选择器用于匹配当前获得焦点的元素
jQuery( ":focus" )

//jQuery的:root选择器用于匹配文档的根元素
jQuery( ":root" )

//jQuery的:target选择器用于匹配id属性值等于当前文档URI的锚点名称的元素
//如果当前文档的URI为"http://localhost:8085/deml.html/#top",则:target选择器匹配id="top"的元素
jQuery( ":target" )
示例代码:
/ 在Chrome中,使用$(document).ready()仍然无法获取到匹配的元素
// 必须使用$(window).load()来获取
$(window).load(function(){
var $target = $(":target");
if( $target.length == 1){ // 如果匹配到了元素
var ele = $target[0]; // 获取JS原生DOM元素
alert( ele.tagName + "#" + ele.id ); // P#n2
}
});

//jQuery的:animated选择器用于匹配所有正在执行动画效果的元素
jQuery( ":animated" )

//jQuery的[attribute]选择器用于匹配所有具有指定属性的元素
// 这里的attribute表示具体的属性名称,这里的中括号也是必需的
jQuery( "[attribute]" )

//jQuery的[attribute=value]选择器用于匹配指定属性为指定值的所有元素
// 这里的attribute表示具体的属性名称,这里的中括号也是必需的
// 这里的value表示具体的属性值
jQuery( "[attribute=value]" )

//jQuery的[attribute!=value]选择器用于匹配指定属性不等于指定值的所有元素
// 这里的attribute表示具体的属性名称,这里的中括号也是必需的
// 这里的value表示具体的属性值
jQuery( "[attribute!=value]" )

//jQuery的[attribute^=value]选择器用于匹配指定属性以指定值开始的所有元素
// 这里的attribute表示具体的属性名称,这里的中括号也是必需的
// 这里的value表示具体的属性值
jQuery( "[attribute^=value]" )

//jQuery的[attribute$=value]选择器用于匹配指定属性以指定值结尾的所有元素
// 这里的attribute表示具体的属性名称,这里的中括号也是必需的
// 这里的value表示具体的属性值
jQuery( "[attribute$=value]" )

//jQuery的[attribute|=value]选择器用于匹配指定属性等于指定值或以指定值为前缀的所有元素
// 这里的attribute表示具体的属性名称,这里的中括号也是必需的
// 这里的value表示具体的属性值
jQuery( "[attribute|=value]" )

//jQuery的[attribute~=value]选择器用于匹配指定属性的值中包含指定单词的所有元素
// 这里的attribute表示具体的属性名称,这里的中括号也是必需的
// 这里的value表示具体的属性值
jQuery( "[attribute~=value]" )

//jQuery的[attribute*=value]选择器用于匹配指定属性包含指定值的所有元素
// 这里的attribute表示具体的属性名称,这里的中括号也是必需的
// 这里的value表示具体的属性值
jQuery( "[attribute*=value]" )

//jQuery的:input选择器用于匹配所有的表单控件元素
jQuery( ":input" )

//jQuery的:text选择器用于匹配所有的单行文本框元素
//单行文本框就是type为"text"的input标签:<input type="text">
jQuery( ":text" )

//jQuery的:password选择器用于匹配所有的密码框元素
//密码框就是type为"password"的input标签:<input type="password">。
jQuery( ":password" )

//jQuery的:radio选择器用于匹配所有的单选按钮元素
//单选按钮就是type为"radio"的input标签:<input type="radio">。
jQuery( ":radio" )

//jQuery的:checkbox选择器用于匹配所有的复选框元素
//复选框就是type为"checkbox"的input标签:<input type="checkbox">
jQuery( ":checkbox" )

//jQuery的:button选择器用于匹配所有的按钮元素
//这里的按钮指的是所有的button标签(不区分type)以及type为"button"的input标签
jQuery( ":button" )

//jQuery的:submit选择器用于匹配所有的提交按钮元素
//提交按钮框就是type为"submit"的input或button标签:<input type="submit">或<button type="submit"></button>
jQuery( ":submit" )

//jQuery的:reset选择器用于匹配所有的重置按钮元素
//重置就是type为"reset"的input或button标签:<input type="reset">或<button type="reset"></button>
jQuery( ":reset" )

//jQuery的:image选择器用于匹配所有的图像控件
//图像域就是type为"image"的input标签:<input type="image">
jQuery( ":image" )

//jQuery的:file选择器用于匹配所有的文件域元素
//文件域就是type为"file"的input标签:<input type="file">
jQuery( ":file" )

//jQuery的:enabled选择器用于匹配所有可用的表单控件元素
//可用的表单控件是指没有disabled属性的<input>、<button>、<select>、<textarea>、<option>等元素。
jQuery( ":enabled" )

//jQuery的:disabled选择器用于匹配所有不可用的表单控件元素
//不可用的表单控件是指带有disabled属性的<input>、<button>、<select>、<textarea>、<option>等元素
jQuery( ":disabled" )

//jQuery的:checked选择器用于匹配所有选中的表单域元素
//选中的表单域是指具有checked属性的radio和checkbox表单域,以及具有selected属性的option标签。
jQuery( ":checked" )

//jQuery的:selected选择器用于匹配所有选中的option元素
//"选中的option元素"指的是具有selected属性的option标签
jQuery( ":selected" )
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: