jquery 中的选择器的学习 有点乱啊
2012-02-26 23:24
411 查看
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<title>Hello query！！</title>
<style type="text/css">
#Button2
{
width: 359px;
}
.style2
{
width: 32px;
}
.style3
{
width: 28px;
}
.style4
{
width: 24px;
}
</style>
<script type="text/javascript">
var dom = document.getElementById("btnHide");
jquery = $(dom);
$("#btnShow").bind("click", function (event) { $("#divMsg").show(); });
jquery.bind("click", function (event) { $("#divMsg").hide(); });
$("#btnChange").bind("click", function (envent) { $("#divMsg").html("Hello World, too!"); });
$("#Button3").click(function () { $("#divParent+input").css("background", "blue"); }); //下面的按钮可以控制上面的以下所有的按钮
$("#alterColor").click(function () { $("#Button3~[id]").css("background", "red"); });
$("#alterTableColor").click(function () { $(".tab tr:first td").css("background", "green"); });
$("#testBT").click(function () { $("body input:odd").css("background", "red"); });
$("#testCK").click(function () { $("input:checked").css("background", "red"); });
$("#testCf").click(function () { $("div:contains('aa')").css("background", "red"); });
$("#testCF").click(function () { $("td:parent").css("background", "red"); });
$("#testAF").click(function () { $("div[id]").css("background", "red"); });
$("#testAF1").click(function () { $("div[id='aadiv22']").css("background", "#EDE"); });
$("#testAF2").click(function () { $("div[id='aadiv22']").css("background", "#EAE"); });
$("#testAF3").click(function () { $("input[name$='bb']").css("background", "#EHE"); });
$("#testAF4").click(function () { $("div[id$='11']").css("background", "#EUE"); });
</script>
</head>
<body>
<div id="divMsg">Hello world!</div>
<input type="button" id="btnShow" value="显示" />
<div id="divParent"><div id="divChild">ddddd</div><div id="div1">ddddd</div><input type="button" id="btnHide" value="隐藏" /></div>
<input type="button" id="btnChange" value="修改后的结果为hello world,too！" />
<input type="button" id="alterColor" value="改变红色颜色"/>
<input type="button" id="Button3" value="改变为蓝色"/>
<input type="button" id="alterTableColor" title="13" value="改变表格的颜色"/>
<input type="button" id="testBT" value="测试基本过滤器"/>
<input type="checkbox" id="ck" value="是" checked="checked"/>
<input type="button" id="testCK" value="测试ck" />
<input type="button" id="Button2" title="13" value="dddd"/>
<table class="tab">
<tr>
<td class="style2">
</td>
<td class="style3">
</td>
<td class="style4">
</td>
<td>
</td>
</tr>
<tr>
<td class="style2">
</td>
<td class="style3">
</td>
<td class="style4">
</td>
<td>
<div>djjjjjjjj</div></td>
</tr>
<tr>
<td class="style2">
</td>
<td class="style3">
</td>
<td class="style4">
</td>
<td>
</td>
</tr>
<tr>
<td class="style2">
</td>
<td class="style3">
</td>
<td class="style4">
</td>
<td>
</td>
</tr>
</table>
<div id="CF">aa内容过滤器的测试</div>
<input id="testCf" type="button" value="内容过滤器测试"/>
<input id="testCF" type="button" value="内容过滤器测试2"/>
<div id="aadiv11">
<div>dddddddddd
<div>ddddddddd</div>
<div>ddddddddd</div>
</div>
</div>
<div id="aadiv22">gfffffffffff
<div>ddddddd
<div>ddddddddd</div>
<div>ddddd</div>
</div>
</div>
<div id="bbdiv22" class="divclass">gfffffffffff
<div>ddddddd
<div>ddddddddd</div>
<div>ddddd</div>
</div>
</div>
<input id="testAF" type="button" value="属性过滤器测试含有id的变色"/>
<input id="testAF1" type="button" value="属性过滤器测试1id为aadiv22的变色"/>
<input id="testAF2" type="button" value="属性过滤器测试2id不为aa的变色"/>
<input id="testAF3" type="button" value="属性过滤器测试3含有以name结尾的input变色"/>
<input id="testAF4" type="button" value="属性过滤器测试4"/>
<input id="testAF5" type="button" value="属性过滤器测试5选择所有含有id为div的变色"/>
<input id="testAF6" value="属性过滤器测试5选择所有含有id为div的变色" type="button"/>
<input id="testButton" value="表单选择器" type="button"/>
</body>
</html>
<script type="text/javascript">
var dom = document.getElementById("btnHide");
jquery = $(dom);
$("#btnShow").bind("click", function (event) { $("#divMsg").show(); });
jquery.bind("click", function (event) { $("#divMsg").hide(); });
$("#btnChange").bind("click", function (envent) { $("#divMsg").html("Hello World, too!"); });
$("#Button3").click(function () { $("#divParent+input").css("background", "blue"); }); //下面的按钮可以控制上面的以下所有的按钮
$("#alterColor").click(function () { $("#Button3~[id]").css("background", "red"); });
$("#alterTableColor").click(function () { $(".tab tr:first td").css("background", "green"); });
$("#testBT").click(function () { $("body input:odd").css("background", "red"); });
$("#testCK").click(function () { $("input:checked").css("background", "red"); });
$("#testCf").click(function () { $("div:contains('aa')").css("background", "red"); });
$("#testCF").click(function () { $("td:parent").css("background", "red"); });
$("#testAF").click(function () { $("div[id]").css("background", "red"); });
$("#testAF1").click(function () { $("div[id='aadiv22']").css("background", "#EDE"); });
$("#testAF2").click(function () { $("div[id!='aa']").css("background", "#EAE"); });
$("#testAF3").click(function () { $("div[id^='aa']").css("background", "#aaaddd"); });
$("#testAF4").click(function () { $("div[id$='22']").css("background", "#aaa111"); });
$("#testAF5").click(function () { $("div[id*='div']").css("background", "#aaa111"); });
$("#testAF6").click(function () { $("div[class][id^='bb']").css("background", "#aaa111"); });
$("#testButton").click(function () { $("input").css("background", "red"); });
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
<title>Hello query！！</title>
<style type="text/css">
#Button2
{
width: 359px;
}
.style2
{
width: 32px;
}
.style3
{
width: 28px;
}
.style4
{
width: 24px;
}
</style>
<script type="text/javascript">
var dom = document.getElementById("btnHide");
jquery = $(dom);
$("#btnShow").bind("click", function (event) { $("#divMsg").show(); });
jquery.bind("click", function (event) { $("#divMsg").hide(); });
$("#btnChange").bind("click", function (envent) { $("#divMsg").html("Hello World, too!"); });
$("#Button3").click(function () { $("#divParent+input").css("background", "blue"); }); //下面的按钮可以控制上面的以下所有的按钮
$("#alterColor").click(function () { $("#Button3~[id]").css("background", "red"); });
$("#alterTableColor").click(function () { $(".tab tr:first td").css("background", "green"); });
$("#testBT").click(function () { $("body input:odd").css("background", "red"); });
$("#testCK").click(function () { $("input:checked").css("background", "red"); });
$("#testCf").click(function () { $("div:contains('aa')").css("background", "red"); });
$("#testCF").click(function () { $("td:parent").css("background", "red"); });
$("#testAF").click(function () { $("div[id]").css("background", "red"); });
$("#testAF1").click(function () { $("div[id='aadiv22']").css("background", "#EDE"); });
$("#testAF2").click(function () { $("div[id='aadiv22']").css("background", "#EAE"); });
$("#testAF3").click(function () { $("input[name$='bb']").css("background", "#EHE"); });
$("#testAF4").click(function () { $("div[id$='11']").css("background", "#EUE"); });
</script>
</head>
<body>
<div id="divMsg">Hello world!</div>
<input type="button" id="btnShow" value="显示" />
<div id="divParent"><div id="divChild">ddddd</div><div id="div1">ddddd</div><input type="button" id="btnHide" value="隐藏" /></div>
<input type="button" id="btnChange" value="修改后的结果为hello world,too！" />
<input type="button" id="alterColor" value="改变红色颜色"/>
<input type="button" id="Button3" value="改变为蓝色"/>
<input type="button" id="alterTableColor" title="13" value="改变表格的颜色"/>
<input type="button" id="testBT" value="测试基本过滤器"/>
<input type="checkbox" id="ck" value="是" checked="checked"/>
<input type="button" id="testCK" value="测试ck" />
<input type="button" id="Button2" title="13" value="dddd"/>
<table class="tab">
<tr>
<td class="style2">
</td>
<td class="style3">
</td>
<td class="style4">
</td>
<td>
</td>
</tr>
<tr>
<td class="style2">
</td>
<td class="style3">
</td>
<td class="style4">
</td>
<td>
<div>djjjjjjjj</div></td>
</tr>
<tr>
<td class="style2">
</td>
<td class="style3">
</td>
<td class="style4">
</td>
<td>
</td>
</tr>
<tr>
<td class="style2">
</td>
<td class="style3">
</td>
<td class="style4">
</td>
<td>
</td>
</tr>
</table>
<div id="CF">aa内容过滤器的测试</div>
<input id="testCf" type="button" value="内容过滤器测试"/>
<input id="testCF" type="button" value="内容过滤器测试2"/>
<div id="aadiv11">
<div>dddddddddd
<div>ddddddddd</div>
<div>ddddddddd</div>
</div>
</div>
<div id="aadiv22">gfffffffffff
<div>ddddddd
<div>ddddddddd</div>
<div>ddddd</div>
</div>
</div>
<div id="bbdiv22" class="divclass">gfffffffffff
<div>ddddddd
<div>ddddddddd</div>
<div>ddddd</div>
</div>
</div>
<input id="testAF" type="button" value="属性过滤器测试含有id的变色"/>
<input id="testAF1" type="button" value="属性过滤器测试1id为aadiv22的变色"/>
<input id="testAF2" type="button" value="属性过滤器测试2id不为aa的变色"/>
<input id="testAF3" type="button" value="属性过滤器测试3含有以name结尾的input变色"/>
<input id="testAF4" type="button" value="属性过滤器测试4"/>
<input id="testAF5" type="button" value="属性过滤器测试5选择所有含有id为div的变色"/>
<input id="testAF6" value="属性过滤器测试5选择所有含有id为div的变色" type="button"/>
<input id="testButton" value="表单选择器" type="button"/>
</body>
</html>
<script type="text/javascript">
var dom = document.getElementById("btnHide");
jquery = $(dom);
$("#btnShow").bind("click", function (event) { $("#divMsg").show(); });
jquery.bind("click", function (event) { $("#divMsg").hide(); });
$("#btnChange").bind("click", function (envent) { $("#divMsg").html("Hello World, too!"); });
$("#Button3").click(function () { $("#divParent+input").css("background", "blue"); }); //下面的按钮可以控制上面的以下所有的按钮
$("#alterColor").click(function () { $("#Button3~[id]").css("background", "red"); });
$("#alterTableColor").click(function () { $(".tab tr:first td").css("background", "green"); });
$("#testBT").click(function () { $("body input:odd").css("background", "red"); });
$("#testCK").click(function () { $("input:checked").css("background", "red"); });
$("#testCf").click(function () { $("div:contains('aa')").css("background", "red"); });
$("#testCF").click(function () { $("td:parent").css("background", "red"); });
$("#testAF").click(function () { $("div[id]").css("background", "red"); });
$("#testAF1").click(function () { $("div[id='aadiv22']").css("background", "#EDE"); });
$("#testAF2").click(function () { $("div[id!='aa']").css("background", "#EAE"); });
$("#testAF3").click(function () { $("div[id^='aa']").css("background", "#aaaddd"); });
$("#testAF4").click(function () { $("div[id$='22']").css("background", "#aaa111"); });
$("#testAF5").click(function () { $("div[id*='div']").css("background", "#aaa111"); });
$("#testAF6").click(function () { $("div[class][id^='bb']").css("background", "#aaa111"); });
$("#testButton").click(function () { $("input").css("background", "red"); });
</script>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- jquery 中的选择器的学习 有点乱啊
- jquery学习之1.5-可见性选择器学习
- JQuery 学习笔记 选择器之六
- jQuery 从零开始学习 (二) 选择器
- JQuery学习笔记（三）——选择器2
- JQuery 学习笔记 选择器之六
- 【jQuery基础学习】01 jQuery选择器
- Jquery实战学习--过滤选择器
- jQuery学习笔记（二）选择器
- jQuery学习笔记二（jQuery选择器）
- [置顶] JavaWeb初级学习 之 JQuery-简介、选择器
- jQuery入门学习笔记----第二章 jQuery选择器
- jQuery学习教程（三）：选择器2
- JQuery 参考手册 学习笔记（4）-选择器
- jQuery学习（二）语法 选择器
- JQuery学习笔记-基本过滤选择器
- JQuery 学习笔记-JQuery选择器和事件1
- jQuery学习2 选择器的使用说明
- 系统学习 jQuery （三） 选择器
- 从零开始学习jQuery (二) 万能的选择器