jquery选择器练习例子

最新推荐文章于 2022-06-29 16:26:03 发布

原创最新推荐文章于 2022-06-29 16:26:03 发布 · 1.1k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #button #div #function #class #javascript

jquery学习专栏收录该内容

9 篇文章

订阅专栏

本文通过实例讲解了jQuery中各种选择器的使用方法，包括基本选择器、简单选择器等，演示了如何通过不同的选择器来选取页面上的元素并修改其样式。

<!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>基本选择器学习</title>
<script language="javascript" type="text/javascript" src="../include/jquery.js"></script>
<style>
  div{
	  width:150px;
	  height:150px;
	  border:1px dashed #00F;
	  background-color:#CCC;
	  margin:5px;
	  float:left;}
	  
  .one-1{
	  width:80px;
	  margin:30px;
	  height:80px;
	  border:1px dashed #00F;
	  background-color: #FFC;
	  }

</style>



<script language="javascript" type="text/javascript">

//使用jquery加载事件
$(document).ready(function (){
	
	//<input id="btn0" type="button" value="清空样式" />
	$("#btn0").click(function (){
		
		//当点击按钮后，设置id=two的div的背景颜色是绿色
		$("*").removeAttr("style");
		
	});
	
	
	//<input id="btn1" type="button" value="选中id=two的div，并且改变背景颜色是green (#two)" />
	
	//增加id为btn1按钮的事件
	$("#btn1").click(function (){
		
		//当点击按钮后，设置id=two的div的背景颜色是绿色
		$("#two").css("background","green");
		
	});
	
	//<input id="btn2" type="button" value="选中class=one-1的div,并且设置该div的背景颜色为green ('.one-1')" />
	//增加id为btn1按钮的事件
	$("#btn2").click(function (){
		
		//当点击按钮后，设置id=two的div的背景颜色是绿色
		$(".one-1").css("background","green");
		
	});
	
	//<input id="btn3" type="button" value="选中页面中所有的元素，并且设置背景颜色为green ('*')" />
	//增加id为btn1按钮的事件
	$("#btn3").click(function (){
		
		//当点击按钮后，设置id=two的div的背景颜色是绿色
		$("*").css("background","green");
		
	});
	
	//<input id="btn4" type="button" value="选中所有的div $('div')" />
	
	//增加id为btn4按钮的事件
	$("#btn4").click(function (){
		
		//当点击按钮后，设置id=two的div的背景颜色是绿色
		$("div").css("background","green");
		
	});
	
	//<input id="btn5" type="button" value="选中id=three,class=one-1的，span的元素，并且设置他们的背景颜色为green" /></div>
	
	//增加id为btn5按钮的事件
	$("#btn5").click(function (){
		
		//当点击按钮后，设置id=two的div的背景颜色是绿色
		$("#three,.one-1,span").css("background","green");
		
	});
	
	
	
	
	
	
	
});





</script>



</head>

<body>
<div id="one">id=one
   <div class="one-1">class=one-1</div>
</div>
<div id="two">id=two<span>span的内容</span></div>
<div id="three">id=three</div>
<div class="d2">class=d2</div>

<div style="clear:both;">
	<input id="btn0" type="button" value="清空样式" />
	<input id="btn1" type="button" value="选中id=two的div，并且改变背景颜色是green  $('#two')" />
	<input id="btn2" type="button" value="选中class=one-1的div,并且设置该div的背景颜色为green $('.one-1')" />
	<input id="btn3" type="button" value="选中页面中所有的元素，并且设置背景颜色为green $('*')" />
	<input id="btn4" type="button" value="选中所有的div $('div')" />
	<input id="btn5" type="button" value="选中id=three,class=one-1的，span的元素，并且设置他们的背景颜色为green" /></div>
</body>
</html>

上例子是练习 id选择器，类选择器 *选择器的用法很难表达，看实例

<!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>简单选择器学习</title>
<script language="javascript" type="text/javascript" src="../include/jquery.js"></script>
<style>
  div{
	  width:150px;
	  height:150px;
	  border:1px dashed #00F;
	  background-color:#CCC;
	  margin:5px;
	  float:left;}
	  
  .one-1{
	  width:80px;
	  margin:30px;
	  height:80px;
	  border:1px dashed #00F;
	  background-color: #FFC;
	  }

</style>



<script language="javascript" type="text/javascript">

//使用jquery加载事件
$(document).ready(function (){
	
	//<input id="btn0" type="button" value="清空样式" />
	$("#btn0").click(function (){
		
		//当点击按钮后，设置id=two的div的背景颜色是绿色
		$("*").removeAttr("style");
		
	});
	
	
	//<input id="btn1" type="button" value="$('div:first') 选取所有<div>元素中第1个<div>元素" />
	
	//增加id为btn1按钮的事件
	$("#btn1").click(function (){
		
		//当点击按钮后，设置id=two的div的背景颜色是绿色
		//选取div下的span和class=p的元素下的span
		$("div:first").css("background","green");
		
	});
	
	//<input id="btn2" type="button" value="$('div:last') 选取所有<div>元素中最后一个<div>元素" />
	
	//增加id为btn2按钮的事件
	$("#btn2").click(function (){
		
		//当点击按钮后，设置id=two的div的背景颜色是绿色
		//选取div下的span和class=p的元素下的span
		$("div:last").css("background","green");
		
	});
	
	//<input id="btn3" type="button" value="$('div:not(.d2)') 选取所有<div>元素中class不等于d2  的<div>元素 " />
	
	//增加id为btn3按钮的事件
	$("#btn3").click(function (){
		
		//当点击按钮后，设置id=two的div的背景颜色是绿色
		//选取div下的span和class=p的元素下的span
		$("div:not(.one-1)").css("background","green");
		
	});
	
	//<input id="btn4" type="button" value="$('div:even') 选取所有<div>元素中 偶数个div元素 " />
	//增加id为btn3按钮的事件
	$("#btn4").click(function (){
		
		//当点击按钮后，设置id=two的div的背景颜色是绿色
		//注意这里从0个开始算，0,2,4,6,8
		$("div:even").css("background","green");
		
	});
	
	//<input id="btn5" type="button" value="$('div:odd') 选取所有<div>元素中 奇数个div元素，下标1开始，1,3,5 " />
	
		//增加id为btn5按钮的事件
	$("#btn5").click(function (){
		
		//注意这里从0个开始算，1,3,5,
		$("div:odd").css("background","green");
		
	});
	
	
	
});





</script>



</head>

<body>
<div id="one">id=one
   <div class="one-1">class=one-1</div>
</div>
<div id="two">id=two<br><span>id=two,span的内容<span>1111111111</span></span></div>

<div id="three">id=three<br><span>id=three,span的内容</span></div>
<div class="d2">class=d2</div>
<p class='p'>这里放了一个pi<br><span>pi里还有span</span></p>

<div style="clear:both;">
<input id="btn0" type="button" value="清空样式" />
<input id="btn1" type="button" value="$('div:first') 选取所有<div>元素中第1个<div>元素" />
<input id="btn2" type="button" value="$('div:last') 选取所有<div>元素中最后一个<div>元素" />
<input id="btn3" type="button" value="$('div:not(.d2)') 选取所有<div>元素中class不等于d2  的<div>元素 " />
<input id="btn4" type="button" value="$('div:even') 选取所有<div>元素中 偶数个div元素，下标0开始，0,2,4 " />
<input id="btn5" type="button" value="$('div:odd') 选取所有<div>元素中 奇数个div元素，下标1开始，1,3,5 " />
</div>
</body>
</html>

来一个有意思的例子

<!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>简单选择器学习</title>
<script language="javascript" type="text/javascript" src="../include/jquery.js"></script>

<script language="javascript" type="text/javascript">

//使用jquery加载事件
$(document).ready(function (){
	
	//<input type="button" id="btn0" value="选中索引值等于1的tr元素  $('tr:eq(1)')" />
	
	$("#btn0").click(function (){
		
		//设置索引值=1的tr
		$("tr:eq(1)").css("background","#ffff99");
		
	});
	
	
	//<input type="button" id="btn1" value="选中索引值大于3的tr元素  $('tr:gt(3)')" />
	$("#btn1").click(function (){
		
		//设置索引值>3的tr
		$("tr:gt(3)").css("background","#ffff99");
		
	});
	
	//<input type="button" id="btn2" value="选中索引值小于3的tr元素  $('tr:lt(3)')" />
	$("#btn2").click(function (){
		
		//设置索引值<3的tr
		$("tr:lt(3)").css("background","#ffff99");
		
	});
	
	
	//<input type="button" id="btn3" value="选中网页中所有的标题元素  $(':header')" />
	$("#btn3").click(function (){
		
		//设置所有的标题标签元素
		$(":header").css("background","#ffff99");
		
	});
	
	//<input type="button" id="btn4" value="选中正在执行动画的div $('div:animated')" />
	$("#btn4").click(function (){
		
		//设置所有的标题标签元素
		$("div:animated").css("background","red");
		
	});	
	
	
	
	
	
	
	
	
/*	function move(){
		
		$("#move").slideToggle(5000,move)
		
	}
	
	move();
	*/
	
	
	
	
	
   
});





</script>



</head>

<body>
<h1>简单选择器h1</h1>
<h2>简单选择器h2</h2>
<div id="move" style="background-color:blue; width:300px; height:300px; border:1px solid #FF0;">动画</div>
<table width="600" border="1">
  <tr>
    <td>姓名</td>
    <td>性别</td>
    <td>年龄</td>
    <td>手机</td>
    <td>QQ</td>
  </tr>
  <tr>
    <td>张三丰</td>
    <td>女</td>
    <td>102</td>
    <td>13312344321</td>
    <td>12344321</td>
  </tr>
  <tr>
    <td>张三丰</td>
    <td>女</td>
    <td>102</td>
    <td>13312344321</td>
    <td>12344321</td>
  </tr>
  <tr>
    <td>张三丰</td>
    <td>女</td>
    <td>102</td>
    <td>13312344321</td>
    <td>12344321</td>
  </tr>
  <tr>
    <td>张三丰</td>
    <td>女</td>
    <td>102</td>
    <td>13312344321</td>
    <td>12344321</td>
  </tr>
  <tr>
    <td>张三丰</td>
    <td>女</td>
    <td>102</td>
    <td>13312344321</td>
    <td>12344321</td>
  </tr>
  <tr>
    <td>张三丰</td>
    <td>女</td>
    <td>102</td>
    <td>13312344321</td>
    <td>12344321</td>
  </tr>
  <tr>
    <td>张三丰</td>
    <td>女</td>
    <td>102</td>
    <td>13312344321</td>
    <td>12344321</td>
  </tr>
  <tr>
    <td>张三丰</td>
    <td>女</td>
    <td>102</td>
    <td>13312344321</td>
    <td>12344321</td>
  </tr>
  <tr>
    <td>张三丰</td>
    <td>女</td>
    <td>102</td>
    <td>13312344321</td>
    <td>12344321</td>
  </tr>
  <tr>
    <td>张三丰</td>
    <td>女</td>
    <td>102</td>
    <td>13312344321</td>
    <td>12344321</td>
  </tr>
</table>

<input type="button" id="btn0" value="选中索引值等于1的tr元素  $('tr:eq(1)')" /><br>
<input type="button" id="btn1" value="选中索引值大于3的tr元素  $('tr:gt(3)')" /><br>
<input type="button" id="btn2" value="选中索引值小于3的tr元素  $('tr:lt(3)')" /><br>
<input type="button" id="btn3" value="选中网页中所有的标题元素  $(':header')" /><br>
<input type="button" id="btn4" value="选中正在执行动画的div $('div:animated')" /><br>
</body>
</html>