jquery插件的总结_js $(this).css('background','#yellow');-CSDN博客

一：基本：

.class

#id

element

二：选择器

1、jQuery( "parent > child" ) 如：$('ul.list>li') 表示class名为ul下的li

2、jQuery( "ancestor descendant" )

ancestor: 任何有效的选择器。

descendant: 一个用来筛选后代元素的选择器。

如：$（' ul li'）

3、jQuery( "prev + next" )

prev: 任何有效的选择器。

next: 用于筛选紧跟在 "prev" 后面的元素的选择器。

如:$（'input div'）

4、jQuery( "prev ~ siblings" )

prev: 任何有效的选择器

siblings: 一个选择器来过滤第一选择器以后的兄弟元素。

如：$("#prev ~ div").css("border", "3px groove blue")

三：基本筛选

1、jQuery( ":eq(index)" )
如：$("td:eq(2)").css("color", "red")

2、jQuery( ":even" ) 偶数选择器

特别地注意的是，这是基于0的索引，所以:even选择器是选择第一个元素，第三个元素，依此类推在匹配。查找表格中索引值是偶数的行(即实际表格中的奇数行)，即匹配第一行、第三行、第五行等 (索引值是 0, 2 ,4 等 )

如：$("tr:even").css("background-color", "#bbbbff")

jQuery( ":odd" )奇数选择器

特别地注意的是，这是基于0的索引，所以:odd选择器是选择第二个元素，第四个元素，依此类推在匹配。

3、jQuery( ":first" )

:first伪类选择器相当于:eq(0)。它也可以写为:lt(1)。虽然:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。

如：$("tr:first").css("font-style", "italic")

4、jQuery( ":gt(index)" )

这种索引相关的选择器（包括这个“大于”选择器），会在先前提供的选择器筛选出的元素基础上再进行筛选。

如：$( "td:gt(4)" ).css( "backgroundColor", "yellow" ) 从第五个开始

jQuery( ":lt(index)" )

这种索引相关的选择器（包括这个“小于”选择器）会在先前提供的选择器筛选出的元素基础上再进行筛选

5、jQuery( ":header" )

因为:header() 是一个 jQuery 延伸出来的一个选择器并且不是的CSS规范的一部分, 使用:header()查询不能充分利用原生DOM提供的querySelectorAll() 方法来提高性能。为了在现代浏览器上获得更佳的性能，请使用.filter(":header")代替。

如：$(":header").css({ background:'#CCC', color:'blue' })标题的元素都改变

6、jQuery( ":lang(language)" )

:lang选择器,匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“ - ”的元素。例如，选择器$("div:lang(en)")将匹配

and

（和他们的后代

），但不包括

如：$( "div:lang(en-us)" ).addClass( "usa" )

７、jQuery( ":last" )

如：＄（＇ｄｉｖ：ｌａｓｔ＇）

８、jQuery( ":not(selector)" )

.not()方法可以让代码更易读。而使用 :not() 通常会构建出一个非常复杂的选择器。所以大多数情况下，推荐使用.not()方法。

如：$("input:not(:checked) + span").css("background-color","yellow")查找所有没有被选中的复选框，然后高亮后面的 span。注意，当你点击复选框的时候不会有反应，因为没有绑定任何点击事件。

四：内容筛选

１、jQuery( ":contains(text)" )

匹配的文本可以直接出现在所选的元素中，或在该元素的任何后代中，或两者兼有。正如属性值选择器，:contains()选择器中括号内的文字，可为纯文本，或用引号包围。文本必须有匹配的情况下被选中。

如：$("div:contains('John')").css("text-decoration", "underline");

John Resig

George Martin

Malcom John Sinclair

２、jQuery( ":empty" )

这个和:parent选择器相反。

需要注意的一件重要的事情是:empty(和 :parent)的子元素包括文本节点。

如：

<html>

<head>

<style>

td { text-align:center; }

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<table border="1">

<tr><td>TD #0</td><td></td></tr>

<tr><td>TD #2</td><td></td></tr>

<tr><td></td><td>TD#5</td></tr>

</table>

<script>$("td:empty").text("Was empty!").css('background', 'rgb(255,220,200)');</script>

</body>

</html>

３、jQuery( ":has(selector)" )

如果表达式$('div:has(p)') 匹配一个

，那么应有一个

存在于

后代元素中的任何地方，不是直接的子元素也可以。

如：$("div:has(p)").addClass("test")

４、jQuery( ":parent" )　　这个表示有元素，而ｅｍｐｔｙ表示空元素

这个正好和:empty相反。

如：<script>$("td:parent").fadeTo(1500, 0.3)

五：可见性选择器

１、jQuery( ":hidden" )

元素可以被认为是隐藏的几个情况：

他们的CSS display值是none。

他们是type="hidden"的表单元素。

它们的宽度和高度都显式设置为0。
一个祖先元素是隐藏的，因此该元素是不会在页面上显示。
如：$("div:hidden").show(3000);
２、jQuery( ":visible" )
如果元素中占据文档中一定的空间,元素被认为是可见的。可见元素的宽度或高度，是大于零。

元素的visibility: hidden 或 opacity: 0被认为是可见的，因为他们仍然占用空间布局。

不在文档中的元素是被认为隐藏的;jQuery没有办法知道他们是否是可见的，因为元素可见性依赖于适用的样式。

所以 option 元素是被认为是隐藏的，不管他们是否selected（选中）状态.

如：

<html>

<head>

<style>

div { width:50px; height:40px; margin:5px; border:3px outset green; float:left; }

.starthidden { display:none; }

</style>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<button>Show hidden to see they don't change</button>

<div></div>

<div class="starthidden"></div>

<div></div>

<div style="display:none;"></div>

<script>

$("div:visible").click(function () {

$(this).css("background", "yellow");

});

$("button").click(function () {

$("div:hidden").show("fast");

});

</script>

</body>

</html>

六：属性

１、jQuery( "[attribute|='value']" )

选择指定属性值等于给定字符串或以该字符串为前缀（该字符串后跟一个连字符“-” ）的元素。

如：$('a[hreflang|="en"]').css('border','3px dotted green');

２、jQuery( "[attribute*='value']" )

这是最慷慨的jQuery的属性选择器匹配一个值。如果选择器的字符串内的任何地方出现的元素的属性值，它会被选择。

<head>

<script src="http://code.jquery.com/jquery-latest.js"></script>

</head>

<body>

<input name="man-news" />

<input name="milkman" />

<input name="letterman2" />

<input name="newmilk" />

<script>$('input[name*="man"]').val('has man in it!');</script>

</body>

３、jQuery( "[attribute~='value']" )

这个选择器测试属性值中的每个单词字符串，其中“word”是一个由空白分隔的字符串定义的。如果测试字符串恰好等于任何一个字词这个选择器将选择。

只有单独存在这个单词或元素才选择成功

<body>

<input name="man-news" />

<input name="milk man" />

<input name="letterman2" />

<input name="newmilk" />

<script>$('input[name~="man"]').val('mr. man is in it!');</script>

</body>

４、jQuery( "[attribute$='value']" )
查找所有的属性名称以“letter”的结束，并把他们的文字输入

<input name="newsletter" />

<input name="milkman" />

<input name="jobletter" />

<script>$('input[name$="letter"]').val('a letter');</script>

５、jQuery( "[attribute='value']" )

查找所有属性值为 'Hot Fuzz' 的 input 元素，并且将跟在它后面的 span 元素中的文本修改成 " Hot Fuzz"。

<div>

<label>

<input type="radio" name="newsletter" value="Hot Fuzz" />

<span>name?</span>

</label>

</div>

<div>

<label>

<input type="radio" name="newsletter" value="Cold Fusion"/>

<span>value?</span>

</label>

</div>

<div>

<label>

<input type="radio" name="newsletter" value="Evil Plans" />

<span>value?</span>

</label>

</div>

<script>$('input[value="Hot Fuzz"]').next().text(" Hot Fuzz");</script>

六、子选择器

１、jQuery( ":first-child" )
虽然:first只匹配一个单独的元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)

<div>

<span>John,</span>

<span>Karl,</span>

<span>Brandon</span>

</div>

<div>

<span>Glen,</span>

<span>Tane,</span>

<span>Ralph</span>

</div>

<script>

$("div span:first-child")

.css("text-decoration", "underline")

.hover(function () {

$(this).addClass("sogreen");

}, function () {

$(this).removeClass("sogreen");

});

</script>

２、jQuery( ":first-of-type" )

:first-of-type 选择器匹配元素，在文档树中，相同的父元素并且在其他相同的元素名称之前

<div>

<span>Corey,</span>

<span>Yehuda,</span>

<span>Adam,</span>

<span>Todd</span>

</div>

<div>

<b>Nobody,</b>

<span>Jörn,</span>

<span>Scott,</span>

<span>Timo</span>

</div>

<script>

$("span:first-of-type").addClass("fot");

</script>

３、jQuery( ":nth-child(index/even/odd/equation)" )

index: 每个相匹配子元素的索引值，从1开始，也可以是字符串 even 或 odd，或一个方程式( 例如 :nth-child(even), :nth-child(4n) )。

因为jQuery的实现:nth-child(n)是严格来自CSS规范，所以n值是“1索引”，也就是说，从1开始计数。对于所有其他选择器表达式，jQuery遵循JavaScript的“0索引”的计数。因此，给定一个单一

包含两个
， $('li:nth-child(1)')选择第一个
，而$('li:eq(1)')选择第二个。
４、jQuery( ":only-child" )

若父元素有其他子元素，就不会被匹配

<div>

<button>Sibling!</button>

<button>Sibling!</button>

</div>

<div>

<button>Sibling!　只有这个ｂｕｔｔｏｎ才有效

</div>

<div>

None

</div>

<div>

<button>Sibling!</button>

<button>Sibling!</button>

<button>Sibling!</button>

</div>

<div>

<button>Sibling!</button>

</div>

<script>

$("div button:only-child").text("Alone").css("border", "2px blue solid");

</script>

七：表单选择器

１、jQuery( ":button" )

一个和$(":button")等价的选择器，使用有效的CSS是$("button, input[type='button']")。

<form>

<fieldset>

<input type="button" value="Input Button"/>　被选中的含有ｂｕｔｔｏｎ的属性

<input type="checkbox" />

<input type="file" />

<input type="hidden" />

<input type="image" />

<input type="password" />

<input type="radio" />

<input type="reset" />

<input type="submit" />

<input type="text" />

<select><option>Option<option/></select>

<textarea></textarea>

<button>Button　被选中的ｂｕｔｔｏｎ标签　

</fieldset>

</form>

<div>

</div>

<script>

var input = $(":button").addClass("marked");

$("div").text( "For this type jQuery found " + input.length + ".");

$("form").submit(function () { return false; }); // so it won't submit

</script>

２、jQuery( ":checkbox" )

$(':checkbox') 等同于 $('[type=checkbox]')。如同其他伪类选择器（那些以“:”开始）建议前面加上一个标记名称或其他选择器;否则，默认使用通用选择("*")。换句话说$(':checkbox') 等同于 $('*:checkbox')，所以应该使用$('input:checkbox')来提升效率。

３、jQuery( ":checked" )

这个:checked 选择器适用于复选框和单选框。对于下拉框元素, 使用 :selected 选择器。

$( "input[type=checkbox]" ).on( "click", countChecked )

４、jQuery( ":disabled" )

:disabled 选择器仅可用于选择支持disabled属性（attribute）的HTML元素(,