jquery选择器

最新推荐文章于 2024-10-31 15:39:18 发布

原创最新推荐文章于 2024-10-31 15:39:18 发布 · 607 阅读

1 ·

CC 4.0 BY-SA版权

JQuery 专栏收录该内容

3 篇文章

订阅专栏

jquery选择器是jquery框架的基础，jquery对事件的处理、DOM操作、css动态控制、ajax通信和动画设计都是在选择器基础上进行的。

这里主要介绍基本选择器：ID选择器、标签选择器、类选择器、通配选择器和组选择器。

选择器	说明	返回值
#id	根据id匹配元素，如有特殊字符用两个反斜杠转义	单个元素
element	根据指定元素类型名称选择该类所有元素	同类型集合元素
.class	根据指定类名选择该类所有元素	集合元素
*	在限定范围内选定所有元素	所有元素集合
select1，select2.。。。	分别选择选择器组中匹配的每一个元素，然后合并返回	集合元素

下面给出例子：

1.id选择

<script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
	<script type="text/javascript">
	$(function(){
		$("#li1").css("color","red");
	})
	</script>
  </head>
  <body>
   <ul>
   		<li id="li1">列表1</li>
   		<li>列表2</li>
   		<li>列表3</li>
   		<li>列表4</li>
   </ul>
  </body>

2.标签选择器

<script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
	<script type="text/javascript">
	$(function(){
		$("li").css("color","red");
	})
	</script>
  </head>
  <body>
   <ul>
   		<li id="li1">列表1</li>
   		<li>列表2</li>
   		<li>列表3</li>
   		<li>列表4</li>
   </ul>
  </body>

3.类选择器

<script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
	<script type="text/javascript">
	$(function(){
		$(".li2").css("color","red");
	})
	</script>
  </head>
  <body>
   <ul>
   		<li id="li1">列表1</li>
   		<li class="li2">列表2</li>
   		<li>列表3</li>
   		<li>列表4</li>
   </ul>
  </body>

4.通配选择器

<script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
	<script type="text/javascript">
	$(function(){
		$("ul *").css("color","red");
	})
	</script>
  </head>
  <body>
   <ul>
   		<li id="li1">列表1</li>
   		<li class="li2">列表2</li>
   		<li>列表3</li>
   		<li>列表4</li>
   </ul>
  </body>

5组选择器

<script type="text/javascript" src="jquery/jquery-3.1.1.js"></script>
	<script type="text/javascript">
	$(function(){
		$("#li1,.li2").css("color","red");
	})
	</script>
  </head>
  <body>
   <ul>
   		<li id="li1">列表1</li>
   		<li class="li2">列表2</li>
   		<li>列表3</li>
   		<li>列表4</li>
   </ul>
  </body>

简单的五类选择器到此结束了。。