jquery基本选择器和层次选择器的使用

最新推荐文章于 2024-01-14 11:54:30 发布

zhaoxinglei0309

最新推荐文章于 2024-01-14 11:54:30 发布

阅读量1k

点赞数

文章标签： jquery button div function input javascript

本文链接：https://blog.csdn.net/zhaoxinglei0309/article/details/7374800

版权

1、什么是选择器

选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器

2、jQuery选择器分类

1）基本选择器 2）层次选择器

3）过滤选择器 4）表单选择器

5）简单选择器 6）内容选择器

7）可见性选择器 8）属性选择器

9）子元素选择器 9）表单对象属性等

3、jquery基本选择器的使用

jQuery基本选择器：

$(“#id”): 根据给定的id匹配一个元素

$(“.myclass”):根据类名匹配元素

$(“*”): 选取html页面中所有的元素

$(“div”):选取html页面中所有的div元素

$(“div,span,myclass”):选取所有的<div><span><myclass>一组元素

下面的代码基本包括了基本选择器的使用

<!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="../jquery-1.6.js"></script>
<style>
div{
	width:100px;
	height:100px;
	background-color:#6FF;
	margin:0px;
	border:1px dashed #F96;
	float:left;
	}
.one-1{
	width:40px;
	height:40px;
	background-color:#F33;
	margin:20px;
	}


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

   $(document).ready(function (){
	   //<input type="button" id="but0" value="选中two并且背景颜色变成黄色$('#two')"></div>
	   $("#but0").click(function (){
		   $("#two").css("background","#ffff99")
		   
		   
		   
		   });
	  //<input type="button" id="but1" value="类改变颜色$('.one-1')"></div>

	   $("#but1").click(function (){
		   $(".one-1").css("background","#cccccc");
		   
		   
		   });
		   
	 //<input type="button" id="but2" value="所有标签$('div')">
	   $("#but2").click(function (){
		   $("div").css("background","yellow");
		   
		   
		   });
	
	//<input type="button" id="but3" value="群组$('#three,.one-1,span')">
	   $("#but3").click(function (){
		    $("#three,.one-1,span").css("background","#ccffcc");
		   
		   
		   
		   });
		   
	//<input type="button" id="but3" value="清空样式">
	 $("#but4").click(function (){
		 
		 $("*").removeAttr("style");
		 
		 });
	//<input type="button" id="but4" value="$('div:first') 选取所有<div>元素中第1个<div>元素">
	 $("#but5").click(function (){
		 $("div:first").css("background","#666666");
		 
		 
		 });
	//<input type="button" id="but6" value="$('div:last') 选取所有<div>元素中最后一个<div>元素">
	$("#but6").click(function (){
		
		$("div:last").css("background","#FF9");
		
		});
		
	//<input type="button" id="but7" value="$('div: not(.one-1)') 选取class不是one-1 的< div >元素not
	$("#but7").click(function (){
		
		$("div:not(.one-1)").css("background","#f99");
		
		});
		
  //<input type="button" id="but8" value="$('div:even') 选取索引值为偶数的<div>">
    $("#but8").click(function (){
		
		$("div:even").css("background","#fff");
		
		});
//<input type="button" id="but9" value="$('div:odd') 选取索引值为基数的<div>">
   $("#but9").click(function (){
	    $("div:odd").css("background","#ccc");
	   
	   });
	   
	   });


</script>

</head>

<body>
<div id="one">id=one
<div class="one-1">我是one-1</div>
</div>
<div id="two">我是two<span>哈哈哈哈</span></div>
<div id="three">我是three</div>
<div id="four">我是four</div>
<div class="five">我是five</div>
<div style="clear:both;">
<input type="button" id="but0" value="选中two并且背景颜色变成黄色$('#two')">
<input type="button" id="but1" value="类改变颜色$('.one-1')">
<input type="button" id="but2" value="所有标签$('div')">
<input type="button" id="but3" value="群组$('#three,.one-1,span')">
<input type="button" id="but4" value="清空样式">
<input type="button" id="but5" value="$('div:first') 选取所有<div>元素中第1个<div>元素">
<input type="button" id="but6" value="$('div:last') 选取所有<div>元素中最后一个<div>元素">
<input type="button" id="but7" value="$('div: not(.one-1)') 选取class不是one-1 的< div >元素not">
<input type="button" id="but8" value="$('div:even') 选取索引值为偶数的<div>">
<input type="button" id="but9" value="$('div:odd') 选取索引值为基数的<div>">
</div>
</body>
</html>

效果图如下

下面是基本选择器的几种，刚刚学了几个还没有学完，下面还包括选中正在执行的动画div

<!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="jquery-1.6.js">

</script>

<script>
 $(document).ready(function (){
	// $("tr:even").css("background","#ffff99");
	// $("tr:odd").css("background","#cccccc");
	
	
	//<input type="button" id="btn0" value="选中索引值等于1的tr元素$('tr:sq(1)')">
	 
	 $("#btn0").click(function (){
		 //设置索引值=1的tr
		 $("tr:eq(1)").css("background","#ffff99");
		 
		 });
		 
		 
		 //<input type="button" id="btn0" value="选中索引值大于3的tr元素$('tr:gt(3)')">
		 $("#btn1").click(function (){
		 //设置索引值=1的tr
		 $("tr:gt(3)").css("background","#ffff99");
		 
		 });
		 //<input type="button" id="btn0" value="选中索引值小于于3的tr元素$('tr:lt(3)">
	 $("#btn2").click(function (){
		 //设置索引值<1的tr
		 $("tr:lt(3)").css("background","#ffff99");
		 
		 });
		 
		 //<input type="button" id="btn0" 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:#FC0;width:300px;height:300px;border:1px solid #3CF";>动画</div>
<table width="300" border="1" cellpadding="0">
  <tr>
    <td>姓名</td>
    <td>性别</td>
    <td>年龄</td>
    <td>手机</td>
    <td>QQ</td>
  </tr>
  <tr>
    <td><h3>豆</h3></td>
    <td>女</td>
    <td>14</td>
    <td>1234455</td>
    <td>34345</td>
  </tr>
  <tr>
    <td>豆</td>
    <td>女</td>
    <td>14</td>
    <td>1234455</td>
    <td>34345</td>
  </tr>
  <tr>
   <td>豆</td>
    <td>女</td>
    <td>14</td>
    <td>1234455</td>
    <td>34345</td>
  </tr>
  <tr>
    <td>豆</td>
    <td>女</td>
    <td>14</td>
    <td>1234455</td>
    <td>34345</td>
  </tr>
  <tr>
    <td>豆</td>
    <td>女</td>
    <td>14</td>
    <td>1234455</td>
    <td>34345</td>
  </tr>
  <tr>
    <td>豆</td>
    <td>女</td>
    <td>14</td>
    <td>1234455</td>
    <td>34345</td>
  </tr>
  <tr>
    <td>豆</td>
    <td>女</td>
    <td>14</td>
    <td>1234455</td>
    <td>34345</td>
  </tr>
</table>
<input type="button" id="btn0" value="选中索引值等于1的tr元素$('tr:eq(1)')">
<input type="button" id="btn1" value="选中索引值大于3的tr元素$('tr:gt(3)')">
<input type="button" id="btn2" value="选中索引值小于于3的tr元素$('tr:lt(3)">
<input type="button" id="btn3" value="选中网页中所有的标题元素$(':header')">
<input type="button" id="btn4" value="选中正在执行动画的div $('div:animated')">
</body>
</html>

效果图如下

zhaoxinglei0309

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jquery基本选择器和层次选择器的使用

1、什么是选择器选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器2、jQuery选择器分类 1）基本选择器 2）层次选择器 3）过滤选择器 4）表单选择器 5）简单选择器 6）内容选择器 7）可见性选择器 8）属性选择器
复制链接

扫一扫