1.#id 使用任何的元字符作为名称的文本部分， 它必须被两个反斜杠转义：\\。 <span id="foo:bar"></span>
<span id="foo[bar]"></span>
<span id="foo.bar"></span>
console.log($("#foo\\:bar"))
console.log($("#foo\\[bar\\]"))
console.log($("#foo\\.bar"))2.prev + next 匹配所有紧接在 prev 元素后的 next 元素 //匹配所有跟在 label 后面的 input 元素
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
$("label + input") //[ <input name="name" />, <input name="newsletter" /> ]3.prev ~ siblings 匹配 prev 元素之后的所有 siblings 元素 //找到所有与表单同辈的 input 元素
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
$("form ~ input") //<input name="none" />4.:even 与:odd :even 匹配所有索引值为偶数的元素，从 0 开始计数 :odd 匹配所有索引值为奇数的元素，从 0 开始计数 5:gt(index)[great than] 与:lt(index)[little than] :gt(index) 匹配所有大于给定索引值的元素 :lt(index) 匹配所有索引值为奇数的元素，从 0 开始计 一个具有注脚的文本。 6.:lang(language) 1.9+ 选择指定语言的所有元素。 :lang选择器,匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“ - ”的元素。 例如，选择器$("div:lang(en)")将匹配<div lang="en"> and <div lang="en-us">（和他们的后代<div>），但不包括<div lang="fr"> 对于HTML元素，语言值由lang属性决定，也可能由来自meta元素或HTTP头信息决定。 \\选择所有<P> 的语言属性:
$("p:lang(it)")7.:header \\给页面内所有标题加上背景色
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
$(":header").css("background", "#EEE");//[ <h1 style="background:#EEE;">Header 1</h1>, <h2 style="background:#EEE;">Header 2</h2> ]8.:animated \\只有对不在执行动画效果的元素执行一个动画特效
<button id="run">Run</button><div></div>
$("#run").click(function(){
$("div:not(:animated)").animate({ left: "+=20" }, 1000);
});9.:focus 1.6+ 匹配当前获取焦点的元素。 如同其他伪类选择器（那些以":"开始），建议:focus前面用标记名称或其他选择;否则，通用选择("*")是不言而喻的。 换句话说，$(':focus')等同为$('*:focus')。如果你正在寻找当前的焦点元素，$( document.activeElement )将检索，而不必搜索整个DOM树。 //添加一个"focused"的类名给那些有focus方法的元素
.focused {
background: #abcdef;
}
<div id="content">
<input tabIndex="1">
<input tabIndex="2">
<select tabIndex="3">
<option>select menu</option>
</select>
<div tabIndex="4">
a div
</div>
</div>
$( "#content" ).delegate( "*", "focus blur", function( event ) {
var elem = $( this );
setTimeout(function() {
elem.toggleClass( "focused", elem.is( ":focus" ) );
}, 0);
});10.:root 1.9+ 选择该文档的根元素。 在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是元素。 \\设置<html>背景颜色为黄色
$(":root").css("background-color","yellow");11.:target1.9+ 选择由文档URI的格式化识别码表示的目标元素。 如果文档的URI包含一个格式化的标识符，或hash（哈希）， 然后:target选择器将匹配ID和标识符相匹配的元素。 例如，给定的URI http://example.com/#foo， $( "p:target" )，将选择<p id="foo">元素。 这个不寻常的用法，可进一步讨论中找到 W3C CSS specification. 12.:contains(text) \\查找所有包含 "John" 的 div 元素
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn
$("div:contains('John')")//[ <div>John Resig</div>, <div>Malcom John Sinclair</div> ]13.:empty 与 :parent :empty 匹配所有不包含子元素或者文本的空元素 :parent 匹配含有子元素或者文本的元素 14.:has(selector) //给所有包含 p 元素的 div 元素添加一个 text 类
<div><p>Hello</p></div>
<div>Hello again!</div>
$("div:has(p)").addClass("test");//[ <div class="test"><p>Hello</p></div> ]15.:hidden 与 :visible :hidden 匹配所有不可见元素，或者type为hidden的元素 :visible 匹配所有的可见元素 16.attribute类 [attribute] 匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。 [attribute=value] 匹配给定的属性是某个特定值的元素 [attribute!=value] 匹配所有不含有指定的属性，或者属性不等于特定值的元素。此选择器等价于:not([attr=value])要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value]) [attribute^=value] 匹配给定的属性是以某些值开始的元素 [attribute$=value] 匹配给定的属性是以某些值结尾的元素 [attribute*=value] 匹配给定的属性是以包含某些值的元素 [attrSel1][attrSel2][attrSelN] 复合属性选择器，需要同时满足多个条件时使用。 17.:only-child 如果某个元素是父元素中唯一的子元素，那将会被匹配 如果父元素中含有其他元素，那将不会被匹配。（注：这里的其他元素并不包含文本节点，如：<p><img/>图片</p>，用$('p img:only-child')是可以匹配） 18.:only-of-type 选择所有没有兄弟元素，且具有相同的元素名称的元素。 如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配。 19.form选择器 :input 匹配所有 input, textarea, select 和 button 元素 :text 匹配所有的单行文本框 :password 匹配所有密码框 :radio 匹配所有单选按钮 :checkbox 匹配所有复选框 :submit 匹配所有提交按钮，理论上只匹配 type="submit" 的input或者button，但是现在的很多浏览器，button元素默认的type即为submit，所以很多情况下，不设置type的button也会成为筛选结果。为了防止歧义或者误操作，建议所有的button在使用时都添加type属性。 :image 匹配所有图像域 :reset 匹配所有重置按钮 :button 匹配所有按钮 :file 匹配所有文件域 :enabled 匹配所有可用元素 :disabled 匹配所有不可用元素 :checked 匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected :selected 匹配所有选中的option元素 20.$.escapeSelector(selector) 这个方法通常被用在类选择器或者ID选择器中包含一些CSS特殊字符的时候，这个方法基本上与CSS中CSS.escape()方法类似，唯一的区别是jquery中的这个方法支持所有浏览器。 //对含有#号的ID进行编码
$.escapeSelector( "#target" ); // "\#target"
//选择出类中包含.box的div
<div><div class="notMe">div class="notMe"</div>
<div class=".box myClass">div class=".box myClass"</div>
<div class=".box">span class=".box"</div></div>
$( "div" ).find( "." + $.escapeSelector( ".box" ) ); // [ <div class=".box myClass">div class=".box myClass"</div>,<div class=".box">span class=".box"</div> ] 
开发技术
发布于：2021-07-13 17:53
|
阅读数：201
|
评论：0
QQ好友和群
QQ空间
