JQuery选择器

最新推荐文章于 2023-07-09 09:38:20 发布
最新推荐文章于 2023-07-09 09:38:20 发布
阅读量195 收藏
点赞数 1
分类专栏： JavaScript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_42539533/article/details/88715909
版权

文章目录

选择器

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]);
	})
慕北丶
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Js四级联动(下拉框选择地区)
qq_35396397的博客
12-21 1988
数据与视图 如何根据数据渲染视图思路? 1:了解已知的数据接结构 2: 知到你要的数据是什么 3: 知道你的页面结构是什么？ 4: 想办法拿到你想要的数据；方式有：数组对象的遍历；数组内置API 字符拼API 字符串变数组；数组变字符串，等基本操作。 5：看数据获取到的数据与你搭建的页面结构是否符合？ 6：让你获取的数据与你搭建的页面结构相吻合。想办法：处理数据或者调整html结构 实现样式 7...
JQuery的选择器
qq_45922461的博客
12-09 141
JQuery的选择器 一、层级选择器 1.后代选择器 <form action=""> <input type="text"> </form> $("form input").click(function(){ console.log("input"); }) 2.子元素选择器 //子元素选择器 $("ul>li").css("color","pink") 后代选择器和子元素选择器的区
jQuery四级联动菜单代码
04-07
jQuery四级联动菜单代码是一款多级联动下拉框菜单选择特效，带搜索和添加菜单功能。
中国省，市，区，镇/县下拉框四级联动
Ling、bug
06-16 1242
本文来讲一个中国省，市，区，镇/县四级下拉框联动 不同数据源操作方式不同，本文使用的递归方式，支持无限层级联动（只要数据支持） 上代码吧，没什么难度，主要是数据源的来源 <div id="chinaCityContainer"></div> <script src="~/lib/jquery/dist/jquery.js"></script> <script> $(function () { $('#btnTest.
使用js实现四级联动
05-29 1165
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> ...
JavaScript之实现select下拉选择框的联动
最新发布
yusuhbdybxbdhj的博客
07-09 1953
这段代码的作用是实现了一个省市选择的联动功能，当选择了一个省份后，对应的城市会显示在城市选择框中。每次选择不同的省份，城市选择框的选项会动态地改变。
JQuery-选择器
qq_43812731的博客
07-30 137
选择器 基础选择器 名称 用法 描述 ID选择器 $(“#id”); 获取指定ID的元素 类选择器 $(“.class”); 获取同一类class的元素 标签选择器 $(“div”); 获取同一类标签的所有元素 并集选择器 $(“div,p,li”); 使用逗号分隔，只要符合条件之一就可。 交集选择器 $(“div.redClass”); 获取class为redClass的div元素 通配符选择器 $("*") 获取所有元素 层次选择器 名称 用法 描述
jQuery选择器思维导图
12-28
通过思维导图对知识进行梳理，以便记忆
jquery选择器简述
11-24
jQuery选择器是jQuery库的核心功能之一，它极大地简化了对网页DOM元素的选取，使得JavaScript开发者能够更加高效地操作页面内容。jQuery选择器基于CSS选择器，并在其基础上扩展了一些更强大的功能，使得开发者能以...
jQuery 选择器
01-19
jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”...
jQuery 选择器用法实例分析【prev + next】
10-15
jQuery选择器是jQuery库中的核心部分，用于高效地选取DOM元素。在JavaScript中，选取DOM元素通常需要编写复杂的代码，而jQuery提供了一套简洁、强大的选择器系统，使得选取元素变得简单直观。本文将深入探讨jQuery...
jQuery选择器全面总结
10-26
这篇文章将对jQuery选择器进行全面总结，帮助开发者更好地理解和运用这些工具。 首先，我们要了解基本选择器，这是jQuery选择器的基础。包括： 1. **ID选择器**: 使用`#`符号后跟元素的ID，如`jQuery("#ID")`，它...
省市区镇（可以选四级）联动点击自动展开下一级
diantiaozhu8383的博客
07-07 871
周末在家的时候，接到后端的一个电话，说领导有这个这样的需求。刚开始我理解错了。以为需要做一个省市区三级联动的，稀里哗啦的在网上找了数据。然后谢了出来。结果沟通才知道。需求理解错了，需要电商网站填写个人收货地址的需求。简化用户点击次数，选择完省，市自动出来，选择市，县自动出来，接着再如果需要四级联动，就单独封装函数AJAX四级城镇请求出来： 代码为： <!doctype ...
Layui Select四级联动效果触发
weixin_44171391的博客
12-20 491
刚入行三个月小白，写的不好请大佬指教！ 前端页面 <div class="div-left"> <span class=" layui-form-label typeface">省</span> <select id="province" name="provinceId" class="province-selector" lay-filter="province"
原生js四级联动
qq_41099548的博客
07-15 703
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Doc...
JS练习：两级联动
weixin_34041003的博客
10-18 150
代码： <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>两级联动</title> <script> //准备数据 var provinces = [ ...
JavaScript实现select下拉菜单省份和城市的级联菜单
syy的博客
11-19 2957
使用JavaScript实现数组与select标签结合使用对省份及对应的城市的显示
js 四级联动
zxjsm的博客
12-22 6483
<select name="" id="province"></select> <select name="" id="city"></select> <select name="" id="district"></select> <select name="" id="sto"></...
JSON数据格式
热门推荐
慕北丶
03-30 7万+
文章目录JSON数据格式概念 JSON数据格式概念 曾经一段时间里xml成为了互联网业界内的数据传输格式标准，但是有人对xml提出了质疑，认为xml数据格式比较繁杂，冗长等弊端，于是提出了很多解决方案 在2001年的时候JSON数据格式就出现了，并且在2006年的时候在互联网业界内开始普及使用，==JSON是一种数据传输格式，而不是一门语言，基本上所有的编程语言都支持JSON数据格式 JSON是要...
jquery选择器
06-01
jQuery选择器是一个功能强大的工具，用于选择HTML元素并对其进行操作。jQuery提供了多种选择器方法，以下是其中的一些： 1. ID选择器： 使用“#”符号，后跟ID名称，如下所示： ``` $("#myId") ``` 2. 类选择器...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值