jQuery心得2--jQuery案例剖析1

最新推荐文章于 2024-07-12 16:27:40 发布
weixin_30346033
最新推荐文章于 2024-07-12 16:27:40 发布
阅读量66
点赞数
文章标签： javascript ViewUI
原文链接：http://www.cnblogs.com/yangkai-cn/archive/2013/03/18/4016924.html
版权
         <!-- 
         案例一：
 改变 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>
转载于:https://www.cnblogs.com/yangkai-cn/archive/2013/03/18/4016924.html
weixin_30346033
关注
0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery心得2--jQuery案例剖析1

<!-- 案例一：改变 id 为 one 的元素的背景色为 # bbffaa改变 class 为 mini 的所有元素的背景色为 # bbffaa改变元素名为 <div> 的所有元素的背景色为 # bbffaa改变所有元素的背景色为 # bbffaa改变所有的<span>元素和 id 为 two 的元...
复制链接

扫一扫