jQuery选择器（一）

最新推荐文章于 2022-10-09 11:18:42 发布

boxyuan

最新推荐文章于 2022-10-09 11:18:42 发布

阅读量363

点赞数

分类专栏： JQuery 文章标签：前端 JQuery

本文链接：https://blog.csdn.net/boxyuan/article/details/72817178

版权

JQuery 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

JQuery选择器：

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

简洁的写法：

$(“#id”) 等价于 document.getElementById("id")
$(“tagName”) 等价于 document.getElementsByTagName("tagName")
$(“.class”)

1)使用三种方式定位html中的元素

a)通过ID
$("#ID")
b)通过标签名
$("标签名")
c)通过样式名
$(".样式名")

2)dom中，需要判段查找到的元素是否为null，

而jquery中，无需判段，因为jquery本身内置判段器，在查找不到的情况下，返回"undefined"

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	<script type="text/javascript" src="js/jquery-1.6.js"></script></head>
	<body>
		<input type="text" id="textID" value="这是jQuery" />
		<div id="divID" class="divClass">这是jQuery</div>
		<script type="text/javascript">
			//通过"#id"来定位<input>
			alert($("#textID").val());
			//通过标签名定位
			alert($("div").html());
			alert($("input").val());
			//通过样式名定位
			alert($(".divClass").html());
			
		</script>
 	</body>
</html>

DOM与jQuery对错误的处理方式比较

/若网页中没有id=value的元素,浏览器会报错
   document.getElementById("username").value;
   
   //需要判断document.getElementById("username")是否存在
   if(document.getElementById("username")){
      var username=document.getElementById("username");
      alert(username.value);
   }else{
      alert("没有该id元素");
   }
  
   //使用jQuery处理即使不存在也不会报错
   var $username=$("#usernamee");
   alert("$username.val());

jQuery九类选择器

1)基本选择器

#id/标签名/样式名/选择器A,选择器B

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.6.js"></script>
	</head>
	<body>
		<div id="divID1">div1</div>
		<div id="divID2">div2</div>
		<div id="divID3">div3</div>
		<span class="spanclass">span1</span>
		<span class="spanclass">span2</span>
		<span class="spanclass">span3</span>
		<p align="center">p1</p>
		<script type="text/javascript">
			// 查找id为divID的元素
			alert($("#divID1").html());
			//查找标签为div的大小与长度
			alert($("div").size());
			alert($("div").length);
			//查找样式为spanclass的的元素个数与大小
			alert($(".spanclass").size());
			alert($(".spanclass").length);
			//查找div,span,p标签的个数
			alert($("div,span,p").length);
			//查找id为diviD,class为spanClass,p元素的个数
			alert($("#divID1,.spanclass,p").size());
		</script>
	</body>
</html>

2)层次选择器

*form input：查询form下所有input元素，含有后代关系
form>input：查询form下所有input元素，有有父子关系，没有后代关系
form+input：查询与form同级的第一个input元素，是兄弟关系
form~input：查询与form同级的所有input元素，是兄弟关系

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.6.js"></script>
	</head>
	<body>
	 <form>
	 	<input type="text" value="typetext" />
	 	<table align="center">
	 	<tr>
	 		<td>
	 			<input type="checkbox" value="checkbox" />
	 		</td>
	 	</tr>
	 	</table>
	 </form>
	 <input type="radio" value="radio1" />
	 <input type="radio" value="radio2" />
	 <input type="radio" value="radio3" />
		<script type="text/javascript">
			/*
			*form input：查询form下所有input元素，含有后代关系
			form>input：查询form下所有input元素，有有父子关系，没有后代关系
			form+input：查询与form同级的第一个input元素，是兄弟关系
			form~input：查询与form同级的所有input元素，是兄弟关系
			*/
			alert($("form input").size());
			alert($("form>input").size());
			alert($("form+input").size());
			alert($("form~input").size());
		</script>
	</body>
</html>

3)增强型基本选择器

:first：查询第一个元素
:last：查询最后个元素
:checked：查询选中的复选框
:not(:checked)：查询未选中的复选框
:even：偶数
:odd：奇数
:eq()：索引从0开始
:gt():大于索引号
:lt()：小于索引号
:header：查询所有<h1/2/3/4/5/6>标签
.css("key","value")为查询到的所有标签添加CSS样式

4)内容选择器

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript" src="js/jquery-1.6.js"></script>
	</head>
	<body>
	 <form>
	 	<input type="text" value="typetext" />
	 	<table align="center">
	 	<tr>
	 		<td>
	 			<input type="checkbox" value="checkbox" />
	 		</td>
	 	</tr>
	 	</table>
	 </form>
	  <hr/>
	 <input type="radio" value="radio1" />
	 <input type="radio" value="radio2" />
	 <input type="radio" value="radio3" />
	 <hr />
	 <ul>
	 	<li>list item 1</li>
	 	<li>list item 2</li>
	 	<li>list item 3</li>
	 	<li>list item 4</li>
	 	<li>list item 5</li>
	 </ul>
	 <hr/>
	 <input type="checkbox" checked="checked"/>
	 <input type="checkbox"/> 
	 <input type="checkbox"/>
	  <hr/>
	 <table border="1">
	 	<tr><td>line1</td></tr>
	 	<tr><td>line2</td></tr>
	 	<tr><td>line3</td></tr>
	 </table>
	  <hr/>
	 <h1>h1</h1>
	 <h2>h2</h2>
	 <h3>h3</h3>
	  <hr/>
	 <p>ppp</p>
	  <hr/>
		<script type="text/javascript">
			/*
			*form input：查询form下所有input元素，含有后代关系
			form>input：查询form下所有input元素，有有父子关系，没有后代关系
			form+input：查询与form同级的第一个input元素，是兄弟关系
			form~input：查询与form同级的所有input元素，是兄弟关系
			*/
			/*
			alert($("form input").size());
			alert($("form>input").size());
			alert($("form+input").val());
			alert($("form~input").size());
			
			*/
			
			/*
			 * :first：查询第一个元素
				:last：查询最后个元素
				:checked：查询选中的复选框
				:not(:checked)：查询未选中的复选框
				:even：偶数
				:odd：奇数
				:eq()：索引从0开始
				:gt():大于索引号
				:lt()：小于索引号
				:header：查询所有<h1/2/3/4/5/6>标签
				 .css("key","value")为查询到的所有标签添加CSS样式
			 */
			/*
			alert($("ul li:first").html());
			alert($("ul>li:first").html());
			alert($("ul li:last").html());
			alert($("ul>li:last").html());
			alert($("input:checked").size());
			alert($("input:not(:checked)").size());
			*/
			//alert($("table tr:odd").size());
			//alert($("table tr:even").size());
			//alert($("table tr:eq(1)").html());
			alert($("table tr:gt(0)").size());
			alert($("table tr:lt(2)").size());
			alert($(":header").size());
			$(":header").css("background","coral");
		</script>
	</body>
</html>

boxyuan

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery选择器（一）

JQuery选择器：选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器jQuery 选择器的优点: 简洁的写法： $(“#id”) 等价于 document.getElementById("id") $(“tagName”) 等价于 document.getElements
复制链接

扫一扫