JQuery选择器

最新推荐文章于 2024-10-31 15:39:18 发布
转载 最新推荐文章于 2024-10-31 15:39:18 发布 · 263 阅读 · 0
文章标签：

#JQuery选择器

选择器是jQuery中的根基！！！

 jQuery的九大选择器(分类)

1、基本选择器

<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>01-基本选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" /> 
 <script type="text/javascript">
  	//== window.onload = function(){}
	$(document).ready(function(){
//		  <input type="button" value="选择 id为 one 的元素." id="btn1"/>  
		$("#btn1").click(function(){
			/*
			 * css(name, value)
			 * 	* name:指定样式名称,对应css帮助文档的内容
			 * 	* value:指定样式值
			 */
			$("#one").css("background","yellow");
		});

//  <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
		$("#btn2").click(function(){
			//jQuery支持类似于批处理的操作
			$(".mini").css("background","yellow");
		});

//  <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
		$("#btn3").click(function(){
			$("div").css("background","yellow");
		});

//  <input type="button" value="选择 所有的元素." id="btn4"/>
		$("#btn4").click(function(){
			$("*").css("background","yellow");
		});

//  <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>
		$("#btn5").click(function(){
			//多个选择器并列使用,用","隔开(并集)
			$("span,#two").css("background","yellow");
		});

	});
	
  </script>
</head>
<body>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
 <h3>基本选择器.</h3>
 
 <!-- 控制按钮 -->
  <input type="button" value="选择 id为 one 的元素." id="btn1"/>  
  <input type="button" value="选择 class 为 mini 的所有元素." id="btn2"/>
  <input type="button" value="选择 元素名是 div 的所有元素." id="btn3"/>
  <input type="button" value="选择 所有的元素." id="btn4"/>
  <input type="button" value="选择 所有的span元素和id为two的元素." id="btn5"/>

  <br /><br />

   <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
	 id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"></div>
  </div>



  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>
  
  <div class="hide">class为"hide"的div</div>
 
  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>

  
  <span id="mover">正在执行动画的span元素.</span>

<!-- Resources from http://down.liehuo.net -->
</body>
</html>

2、层次选择器

<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>02-层次选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />  
  <script type="text/javascript">
  	$(document).ready(function(){
//		  <input type="button" value="选择 body内的所有div元素." id="btn1"/>
		$("#btn1").click(function(){
			//祖先元素和后代元素的关系
			$("body div").css("background","yellow");
		});
		
//  <input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
		$("#btn2").click(function(){
			//父子元素的关系
			$("body>div").css("background","yellow");
		});

//  <input type="button" value="选择 id为one 的下一个兄弟节点为div元素." id="btn3"/>
		$("#btn3").click(function(){
			$("#one+div").css("background","yellow"); 
		});

//  <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
		$("#btn4").click(function(){
			$("#two~div").css("background","yellow");
		});

//  <input type="button" value="选择 id为two的元素所有div兄弟元素." id="btn5"/>
		$("#btn5").click(function(){
			$("#two").siblings("div").css("background","yellow");
		});
	})
  </script>
</head>
<body>
  <h3>层次选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />
 
  <input type="button" value="选择 body内的所有div元素." id="btn1"/>
  <input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
  <input type="button" value="选择 id为one 的下一个div元素." id="btn3"/>
  <input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
  <input type="button" value="选择 id为two的元素所有div兄弟元素." id="btn5"/>
  <br />
  <br />
  
   <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
	 id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"></div>
  </div>

  

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>
  
  <div class="hide">class为"hide"的div</div>
 
  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>

  
  <span id="mover">正在执行动画的span元素.</span>

<!-- Resources from http://down.liehuo.net -->
</body>
</html>

3、基本过滤选择器

<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>03-基本过滤选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>

 <link rel="stylesheet" type="text/css" href="./css/style.css" />   
  <script type="text/javascript">
  	$(document).ready(function(){
//		  <input type="button" value="选择第一个div元素." id="btn1"/>
		$("#btn1").click(function(){
			$("div:first").css("background","yellow");
		})

//  <input type="button" value="选择最后一个div元素." id="btn2"/>
		$("#btn2").click(function(){
			$("div:last").css("background","yellow");
		})

//  <input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
		$("#btn3").click(function(){
			//class不为one的元素,包含没有class属性的
			$("div:not('.one')").css("background","yellow");
		})

//  <input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
		$("#btn4").click(function(){
			$("div:even").css("background","yellow");
		})

//  <input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
		$("#btn5").click(function(){
			$("div:odd").css("background","yellow");
		})

//  <input type="button" value="选择索引值等于3的元素." id="btn6"/>
		$("#btn6").click(function(){
			$("div:eq(3)").css("background","yellow");
		})

//  <input type="button" value="选择索引值大于3的元素." id="btn7"/>
		$("#btn7").click(function(){
			$("div:gt(3)").css("background","yellow");
		})

//  <input type="button" value="选择索引值小于3的元素." id="btn8"/>
		$("#btn8").click(function(){
			$("div:lt(3)").css("background","yellow");
		})

//  <input type="button" value="选择所有的标题元素." id="btn9"/>
		$("#btn9").click(function(){
			$(":header").css("background","yellow");
		})

//  <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
		function move(){
			$("#mover").slideToggle("fast",move);
		}
		move();
		
		$("#btn10").click(function(){
			$(":animated").css("background","yellow");
		})

	});
  </script>
</head>
<body>
  <h3>基本过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

  <input type="button" value="选择第一个div元素." id="btn1"/>
  <input type="button" value="选择最后一个div元素." id="btn2"/>
  <input type="button" value="选择class不为one的 所有div元素." id="btn3"/>
  <input type="button" value="选择索引值为偶数 的div元素." id="btn4"/>
  <input type="button" value="选择索引值为奇数 的div元素." id="btn5"/>
  <input type="button" value="选择索引值等于3的元素." id="btn6"/>
  <input type="button" value="选择索引值大于3的元素." id="btn7"/>
  <input type="button" value="选择索引值小于3的元素." id="btn8"/>
  <input type="button" value="选择所有的标题元素." id="btn9"/>
  <input type="button" value="选择当前正在执行动画的所有元素." id="btn10"/>
 
<br /><br />
 
   <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
	 id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"></div>
  </div>

  

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>
  
  <div class="hide">class为"hide"的div</div>
 
  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>

  
  <span id="mover">正在执行动画的span元素.</span>

<!-- Resources from http://down.liehuo.net -->
</body>
</html>

4、内容过滤选择器

<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>04-内容过滤选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />  
  <script type="text/javascript">
  $(document).ready(function(){
//  	  <input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
		$("#btn1").click(function(){
			$("div:contains('di')").css("background","yellow");
		})

//  <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
		$("#btn2").click(function(){
			$("div:empty").css("background","yellow");
		})

//  <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
		$("#btn3").click(function(){
			$("div:has('.mini')").css("background","yellow");
		})

//  <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>
		$("#btn4").click(function(){
			$("div:parent").css("background","yellow");
		})

  });
  </script>
</head>
<body>
  <h3>内容过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label><br /><br />

  <input type="button" value="选取含有文本“di”的div元素." id="btn1"/>
  <input type="button" value="选取不包含子元素(或者文本元素)的div空元素." id="btn2"/>
  <input type="button" value="选取含有class为mini元素 的div元素." id="btn3"/>
  <input type="button" value="选取含有子元素(或者文本元素)的div元素." id="btn4"/>


<br /><br />

   <!-- 测试的元素 -->
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
	 id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"></div>
  </div>

  

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>
  
  <div class="hide">class为"hide"的div</div>
 
  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>

  
  <span id="mover">正在执行动画的span元素.</span>

<!-- Resources from http://down.liehuo.net -->
</body>
</html>

5、可见性过滤选择器

<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>05-可见性过滤选择器.html</title>
 <!--   引入jQuery --> 
 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />   
  <script type="text/javascript">
  	$(document).ready(function(){
//		  <input type="button" value=" 选取所有可见的div元素"  id="b1"/>
		$("#b1").click(function(){
			$("div:visible").css("background","yellow");
		});

//  <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>
		$("#b2").click(function(){
			$("div:hidden").show(3000).css("background","yellow");
		});

//  <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>
		$("#b3").click(function(){
			/*
			 *   <!--文本隐藏域-->
			 <input type="hidden" value="hidden_1">
			 <input type="hidden" value="hidden_2">
			 <input type="hidden" value="hidden_3">
			 <input type="hidden" value="hidden_4">
			 */
			var $inputs = $("input:hidden");
			
//			for(var i=0;i<$inputs.length;i++){
//				var input = $inputs[i];
//				alert(input.value);
//			}
			
			/*
			 * jQuery提供的隐式迭代的方法
			 * 	each(callback)
			 * 	* callback:回调函数,function(index,domEle){}
			 * 		* index:索引值
			 * 		* domEle:DOM对象
			 */
			$inputs.each(function(index,domEle){
				alert(domEle.value)
			});
			
		});

//  <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b4"/>
		$("#b4").click(function(){
			/*
			 *   <!--文本隐藏域-->
			 <input type="hidden" value="hidden_1">
			 <input type="hidden" value="hidden_2">
			 <input type="hidden" value="hidden_3">
			 <input type="hidden" value="hidden_4">
			 */
			var $inputs = $("input:hidden");
			
			/*
			 * jQuery还提供了隐式迭代的方法
			 * jQuery.each(object,callback)
			 * 	* jQuery.each()和each()方法的区别:
			 * 		* each():相当于Java中的实例方法,$(expr).each()
			 * 		* jQuery.each():相当于Java中的静态方法,$.each()
			 * 	* jQuery.each(object,callback)
			 * 		* object:需要例遍的对象或数组。
			 * 		* callback:回调函数,function(index,domEle){}
			 * 		* index:索引值
			 * 		* domEle:DOM对象
			 */
			$.each($inputs,function(index,domEle){
				//alert(domEle.value);
				//alert($(domEle).val());
				
				/*
				 * this的用法:
				 * 	* 指代当前页面元素内容,这里的元素内容就可以称之为DOM对象
				 * 	* this的使用,必须要在一个具有上下文环境
				 * 	* 建议:实际开发中,this的使用尽量不要用
				 */
				//alert(this.value);
				alert($(this).val());
			});
			
		});

	})
  </script>
</head>
<body>
  <h3>可见性过滤选择器.</h3>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>
  <br/><br/>
  <input type="button" value=" 选取所有可见的div元素"  id="b1"/>
  <input type="button" value=" 选取所有不可见的元素, 利用 jQuery 中的 show() 方法将它们显示出来"  id="b2"/>
  <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b3"/>
  <input type="button" value=" 选取所有的文本隐藏域, 并打印它们的值"  id="b4"/>
  <br /><br />
  
  <!--文本隐藏域-->
 <input type="hidden" value="hidden_1">
 <input type="hidden" value="hidden_2">
 <input type="hidden" value="hidden_3">
 <input type="hidden" value="hidden_4">
  
  <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
	 id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>
  
  <div class="hide">class为"hide"的div</div>
  
  <span id="mover">正在执行动画的span元素.</span>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>

6、属性选择器

<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>06-属性选择器.html</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />  
 <script type="text/javascript">
  	$(document).ready(function(){
//		  <input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
		$("#btn1").click(function(){
			$("div[title]").css("background","yellow");
		});

//  <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
		$("#btn2").click(function(){
			$("div[title=test]").css("background","yellow");
		});

//  <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>
		$("#btn3").click(function(){
			$("div[title!=test]").css("background","yellow");
		});

//  <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/>
		$("#btn4").click(function(){
			$("div[title^=te]").css("background","yellow");
		});

//  <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/>
		$("#btn5").click(function(){
			$("div[title$=est]").css("background","yellow");
		});

//  <input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/>
		$("#btn6").click(function(){
			$("div[title*=es]").css("background","yellow");
		});

//  <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/>
		$("#btn7").click(function(){
			//多个属性过滤选择器并列使用(交集)
			$("div[id][title*=es]").css("background","yellow");
		});
	
	});
  </script>
</head>
<body>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>	



    <h3> 属性选择器.</h3>
  <input type="button" value="选取含有 属性title 的div元素." id="btn1"/>
  <input type="button" value="选取 属性title值等于“test”的div元素." id="btn2"/>
  <input type="button" value="选取 属性title值不等于“test”的div元素(没有属性title的也将被选中)." id="btn3"/>
  <input type="button" value="选取 属性title值 以“te”开始 的div元素." id="btn4"/>
  <input type="button" value="选取 属性title值 以“est”结束 的div元素." id="btn5"/>
  <input type="button" value="选取 属性title值 含有“es”的div元素." id="btn6"/>
  <input type="button" value="组合属性选择器,首先选取有属性id的div元素，然后在结果中 选取属性title值 含有“es”的元素." id="btn7"/>




	<br /><br />
   <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
	 id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"></div>
  </div>

  

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>
  
  <div class="hide">class为"hide"的div</div>
 
  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>

  
  <span id="mover">正在执行动画的span元素.</span>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>

7、子元素过滤选择器

<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>07-子元素过滤选择器.html</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />  
 <script type="text/javascript">
  $(document).ready(function(){
//  	  <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
		$("#btn1").click(function(){
			/*
			 * * 子元素过滤选择器的特殊用法,要在其前面增加空格
			 * * 子元素过滤选择器的起始位置为"1"
			 */
			$("div[class=one] :nth-child(1)").css("background","yellow");
		})

//  <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
		$("#btn2").click(function(){
			$("div[class=one] :first-child").css("background","yellow");
		})

//  <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
		$("#btn3").click(function(){
			$("div[class=one] :last-child").css("background","yellow");
		})

//  <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>
		$("#btn4").click(function(){
			$("div[class=one] :only-child").css("background","yellow");
		})

  })
  
  </script>
</head>
<body>
  <button id="reset">手动重置页面元素</button>
  <input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>	

  <h3>子元素过滤选择器.</h3>
  <input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
  <input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
  <input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
  <input type="button" value="如果class为one的div父元素下的仅仅只有一个子元素，那么选中这个子元素." id="btn4"/>




	<br /><br />
   <div class="one" id="one" >
 id为one,class为one的div
      <div class="mini">class为mini</div>
  </div>

    <div class="one"  id="two" title="test" >
	 id为two,class为one,title为test的div.
      <div class="mini"  title="other">class为mini,title为other</div>
      <div class="mini"  title="test">class为mini,title为test</div>
  </div>

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"></div>
  </div>

  

  <div class="one">
      <div class="mini">class为mini</div>
      <div class="mini">class为mini</div>
	  <div class="mini">class为mini</div>
	  <div class="mini"  title="tesst">class为mini,title为tesst</div>
  </div>


  <div style="display:none;"  class="none">style的display为"none"的div</div>
  
  <div class="hide">class为"hide"的div</div>
 
  <div>
  包含input的type为"hidden"的div<input type="hidden" size="8"/>
  </div>

  
  <span id="mover">正在执行动画的span元素.</span>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>

8、表单对象属性过滤选择器

<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>08-表单对象属性过滤选择器.html</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
 <script src="./script/assist.js" type="text/javascript"></script>
 <link rel="stylesheet" type="text/css" href="./css/style.css" />  
 
  <script type="text/javascript">
  	$(document).ready(function(){
//		  <button id="btn1">对表单内 可用input 赋值操作.</button>
		$("#btn1").click(function(){
			/*
			 *      可用元素：<input name="add" value="可用文本框"/>  <br/>
			     不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
			     可用元素： <input name="che" value="可用文本框" /><br/>
				 不可用元素：<input name="name" disabled="disabled"  value="不可用文本框"/><br/>
			 */
			/*
			 * val():获取和设置
			 * 	* 获取:不传参数
			 * 	* 设置:传递传输
			 */
			$("input:enabled").val("xxxxx");
			
		});

//  <button id="btn2">对表单内 不可用input 赋值操作.</button>
		$("#btn1").click(function(){
			/*
			 *      可用元素：<input name="add" value="可用文本框"/>  <br/>
			     不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
			     可用元素： <input name="che" value="可用文本框" /><br/>
				 不可用元素：<input name="name" disabled="disabled"  value="不可用文本框"/><br/>
			 */
			/*
			 * val():获取和设置
			 * 	* 获取:不传参数
			 * 	* 设置:传递传输
			 */
			$("input:disabled").val("xxxxx");
			
		});

//  <button id="btn3">获取多选框选中的个数.</button>
		$("#btn3").click(function(){
			/*
			 * 	 <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
			     <input type="checkbox" name="newsletter" value="test2" />test2
			     <input type="checkbox" name="newsletter" value="test3" />test3
			     <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
			     <input type="checkbox" name="newsletter" value="test5" />test5
			 */
			alert($("input[name=newsletter]:checked").length);
			
		});

//  <button id="btn4">获取下拉框选中的内容.</button>
		$("#btn4").click(function(){
			/*
			 * 下拉列表1：<br/>
				<select name="test" multiple="multiple" style="height:100px">
					<option>浙江</option>
					<option selected="selected">湖南</option>
					<option>北京</option>
					<option selected="selected">天津</option>
					<option>广州</option>
					<option>湖北</option>
			    </select>
			    
			     <br/><br/>
			     下拉列表2：<br/>
				 <select name="test2" >
			    <option>浙江</option>
			    <option>湖南</option>
			    <option selected="selected">北京</option>
			    <option>天津</option>
			    <option>广州</option>
			    <option>湖北</option>
			    </select>
			 */
			alert($("select>option:selected").text());
			
		});

	});
  </script>

</head>
<body>
  <h3> 表单对象属性过滤选择器.</h3>
   <form id="form1" action="#">
	<button type="reset">重置所有表单元素</button>
	<input type="checkbox" id="isreset" checked="checked"/><label for="isreset">点击下列按钮时先自动重置页面</label>	
	<br /><br />
  <button id="btn1">对表单内 可用input 赋值操作.</button>
  <button id="btn2">对表单内 不可用input 赋值操作.</button>
  <button id="btn3">获取多选框选中的个数.</button>
  <button id="btn4">获取下拉框选中的内容.</button>
 
  <br /><br />
	
     可用元素：<input name="add" value="可用文本框"/>  <br/>
     不可用元素：<input name="email" disabled="disabled" value="不可用文本框"/><br/>
     可用元素： <input name="che" value="可用文本框" /><br/>
	 不可用元素：<input name="name" disabled="disabled"  value="不可用文本框"/><br/>
	 <br/>
     多选框：<br/>
	 <input type="checkbox" name="newsletter" checked="checked" value="test1" />test1
     <input type="checkbox" name="newsletter" value="test2" />test2
     <input type="checkbox" name="newsletter" value="test3" />test3
     <input type="checkbox" name="newsletter" checked="checked" value="test4" />test4
     <input type="checkbox" name="newsletter" value="test5" />test5
	 <div></div>

	 <br/><br/><br/><br/><br/><br/><br/><br/><br/><br/>
     下拉列表1：<br/>
	<select name="test" multiple="multiple" style="height:100px">
		<option>浙江</option>
		<option selected="selected">湖南</option>
		<option>北京</option>
		<option selected="selected">天津</option>
		<option>广州</option>
		<option>湖北</option>
    </select>
    
     <br/><br/>
     下拉列表2：<br/>
	 <select name="test2" >
    <option>浙江</option>
    <option>湖南</option>
    <option selected="selected">北京</option>
    <option>天津</option>
    <option>广州</option>
    <option>湖北</option>
    </select>
	<br/><br/>

     <div></div>
  </form>



<!-- Resources from http://down.liehuo.net -->
</body>
</html>

9、表单选择器

<!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>
 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 <title>09-表单选择器.html</title>
 <!--   引入jQuery -->
 <script src="../js/jquery-1.4.2.js" type="text/javascript"></script>
  <script type="text/javascript">
  //<![CDATA[
  $(document).ready(function(){

    var $alltext = $("#form1 :text");
    var $allpassword= $("#form1 :password");
    var $allradio= $("#form1 :radio");
    var $allcheckbox= $("#form1 :checkbox");

	var $allsubmit= $("#form1 :submit");
	var $allimage= $("#form1 :image");
	var $allreset= $("#form1 :reset");
	var $allbutton= $("#form1 :button"); // <input type=button />  和 <button ></button>都可以匹配
	var $allfile= $("#form1 :file");
    var $allhidden= $("#form1 :hidden"); // <input type="hidden" />和<div style="display:none">test</div>都可以匹配.
    var $allselect = $("#form1 select");
    var $alltextarea = $("#form1 textarea");
    
	var $AllInputs = $("#form1 :input");
	var $inputs = $("#form1 input");

    $("div").append(" 有" + $alltext.length + " 个（ :text 元素）<br/>")
	        .append(" 有" + $allpassword.length + " 个（ :password 元素）<br/>")
			.append(" 有" + $allradio.length + " 个（ :radio 元素）<br/>")
            .append(" 有" + $allcheckbox.length + " 个（ :checkbox 元素）<br/>")
			.append(" 有" + $allsubmit.length + " 个（ :submit 元素）<br/>")
            .append(" 有" + $allimage.length + " 个（ :image 元素）<br/>")
			.append(" 有" + $allreset.length + " 个（ :reset 元素）<br/>")
			.append(" 有" + $allbutton.length + " 个（ :button 元素）<br/>")
			.append(" 有" + $allfile.length + " 个（ :file 元素）<br/>")
			.append(" 有" + $allhidden.length + " 个（ :hidden 元素）<br/>")
			.append(" 有" + $allselect.length + " 个（ select 元素）<br/>")
			.append(" 有" + $alltextarea.length + " 个（ textarea 元素）<br/>")
			.append(" 表单有 " + $inputs.length + " 个（input）元素。<br/>")
			.append(" 总共有 " + $AllInputs.length + " 个(:input)元素。<br/>")
			.css("color", "red")

    $("form").submit(function () { return false; }); // return false;不能提交.

  });
  //]]>
  </script>
</head>
<body>
  <form id="form1" action="#">
    <input type="button" value="Button"/><br/>
    <input type="checkbox" name="c"/>1<input type="checkbox" name="c"/>2<input type="checkbox" name="c"/>3<br/>
    <input type="file" /><br/>
    <input type="hidden" /><div style="display:none">test</div><br/>
    <input type="image" /><br/>
    <input type="password" /><br/>
    <input type="radio" name="a"/>1<input type="radio" name="a"/>2<br/>
    <input type="reset" /><br/>
    <input type="submit" value="提交"/><br/>
    <input type="text" /><br/>
    <select><option>Option</option></select><br/>
    <textarea rows="5" cols="20"></textarea><br/>
    <button>Button</button><br/>
  </form>
 
  <div></div>
<!-- Resources from http://down.liehuo.net -->
</body>
</html>





jquery选择器
qq_56248592的博客
09-26 1356
全选的选择器* id选择器：$("#id的属性值") 类选择器：$(".class的属性值") 标签选择器：$("标签名") 并集选择器：$("选择器1，选择器2") 交集选择器 层级选择器 后代选择器：$("选择器1 选择器2") 子选择器：$("选择器1 > 选择器2") 属性选择器 属性名称选择器：$("选择器[属性名]") 属性选择器： $("选择器[属性名='值']") $("选择器[属性名!='值']") $("选择器[属性名^='值']") $("选择器[属性名$='值']") $...
jQuery 选择器简介及其代码样例
alankuo的专栏
11-12 1753
jQuery选择器是一种强大的工具，用于在HTML文档中快速、便捷地选取一个或多个DOM元素，以便对这些元素进行后续的操作，比如修改样式、添加事件处理函数、获取或修改元素内容等。它提供了多种类型的选择器，每种类型都有其特定的用途和语法，使得开发者可以根据元素的不同属性（如id、class、标签名等）以及元素之间的关系来准确地定位到想要操作的元素。ID选择器：通过元素的唯一ID属性来选取元素。在HTML中，ID应该是唯一的，所以使用ID选择器通常会选取到唯一一个特定的元素。语法为，其中id-value。
jQuery选择器——内容过滤选择器
十一的博客
06-18 377
实例：&lt;!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"&gt; &lt;html xmlns="http://www.w3.org/1999/xhtml"&gt; &lt;head&gt; &lt
jQuery选择器
jxnd123456的博客
10-31 1613
在这个HTML结构中，大部分元素是动态生成的，但元素结构是固定的。下方第一层的id是我们定义的，不会动态变化，能够稳定获取。开发时遇到些不太好获取的元素时，需要去查获取元素的方式，由此总结了一下jQuery选择器，便于开发中快速获取DOM元素。
JQuery选择器超级详细
林高禄
08-06 1万+
基本选择器 id选择器：$("#id的属性值") 获取与指定id属性值匹配的元素 单击按钮，将id为myid的元素背景为绿色 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>JQuery选择器</title> <script src="js/jquery-3.3.1.min...
jQuery（二）jQuery选择器
kong7906928的博客
07-28 2029
jQuery的选择器
jquery选择器以及案例
m0_59745705的博客
11-03 1297
jquery选择器是jquery为我们提供的一组方法，让我们更加方便的获取到页面中的元素，注意：jquery选择器返回的是jquery对象。 jquery选择器有很多，但是选择器之间可以互相替代，就是说获取到一个元素，会有很多种方法获取到。所以我们平时真正能用到的只是少数的最常用的选择器。 Css()方法：获取/设置样式 1.获取样式：css（）方法设置参数为要获取值的样式名。 $('#getbtn').click(function(){ 1.1获取id为div1这个元素的样式 conso
jQuery选择器分类
weixin_45753617的博客
08-19 1286
jQuery选择器分类
jQuery选择器大全总结
impact_factor的博客
08-12 1万+
jQuery选择器jQuery的选择器基本选择器基本过滤选择器属性过滤选择器表单选择器子元素选择器操作元素属性操作样式操作样式类获取或设置元素高度和宽度操作HTML代码操作text代码 jQuery的选择器 基本选择器 id选择器：#id 类选择器：.class 标签名选择器： * ：匹配所有元素 基本过滤选择器 Element:first ：选取第一个元素 Element:last : 选取最后一个元素 Element:not(selector)：去除所有与给定选择器匹配的元素 Element:ev
jQuery 选择器
热门推荐
小葵坤_易安的博客
02-22 2万+
一、什么是jQuery选择器 jQuery选择器继承了CSS与Path语言的部分语法，允许通过标签名、属性名或内容对DOM元素进行快速、准确的选择，而不必担心浏览器的兼容性，通过jQuery选择器对页面元素的精准定位，才能完成元素属性和行为的处理。 二、jQuery选择器的优势 代码更简单； 支持CSS1到CSS3选择器； 完善的机制处理 三、jQuery选择器 jQuery选择器分类示意...
jQuery选择器中的特殊符号处理方法
12-29
一般情况下，在jQuery选择器中，我们很少会用到诸如“.”、“#”、“(”、“[”等特殊字符，因为根据W3C规定，HTML文档中属性的值是不能包含有这些个特殊字符的，但是在实际应用中，偶尔也会遇到表达式中含有“#”和...
详解强大的jQuery选择器之基本选择器、层次选择器
12-10
jQuery选择器是jQuery库的核心特性之一，它极大地简化了JavaScript中的DOM操作，使得开发者能够更加高效地选取和操作页面上的元素。本文将详细介绍jQuery的基本选择器和层次选择器。 首先，我们来看基本选择器，这...
jQuery 选择器用法实例分析【prev + next】
10-15
jQuery选择器是jQuery库中的核心部分，用于高效地选取DOM元素。在JavaScript中，选取DOM元素通常需要编写复杂的代码，而jQuery提供了一套简洁、强大的选择器系统，使得选取元素变得简单直观。本文将深入探讨jQuery...
jquery选择器简述
11-24
jQuery选择器是jQuery库的核心功能之一，它极大地简化了对网页DOM元素的选取，使得JavaScript开发者能够更加高效地操作页面内容。jQuery选择器基于CSS选择器，并在其基础上扩展了一些更强大的功能，使得开发者能以...
永磁同步电机FOC控制与七段式SVPWM调制技术详解及MATLAB仿真
08-08
永磁同步电机（PMSM）的FOC（场向量控制）技术和七段式SVPWM（空间矢量脉宽调制）调制技术。首先解释了FOC控制的工作原理，包括将三相电流转换为d轴和q轴电流，以实现对电机转矩和磁场的独立控制。接着阐述了七段式SVPWM调制技术的特点，通过七个不同开关状态合成目标电压矢量，提高电压利用率和电机效率。文中还讨论了调压调速模型及电流环、速度环和位置环的作用，确保电机运行的稳定性。最后展示了基于MATLAB R2018b的仿真模型和结果，验证了这两种技术的有效性和优越性。 适用人群：电机控制领域的研究人员和技术人员，特别是对永磁同步电机有研究兴趣的专业人士。 使用场景及目标：适用于需要深入了解永磁同步电机控制技术的研究项目或工业应用。目标是掌握FOC控制和七段式SVPWM调制的具体实现方法，提升电机控制系统的性能和效率。 其他说明：本文提供了详细的理论背景和技术细节，并附带MATLAB仿真模型，便于读者进行实验验证和进一步研究。
深度学习项目介绍 Python实现基于CNN-BiLSTM卷积神经网络结合双向长短期记忆网络进行多变量时序预测的详细项目实例（含模型描述及部分示例代码）
08-08
内容概要：本文档详细介绍了基于CNN-BiLSTM架构的多变量时序预测项目，旨在解决传统方法难以处理的多变量间复杂非线性关系和长期依赖问题。项目通过卷积神经网络（CNN）自动提取局部特征，结合双向长短期记忆网络（BiLSTM）捕捉序列的双向依赖，构建了高效的预测模型。文档涵盖了项目背景、目标、挑战及解决方案，并提供了模型架构和代码示例。模型架构包括数据输入层、卷积特征提取层、双向LSTM时序建模层和全连接输出层，通过端到端训练自动调整参数，提升泛化能力和预测准确性。; 适合人群：具备一定编程基础，特别是对深度学习和时序数据分析感兴趣的开发者、研究人员及工程师。; 使用场景及目标：①应用于工业设备状态监测、金融市场分析、气象预测、交通流量预估等多领域；②通过自动化特征提取和时间依赖建模，减少专家干预，提高预测精度和模型鲁棒性；③优化模型训练和推理速度，满足实时预测需求。; 阅读建议：文档不仅包含理论讲解，还有详细的代码实现和模型架构介绍，建议读者结合实际案例进行实践，重点关注数据预处理、模型训练调优及预测性能提升等方面的内容。
用于确定高层大气潮汐模式的星座中卫星数量的优化”的补充材料。.zip
08-08
1.版本：matlab2014a/2019b/2024b 2.附赠案例数据可直接运行。 3.代码特点：参数化编程、参数可方便更改、代码编程思路清晰、注释明细。 4.适用对象：计算机，电子信息工程、数学等专业的大学生课程设计、期末大作业和毕业设计。
我觉得没什么好说的，有一行代码意义不明，但删了不能用
最新发布
08-08
我觉得没什么好说的，有一行代码意义不明，但删了不能用
jQuery选择器详解与应用
"jQuery选择器全解：包括动态创建DOM元素、封装DOM对象以及文档就绪的简写方式。此内容详细介绍了jQuery选择器的使用，特别是jQuery支持的不仅是CSS选择器，还包括自定义选择器。jQuery选择器分为‘选择’和‘过滤’...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值