JQuery常用选择器

最新推荐文章于 2022-09-22 19:37:04 发布

SunshineBoyXiong

最新推荐文章于 2022-09-22 19:37:04 发布

阅读量305

点赞数

分类专栏： JQuery

本文链接：https://blog.csdn.net/SunshineBoyXiong/article/details/63252303

版权

JQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

常用的基本选择器：

<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE HTML>
<html>
   <head>
   <meta >
      <script type="text/javascript" src="jquery-3.1.1.js"></script>
      <script type="text/javascript">
      	$(function(){
      		alert($("#ID").val());//根据Id选择元素，val（）得到value
      		alert($("a").html());//根据标记选择元素，html（）得到内容
      		alert($(".classname").val());//根据class选择元素
      		alter($("*").length);//所有元素
      		alert($("input,a").length);//组合选择元素
      	});
      </script>
   </head>
   <body>
   <input type="text" id="ID" value="根据ID选择" />
   <a>根据元素名称选择</a>
   <input type="text" class="classname" value="根据元素css类名选择" />
   </body>
</html>

常用的层次选择器：

所有儿孙----所有儿子----后面一个兄弟----后面所有兄弟

<%@ page contentType="text/html; charset=UTF-8" %>
<!DOCTYPE HTML>
<html>
   <head>
      <script src="jquery-3.1.1.js" type="text/javascript"></script>
	  <script type="text/javascript">
		$(function(){
			alert($("#divTest a").length);//查找id为divTest元素的所有a标记元素子孙 -----3个
			alert($("#divTest>input").length);//查找id为idvTest的元素的所有input子元素----4个
			alert($("#next+input").val());//查找id为next的元素后面同辈input元素----担当
			alert($("#next~input").length);//查找id为next的元素后面所有同辈input元素------2个
		});
	  </script>
   </head>
   <body>
     <div id="divTest">
       <input type="text" value="投资" />
       <input id="next" type="text" />
       <input type="text"  value="担当" />
       <input type="text" title="学习" value="学习" />
       <a>1<input type="text"  value="股票" /></a>
       <a>2<a>3</a></a>
     </div>
   <

/body>
</html>

儿子

SunshineBoyXiong

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JQuery常用选择器

常用的基本选择器： $(function(){ alert($("#ID").val());//根据Id选择元素，val（）得到value alert($("a").html());//根据标记选择元素，html（）得到内容 alert($(".classname").val(
复制链接

扫一扫