jQuery选择器

已于 2023-03-20 19:54:14 修改
阅读量563 收藏
点赞数
分类专栏： 前端 文章标签： jquery 前端 javascript
于 2021-11-10 16:11:30 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_51873764/article/details/121250554
版权

20211010

jQuery

选择器

基本选择器

请添加图片描述

层级选择器

请添加图片描述

基本过滤选择器

请添加图片描述

内容

请添加图片描述

可见性

请添加图片描述

属性

请添加图片描述

表单选择器

请添加图片描述

筛选的jQuery方法

请添加图片描述

属性操作

请添加图片描述

HTML代码/文本/值
html([val|fn]) a.html()取出a的html值 a.html(val) 让a的html值变为val
text([val|fn]) a.text()取出a的text值 a.text(val) 让a的文本值变为val
val([val|fn|arr]) a.val() 取出a的val值（input） a.val(v) 设置a的value值为v

属性
attr(name|pro|key,val|fn)
1、a.attr(‘name’)取出a的name值 2、a.attr(“name”,“username”)把a的name值设置为username

removeAttr(name)
a.removeAttr(‘class’) 移除a的class属性

prop(name|pro|key,val|fn)1.6+
1、a.prop(‘id’) 取出a的id值 2、a.prop(‘id’,“bj”) 设置a的id值为bj
removeProp(name)1.6+
a.removeProp(‘class’) 移除a的class属性

只推荐操作checked readonly selected disabled

jQuery DOM的操作

文档处理
内部插入

appendTo(content) a.appendTo(b); 把a加到b里面 添加到最后面
prependTo(content) a.prependTo(b); 把a添加到b里面 添加到最前面

外部插入
insertAfter(content) a.insertAfter(b); 把a插入到b的后面
insertBefore(content) a.insertBefore(b); 把a插入到b的前面

替换
replaceWith(content|fn) a.replaceWith(b) 把a用b替换
replaceAll(selector) a.replaceAll(b) 用a替换所有的b

删除
empty() a.empty() 把a掏空，把a里面的所有元素都删除
remove([expr]) a.remove(b) 所有的a，是b的话就会删除 a.remove()删除a

jQuery事件

事件绑定

				//*1.通常绑定事件的方式
				//给元素绑定事件  
				//jquery对象.事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 }).事件方法(回调函数(){ 触发事件执行的代码 })
				//绑定事件可以链式操作
				$(".head").click(function() {
					$(".content").toggle();
				}).mouseover(function() {
					$(".content").toggle();
				}).mouseout(function() {
					$(".content").toggle();
				});

				//*2.jQuery提供的绑定方式：bind(type,[data],fn)函数把元素和事件绑定起来
				//type表示要绑定的事件   [data]表示传入的数据   fn表示事件的处理方法
				//bind(事件字符串,回调函数),后来添加的元素不会绑定事件
				//使用bind()绑定多个事件   type可以接受多个事件类型，使用空格分割多个事件
				$(".head").bind("click mouseover", function() {
					$(".content").toggle();
				});
				//后来添加的元素不会绑定事件,不生效
				// $('<h5 class="head">什么是jQuery?</h5>').appendTo("#panel");
				//解除click事件绑定
				// $(".head").unbind("click");
				//unbind方法中，什么都不写，解除所有事件绑定
				$(".head").unbind();

				//3.one()只绑定一次,绑定的事件只会发生一次one(type,[data],fn)函数把元素和事件绑定起来
				//type表示要绑定的事件   [data]表示传入的数据   fn表示事件的处理方法
				$(".head").one("click mouseover", function() {
					$(".content").toggle();
				});

				//4.live方法会为现在及以后添加的元素都绑定上相应的事件
				// $(".head").live("click", function() {
				// 	$(".content").toggle();
				// });

				// $("#panel").before("<h5 class='head'>什么是jQuery?</h5>");

事件解除绑定

				//给li绑定两种事件：单击和鼠标移入
				$("li").bind("click mouseenter" , function(){
					alert(this.innerHTML);
				});
				
				//点击第一个button，将#bj上的mouseenter事件移除
				//unbind()可以移除指定的事件，只需要传一个事件名作为参数
				//unbind(type,[data|fn]])
				//type事件类型  当传入type的时候会解除type事件
				//如果没有传入type值，会移除所有事件
				$("button:eq(0)").click(function(){
					$("li").unbind("mouseenter");
				});
				
				//点击第二个button，将#rl上的所有事件移除
				$("button:eq(1)").click(function(){
					$("#rl").unbind();
				});

事件对象

			//当我们发生一个事件以后，某个事件其实就是一个对象。事件对象
			//使用jquery获取事件对象，在回调函数中传入event参数，event是jquery定义好的一个变量
			$(function() {
				$("#areaDiv").mousemove(function(event) {
					$("#showMsg2").text("x=" + event.screenX + " y=" + event.screenY)
				})
			})

			window.onload = function() {
				//使用js获取事件对象
				var areaDiv = document.getElementById("areaDiv");
				var showMsg = document.getElementById("showMsg");
				//同样是将event传入回调函数
				areaDiv.onmousemove = function(event) {
					var x = event.pageX; //当前页面的坐标
					var y = event.pageY; //Y
					showMsg.innerHTML = "x=" + x + " y=" + y;
				};
			}

jQuery动画

请添加图片描述

隐藏和显示的动画效果
				//显示   show()
				$("#btn1").click(function() {
					// $("#div1").show("fast");
					$("#div1").show(500,function(){
						alert('div1展示完毕！');
					});
				});
				//隐藏  hide()
				$("#btn2").click(function() {
					// $("#div1").hide("normal");
					$("#div1").hide(1000,function(){
						alert('div1隐藏完毕！');
					});
				});
				//切换   toggle()
				$("#btn3").click(function() {
					// $("#div1").toggle("slow");
					$("#div1").toggle(2000,function(){
						alert('div1切换完毕！');
					});
				});
淡入淡出的动画效果
				//淡入   fadeIn()
				$("#btn4").click(function() {
					$("#div1").fadeIn(1000, function() {
						alert('div1淡入完毕！');
					});
				});
				//淡出  fadeOut()
				$("#btn5").click(function() {
					$("#div1").fadeOut(500,function(){
						alert('div1淡出完毕！');
					});
				});

				//淡化到  fadeTo()
				$("#btn6").click(function() {
					$("#div1").fadeTo("slow", Math.random());
				});
				//淡化切换  fadeToggle()
				$("#btn7").click(function() {
					$("#div1").fadeToggle("slow", "swing");
					// $("#div1").slideDown("fast");
				});

jQuery CSS样式操作

请添加图片描述

CSS
css(name|pro|[,val|fn]) 读写匹配元素的样式属性。
a.css(‘color’)取出a元素的color
a.css(‘color’,“red”)设置a元素的color为red

CSS 类

addClass(class|fn) 为元素添加一个class值;


removeClass([class|fn]) 删除元素的class值；传递一个具体的class值，就会删除具体的某个class
a.removeClass()：移除所有的class值 

				var $divEle = $('div:first');

				$('#btn01').click(function() {
					//addClass() - 向被选元素添加一个或多个类
					$divEle.addClass("redDiv blackDiv");
				});

				$('#btn02').click(function() {
					//removeClass() - 从被选元素删除一个或多个类 
					$divEle.removeClass("redDiv")
					// $divEle.removeClass()
				});


				$('#btn03').click(function() {
					//toggleClass() - 对被选元素进行添加/删除类的切换操作 
					//切换就是如果具有该类那么删除，如果没有那么添加上
					$divEle.toggleClass("redDiv");
				});

				$('#btn04').click(function() {
					//offset() - 返回第一个匹配元素相对于文档的位置。
					var os = $divEle.offset();
					//注意通过offset获取到的是一个对象，这个对象有两个属性top表示顶边距，left表示左边距
					alert("顶边距：" + os.top + " 左边距：" + os.left);

					//调用offset设置元素位置时，也需要传递一个js对象，对象有两个属性top和left
					//offset({ top: 10, left: 30 });
					$divEle.offset({
						top: 50,
						left: 60
					});
				});

bootstrap

bootstrap按钮

btn:给每个按钮都添加的classname
btn-lg:大号按钮；缺省：中等大小按钮；btn-sm:小号按钮；btn-xs:超小号按钮；
btn-default
class="btn btn-lg btn-default"

bootstrap基本模板

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 先引入bootstrap css文件 -->
		<link rel="stylesheet" href="../css/bootstrap.min.css" />
	</head>
	<body>


		<!-- 在body的末尾，先引入jQuery.js，再引入bootstrap.js -->
		<script src="../js/jquery-1.11.3.min.js" type="text/javascript"></script>
		<script src="../js/bootstrap.min.js" type="text/javascript"></script>
	</body>
</html>

基于远程CDN的bootstrap模板

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 先引入bootstrap css文件 -->
		<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />
	</head>
	<body>


		<!-- 在body的末尾，先引入jQuery.js，再引入bootstrap.js -->
		<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" type="text/javascript"></script>
		<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" type="text/javascript"></script>
	</body>
</html>

ttps://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css" />

	<!-- 在body的末尾，先引入jQuery.js，再引入bootstrap.js -->
	<script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js" type="text/javascript"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js" type="text/javascript"></script>
</body>
```
奕の辰
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
专栏目录
jQuery选择器思维导图
12-28
通过思维导图对知识进行梳理，以便记忆
queue的常用操作
大模型天花板
04-20 510
欢迎访问我的STL库介绍 本文介绍常用的PAT里STL库queue的使用，对付PAT考试或其他上机要求足够了 声明 queue<int> q;//声明了一个int队列 queue<string> q;//声明了一个string队列 //当然也可以放入结构体 #include <bits/stdc++.h> using namespace std; stru...
详细讲解JQuery事件
Kepler_II的博客
03-12 270
总结： 鼠标事件 1.click与dbclick事件 $ele.click() $ele.click(handler(eventObject)) $ele.click([eventData],handler(eventObject)) 2.mousedown,mouseover 3.mouseover,mouseout 4.mouseenter,mouseleave 5.hover 6.focusin,focusout 表单事件 1.blur,focus 2.change 3.select 4.submit
系列的真值含糊不清。 使用a.empty，a.bool（），a.item（），a.any（）或a.all（）
xfxf996的博客
08-11 4951
Having issue filtering my result dataframe with an or condition. 在使用or条件过滤我的结果数据帧时出现问题。 I want my r
$(dom).each(index,ele){} 真正的jquery对象
weixin_30423977的博客
07-14 239
1、$(ele)才是each真正的jquery对象，而不是ele。$('.mt-story-info').each(function(index,ele){ if($('.mt-story-info').length <= 10){//10是每次加载的条数 Expansion($(ele)); }else{//当条数大于10条 if(index &gt...
jQuery中 $.each() 和 $.(ele).each() 的区别
weixin_34403976的博客
08-01 405
$.each(Arr,function(){}) 这个主要是遍历普通数组使用 $.(ele).each(function(){}) 这个主要是遍历DOM使用
jquery选择器简述
11-24
jQuery选择器使得获得页面元素变得更加容易、更加灵活，从而大大减轻了开发人员的压力。如同盖楼一样，没有砖瓦，就盖不起楼房，得不到元素谈何其他各种操作呢？可见,jQuery选择器的重要性。 jquery选择器大方向可以...
JQuery选择器
04-18
基础的JQuery选择器 适用于初学者 里面有详细的JQuery选择器的讲解
jQuery 选择器
01-19
jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器 jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。 jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”...
常用jQuery选择器汇总
12-08
学习【js DOM 编程艺术】，最后面有许多jQuery的选择器，每个都动手敲了一遍。 jQuery 提供了高级选择器的方法。 j s获取元素的三个基本方法分别是通过标签名，类名和id，即(getElementsByTagName, ...
jQuery_$ele.on().off()_input.html
weixin_42193179的博客
11-28 237
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jquery on_off事件</title> <script src="lib/jquery/jquery-3.2.1.js"></scrip...
c++学习笔记小记（6）
qq_28734159的博客
07-03 180
----------------迭代器介绍---------------通过下标可以访问vector或者string类型对象的元素，还可以通过另外一种方式实现同样的目的------迭代器获取迭代器不是使用取地址符&amp;，因为有迭代器的类型同时拥有返回迭代器的成员函数，begin和end例如：auto a = v.begin(),b = v.end();  //a和b的类型由begin和end的...
C++常用容器和算法函数总结
nidayededaye2的博客
01-08 436
一.vector 1.a.push_back(x) //最后加一个元素 2.a.pop_back() // 删除最后一个元素 3.a.size() //长度 4.a.clear() //清空 5.a.insert(it,x) //往迭代器it处插入x 6.a.begin() //首部迭代器 7.a.end() //尾部迭代器 8.a.erase(it) //删除it迭代器处元素 9.a.erase(first,last) //删除[first,last)内的元素，注意左闭右开 10.a.
STL入门
Peson_Du的博客
08-09 214
一：不定长数组（vector） 数组实际上就是一个指针，只是给他一个标记（数组名）就变成了我们常使用的数组，不定长数组就是不存在数组越界的行为，也就是指针越界。vector把一些常用操作封装在其内部。 作为一个模板类；定义用以下方式; vector<数据类型>名称。比如：vector<int>a;(你可以理解为int a[]) 其基本操作： ...
empty() 函数
冷月醉雪的博客
04-24 8874
查看更多 https://www.yuque.com/docs/share/a67a4889-6930-453e-beca-4b78cf3266b5
empty()函数
qq_14989227的博客
05-24 3726
empty()函数是用来测试变量是否已经配置。若变量已存在、非空字符串或者非零，则返回 false 值；反之返回 true值。 所以，当字符串的值为0时，也返回true，就是执行empty内部的语句。这就是陷阱。 如： 假设 $value = 0; 则empty($value)＝false。
Python异常：ValueError: The truth value of a Series is ambiguous. Use a.empty, a.bool(), a.item(), a.an
热门推荐
ailo555的专栏
10-28 9万+
Python跑了一个策略，报了个异常：ValueError: The truth value of a Series is ambiguous. Use a.empty, a.bool(), a.item(), a.any() or a.all().这句换的大概意思是：“”数组的真实值不明确“”。出现的这个问题的场景是遍历了一个浮点数的数据导致的。 1、报错如图： 2、看了代码，发现没啥错...
C++学习笔记之常用的数据处理函数 3
qq_42761380的博客
02-14 399
C++常用知识 C++ Primer Plus笔记摘抄备忘录（仅供个人学习参考） std::size_t std::size_t 可以存放下理论上可能存在的对象的最大大小，该对象可以是任何类型，包括数组。（简单理解为无符号的int） int main() { const std::size_t N = 10; int* a = new int[N]; for (std::size_t n = 0;...
jquery选择器
最新发布
06-01
jQuery选择器是一个功能强大的工具，用于选择HTML元素并对其进行操作。jQuery提供了多种选择器方法，以下是其中的一些： 1. ID选择器： 使用“#”符号，后跟ID名称，如下所示： ``` $("#myId") ``` 2. 类选择器： 使用“.”符号，后跟类名称，如下所示： ``` $(".myClass") ``` 3. 元素选择器： 使用元素名称，如下所示： ``` $("div") ``` 4. 属性选择器： 使用元素属性名称和值，如下所示： ``` $("[name='myName']") ``` 5. 后代选择器： 使用空格来选择后代元素，如下所示： ``` $("div p") ``` 6. 索引选择器： 使用索引号来选择元素，如下所示： ``` $("div:eq(2)") ``` 以上是jQuery常用的选择器方法，可以根据自己的需求来选择使用哪种方法。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

奕の辰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值