jQuery九类选择器（一）

最新推荐文章于 2021-12-12 17:14:48 发布
最新推荐文章于 2021-12-12 17:14:48 发布
阅读量259 收藏 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常用的三种基础选择器
一个编程小白的博客
03-31 687
id选择器，类选择器，标签选择器 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/jquery-3.5.1.min.js"></script> <script type="text/javascript"> $(window).ready(functi
jquery中有哪几种类型的选择器？
BOM485480的博客
01-07 3229
jQuery 是一个简洁而快速的 JavaScript 库，可用于简化事件处理，HTML 文档遍历，Ajax 交互和动画，以便快速开发网站。jQuery 简化了 HTML 的客户端脚本，从而简化了 Web 2.0 应用程序的开发。 jQuery选择器 一、基本选择器 基本选择器是jQuery中最常用也是最简单的选择器，它通过元素的id、class和标签名等来查找DOM元素。 1、...
jQuery伪类选择器
WangJinPing_的博客
11-01 1588
一、简单伪类选择器 :not(selector) 选择除了某个选择器之外的所有元素 :first或first() 选择某元素的第一个元素（非子元素） :last或last() 选择某元素的最后一个元素（非子元素） :odd 选择某元素的索引值为奇数的元素 :even 选择某元素的索引值为偶数的元素 ...
jquery的类选择器详解
bian2845972116的博客
12-12 2960
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类选择器用法实例
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
Query九类选择器（二）
不因俊俏难为友，正为风流始读书
01-11 400
Option Button //1)查找所有input元素的个数 //alert( $("input").size() );//10，找input标签 //alert( $(":input").size() );//13，找input标签和select/textarea/button //2)查找所有文本框的个数 //ale
JQuery的动画操作
不因俊俏难为友，正为风流始读书
06-05 399
* jQuery常用操作DOM的API    1)jQuery对象.addClass().addClass();    2)removeClass()    3)toggleClass()    4)hasClass()    5)val()，如果将val()设置给一个select/raido/checkbox元素，内容取决于option元素的value或显示的内容值，value优先
jQuery的Ajax操作
不因俊俏难为友，正为风流始读书
06-07 382
jQuery 中的 Ajax：      JQuery 对 Ajax 操作进行了封装, 在 jQuery 中最底层的方法时 $.ajax(), 第二层是 load(), $.get() 和 $.post(), 第三层是 $.getScript() 和 $.getJSON() load() 方法：      load()方法是 jQuery 中最为简单和常用的 Ajax 方法, 能载入
jQuery九类选择器（三）
不因俊俏难为友，正为风流始读书
01-11 370
广东 湖南 湖北 //1)查找所有可用的input元素的个数 //alert( $("input:enabled").size() ); //2)查找所有不可用的input元素的个数 //alert( $("input:disabled").size() ); //3)查找所有选中的复选框元素的个数 /
jQuery选择器（一）
不因俊俏难为友，正为风流始读书
05-31 365
JQuery选择器： 选择器是 jQuery 的根基, 在 jQuery 中, 对事件处理, 遍历 DOM 和 Ajax 操作都依赖于选择器 jQuery 选择器的优点:     简洁的写法 ：  $(“#id”)   等价于    document.getElementById("id")  $(“tagName”)     等价于   document.getElements
jQuery基础与选择器教程
"jQuery基础+选择器.pdf 是一本关于jQuery的入门教程，涵盖了jQuery的基本用法和选择器的详细讲解。作者是前端开发者王子墨，该书提供了丰富的前端开发知识，适合初学者学习jQuery框架。" jQuery是一个轻量级的...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值