JQuery选择器

最新推荐文章于 2020-09-19 09:18:24 发布

原创最新推荐文章于 2020-09-19 09:18:24 发布 · 567 阅读

0 ·

CC 4.0 BY-SA版权

JavaScript 同时被 2 个专栏收录

54 篇文章

订阅专栏

前端

54 篇文章

订阅专栏

博客主要介绍了JQuery选择器，其与css选择器语法类似。涵盖多种选择器，如ID、类、元素、组、后代、子选择器等，还包括选择特定位置元素的选择器，以及属性和属性值选择器，属性值选择器又有不等于、以XX开头等多种情况。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

选择器

JQuery选择器和css的选择器语法很类似

ID选择器

<body>
		<div id="notMy"><p>id="notMy"</p></div>
		<div id="MyDiv"><p>id="MyDiv"</p></div>
</body>

$(document).ready(function(){
	var div=$("#MyDiv");
	console.log(div.html());
});

在这里插入图片描述

类选择器

<body>
	<div class="notMy">div class "notMy"</div>
	<div class="myClass">div class "myClass"</div>
	<span class="myClass">span class "myClass"</span>
</body>

$(document).ready(function(){
	var div=$(".myClass");
	console.log(div.html());
});

在这里插入图片描述

元素选择器

<body>
		<div>DIV1</div>
		<div>DIV2</div>
		<span>SPAN</span>
</body>

$(document).ready(function(){
	var div=$("div");
	console.log(div.html());
});

在这里插入图片描述
直接使用元素名称选择

组选择器

<body>
		<div>DIV</div>
		<p class="myClass">p class="myClass"</p>
		<span>SPAN</span>
</body>

$(document).ready(function(){
	var div=$("div,span,p.myClass");
	console.log(div);
});

在这里插入图片描述
一次可以选择多个元素

后代选择器

<body>
		<form>
			<label>Name:</label>
			<input name="name"/>
			<fieldset>
				<label>Newsletter:</label>
				<input name="newsletter"/>
			</fieldset>
		</form>
		<input name="none" />
</body>
	
$(document).ready(function(){
	var temp=$("form input");
	console.log(temp);
});

在这里插入图片描述
选择出指定父元素下指定的所有子孙元素

子选择器

<body>
		<form>
			<label>Name:</label>
			<input name="name"/>
			<fieldset>
				<label>Newsletter:</label>
				<input name="newsletter"/>
			</fieldset>
		</form>
		<input name="none" />
</body>

$(document).ready(function(){
	var temp=$("form>input");
	console.log(temp[0]);
});

在这里插入图片描述

选择第一个元素

<body>
		<ul>
			<li>list item 1</li>
			<li>list item 2</li>
			<li>list item 3</li>
		</ul>
</body>

$(document).ready(function(){
	var temp=$("ul li:first");
	console.log(temp.html());
});

在这里插入图片描述

选择最后一个元素

$(document).ready(function(){
	var temp=$("ul li:last");
	console.log(temp.html());
});

在这里插入图片描述

not选择器

一般在复选框中使用

<body>
	<input name="apple" type="checkbox"/>
	<input name="flower" checked="checked" type="checkbox"/>
</body>

$(function(){
	//选择出没有选中的复选框
	var inputs=$("input:not(:checked)");
	console.log(inputs[0]);
});

$(function(){
	//选择出选中的复选框
	var inputs=$("input:checked");
	console.log(inputs[0]);
});

在这里插入图片描述

偶数选择器

<body>
		<table border="1">
			<tr>
				<td>雇员编号</td><td>雇员姓名</td><td>雇员职位</td><td>雇员薪资</td><td>部门编号</td>
			</tr>
			<tr>
				<td>7963</td><td>尼古拉斯</td><td>天神</td><td>50000.00</td><td>10</td>
			</tr>
			<tr>
				<td>7964</td><td>雅典娜</td><td>智慧女神</td><td>50000.00</td><td>10</td>
			</tr>
			<tr>
				<td>7965</td><td>斯巴达</td><td>战争之王</td><td>50000.00</td><td>10</td>
			</tr>
			<tr>
				<td>7966</td><td>毒液</td><td>超级英雄</td><td>50000.00</td><td>10</td>
			</tr>
			<tr>
				<td>7967</td><td>蚁人</td><td>超级英雄</td><td>50000.00</td><td>10</td>
			</tr>
		</table>
</body>

$(function(){
	var trs=$("table tr:even");
	for (var i=0;i<trs.length;i++) {
		console.log(trs[i]);	
	}
});

在这里插入图片描述

奇数选择器

$(function(){
	var trs=$("table tr:odd");
	for (var i=0;i<trs.length;i++) {
		console.log(trs[i]);	
	}
});

在这里插入图片描述

eq选择器（选择指定索引的元素）

$(function(){
	//选择出索引为1的元素
	var trs=$("table tr:eq(1)");
		console.log(trs.html());	
});

在这里插入图片描述

gt(index)选择器，选择大于指定索引的元素

$(function(){
	//选择出索引为1的元素
	var trs=$("table tr:gt(1)");
		for (var index in trs) {
			console.log(trs[index]);
		}	
});

在这里插入图片描述

lt(index)，选择小于指定索引的元素

$(function(){
	//选择出索引为1的元素
	var trs=$("table tr:lt(1)");
		for (var index in trs) {
			console.log(trs[index]);
		}	
});

在这里插入图片描述

属性选择器

<body>
	<div>
		<p>Hello!</p>
	</div>
	<div id="test"></div>
</body>

$(function(){
	//选择出索引为1的元素
	var divs=$("div[id]");
	console.log(divs[0]);
});

在这里插入图片描述
选择出具备id属性的所有div

属性值选择器

<!--导入JQuery的js文件-->
		<script src="../js/juery.min.js"></script>
		<script>
			$(function(){
			//选择出具有name属性并且name值为"newsletter"的div
			var input=$("input[name='newsletter']");
			for (var i=0;i<input.length;i++) {
				console.log(input[i]);
			}
			})
		</script>
	</head>
	<body>
		<input type="checkbox" name="newsletter" value="Hot Fuzz" />
		<input type="checkbox" name="newsletter" value="Cold Fusion" />
		<input type="checkbox" name="accept" value="Evil Plans" />
	</body>

在这里插入图片描述
选择出具有指定属性并且属性值等于指定的内容的所有元素

不等于的

<script>
	$(function(){

	var input=$("input[name!='newsletter']");
	console.log(input[0]);
	})
</script>

在这里插入图片描述

以XX开头的

<script>
	$(function(){

	var input=$("input[name^='news']");
		console.log(input);
	})
</script>

在这里插入图片描述

包含xx的

$(function(){
	var input=$("input[name*='cc']");
		console.log(input[0]);
	})

在这里插入图片描述

以XX结尾的

$(function(){
	var input=$("input[name$='pt']");
		console.log(input[0]);
	})

JQuery选择器

文章目录

选择器

ID选择器

类选择器

元素选择器

组选择器

后代选择器

子选择器

选择第一个元素

选择最后一个元素

not选择器

偶数选择器

奇数选择器

eq选择器（选择指定索引的元素）

gt(index)选择器，选择大于指定索引的元素

lt(index)，选择小于指定索引的元素

属性选择器

属性值选择器

不等于的

以XX开头的

包含xx的

以XX结尾的