jQuery 选择器用法

最新推荐文章于 2023-04-23 17:34:04 发布

azheng51714

最新推荐文章于 2023-04-23 17:34:04 发布

阅读量497

点赞数

分类专栏： javascript and jQuery

本文链接：https://blog.csdn.net/azheng51714/article/details/37728551

版权

javascript and jQuery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

jQuery 参考手册 - 选择器

jQuery 选择器

选择器	实例	选取
*	$("*")	所有元素
#id	$("#lastname")	id="lastname" 的元素
.class	$(".intro")	所有 class="intro" 的元素
element	$("p")	所有 <p> 元素
.class.class	$(".intro.demo")	所有 class="intro" 且 class="demo" 的元素

:first	$("p:first")	第一个 <p> 元素
:last	$("p:last")	最后一个 <p> 元素
:even	$("tr:even")	所有偶数 <tr> 元素
:odd	$("tr:odd")	所有奇数 <tr> 元素

:eq(index)	$("ul li:eq(3)")	列表中的第四个元素（index 从 0 开始）
:gt(no)	$("ul li:gt(3)")	列出 index 大于 3 的元素
:lt(no)	$("ul li:lt(3)")	列出 index 小于 3 的元素
:not(selector)	$("input:not(:empty)")	所有不为空的 input 元素

:header	$(":header")	所有标题元素 <h1> - <h6>
:animated		所有动画元素

:contains(text)	$(":contains('W3School')")	包含指定字符串的所有元素
:empty	$(":empty")	无子（元素）节点的所有元素
:hidden	$("p:hidden")	所有隐藏的 <p> 元素
:visible	$("table:visible")	所有可见的表格

s1,s2,s3	$("th,td,.intro")	所有带有匹配选择的元素

[attribute]	$("[href]")	所有带有 href 属性的元素
[attribute=value]	$("[href='#']")	所有 href 属性的值等于 "#" 的元素
[attribute!=value]	$("[href!='#']")	所有 href 属性的值不等于 "#" 的元素
[attribute$=value]	$("[href$='.jpg']")	所有 href 属性的值包含以 ".jpg" 结尾的元素

:input	$(":input")	所有 <input> 元素
:text	$(":text")	所有 type="text" 的 <input> 元素
:password	$(":password")	所有 type="password" 的 <input> 元素
:radio	$(":radio")	所有 type="radio" 的 <input> 元素
:checkbox	$(":checkbox")	所有 type="checkbox" 的 <input> 元素
:submit	$(":submit")	所有 type="submit" 的 <input> 元素
:reset	$(":reset")	所有 type="reset" 的 <input> 元素
:button	$(":button")	所有 type="button" 的 <input> 元素
:image	$(":image")	所有 type="image" 的 <input> 元素
:file	$(":file")	所有 type="file" 的 <input> 元素

:enabled	$(":enabled")	所有激活的 input 元素
:disabled	$(":disabled")	所有禁用的 input 元素
:selected	$(":selected")	所有被选取的 input 元素
:checked	$(":checked")	所有被选中的 input 元素

参阅

<html>
<head>
<script type="text/javascript" src="jQuery.js"></script>
<script type="text/javascript"> 
$(document).ready(function(){
     $("p").css("background-color","#00FF00");
     $("#choose").css("background-color","#B2E0FF");
     $("p").click(function(){
         $(this).hide();
     });
     $("p:first").css("fontSize","38");
     $(".intro").css("background-color","#0000FF");
      $("tr:even").css("background-color","#B2E0FF");
      $("tr:lt(1)").css("background-color","#FFE0FF");
      $("p:contains(name)").css("background-color","#FF0000");
      $(":input").css("background-color","#0000FF");
});

   
</script>	
 
</head>
<body>

<html>
<body>
<h1>Welcome to My Homepage</h1>
<p class="intro">My name is Donald</p>
<p>I live in Duckburg</p>
<p>My best friend is Mickey</p>
<div id="choose">
Who is your favourite:
<ul>
<li>Goofy</li>
<li>Mickey</li>
<li>Pluto</li>
</ul>
</div>
<table>
<tr>
<th>Id</th>
<th>LastName</th>

<th>FirstName</th>
<th>Address</th>
<th>City</th>
</tr>

<tr>
<td>1</td>
<td>Adams</td>
<td>John</td>
<td>Oxford Street</td>

<td>London</td>
</tr>

<tr>
<td>2</td>
<td>Bush</td>
<td>George</td>
<td>Fifth Avenue</td>
<td>New York </td>
</tr>

<tr>
<td>3</td>
<td>Carter</td>
<td>Thomas</td>
<td>Changan Street</td>
<td>Beijing</td>
</tr>

<tr>
<td>4</td>
<td>Obama</td>
<td>Barack</td>
<td>Pennsylvania Avenue</td>
<td>Washington</td>
</tr>

</table>

 
<form action="">
Name: <input type="text" name="user" />
<br />
Password: <input type="password" name="password" />
<br />
<button type="button">Useless Button</button>
<input type="button" value="Another useless button" />
<br />
<input type="reset" value="Reset" />
<input type="submit" value="Submit" />
<br />
</form>
</body>
</html>
 
 
</body>
</html>

azheng51714

关注

0
点赞
踩
0

收藏

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

jQuery 参考手册 - 选择器jQuery 参考手册jQuery 事件jQuery 选择器选择器实例选取*$("*")所有元素#id$("#lastname")id="lastname" 的元素.class$(".intro")所有 class="intro" 的元素elemen
复制链接

扫一扫

专栏目录