jQuery九类选择器（一）

最新推荐文章于 2023-03-21 17:02:08 发布
最新推荐文章于 2023-03-21 17:02:08 发布
阅读量261 收藏 1
点赞数
分类专栏： JQuery 文章标签： JavaScript jQuery Ajax 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/boxyuan/article/details/79039352
版权 
<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>test3</title>
		<script src="js/jquery-1.6.js"></script>
		<style type="text/css">
			body {
				color: lightseagreen;
				text-align: center;
			}
			
			<style type="text/css">.myClass {
				font-size: 44px;
				color: blue
			}
		</style>
		</style>
	</head>

	<body>
		<hr>
		<div id="div1">div1</div>
		<div id="div2">div2</div>
		<div class="divClass">divClass</div>
		<p id="pid"></p>
		<hr>
		<form>
			<input type="text" value="a" />
			<table>
				<tr>
					<td><input type="checkbox" value="b" /></td>
				</tr>
			</table>
		</form>
		<input type="radio" value="c" />
		<input type="radio" value="d" />
		<input type="radio" value="e" />
		<hr>
		<ul>
			<li>list item 1</li>
			<li>list item 2</li>
			<li>list item 3</li>
			<li>list item 4</li>
			<li>list item 5</li>
			<input type="checkbox" checked/>
			<input type="checkbox" checked/>
			<input type="checkbox" />
			<table border="1">
				<tr>
					<td>line1</td>
				</tr>
				<tr>
					<td>line2</td>
				</tr>
				<tr>
					<td>line3</td>
				</tr>
			</table>
			<h1>h1</h1>
			<h2>h2</h2>
			<h3>h3</h3>
			<p>p</p>
			<hr />
			<div>
				<p>John Resig</p>
			</div>
			<div>
				<p>George Martin</p>
			</div>
			<div>Malcom John Sinclair</div>
			<div>J. Ohn</div>
			<div></div>

			<p></p>
			<p></p>
			<hr />
			<table border="1" align="center">
				<tr style="display:none">
					<td>Value 1</td>
				</tr>
				<tr>
					<td>Value 2</td>
				</tr>
				<tr>
					<td>Value 3</td>
				</tr>
			</table>
			<hr />
			<div>
				<p>Hello!</p>
			</div>
			<div id="test2"></div>
			<input type="checkbox" name="newsletter" value="Hot Fuzz" />
			<input id="myID" type="checkbox" name="newsletter" value="Cold Fusion" />
			<input type="checkbox" name="newsaccept" value="Evil Plans" />
			<hr />
			<ul>
				<li>John</li>
				<li>Karl</li>
				<li>Brandon</li>
			</ul>

			<ul>
				<li>Glen</li>
				<li>Tane</li>
				<li>Ralph</li>
			</ul>

			<ul>
				<li>Marry</li>
			</ul>

			<ul>
				<li>Jack</li>
			</ul>
			<hr />
	</body>
	<script type="text/javascript">
		window.document.write("<br>jQuery选择器:<br>");
		window.document.write($("#div1").size() + " , ");
		window.document.write($("#div2").size() + " , ");
		window.document.write($(".divClass").length + " , ");
		window.document.write($("div,p").size() + " , ");
		window.document.write($("#div1,#div2,.divClass,p").size() + "<br>");
		window.document.write(" <br>");
		window.document.write("找到表单form里所有的input元素的个数:2," + $("form input").size() + "<br>");
		window.document.write("找到表单form里所有的子级input元素个数:1,	" + $("form>input").size() + "<br>");
		window.document.write("找到表单form同级第一个input元素的value属性值:c," + $("form+input").val() + "<br>");
		window.document.write("找到所有与表单form同级的input元素个数:3," + $("form~input").size() + "<br>");
		window.document.write(" <br>");
		window.document.write("查找UL中第一个li元素的内容:list item 1," + $("ul li:first").text() + " <br>");
		window.document.write("查找UL中最后个元素的内容:list item 5," + $("ul li:last").text() + " <br>");
		window.document.write("查找表格的索引号为1、3、5...奇数行个数，索引号从0开始," + $("table tr:odd").size() + " <br>");
		window.document.write("查找表格的索引号为2、4、6...偶数行个数，索引号从0开始," + $("table tr:even").size() + " <br>");
		window.document.write("查找表格中第二行的内容，从索引号0开始，这是一种祖先 后代 的变化形式,line2," + $("table tr:eq(2)").text() + " <br>");
		window.document.write("查找表格中第二第三行的个数，即索引值是1和2，也就是比0大,3," + $("table tr:gt(0)").size() + "<br>");
		window.document.write("查找表格中第一第二行的个数，即索引值是0和1，也就是比2小,2," + $("table tr:lt(2)").size() + "<br>");
		//给页面内所有标题<h1><h2><h3>加上红色背景色，且文字加蓝色
		$(":header").css("background-color", "red").css("color", "#ffff33");
		//查找所有[未]选中的input为checkbox的元素个数
		window.document.write("$(':checkbox:not(:checked)').size(),2" + $(":checkbox:not(:checked)").size() + "<br>");
		window.document.write(" <br>");
		window.document.write("查找所有包含文本John的div元素的个数:$(div:contains('jonin')).size():" + $("div:contains('jonin')").size() + "<br>");
		window.document.write("查找所有p元素为空的元素个数:$('p:empty'').size():" + $("p:empty").size() + "<br>");
		window.document.write("给所有包含p元素的div元素添加一个myClass样式: " + $("div:has(p)").addClass("myClass") + "<br>");
		window.document.write("查找所有含有子元素或者文本的p元素个数,即p为父元素:$('p:parent').size():" + $("p:parent").size() + "<br>");
		window.document.write(" <br>");
		window.document.write("查找隐藏的tr元素的个数:$('table tr:hidden').size():" + $("table tr:hidden").size() + "<br>");
		window.document.write("查找所有可见的tr元素的个数:$('table tr:vsisible').size():" + $("table tr:visible").size() + "<br>");
		window.document.write(" <br>");
		window.document.write("查找所有含有id属性的div元素个数:" + $('div[id]').size() + "<br>");
		window.document.write("查找所有name属性是newsletter的input元素，并将其选中:" + "<br>");
		$("input[name='newsletter']").attr("checked", "checked");
		window.document.write("查找所有name属性不是newsletter的input元素，并将其选中:" + "<br>");
		$("input[name!='newsletter']").attr("checked", "true");
		window.document.write(" <br>");
		window.document.write("查找所有name属性以'news'开头的input元素，并将其选中");
		$("input[name^='news']").attr("checked", "checked");
		window.document.write("查找所有name属性以'letter'结尾的input元素，并将其选中");
		$("input[name$='letter']").attr("checked", "checked");
		window.document.write("查找所有name属性包含'news'的input元素，并将其选中");
		$("input[name*='news']").attr("checked", "checked");
		window.document.write("找到所有含有id属性，并且它的name属性是以letter结尾的input元素，并将其选中");
		$("input[id][name$='letter']").attr("checked", "true");
		window.document.write(" <br>");
		window.document.write("迭代[each]每个ul中第1个li元素中的内容,索引从1开始"+ "<br>");
		/*
		$("ul li:first-child").each(function(){
			alert( $(this).text() );
		});
		*/
		window.document.write("迭代每个ul中最后1个li元素中的内容,索引从1开始"+ "<br>");
		/*
		$("ul li:last-child").each(function(){
			alert( $(this).text() );
		});
		*/
		window.document.write("迭代每个ul中第2个li元素中的内容,索引从1开始"+ "<br>");
		/* 
		$("ul li:nth-child(2)").each(function(){
			alert( $(this).text() );
		});*/
		window.document.write("在ul中查找是唯一子元素的li元素的内容"+ "<br>");
		//
		$("ul li:only-child").each(function() {
			alert($(this).text());
		});
		window.document.write(" <br>");
	</script>

</html>

boxyuan
关注
专栏目录
Jquery的总结一（Jquery的多种选择器）
qq_56248592的博客
12-19 1492
jquery的三大重点（选择器,事件，效果）
jQuery选择器
m0_57774967的博客
06-16 4704
jQuery选择器是jQuery为我们提供的一组方法，让我们更加方便的获取到页面中的元素（注意：jQuery选择器返回的是jQuery对象）jQuery选择器有很多，基本兼容了CSS1到CSS3所有的选择器，并且jQuery还添加了很多更加复杂的选择器jQuery选择器虽然很多，但是选择器之间可以互相替代，就是说获取一个元素，会有很多种方法获取到，所以平时真正能用到的只是少数的最常用的选择器...
jQuery伪类选择器
WangJinPing_的博客
11-01 1591
一、简单伪类选择器 :not(selector) 选择除了某个选择器之外的所有元素 :first或first() 选择某元素的第一个元素（非子元素） :last或last() 选择某元素的最后一个元素（非子元素） :odd 选择某元素的索引值为奇数的元素 :even 选择某元素的索引值为偶数的元素 ...
jquery的类选择器详解
bian2845972116的博客
12-12 2961
jquery中类选择器的使用方法，与css方法的联系与技巧
JQuery选择器超级详细
热门推荐
林高禄
08-06 1万+
基本选择器 id选择器：$("#id的属性值") 获取与指定id属性值匹配的元素 单击按钮，将id为myid的元素背景为绿色 <%@ page contentType="text/html;charset=UTF-8" language="java" %> <html> <head> <title>JQuery选择器</title> <script src="js/jquery-3.3.1.min...
jQuery子元素选择器
weixin_45747278的博客
10-20 3395
7.jQuery子元素选择器 7.1:first-child 匹配所给选择器( :之前的选择器)的第一个子元素类似的:first匹配第一个元素，但是:first-child选择器可以匹配多个：即为每个父级元素匹配第一个子元素。这相当于:nth-child(1) <ul> <li>John</li> <li>Karl</li> ...
jQuery系列之选择器
老__L的博客
08-27 6949
原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。根据给定的ID匹配一个元素。使用任何的元字符作为名称的文本部分， 它必须被两个反斜杠转义：。 1.1.2.1、参数 id：String 用于搜索的，通过元素的 id 属性中给定的值 1.1.3、示例 查找含有特殊字符的元素 1.2、全选选择器 1.2.1、概述 匹配所有元素多用于结合上下文来搜索。 1.2.3、示例 找到每一个元素 1.3、类选择器 1.3.1、概述 根据给定的 css
jquery 选择器及循环
baobao__的博客
09-23 1987
文章目录1. 基本选择器2. 层次选择器3.基本过滤选择器4. 内容过滤选择器5.属性选择器6.表单相关选择器7.循环1.map2.each 1. 基本选择器 //标签 $("div").css("background","red"); //id $("#active").css("background","orange"); //类 $(".box").css("background","g...
JQuery中属性选择器
you4580的专栏
03-21 1898
语法： $("A[属性名='值']") 包含指定属性等于指定值的选择器。语法：$("A[属性名='值'][]...")包含多个属性条件的选择器。语法： $("A[属性名]")包含指定属性的选择器。
二、jQuery选择器（一）
m0_61684063的博客
04-12 1475
二、jQuery选择器(一）
jQuery类选择器用法实例
10-25
例如，要选取所有具有类名“mydiv”的元素，可以使用jQuery选择器“$(".mydiv")”。这个选择器会匹配文档中所有class属性值为“mydiv”的元素。 在提供的实例代码中，演示了如何使用jQuery类选择器隐藏特定的div...
jQuery多级联动选择器
06-01
jQuery多级联动选择器是一种常见的前端交互功能，用于在网页上实现级联下拉菜单的效果。这种技术在网站设计中非常实用，特别是在处理地区选择、类别分类或者层级结构数据时。用户选择一个选项后，会根据所选内容动态...
基于jquery的H5移动端选择器，日期选择器，自定义级联选择器，自定义html选择器
最新发布
01-31
在提供的压缩包文件"lay-picker-master"中，我们可以推测这是一个基于jQuery的移动端选择器库，名为"lay-picker"。这个库可能包含了实现上述功能的源代码、示例、文档和其他资源。使用这个库，开发者可以快速集成到...
jquery九大选择器
04-23
jquery九大选择器，包含了知识点和案例，深入浅出，可以迅速入门jquery选择器。
关于jquery的多个选择器的使用示例
10-26
jQuery支持多种CSS选择器，包括ID选择器（#id）、类选择器（.class）、元素选择器（tagname）等，以及组合选择器，如：交集选择器（E F，表示同时匹配E和F的元素）、并集选择器（E,F，表示匹配E或F的元素）和后代...
jQuery的DOM操作与练习
不因俊俏难为友，正为风流始读书
06-04 1041
*0 jQuery常用操作DOM的API    1)jQuery对象.addClass().addClass();    2)removeClass()    3)toggleClass()    4)hasClass()    5)val()，如果将val()设置给一个select/raido/checkbox元素，内容取决于option元素的value或显示的内容值，value优先
jQuery 案例
不因俊俏难为友，正为风流始读书
06-03 623
*5 jQuery中DOM常用方法或属性    1)val()：取得标签中value属性的值    2)html()：取得标签内的内容    3)size()或length：取得数组的长度    4)each()：该方法必须由jQuery对象调用（即数组对象），each(function)方法，会自动将数组中的每个元素自动调用      function函数    5)click(fu
jQuery 案例（下拉选择框右移）
不因俊俏难为友，正为风流始读书
06-03 563
*  jQuery中DOM常用方法或属性    1)val()：取得标签中value属性的值    2)html()：取得标签内的内容    3)size()或length：取得数组的长度    4)each()：该方法必须由jQuery对象调用（即数组对象），each(function)方法，会自动将数组中的每个元素自动调用      function函数    5)click(fu
JQuery快速入门
不因俊俏难为友，正为风流始读书
05-30 446
1 jQuery快速入门    1)服务端和客户端有三种方式传递数据      a)HTML(无需与其它应用程序共享数据的情况下）      b)XML(需与其它应用程序共享数据，尤其是在不同的系统中，平台中，同时内容较多的情况下)      c)JSON(需与其它应用程序共享数据，同时内容不多的情况下）    2)为了将JS代码简化，同时要达到业务的需要，      3）jQuer
jQuery基础与选择器教程
"jQuery基础+选择器.pdf 是一本关于jQuery的入门教程，涵盖了jQuery的基本用法和选择器的详细讲解。作者是前端开发者王子墨，该书提供了丰富的前端开发知识，适合初学者学习jQuery框架。" jQuery是一个轻量级的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值