选择器
基本选择器
#id
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ID选择器</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="notMe"><p>这是第一段</p></div>
<div id="myDiv">这是第二段</div>
<span id="foo:bar">这是第三段</span><br/>
<span id="foo[bar]">这是第四段</span><br/>
<span id="foo.bar">这是第五段</span><br/>
<script type="text/javascript">
$(function () {
//根据给定的ID匹配一个元素。
$("#notMe").css("background-color","green").css("width","80px");
$("#myDiv").css("background-color","blue").css("width","80px");
//使用任何的元字符作为名称的文本部分， 它必须被两个反斜杠转义：\\。 参见示例。
$("#foo\\:bar").css("background-color","yellow");
$("#foo\\[bar\\]").css("background-color","#CCC");
$("#foo\\.bar").css("background-color","red");
});
</script>
</body>
</html>
element
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>element选择器</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div>这是第一段</div>
<div>这是第二段</div>
<span>这是第三段</span>
<script type="text/javascript">
//根据给定的元素标签名匹配所有元素
//一个用于搜索的元素。指向 DOM 节点的标签名。
$(function () {
$("div").css("color", "red");
$("span").css("background-color", "blue");
});
</script>
</body>
</html>
.class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>class选择器</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div class="notMe">div class="notMe"</div>
<div class="myClass">div class="myClass"</div>
<span class="myClass">span class="myClass"</span>
<script type="text/javascript">
//根据给定的css类名匹配元素。
//一个用以搜索的类。一个元素可以有多个类，只要有一个符合就能被匹配到。
$(function () {
$(".myClass").css("color","red");
$(".notMe").css("color","blue");
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>*通配符选择器</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div>DIV</div>
<span>SPAN</span>
<p>P</p>
<script type="text/javascript">
//匹配所有元素
$(function () {
$("*").css("color","blue");
});
</script>
</body>
</html>
selector1,selector2,selectorN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>selector1,selector2,selectorN</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div>div</div>
<p class="myClass">p class="myClass"</p>
<span>span</span>
<p class="notMyClass">p class="notMyClass"</p>
<script type="text/javascript">
//将每一个选择器匹配到的元素合并后一起返回。
// 你可以指定任意多个选择器，并将匹配到的元素合并到一个结果内
//selector1 一个有效的选择器
//selector2 另一个有效的选择器
//selectorN 任意多个有效选择器
$(function () {
$("div,span,p.myClass").css("background-color","red");
});
</script>
</body>
</html>
层级选择器
ancestor descendant
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>ancestor descendant</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
<script type="text/javascript">
//在给定的祖先元素下匹配所有的后代元素
//ancestor
// 任何有效选择器
//descendant
// 用以匹配元素的选择器，并且它是第一个选择器的后代元素
$(function () {
$("form input").css("background-color","red");
});
</script>
</body>
</html>
parent > child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>parent > child</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
<script type="text/javascript">
//在给定的父元素下匹配所有的子元素
//parent
// 任何有效选择器
//child
// 用以匹配元素的选择器，并且它是第一个选择器的子元素
$(function () {
$("form > input").css("background-color","red");
});
</script>
</body>
</html>
prev + next
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>prev + next</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
<script type="text/javascript">
//匹配所有紧接在 prev 元素后的 next 元素
//prev
// 任何有效选择器
//next
// 一个有效选择器并且紧接着第一个选择器
$(function () {
$("label + input").css("background-color","blue");
});
</script>
</body>
</html>
prev ~ siblings
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>prev ~ siblings</title>
<script src="js/jquery.js"type="text/javascript"></script>
</head>
<body>
<form>
<label>Name:</label>
<input name="name" />
<fieldset>
<label>Newsletter:</label>
<input name="newsletter" />
</fieldset>
</form>
<input name="none" />
<script type="text/javascript">
//匹配 prev 元素之后的所有 siblings 元素
//prev
// 任何有效选择器
//siblings
// 一个选择器，并且它作为第一个选择器的同辈
$(function () {
$("form ~ input").css("background-color","blue");
});
</script>
</body>
</html>
基本筛选器
:first
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:first</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script type="text/javascript">
//获取第一个元素
$(function () {
$('li:first').css("color","red");
});
</script>
</body>
</html>
:not(selector)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:not(selector)</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div class="left">
<div>
<input type="checkbox" name="a" />
<p>Aaron</p>
</div>
<div>
<input type="checkbox" name="b" checked="checked" />
<p>慕课</p>
</div>
<div>
<input type="checkbox" name="c"/>
<p>其他</p>
</div>
</div>
<script type="text/javascript">
// 去除所有与给定选择器匹配的元素
// 在jQuery 1.3中，已经支持复杂选择器了（例如:not(div a) 和 :not(div,a)）
$(function () {
$("input:not(:checked)+p").css("background-color", "#CD00CD");
});
</script>
</body>
</html>
:even
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:even</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr><td>index 0</td></tr>
<tr><td>index 1</td></tr>
<tr><td>index 2</td></tr>
<tr><td>index 3</td></tr>
</table>
<script type="text/javascript">
//匹配所有索引值为偶数的元素，从 0 开始计数
$(function () {
$("tr:even").css("background-color","blue");
});
</script>
</body>
</html>
:odd
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:odd</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr><td>index 0</td></tr>
<tr><td>index 1</td></tr>
<tr><td>index 2</td></tr>
<tr><td>index 3</td></tr>
</table>
<script type="text/javascript">
//匹配所有索引值为奇数的元素，从 0 开始计数
$(function () {
$("tr:odd").css("background-color","blue");
});
</script>
</body>
</html>
:eq(index)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:eq(index)</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr><td>index 0</td></tr>
<tr><td>index 1</td></tr>
<tr><td>index 2</td></tr>
<tr><td>index 3</td></tr>
</table>
<script type="text/javascript">
//匹配一个给定索引值的元素
//:eq(index) index就是下标
$(function () {
$("tr:eq(1)").css("color","red");
});
</script>
</body>
</html>
:gt(index)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:gt(index)</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr><td>index 0</td></tr>
<tr><td>index 1</td></tr>
<tr><td>index 2</td></tr>
<tr><td>index 3</td></tr>
</table>
<script type="text/javascript">
//匹配所有大于给定索引值的元素
//:gt(index) index就是下标
$(function () {
$("tr:gt(0)").css("color","red");
});
</script>
</body>
</html>
:lang(language)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:lang(language)</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<p lang="en">这是第一段内容</p>
<p lang="ts">这是第二段内容</p>
<p lang="it">这是第三段内容</p>
<script type="text/javascript">
//选择指定语言的所有元素。
// :lang选择器,匹配有一个语言值等于所提供的语言代码，或以提供的语言代码开始，后面马上跟一个“ - ”的元素。例如，选择器$("div:lang(en)")将匹配<div lang="en"> and <div lang="en-us">（和他们的后代<div>），但不包括<div lang="fr">
// 对于HTML元素，语言值由lang属性决定，也可能由来自meta元素或HTTP头信息决定。
// 这种用法的进一步讨论可以在 W3C CSS规范中找到。
$(function () {
$("p:lang(en)").css("background-color","blue");
$("p:lang(ts)").css("color","red");
$("p:lang(it)").css("background-color","green");
});
</script>
</body>
</html>
:last()
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:last()</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li>list item 1</li>
<li>list item 2</li>
<li>list item 3</li>
<li>list item 4</li>
<li>list item 5</li>
</ul>
<script type="text/javascript">
//获取最后个元素
$(function () {
$('li:last').css("background-color","red");
});
</script>
</body>
</html>
:lt(index)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:lt(index)</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr><td>index 0</td></tr>
<tr><td>index 1</td></tr>
<tr><td>index 2</td></tr>
<tr><td>index 3</td></tr>
</table>
<script type="text/javascript">
//匹配所有小于给定索引值的元素
$(function () {
$("tr:lt(2)").css("background-color","blue");
});
</script>
</body>
</html>
:header
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:header</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<h1>Header 1</h1>
<p>Contents 1</p>
<h2>Header 2</h2>
<p>Contents 2</p>
<script type="text/javascript">
$(function () {
//匹配如 h1, h2, h3之类的标题元素
$(":header").css("background", "#EEE");
});
</script>
</body>
</html>
:animated
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:animated</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="box" style="width: 100px; height: 100px; background: #f00; position: absolute;"></div>
<script type="text/javascript">
// 匹配所有正在执行动画效果的元素
$(function () {
$(function() {
// 开始动画
$("#box").animate({left: 500}, 5000);
$(document).on("click", function() {
// 在选择器中使用
if($("#box:animated").length) {
$("body").append("<p>#box 尚在动画</p>");
}
// 在 is 中使用
if(!$("#box").is(":animated")) {
$("body").append("<p>#box 动画停止</p>");
}
});
});
});
</script>
</body>
</html>
:focus
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:focus</title>
<script src="js/jquery.js" type="text/javascript"></script>
<style>
.focused {
background-color: blue;
}
</style>
</head>
<body>
<div id="content">
<input tabIndex="1"><br/>
<input tabIndex="2"><br/>
<select tabIndex="3">
<option>select menu</option>
</select><br/>
<div tabIndex="4">
这是一段内容
</div>
</div>
<script type="text/javascript">
// 匹配当前获取焦点的元素。
// 如同其他伪类选择器（那些以":"开始），建议:focus前面用标记名称或其他选择;否则，通用选择("*")是不言而喻的。换句话说，$(':focus')等同为$('*:focus')。如果你正在寻找当前的焦点元素，$( document.activeElement )将检索，而不必搜索整个DOM树。
$(function () {
$("#content").delegate("*", "focus blur", function (event) {
var elem = $(this);
setTimeout(function () {
elem.toggleClass("focused", elem.is(":focus"));
}, 0);
});
});
</script>
</body>
</html>
:root
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:root</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
//选择该文档的根元素。
// 在HTML中，文档的根元素，和$(":root")选择的元素一样， 永远是<html>元素
$(function () {
$(":root").css("background-color","yellow");
});
</script>
</body>
</html>
:target
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:target</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
//选择由文档URI的格式化识别码表示的目标元素。
//如果文档的URI包含一个格式化的标识符，或hash（哈希）， 然后:target选择器将匹配ID和标识符相匹配的元素。 例如，给定的URI http://example.com/#foo， $( "p:target" )，将选择<p id="foo">元素。
//这个不寻常的用法，可进一步讨论中找到 W3C CSS specification.
$(function () {
});
</script>
</body>
</html>
内容选择器
:contains(text)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:contains(text)</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div>John Resig</div>
<div>George Martin</div>
<div>Malcom John Sinclair</div>
<div>J. Ohn
<script type="text/javascript">
//匹配包含给定文本的元素
$(function () {
$("div:contains('John')").css("color","blue");
});
</script>
</body>
</html>
:empty
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:empty</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr><td>Value 1</td><td>Value 4</td></tr>
<tr><td>Value 2</td><td></td></tr>
<tr><td>Value 3</td><td></td></tr>
</table>
<script type="text/javascript">
//匹配所有不包含子元素或者文本的空元素
$(function () {
$("td:empty").css("background-color","blue").css("width","100px");
});
</script>
</body>
</html>
:has(selector)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:has(selector)</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div><p>Hello</p></div>
<div>Hello again!</div>
<script type="text/javascript">
//匹配含有选择器所匹配的元素的元素
$(function () {
$("div:has(p)").addClass("test").css("color","red");//在<div><p>Hello</p></div>中的div标签中加了一个class选择器
// $("div:has(p)").css("color","red");
});
</script>
</body>
</html>
:parent
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:parent</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr><td>Value 1</td><td>Value 4</td></tr>
<tr><td>Value 2</td><td></td></tr>
<tr><td>Value 3</td><td></td></tr>
</table>
<script type="text/javascript">
//匹配含有子元素或者文本的元素
$(function () {
$("td:parent").css("color","red");
});
</script>
</body>
</html>
:hidden
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:hidden</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
<form>
<input type="text" name="email" value="123"/>
<input type="hidden" name="id"/>
</form>
<script type="text/javascript">
//匹配所有不可见元素，或者type为hidden的元素
$(function () {
$("tr:hidden").addClass("text");//在不可见元素的<tr style="display:none">中添加class选择器
$("input:hidden").css("background-color","red");//type为hidden的元素的input标签中添加背景颜色
});
</script>
</body>
</html>
:visible
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:visible</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<table>
<tr style="display:none"><td>Value 1</td></tr>
<tr><td>Value 2</td></tr>
</table>
<script type="text/javascript">
//匹配所有的可见元素
$(function () {
$("tr:visible").css("color","red");//给所有的可见元素添加颜色
});
</script>
</body>
</html>
[attribute]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>[attribute]</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div>
<p>Hello!</p>
</div>
<div id="test2">div[id]</div>
<script type="text/javascript">
//匹配包含给定属性的元素。注意，在jQuery 1.3中，前导的@符号已经被废除！如果想要兼容最新版本，只需要简单去掉@符号即可。
$(function () {
$("div[id]").css("color","red");
});
</script>
</body>
</html>
[attribute=value]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>[attribute=value]</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
<script type="text/javascript">
//匹配给定的属性是某个特定值的元素
//attribute属性名
//value属性值。引号在大多数情况下是可选的。但在遇到诸如属性值包含"]"时，用以避免冲突
$(function () {
$("input[name='newsletter']").attr("checked", true);
});
</script>
</body>
</html>
[attribute!=value]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>[attribute!=value]</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<input type="checkbox" name="newsletter" value="Hot Fuzz" />
<input type="checkbox" name="newsletter" value="Cold Fusion" />
<input type="checkbox" name="accept" value="Evil Plans" />
<script type="text/javascript">
// 匹配所有不含有指定的属性，或者属性不等于特定值的元素。
// 此选择器等价于 :not([attr=value]) 要匹配含有特定属性但不等于特定值的元素，请使用[attr]:not([attr=value])
$(function () {
$("input[name!='newsletter']").attr("checked", true);
});
</script>
</body>
</html>
[attribute^=value]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>[attribute^=value]</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
newsletter:<input name="newsletter" /><br/>
milkman:<input name="milkman" /><br/>
newsboy:<input name="newsboy" /><br/>
<script type="text/javascript">
//匹配给定的属性是以某些值开始的元素
$(function () {
$("input[name^='news']").css("background-color","red");//给定的属性是以news开始的元素背景设为红色
});
</script>
</body>
</html>
[attribute$=value]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>[attribute$=value]</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
newsletter:<input name="newsletter" /><br/>
milkman:<input name="milkman" /><br/>
jobletter:<input name="jobletter" /><br/>
<script type="text/javascript">
//匹配给定的属性是以某些值结尾的元素
$(function () {
$("input[name$='letter']").css("background-color","blue");//给定的属性是以letter结尾的元素背景设为蓝色
});
</script>
</body>
</html>
[attribute*=value]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>[attribute*=value]</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
man-news:<input name="man-news" /><br/>
milkman:<input name="milkman" /><br/>
letterman2:<input name="letterman2" /><br/>
newmilk:<input name="newmilk" /><br/>
<script type="text/javascript">
//匹配给定的属性是以包含某些值的元素
$(function () {
$("input[name*='man']").css("background-color","blue");//给定的属性是以包含man的元素背景设为蓝色
});
</script>
</body>
</html>
[selector1][selector2][selectorN]
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>[selector1][selector2][selectorN]</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<input id="man-news" name="man-news" /><br/>
<input name="milkman" /><br/>
<input id="letterman" name="new-letterman" /><br/>
<input name="newmilk" /><br/>
<script type="text/javascript">
//复合属性选择器，需要同时满足多个条件时使用。
$(function () {
$("input[id][name$='man']").css("background-color","blue");//有input标签id属性name以man结尾的设置背景为蓝色
});
</script>
</body>
</html>
子元素选择器
:first-child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:first-child</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<script type="text/javascript">
//匹配所给选择器( :之前的选择器)的第一个子元素
//类似的:first匹配第一个元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1)
$(function () {
$("ul li:first-child").css("color","red");//在每个 ul 中查找第一个 li
});
</script>
</body>
</html>
:first-of-type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:first-of-type</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="n1">
<div id="n2" class="abc">
<label id="n3">label1</label>
<span id="n4">span1</span>
<span id="n5" class="abc">span2</span>
<span id="n6">span3</span>
</div>
<div id="n7">
<span id="n8" class="abc">span1</span>
<span id="n9">span2</span>
</div>
</div>
<script type="text/javascript">
//结构化伪类，匹配E的父元素的第一个E类型的孩子。等价于:nth-of-type(1) 选择器。
//解释的很模糊，网上搜了很多都是扯淡的解释，作者也只能自己一个个试，试了几十次才弄的稍微有点清楚，如果错了，慢点拍砖，怕怕。直接看示例。
$(function () {
// $("span:first-of-type").css("background-color","red");//所有子类中第一个span标签背景设为红色
$(".abc:first-of-type").css("background-color","blue");//所有子类中第一个class="abc"背景设为蓝色
});
</script>
</body>
</html>
:last-child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:last-child</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<script type="text/javascript">
// 匹配最后一个子元素
// :last 只匹配最后一个元素，而此选择符将为每个父元素匹配最后一个子元素
$(function () {
$("ul li:last-child").css("color","red");//ul li最后一个元素设为红色
});
</script>
</body>
</html>
:last-of-type
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:last-of-type</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
// 结构化伪类，匹配E的父元素的最后一个E类型的孩子
// 大体的意思跟 :first-of-type差不多，只是一个是第一个元素，一个是最后一个元素，这里就不赘述了。
$(function () {
});
</script>
</body>
</html>
:nth-child
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:nth-child</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
<li>Tane</li>
<li>Ralph</li>
</ul>
<script type="text/javascript">
// 匹配其父元素下的第N个子或奇偶元素
// :eq(index) 匹配选择器指定序列的元素，而这个将为每一个父元素匹配子元素。
// :nth-child从1开始的，而:eq()是从0算起的！可以使用:<br>nth-child(even)<br>:nth-child(odd)<br>:nth-child(3n)<br>:nth-child(2)<br>:nth-child(3n+1)<br>:nth-child(3n+2)参数
$(function () {
$("ul li:nth-child(2)").css("color","red");//ul li中第二个li设为红色
});
</script>
</body>
</html>
:nth-last-child(n|even|odd|formula)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:nth-last-child(n|even|odd|formula)</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script type="text/javascript">
// 选择所有他们父元素的第n个子元素。计数从最后一个元素开始到第一个。
// 因为jQuery的实现:nth-child(n)是严格来自CSS规范，所以n值是“1索引”，也就是说，从1开始计数。对于所有其他选择器表达式，jQuery遵循JavaScript的“0索引”的计数。因此，给定一个单一<ul>包含两个<li>， $('li:nth-child(1)')选择第一个<li>，而$('li:eq(1)')选择第二个。
// 这个不寻常的用法，可进一步讨论中找到W3C CSS specification.
//n匹配子元素序号 必须为整数，注意从1开始而不是0
//even 匹配所有偶数元素
//odd 匹配所有奇数元素
//formula 使用特殊公式如(an + b)进行选择. 例如:nth-last-child(3n+2) 从倒数第二个子元素开始，匹配每个3的倍数的元素
$(function () {
$("ul li:nth-last-child(2)").css("color","red");//父元素的第n个子元素。ul li中的li倒数第二个设为红色
});
</script>
</body>
</html>
nth-last-of-type(n|even|odd|formula)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:nth-last-of-type(n|even|odd|formula)</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
<script type="text/javascript">
// 选择的所有他们的父级元素的第n个子元素，计数从最后一个元素到第一个。
// 因为jQuery的实现:nth-是严格来自CSS规范，n值是“1-indexed”，也就是说，从1开始计数。 对于所有其他选择器表达式比如:eq() 或 :even ，jQuery遵循JavaScript的“0索引”的计数。因此，给定一个单一<ul>包含3个<li>，$('li:nth-last-of-type(1)')选择第3个，也就是最后一个<li>。
// 这个不寻常的用法，可进一步讨论中找到 W3C CSS specification.
//n匹配子元素序号 必须为整数，注意从1开始而不是0
//even 匹配所有偶数元素
//odd 匹配所有奇数元素
//formula 使用特殊公式如(an + b)进行选择. 例如:nth-last-child(3n+2) 从倒数第二个子元素开始，匹配每个3的倍数的元素
$(function () {
$("ul li:nth-last-of-type(2)").css("color","red");//所有他们的父级元素的第n个子元素，ul li中的li倒数第二个设为红色
});
</script>
</body>
</html>
:nth-of-type(n|even|odd|formula)
<!DOCTYPE html>
<html>
<head>
<title>:nth-of-type(n|even|odd|formula)</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div>
<span>John</span>
<b>Kim</b>
<span>Adam</span>
<b>Rafael</b>
<span>Oleg</span>
</div>
<div>
<b>Dave</b>
<span>Ann</span>
</div>
<div>
<i><span>Maurice</span></i>
<span>Richard</span>
<span>Ralph</span>
<span>Jason</span>
</div>
<script type="text/javascript">
// 选择同属于一个父元素之下，并且标签名相同的子元素中的第n个。
// 因为jQuery的实现:nth-是严格来自CSS规范，n值是“1-indexed”，也就是说，从1开始计数。对于所有其他选择器表达式比如:eq() 或 :even ，jQuery遵循JavaScript的“0索引”的计数。
// 这个不寻常的用法，可进一步讨论中找到W3C CSS specification.
$(function () {
$("span:nth-of-type(2)").css("color","red");//父元素之下，并且标签名相同的子元素中的第2个。设为红色
});
</script>
</body>
</html>
:only-child
<!DOCTYPE html>
<html>
<head>
<title>:only-child</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<ul>
<li>John</li>
<li>Karl</li>
<li>Brandon</li>
</ul>
<ul>
<li>Glen</li>
</ul>
<script type="text/javascript">
//如果某个元素是父元素中唯一的子元素，那将会被匹配
// 如果父元素中含有其他元素，那将不会被匹配。（注：这里的其他元素并不包含文本节点，如：<p><img/>图片</p>，用$('p img:only-child')是可以匹配，感谢：nwujiajie 指正）
$(function () {
$("ul li:only-child").css("color","red");//某个元素是父元素中唯一的子元素.
});
</script>
</body>
</html>
:only-of-type
<!DOCTYPE html>
<html>
<head>
<title>:only-of-type</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
//选择所有没有兄弟元素，且具有相同的元素名称的元素。
// 如果父元素有相同的元素名称的其他子元素，那么没有元素会被匹配
$(function () {
});
</script>
</body>
</html>
表单选择器
:input
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:input</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<form>
<input type="button" value="Input Button"/><br/>
<input type="checkbox" /><br/>
<input type="file" /><br/>
<input type="hidden" /><br/>
<input type="image" /><br/>
<input type="password" /><br/>
<input type="radio" /><br/>
<input type="reset" /><br/>
<input type="submit" /><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea></textarea><br/>
<button>Button</button><br/>
</form>
<script type="text/javascript">
//匹配所有 input, textarea, select 和 button 元素
$(function () {
$(":input").css("background-color","red");
});
</script>
</body>
</html>
:text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:text</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<form>
<input type="button" value="Input Button"/><br/>
<input type="checkbox" /><br/>
<input type="file" /><br/>
<input type="hidden" /><br/>
<input type="image" /><br/>
<input type="password" /><br/>
<input type="radio" /><br/>
<input type="reset" /><br/>
<input type="submit" /><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea></textarea><br/>
<button>Button</button><br/>
</form>
<script type="text/javascript">
//匹配所有的单行文本框
$(function () {
$(":text").css("background-color","red");
});
</script>
</body>
</html>
:password
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:password</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<form>
<input type="button" value="Input Button"/><br/>
<input type="checkbox" /><br/>
<input type="file" /><br/>
<input type="hidden" /><br/>
<input type="image" /><br/>
<input type="password" /><br/>
<input type="radio" /><br/>
<input type="reset" /><br/>
<input type="submit" /><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea></textarea><br/>
<button>Button</button><br/>
</form>
<script type="text/javascript">
//匹配所有密码框
$(function () {
$(":password").css("background-color", "red");
});
</script>
</body>
</html>
:radio
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:radio</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<form>
<input type="button" value="Input Button"/><br/>
<input type="checkbox" /><br/>
<input type="file" /><br/>
<input type="hidden" /><br/>
<input type="image" /><br/>
<input type="password" /><br/>
<input type="radio" value="提交登录"/>提交登录<br/>
<input type="reset" /><br/>
<input type="submit" /><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea></textarea><br/>
<button>Button</button><br/>
</form>
<script type="text/javascript">
//匹配所有单选按钮
$(function () {
$(":radio").css("height","30px").css("width","30px");
});
</script>
</body>
</html>
:checkbox
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:checkbox</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<form>
<input type="button" value="Input Button"/><br/>
<input type="checkbox" name="like" value="篮球"/>篮球<input type="checkbox" name="like" value="乒乓球"/>乒乓球<br/>
<input type="file" /><br/>
<input type="hidden" /><br/>
<input type="image" /><br/>
<input type="password" /><br/>
<input type="radio" /><br/>
<input type="reset" /><br/>
<input type="submit" /><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea></textarea><br/>
<button>Button</button><br/>
</form>
<script type="text/javascript">
//匹配所有复选框
$(function () {
$(":checkbox").attr("checked", true).css("height","30px").css("width","30px");
});
</script>
</body>
</html>
:submit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:submit</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<input type="button" /><br/>
<input type="checkbox" /><br/>
<input type="file" /><br/>
<input type="hidden" /><br/>
<input type="image" /><br/>
<input type="password" /><br/>
<input type="radio" /><br/>
<input type="reset" /><br/>
<input type="submit" value="提交登录"/><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea></textarea><br/>
<button>Button</button><br/>
<script type="text/javascript">
// 匹配所有提交按钮
$(function () {
$(":submit").css("background-color","red");
});
</script>
</body>
</html>
:image
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:image</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<input type="button" /><br/>
<input type="checkbox" /><br/>
<input type="file" /><br/>
<input type="hidden" /><br/>
<input type="image" /><br/>
<input type="password" /><br/>
<input type="radio" /><br/>
<input type="reset" /><br/>
<input type="submit"/><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea></textarea><br/>
<button>Button</button><br/>
<script type="text/javascript">
//匹配所有图像域
$(function () {
$(":image").css("background-color","red");
});
</script>
</body>
</html>
:reset
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:reset</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<input type="button" /><br/>
<input type="checkbox" /><br/>
<input type="file" /><br/>
<input type="hidden" /><br/>
<input type="image" /><br/>
<input type="password" /><br/>
<input type="radio" /><br/>
<input type="reset" /><br/>
<input type="submit"/><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea></textarea><br/>
<button>Button</button><br/>
<script type="text/javascript">
// 匹配所有重置按钮
$(function () {
$(":reset").css("background-color","red")
});
</script>
</body>
</html>
:button
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:button</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<input type="button" value="button"/><br/>
<input type="checkbox" /><br/>
<input type="file" /><br/>
<input type="hidden" /><br/>
<input type="image" /><br/>
<input type="password" /><br/>
<input type="radio" /><br/>
<input type="reset" /><br/>
<input type="submit"/><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea></textarea><br/>
<button>Button</button><br/>
<script type="text/javascript">
//匹配所有按钮
$(function () {
$(":button").css("background-color","red");
});
</script>
</body>
</html>
:file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:file</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<input type="button" /><br/>
<input type="checkbox" /><br/>
<input type="file" /><br/>
<input type="hidden" /><br/>
<input type="image" /><br/>
<input type="password" /><br/>
<input type="radio" /><br/>
<input type="reset" /><br/>
<input type="submit"/><br/>
<input type="text" /><br/>
<select><option>Option</option></select><br/>
<textarea></textarea><br/>
<button>Button</button><br/>
<script type="text/javascript">
//匹配所有文件域
$(function () {
$(":file").css("background-color","red");
});
</script>
</body>
</html>
表单对象属性选择器
:enabled
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:enabled</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<form>
<input name="email" disabled="disabled" /><br/>
<input name="id" />
</form>
<script type="text/javascript">
//匹配所有可用元素
$(function () {
$("input:enabled").css("background-color","red");
});
</script>
</body>
</html>
:disabled
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:disabled</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<form>
<input name="email" disabled="disabled" /><br/>
<input name="id" />
</form>
<script type="text/javascript">
//匹配所有不可用元素
$(function () {
$("input:disabled").css("background-color","blue");
});
</script>
</body>
</html>
:checked
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:checked</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<form>
<input type="checkbox" name="newsletter" checked="checked" value="Daily" /><br/>
<input type="checkbox" name="newsletter" value="Weekly" /><br/>
<input type="checkbox" name="newsletter" checked="checked" value="Monthly" /><br/>
</form>
<script type="text/javascript">
//匹配所有选中的被选中元素(复选框、单选框等，select中的option)，对于select元素来说，获取选中推荐使用 :selected
$(function () {
$("input:checked").attr("checked", true);
});
</script>
</body>
</html>
:selected
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>:selected</title>
<script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<select>
<option value="1">Flowers</option>
<option value="2" selected="selected">Gardens</option>
<option value="3">Trees</option>
</select>
<script type="text/javascript">
//匹配所有选中的option元素
$(function () {
$("select option:selected").css("color","red");
});
</script>
</body>
</html>
4677
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
