今天上的第一节jquery选择器小结（入门级）

最新推荐文章于 2026-01-07 07:00:00 发布

原创最新推荐文章于 2026-01-07 07:00:00 发布 · 331 阅读

0 ·

CC 4.0 BY-SA版权

Web前端专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了jQuery中的各类选择器，包括基本选择器、过滤选择器等，并提供了丰富的示例代码来展示不同选择器的功能和使用场景。

JAVASCRIPT类库，简称js，作用是为了简化javascript的开发，他预定义了很多对象（属性和方法）和函数，特点是兼容了个大浏览器！

JQUERY其实就是一个js文件，分类： jQuery - Web版本(最主要)； jQuery UI(User Interface) - 集成UI内容； jQuery Mobile - 移动版本(WebApp)；QUnit - 用于测试。

版本： 1.4.2版本 - 企业开发使用； 1.8.3版本 - 企业使用最新； 1.11.3版本 - 目前jQuery最新；2.x.x版本 - 不再支持IE浏览器(8以前)。

特点： HTML代码(结构) - 标签；HTML内容 - 浏览器运行页面后显示的。

如何使用jQuery：1.在HTML页面中引入jQuery文件2.使用jQuery的选择器定位(获取)页面元素3.利用jQuery的API方法完成需求

基本内容：$(selector) - jQuery的工厂函数--- 该函数返回jQuery对象，jQuery的约定 - jQuery对象前增加"$"符号。

DOM对象与jQuery对象：

DOM对象 - 通过DOM获取的元素,称之为DOM对象；jQuery对象 - 通过jQuery包装DOM后产生的对象， jQuery对象的底层还是DOM对象。

DOM对象与jQuery对象的转换:

1.DOM对象转换为jQuery对象:$(DOM对象).

2. jQuery对象转换为DOM对象:1.jQuery对象是数组对象 - 角标2. jQuery对象提供get(index)方法.

注意 - DOM对象与jQuery对象之间不能相互调用.

jQuery事件: jQuery将DOM的事件封装成对应的方法.

选择器 - 是jQuery的根基

1.基本选择器
2.层级选择器
3.过滤选择器 - 在选择器前,具有":"符号
4. 基本过滤选择器
5. 子元素过滤选择器
6. 内容过滤选择器
7. 可见性过滤选择器
8. 属性过滤选择器
9. 表单对象属性过滤选择器
10. 表单选择器

下面就是几个例子的展示：

（备注：上述案列运行前，请先下载jquery文件，或者可以去jquery官网下载！）

基本选择器：

</pre><pre name="code" class="html"><!DOCTYPE html>
<html>
 <head>
  <title>基本选择器</title>
  <meta charset="utf-8" />
  <script src="jquery-1.11.3.js"></script>
  <style>
	div {
		width : 150px;
		height : 150px;
		border : solid 1px black;
		background : pink;
		float : left;
		margin-right : 10px;
	}
	.mini {
		width : 100px;
		height : 100px;
		border : solid 1px black;
		background : blue;
		float : left;
		margin-right : 10px;
	}
  </style>
 </head>

 <body>
  <button id="btn1">id选择器</button>
  <button id="btn2">元素选择器</button>
  <button id="btn3">class选择器</button>
  <button id="btn4">*选择器</button>
  <button id="btn5">复合选择器</button>
  <br><br>
  <div id="d1">这是id为d1的div元素.</div>
  <div class="mini"></div>
  <div></div>
  <div></div>
  <div></div>
  <script>
	// 1 获取btn1按钮,绑定onclick事件
	$("#btn1").click(function(event){
		/*
		 * 改变背景颜色
		 * * 操作CSS的background-color的属性
		 * * jQuery操作CSS
		 *   * css(name,value)方法
		 *     * name - CSS的属性名称
		 *     * value - CSS的属性值
		 */
		$("#d1").css("background","red");
	});
	// 2 元素选择器
	$("#btn2").click(function(){
		/*
		 * JS定义的数组
		 * * 遍历数组,获取每一个元素
		 * * 遍历的过程中,改变每一个元素
		 * jQuery数组对象
		 * * 批处理
		 */
		$("div").css("background","red");
		/*
		var $divs = $("div");
		// 遍历数组
		for(var i=0;i<$divs.length;i++){
			// 获取每一个元素
			var div = $divs[i];
			div.className;
		}*/
	});
	$("#btn3").click(function(){
		$(".mini").css("background","red");
	});
	$("#btn4").click(function(){
		$("*").css("background","red");
	});
	$("#btn5").click(function(){
		// 多个选择器并列使用,中间使用","分隔
		$("#d1,.mini").css("background","red");
	});
  </script>
 </body>
</html>

基本过滤选择器：

<!DOCTYPE html>
<html>
 <head>
  <title>基本过滤选择器</title>
  <meta charset="utf-8" />
  <script src="jquery-1.11.3.js"></script>
  <style>
div {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;}
.mini {width : 50px;height : 50px;border : solid 1px black;background : yellow;float : left;margin-right : 10px;}
  </style>
 </head>
 <body>
  <h3>基本过滤选择器</h3>
  <h1>基本过滤选择器</h1>
  <button id="btn1">:first</button>
  <button id="btn2">:last</button>
  <button id="btn3">:even</button>
  <button id="btn4">:odd</button>
  <button id="btn5">:gt</button>
  <button id="btn6">:lt</button>
  <button id="btn7">:eq</button>
  <button id="btn8">:not</button>
  <button id="btn9">:header</button>
  <button id="btn10">:animated</button>
  <br><br>
  <div id="d1"></div>
  <div id="one"></div>
  <div class="mini"></div>
  <div></div>
  <div></div>
  <script>
$("#btn1").click(function(){
$("div:first").css("background","green");
});
$("#btn2").click(function(){
$("div:last").css("background","green");
});
$("#btn3").click(function(){
$("div:even").css("background","green");
});
$("#btn4").click(function(){
$("div:odd").css("background","green");
});
$("#btn5").click(function(){
$("div:gt(1)").css("background","green");
});
$("#btn6").click(function(){
$("div:lt(1)").css("background","green");
});
$("#btn7").click(function(){
$("div:eq(1)").css("background","green");
});
$("#btn8").click(function(){
$("div:not('.mini')").css("background","green");
});
$("#btn9").click(function(){
$(":header").css("background","green");
});
// 让第一个div上下滑动
function move(){
$("#d1").slideToggle(500,function(){
move();
});
}
move();
$("#btn10").click(function(){
$(":animated").css("background","green");
});
  </script>
 </body>
</html>

子元素过滤选择器：

<!DOCTYPE html>
<html>
 <head>
  <title>子元素过滤选择器</title>
  <meta charset="utf-8" />
  <script src="jquery-1.11.3.js"></script>
  <style>
div {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;}
.mini {width : 50px;height : 50px;border : solid 1px black;background : yellow;float : left;margin-right : 10px;}
  </style>
 </head>
 <body>
  <button id="btn1">:nth-child</button>
  <button id="btn2">:first-child</button>
  <button id="btn3">:last-child</button>
  <button id="btn4">:only-child</button>
  <br><br>
  <div>
<div class="mini"></div>
  </div>
  <div>
<div class="mini"></div>
<div class="mini"></div>
  </div>
  <div>
<div class="mini"></div>
<div class="mini"></div>
  </div>
  <div></div>
  <div></div>
  <script>
// 1. 获取div元素的子元素是第二个
$("#btn1").click(function(){
// :nth-child选择器 是从1开始
$("div:nth-child(2)").css("background","red");
});
// 2. 获取div元素的第一个子元素
$("#btn2").click(function(){
$("div:first-child").css("background","red");
});
// 3. 获取div元素的最后一个子元素
$("#btn3").click(function(){
$("div:last-child").css("background","red");
});
// 4. 如果哪个div元素只有一个子元素,那么选中
$("#btn4").click(function(){
$("div:only-child").css("background","red");
});
// 子元素过滤选择器 - 层级+基本过滤选择器
  </script>
 </body>
</html>

内容过滤选择器：

<!DOCTYPE html>
<html>
 <head>
  <title>内容过滤选择器</title>
  <meta charset="utf-8" />
  <script src="jquery-1.11.3.js"></script>
  <style>
div {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;}
.mini {width : 50px;height : 50px;border : solid 1px black;background : yellow;float : left;margin-right : 10px;}
  </style>
 </head>
 <body>
  <button id="btn1">:contains</button>
  <button id="btn2">:empty</button>
  <button id="btn3">:parent</button>
  <button id="btn4">:has</button>
  <br><br>
  <div>这是第一个div元素.class为div111</div>
  <div>这是第二个div元素.class为div11
<div class="mini"></div>
  </div>
  <div>这是第三个div元素.class为div
<div class="mini"></div>
  </div>
  <div>这是第四个div元素.class为div1</div>
  <div></div>
  <script>
$("#btn1").click(function(){
// 文本包含"div11"的div元素
$("div:contains('div11')").css("background","green");
});
$("#btn2").click(function(){
// 不包含任何文本内容或子元素的div元素
$("div:empty").css("background","green");
});
$("#btn3").click(function(){
// 包含任何文本内容或子元素的div元素
$("div:parent").css("background","green");
});
$("#btn4").click(function(){
// 包含class为mini的div元素的父div元素
$("div:has('.mini')").css("background","green");
});
  </script>
 </body>
</html>

可见性过滤选择器：

<!DOCTYPE html>
<html>
 <head>
  <title>可见性过滤选择器</title>
  <meta charset="utf-8" />
  <script src="jquery-1.11.3.js"></script>
  <style>
div {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;}
.one {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;display : none;}
  </style>
 </head>
 <body>
  <button id="btn1">可见</button>
  <button id="btn2">不可见</button>
  <br><br>
  <div></div>
  <div></div>
  <div class="one"></div>
  <div></div>
  <div></div>
  <script>
$("#btn1").click(function(){
$("div:visible").css("background","green");
});
$("#btn2").click(function(){
$("div:hidden").show(3000).css("background","green");
});
  </script>
 </body>
</html>

属性过滤选择器:

<!DOCTYPE html>
<html>
 <head>
  <title>属性过滤选择器</title>
  <meta charset="utf-8" />
  <script src="jquery-1.11.3.js"></script>
  <style>
div {width : 150px;height : 150px;border : solid 1px black;background : pink;float : left;margin-right : 10px;}
  </style>
 </head>
 <body>
  <button id="btn1">按钮1</button>
  <button id="btn2">按钮2</button>
  <button id="btn3">按钮3</button>
  <button id="btn4">按钮4</button>
  <button id="btn5">按钮5</button>
  <button id="btn6">按钮6</button>
  <button id="btn7">按钮7</button>
  <br><br>
  <div id="div1" name="div1" title="text1"></div>
  <div id="div11" name="div2" title="text11"></div>
  <div name="div3" title="text1"></div>
  <div id="div13" name="div4"></div>
  <div id="div14" name="div5"></div>
  <script>
$("#btn1").click(function(){
// 包含属性title的div元素
$("div[title]").css("background","green");
});
$("#btn2").click(function(){
// 包含属性title=text1的div元素
$("div[title=text1]").css("background","green");
});
$("#btn3").click(function(){
// 包含属性title!=text1的div元素(包含没有该属性的div元素)
$("div[title!=text1]").css("background","green");
});
$("#btn4").click(function(){
// 包含属性title值是以text开始的div元素
$("div[title^=text]").css("background","green");
});
$("#btn5").click(function(){
// 包含属性title值是以t1结束的div元素
$("div[title$=t1]").css("background","green");
});
$("#btn6").click(function(){
// 包含属性title值包含t1的div元素
$("div[title*=t1]").css("background","green");
});
$("#btn7").click(function(){
// 包含属性title值是以t1结束的,包含id属性的div元素
// 多个属性过滤选择器并列使用
$("div[title$=t1][id]").css("background","green");
});
  </script>
 </body>
</html>

表单对象属性过滤选择器:

<!DOCTYPE html>
<html>
 <head>
  <title>表单对象属性过滤选择器</title>
  <meta charset="utf-8" />
  <script src="jquery-1.11.3.js"></script>
  <style>
div {width : 150px;height : 150px;border : solid 1px black;background : blue;float : left;margin-right : 10px;}
  </style>
 </head>
 <body>
  <button id="btn1">:enabled</button>
  <button id="btn2">:disabled</button>
  <button id="btn3">:checked</button>
  <button id="btn4">:selected</button>
  <br><br>
  <input type="text" value="这是可用元素"><br>
  <input type="text" disabled="disabled" value="这是不可用元素"><br><br>
  <input type="radio" name="love" checked="checked" value="html">HTML
  <input type="radio" name="love" value="css">CSS
  <input type="radio" name="love" value="javascript">JAVASCRIPT
  <br><br>
  <select id="city">
<option value="">-请选择-</option>
<option value="bj" selected="selected">-北京-</option>
<option value="tj">-天津-</option>
<option value="sh">-上海-</option>
<option value="nj">-南京-</option>
<option value="cq">-重庆-</option>
  </select>
  <script>
// 1. 改变页面中可用元素的value属性值
$("#btn1").click(function(){
/*
* val()方法 - 获取|设置指定元素的value属性值
* * 获取 - val()
* * 设置 - val(value)
*/
$("input:enabled").val("xxx");
});
// 2. 改变页面中不可用元素的value属性值
$("#btn2").click(function(){
$("input:disabled").val("yyy");
});
// 3. 打印被选中的单选框的value属性值
$("#btn3").click(function(){
console.log($("input[name=love]:checked").val());
// DOM
var loves = document.getElementsByName("love");
for(var i=0;i<loves.length;i++){
var love = loves[i];
if(love.checked){
console.log(love.value);
}
}
});
// 4. 获取下拉列表被选中的选项的value属性值
$("#btn4").click(function(){
console.log($("#city>option:selected").val());
// DOM
// 1. 获取select标签
// 2. 根据select获取所有option标签
// 3. 遍历所有option标签
// 4. 判断哪个被选中
// 5. 输出结果
});
  </script>
 </body>
</html>

本人第一次发微博，如果各位大神读完后，有任何建议，望积极提出，给小弟一些参考。