JQuery选择器和方法4
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title></title>
<style type="text/css">
.red {
background-color:red;
}
</style>
<script src="Scripts/jquery-1.7.1.js"></script>
<script type="text/javascript">
$(function () {
//===========================1==========================
$("#tb tr").click(function () {
//多个样式中间加空格:red blue,追加、删除对应样式，不影响其他样式
$(this).addClass("red").siblings().removeClass("red");
});
$(":input").focus(function () {
$(this).addClass("red");
}).blur(function () {
$(this).removeClass("red");
});
//============================2===============================
//属性过滤器选择器
//选取有id属性的input
$("input[id]").css("background-color", "pink");
//选取title属性=txt的input
$("input[title=txt]").css("background-color", "pink");
//选取name属性=abc的input 相当于getElementByName
$("input[name=abc]").css("background-color", "pink");
$("input[name!=abc]").css("background-color","pink");
//选取id属性包含'n1'的input
$("input[id*=n1]").css("background-color","red");
//其他还可以选择以(^开头 $结尾)的input
//选取value中包含"k1"的button
$("input[type=button][value*=k1]").css("background-color","pink");
//==========================3============================
//
$("input[value=checked]").click(function () {
//$("input[name=sex]:checked=checked").val()也可以
var v = $("input[name=sex]:checked").val();
alert(v);
});
});
</script>
</head>
<body>
<%--1--%>
<div>
<table id="tb" border="1px">
<tr>
<td>1111111111111111111</td>
</tr>
<tr>
<td>1111111111111111111</td>
</tr>
<tr>
<td>1111111111111111111</td>
</tr>
<tr>
<td>1111111111111111111</td>
</tr>
</table>
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<input type="text" /><br />
<%--2--%>
<input id="t1" type="text" /><br />
<input id="t2" type="text" /><br />
<input id="t3" type="text" /><br />
<input type="text" title="txt"/><br />
<input type="text" name="abc"/><br />
<input id="btn1" type="button" value="click1" /><br />
<input id="btn2" type="button" value="click2" /><br />
<input type="button" value="click3" /><br />
<input type="button" value="click4" /><br />
<%--3--%>
<input type="radio" name="sex" value="nan" />男
<input type="radio" name="sex" value="nv" />女
<input type="button" value="checked" /><br />
</div>
</body>
</html>
