JQuery——JQuery 选择器

最新推荐文章于 2025-03-12 16:18:11 发布

时光·漫步zth

最新推荐文章于 2025-03-12 16:18:11 发布

阅读量133

点赞数

CC 4.0 BY-SA版权

分类专栏： JQuery 文章标签： JQuery 选择器

本文链接：https://blog.youkuaiyun.com/qq_41573234/article/details/89300608

JQuery 专栏收录该内容

4 篇文章

订阅专栏

本文深入探讨了JQuery中各种选择器的使用方法，包括元素选择器、属性选择器和其他高级选择器，如:first和:last等。通过实例展示了如何根据ID、类、标签名以及属性值来精确选择网页元素。

1. 元素选择器

$("p") 选取 <p> 元素。

$(".intro") 选取所有 class="intro" 的元素。

$("#demo") 选取所有 id="demo" 的元素。

2. 属性选择器

$("[href]") 选取所有带有 href 属性的元素。

$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素。

3. 其他选择器

语法	描述
$(this)	当前 HTML 元素
$("ul li:first")	每个 <ul> 的第一个 <li> 元素
$("[href$='.jpg']")	所有带有以 ".jpg" 结尾的属性值的 href 属性
$("div#intro .head")	id="intro" 的 <div> 元素中的所有 class="head" 的元素

<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="../js/jquery-1.11.0.js"></script>

<script type="text/javascript">
	$(document).ready(function () {
		//节本选择器
		//$("#a1").css("background-color","red");	// 根据 id 选择
		
		//$(".c1").css("background-color","red");		// 根据 class 选择
		
		//$("a").css("background-color","red");		// 根据标签选择
		
		
		// 属性选择器
		//$("[href]").css("background-color","red");
		//$("[href='#']").css("background-color","red");	//所有 href 属性的值等于 "#" 的元素
		//$("[href$='com']").css("background-color","red");
		
		// 其他选择器
		//$("p.c1").css("background-color","red");
		//$("ul li:first").css("background-color","red");
		//$("ul li:last").css("background-color","red");
		
		
		
	});

</script>

<style type="text/css">
	.c1{
		font-size: 40px;
	}
	
</style>
</script>
</head>
<body>
<p class="c1">Jquery选择器</p>
<ul>
	<li id="i1"><a id="a1" class="c1" href="http://www.java1234.com" >Java知识分享网</a></li>
	<li><a id="a2" class="c1" href="http://www.youkuaiyun.com">优快云</a></li>
	<li><a href="http://www.iteye.com">iteye</a></li>
	<li><a href="http://www.cnblogs.com">博客园</a></li>
	<li><a class="c1" href="#">百度</a></li>
	<li><a href="http://www.google.com">谷歌</a></li>
</ul>

</body>
</html>