jQuery心得2--jQuery案例剖析1
<!-- 案例一： 改变 id 为 one 的元素的背景色为 # bbffaa改变 class 为 mini 的所有元素的背景色为 # bbffaa改变元素名为 <div> 的所有元素的背景色为 # bbffaa改变所有元素的背景色为 # bbffaa改变所有的<span>元素和 id 为 two 的元素的背景色为 # bbffaa --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>seletor_work1.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--> <!-- 引入js类库 --> <script type="text/javascript" src="../js/jquery-1.9.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ /* //改变 id 为 one 的元素的背景色 $("#one").css("background-color","#bbffaa");//属性名称，属性值 //改变 class 为 mini 的所有元素的背景色 $(".mini").css("background-color","#bbffaa"); //改变元素名为 <div> 的所有元素的背景色 $("div").css("background-color","#bbffaa"); */ //改变所有元素的背景色;html跟body的效果一样 // $("html").css("background-color","#bbffaa"); // $("body").css("background-color","#bbffaa"); $("*").css("background-color","#bbffaa"); //改变所有的<span>元素和 id 为 two 的元素的背景色 //$("span,#two").css("background-color","#bbffaa"); }); </script> </head> <body> <div id="one" style="width: 100px; height:60px; background-color: red; "></div> <div class="mini" style="width: 60px; height:30px; background-color: blue; "></div> <div style="width: 60px; height:100px; background-color: yellow; "></div> <span style="width: 100px; height:60px; background-color: teal; "></span> <p id="two" style="width: 100px; height:60px; background-color: green; "></p> </body></html><!—案例二：改变 <body> 内所有 <div> 的背景色为 # bbffaa改变 <body> 内子 <div> 的背景色为 # bbffaa改变 id 为 one 的下一个 <div> 的背景色为 # bbffaa改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色为 # bbffaa改变 id 为 two 的元素所有 <div> 兄弟元素的背景色为 # bbffaa --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>work2.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript" src="../js/jquery-1.9.1.js"></script><script type="text/javascript">$(document).ready(function() { //说明一点：在js中颜色的属性加不加#都可以显示出来；比如bbffaa 跟 #bbffaa效果一样 //改变 <body> 内所有 <div> 的背景色//$("body div").css("background-color","bbffaa");//改变 <body> 内子 <div> 的背景色//$("body>div").css("background-color","bbffaa");//改变 id 为 one 的下一个 <div> 的背景色//$("#one+div").css("background-color", "bbffaa");//改变 id 为 two 的元素后面的所有兄弟<div>的元素的背景色 //$("#two~div").css("background-color", "bbffaa"); //改变 id 为 two 的元素所有 <div> 兄弟元素的背景色,不论顺序，前后都算 $("#two").siblings().css("background-color", "bbffaa");});</script></head><body><div><div id="one"style="width: 300px; height:300px; background-color: teal; "><div style="width: 260px; height:100px; background-color: pink; "></div><div id="two"style="width: 90px; height:20px; background-color: yellow; "></div><div style="width: 100px; height:100px; background-color: red; "></div><div style="width: 200px; height:60px; background-color: green; "></div></div><div style="width: 100px; height:60px; background-color: blue; "></div></div></body></html><!-- 案例三： 改变第一个 div 元素的背景色为 # bbffaa改变最后一个 div 元素的背景色为 # bbffaa改变class不为 one 的所有 div 元素的背景色为 # bbffaa改变索引值为偶数的 div 元素的背景色为 # bbffaa改变索引值为奇数的 div 元素的背景色为 # bbffaa改变索引值为大于 3 的 div 元素的背景色为 # bbffaa改变索引值为等于 3 的 div 元素的背景色为 # bbffaa改变索引值为小于 3 的 div 元素的背景色为 # bbffaa改变所有的标题元素的背景色为 # bbffaa改变当前正在执行动画的所有元素的背景色为 # bbffaa --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>work3.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript" src="../js/jquery-1.9.1.js"></script><script type="text/javascript">$(document).ready(function() {// 改变第一个 div 元素的背景色为// $("div:first").css("background-color","#bbffaa");//改变最后一个 div 元素的背景色为// $("div:last").css("background-color","#bbffaa");//改变class不为 one 的所有 div 元素的背景色//$("div:not('.one')").css("background-color", "#bbffaa");//改变索引值为偶数的 div 元素的背景色//$("div:even").css("background-color", "#bbffaa");//改变索引值为奇数的 div 元素的背景色//$("div:odd").css("background-color", "#bbffaa");//改变索引值为大于 3 的 div 元素的背景色//$("div:gt(3)").css("background-color", "#bbffaa");//改变索引值为等于 3 的 div 元素的背景色//$("div:eq(3)").css("background-color", "#bbffaa");//改变索引值为小于 3 的 div 元素的背景色//$("div:lt(3)").css("background-color", "#bbffaa");//改变所有的标题元素的背景色;这里注意：如果h1标题没有在div里，那么切记去掉:之前的元素范围div$(":header").css("background-color", "#bbffaa");//改变当前正在执行动画的所有元素的背景色$(":animated").css("background-color", "#bbffaa");});</script></head><body><h1 style="width: 500px; height:100px; background-color: green; ">jQuery过滤选择器之变色龙</h1><div class="one"style="width: 260px; height:60px; background-color: pink; "></div><div class="one"style="width: 260px; height:60px; background-color: blue; "></div><div style="width: 260px; height:60px; background-color: red; "></div><div style="width: 260px; height:60px; background-color: yellow; "></div><div class="one"style="width: 260px; height:60px; background-color: teal; "></div> <embed src="../video/1.3gp"></body></html><!-- 案例四： 改变含有文本 ‘di’ 的 div 元素的背景色为 # bbffaa改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 # bbffaa改变含有 class 为 mini 元素的 div 元素的背景色为 # bbffaa改变含有子元素(或者文本元素)的div元素的背景色为 # bbffaa --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>work4.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript" src="../js/jquery-1.9.1.js"></script><script type="text/javascript">$(document).ready(function() {//改变含有文本 ‘di’ 的 div 元素的背景色为 # bbffaa//$("div:contains(di)").css("background-color","#bbffaa");//改变不包含子元素(或者文本元素) 的 div 空元素的背景色为 # bbffaa//$("div:empty").css("background-color","#bbffaa");//改变含有 class 为 mini 元素的 div 元素的背景色为 # bbffaa$("div.mini").css("background-color","#bbffaa");//改变含有子元素(或者文本元素)的div元素的背景色为 # bbffaa//$("div:parent").css("background-color","#bbffaa"); });</script></head><body><div class="mini"style="width: 260px; height:60px; background-color: blue; ">div</div><div style="width: 260px; height:60px; background-color: red; ">di</div><div style="width: 260px; height:60px; background-color: yellow; ">dd</div><div class="mini"style="width: 260px; height:60px; background-color: teal; "></div></body></html><!-- 案例五： 改变所有可见的div元素的背景色为 # bbffaa选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来, 并设置其背景色为 # bbffaa选取所有的文本隐藏域, 并打印它们的值 --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>work5.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript" src="../js/jquery-1.9.1.js"></script><script type="text/javascript">$(document).ready(function() {// 改变所有可见的div元素的背景色//$("div:visible").css("background-color","#bbffaa");//选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来$(":hidden").show().css("background-color","#bbffaa");//选取所有的文本隐藏域var $divs = $("div:hidden");for(var i=0;i<$divs.length;i++){ alert($($divs[i]).val());}alert($("input:hidden").val());});</script></head><body><div style="width: 260px; height:60px; background-color: red; ">di</div><div style="width: 260px; height:60px; background-color: yellow; visibility: hidden;" value="yang">fff</div><div style="width: 260px; height:60px; background-color: yellow; display: none" value="kai">dd</div><input style="width: 260px; height:60px; background-color: yellow;" type="hidden" value="eeee" /></body></html> <!—案例六：选取下列元素,改变其背景色为 # bbffaa含有属性title 的div元素.属性title值等于"test"的div元素.属性title值不等于"test"的div元素(没有属性title的也将被选中).属性title值 以"te"开始 的div元素.属性title值 以"est"结束 的div元素.属性title值 含有"es"的div元素.选取有属性id的div元素，然后在结果中选取属性title值含有“es”的 div 元素. --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html> <head> <title>work6.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript" src="../js/jquery-1.9.1.js"></script><script type="text/javascript">$(document).ready(function() {//含有属性title 的div元素//$("div[title]").css("background-color","#bbffaa");//属性title值等于"test"的div元素//$("div[title='test']").css("background-color","#bbffaa");//属性title值不等于"test"的div元素(没有属性title的也将被选中).//$("div[title!='test']").css("background-color","#bbffaa");//属性title值 以"te"开始 的div元素.//$("div[title^='te']").css("background-color","#bbffaa");//属性title值 以"est"介绍的div元素.//$("div[title$='est']").css("background-color","#bbffaa");//属性title值 含有"es"的div元素.//$("div[title*='es']").css("background-color","#bbffaa");//属性title值 含有"es"的div元素.$("div[id][title*='es']").css("background-color","#bbffaa");});</script> </head> <body> <div title="test" style="width: 260px; height:60px; background-color: red; ">di</div><div title="te" style="width: 260px; height:60px; background-color: yellow;">fff</div><div title="est" id="ee" style="width: 260px; height:60px; background-color: yellow;">dd</div> <div title="es" id="e" style="width: 260px; height:60px; background-color: red; ">di</div> <div style="width: 260px; height:60px; background-color: teal; ">di</div> </body></html><!—案例七：选取下列元素,改变其背景色为 # bbffaa每个class为one的div父元素下的第2个子元素.每个class为one的div父元素下的第一个子元素每个class为one的div父元素下的最后一个子元素如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素 --><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>work7.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3"><meta http-equiv="description" content="this is my page"><meta http-equiv="content-type" content="text/html; charset=UTF-8"><!--<link rel="stylesheet" type="text/css" href="./styles.css">--><script type="text/javascript" src="../js/jquery-1.9.1.js"></script><script type="text/javascript">$(document).ready(function() {// 每个class为one的div父元素下的第2个子元素//$(".one>:nth-child(2)").css("background-color","#bbffaa");//每个class为one的div父元素下的第一个子元素//$(".one>:first-child").css("background-color","#bbffaa");//每个class为one的div父元素下的最后一个子元素//$(".one>:last-child").css("background-color","#bbffaa");//如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素$(".one>:only-child").css("background-color", "#bbffaa");});</script></head><body><div class="one"style="width: 300px; height:60px; background-color: red; "><div style="width: 200px; height:60px; background-color: yellow;">fff</div><div style="width: 100px; height:60px; background-color: teal;">dd</div><div style="width: 500px; height:60px; background-color: red;">ddqq</div></div><div class="one"style="width: 300px; height:60px; background-color: yellow; "><div style="width: 200px; height:60px; background-color: teal;">fff</div></div><div class="two"style="width: 300px; height:60px; background-color: green; "><div style="width: 200px; height:60px; background-color: yellow;">fff</div><div style="width: 100px; height:60px; background-color: teal;">dd</div><div style="width: 500px; height:60px; background-color: green;">ddqq</div></div></body></html>