路漫漫其修远兮：js的成长经历（十二）——jQuery基础

最新推荐文章于 2023-11-09 14:01:18 发布

不愿意做鱼的小鲸鱼

最新推荐文章于 2023-11-09 14:01:18 发布

阅读量201

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： javaScript jQuery web前端 jQuery基础

本文链接：https://blog.youkuaiyun.com/qq_42038623/article/details/98785422

jQuery 专栏收录该内容

6 篇文章

订阅专栏

本文全面解析jQuery库的使用，涵盖冲突解决、核心函数、对象操作、选择器、属性节点、类操作、样式调整、滚动条控制、尺寸与位置调整、事件绑定与解绑、自动触发事件、自定义事件、命名空间及事件委托等核心概念。

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

jQuery冲突问题
jQuery的核心函数
jQuery对象
jQuery的静态方法
- each方法和 map方法
jQuery选择器
jQuery操作属性节点的方法
jQuery操作类的相关方法
jQuery操作样式CSS的相关方法
jQuery的scrollTop方法
jQuery的尺寸和位置操作
事件绑定与解绑
jQuery自动触发事件
jQuery自定义事件
jQuery命名空间
jQuery事件委托

jQuery冲突问题

使用jQuery时， $ 是访问jQuery的标志，但是如果有其他方法与jQuery中的 $冲突时，可以释放$ 的使用权，还可以自定义一个符号来代替 $使用。
示例如下

<script type="text/javascript">
			/* 1.释放$的使用权
			注意点:释放操作必须在边写其他jQuery代码之前编写，
			释放之后就不能再使用$,改为使用jQuery
			 jQuery.noConfict();
			 2.自定义一个访问符号*/
			 $(function(){
				 alert("我是$执行的");
			 });
			 var jq=jQuery.noConflict();
			 jq(function(){
			 		alert("我是jq执行的");
			 });
		</script>

jQuery的核心函数

jQuery的核心函数就是$()
有以下作用：
1.接收一个函数
2.接收一个字符串：接收一个字符串的选择器；接收一个字符串代码片段
3.接收一个DOM元素
示例如下

<body>
		<div id="box">

		</div>
		<div class="btn">
			<span id="sp">
				
			</span>
		</div>
		
		<script type="text/javascript">
			//jQuery的核心函数就是$()


			//1.接收一个函数
			$(function() {
				alert("hello world");
				//2.接收一个字符串
				//2.1接收一个字符串的选择器
				//返回一个jQuery对象,对象中保存了找到的DOM元素
				var $box1 = $("#box");
				var $box2 = $(".btn");
				console.log($box1);
				console.log($box2);
				//2.2接收一个字符串代码片段
				//返回一个jQuery对象,对象中保存了找到的DOM元素
				var $p=$("<p>我是段落</p>");
				$box1.append($p);
				//3.接收一个DOM元素
				//会包装成一个jQuery对象返回给我们
				var span=document.getElementById("sp");
				console.log(span);
				$span=$(span);
				console.log($span);
				
			})
		</script>
	</body>

jQuery对象

1.什么是jQuery对象
jQuery对象是一个伪数组
2.什么是伪数组
有0-length-1的属性，并且有length属性

jQuery的静态方法

each方法和 map方法

jQuery中的each方法和 map方法都是用来遍历数组的方法
第一个参数：要遍历的数组
第二个参数：每遍历到一个元素后执行的回调函数
回调函数的参数：
第一个参数：遍历到的元素
第二个参数：当前遍历到的索引
注意点：
两个都可以遍历伪数组的
示例如下

var obj = {
					0: 1,
					1: 3,
					2: 5,
					3: 7,
					4: 9,
					length: 5
				};
var res1 = $.map(obj, function(value, index) {
					console.log(index, value);
					return(index+value);
				});
				var res2 = $.each(obj, function(index, value) {
					console.log(index, value);
					return(index+value);
				});
				console.log(res1);
				console.log(res2);

jQuery中each静态方法和map静态方法的区别
1.each静态方法默认的返回值就是，遍历谁就返回谁
map静态方法默认的返回值是一个空数组
2.each静态方法不支持在回调函数中对遍历的数组进行处理
map静态方法可以在回调函数中通过return对比那里的数组进行处理然后生成一个新的数组返回
## 其他静态方法
1.$.isWindow():判断传入的对象是否是window对象
2. $.isArray():判断传入的对象是否是真数组
3. $.isFunction():判断传入的对象是否是函数
（注意:jQuery本质是一个函数）

jQuery选择器

在这里插入图片描述

内容过滤器示例

<body>
		<div>我是第一个div</div>
		<div>第二个</div>
		<div></div>
		<div><span>我是div中的span</span></div>
		<script type="text/javascript">
			$(function() {
				//:empty 找到既没有文本也没有子元素的指定元素
				var $div =$("div:empty");
				console.log($div);
				//:parent 找到有文本内容或者有子元素的指定元素
				var $div1 =$("div:parent");
				console.log($div1);
				//:contains(text) 找到包含指定文本内容的指定元素
				var $div2 =$("div:contains('我是div')");
				console.log($div2);
				//:has(selector)  找到包含子元素指定元素的指定内容
				var $div3 =$("div:has('span')");
				console.log($div3);

			});	
		</script>
		
	</body>

jQuery操作属性节点的方法

1.attr(name|pro|key,val|fn)
作用:获取或者设置属性节点的值
可以传递一个参数，也可以传递两个参数
如果传递一个参数：代表获取属性节点的值
如果传递啷个参数，代表设置属性节点的值
注意点：
如果是获取：无论找到多少个元素都只会返回第一个元素指定的属性节点的值
如果是设置：找到多少个元素就会设置多少个元素
如果是设置：如果设置的节点不存在，系统会自动新增,全部新增
2.prop的作用和attr相似
区别:当判断控件是否被选上时,attr只能返回该属性值,而prop返回true或者false
示例

<body>
		<div class="box1">我是第一个div</div>
		<div class="box2" name="dsad">第二个</div>
		<script type="text/javascript">
			$(function() {
				/* 
				1.attr(name|pro|key,val|fn)
				作用:获取或者设置属性节点的值 
				可以传递一个参数，也可以传递两个参数
				如果传递一个参数：代表获取属性节点的值
				如果传递啷个参数，代表设置属性节点的值
				
				注意点：
				如果是获取：无论找到多少个元素都只会返回第一个元素指定的属性节点的值
				如果是设置：找到多少个元素就会设置多少个元素
				如果是设置：如果设置的节点不存在，系统会自动新增,全部新增
				2.removeAttr(name)
				删除属性节点
				
				注意点：会删除所有找到元素指定的属性节点
				
				*/
				console.log($("div").attr("class"));
				$("div").attr("class","bar");
				$("div").attr("hello","world");
				
				// $("div").removeAttr("hello");
				$("div").removeAttr("class");
				

			});	
		</script>
		
	</body>

jQuery操作类的相关方法

示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
		</script><style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 100px;
				height: 100px;
				background-color: #8A2BE2;
			}
			.box1{
				width: 100px;
				height: 100px;
				background-color: #FF0000;
			}
			.box2{
				border: 5px #ADFF2F solid;
			}
		</style>
		
	</head>
	<body>
		<button>添加类</button>
		<button>删除类</button>
		<button>切换类</button>
		<div>
			
		</div>
		<script type="text/javascript">
			$(function() {
				var btn=document.getElementsByTagName("button");
				//给div添加类
				btn[0].onclick=function(){
					$("div").addClass("box1 box2")
				}
				//删除类
				btn[1].onclick=function(){
					$("div").removeClass("box2")
				}
				//切换类:有就删除,没有就添加
				btn[2].onclick=function(){
					$("div").toggleClass("box1 box");
				}

			});	
		</script>
		
	</body>
</html>

jQuery操作样式CSS的相关方法

示例

<body>
		<div id="">
			
		</div>
		<script type="text/javascript">
			$(function() {
				// 1.逐个设置
				$("div").css("width","100px");
				$("div").css("height","100px");
				$("div").css("background","red");
				// 链式设置
				//注意点:链式操作如果大于三步,建议分开
				$("div").css("width","100px").css("height","100px").css("background","yellow");
				//批量设置
				$("div").css({
					width:"100px",
					height:"200px",
					background:"blue"
				})
				
				//获取css样式
				console.log($("div").css("width"));

			});	
		</script>
		
	</body>

jQuery的scrollTop方法

1.获取滚动定位
2.设置滚动定位
示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
		</script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.box{
				width: 200px;
				height: 300px;
				background: lightgreen;
				overflow: auto;
			}
		</style>
	</head>
	<div class="box">
		我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
		我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
		我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
		我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
		我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
		我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
		我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
		我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div我是div
	</div>
	<button>获取</button>
	<button>设置</button>
	<body>
		<script type="text/javascript">
			$(function() {
				var btn=document.getElementsByTagName("button");
				btn[0].onclick=function(){
					//获取滚动定位
					console.log($(".box").scrollTop());
					//获取网页的偏移位置
					//注意点:为了保证浏览器的兼容:需要按照如下写法
					console.log($("body").scrollTop()+$("html").scrollTop());
				}
				btn[1].onclick=function(){
					//设置滚动定位
					$(".box").scrollTop(300);
					//设置网页偏移位
					//注意点:为了保证浏览器的兼容:设置网页偏移位时，需要按照如下写法
					$("body,html").scrollTop(300);
				}

			});	
		</script>
		
	</body>
</html>

jQuery的尺寸和位置操作

1.offset():用来获取和设置相当于body的偏移位
2.position():用来获取相当于父元素的偏移位
使用示例如下

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
		</script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			.father{
				
				width: 200px;
				height: 200px;
				background-color: #8A2BE2;
				border: 2px #ADFF2F solid;
				margin-left: 50px;
				position: relative;
			}
			.son{
				width: 100px;
				height: 100px;
				background: #FF0000;
				position: absolute;
				left: 50px;
				top: 50px;
			}
		</style>
	</head>
	<body>
		<div class="father">
			<div class="son">
				
			</div>
		</div>
		<button type="button">获取</button>
		<button type="button">设置</button>
		<script type="text/javascript">
			$(function() {
				var btn=document.getElementsByTagName("button");
				//监听获取
				btn[0].onclick=function(){
					//offset():用来获取和设置相当于body的偏移位
					//获取元素的宽度
					console.log($(".father").width());
					//offset():获取元素距离窗口的偏移位
					console.log($(".son").offset().left);
					//position():获取元素与定位元素的偏移位
					console.log($(".son").position().left);
				}
				// 监听设置
				btn[1].onclick=function(){
					//设置元素的宽度
					$(".father").width(300);
					//offset():设置元素距离窗口的偏移位
					$(".son").offset({left:20});
					
					//position():用来获取相当于父元素的偏移位
					//注意点:只能获取,不能设置
					
					// $(".son").position({left:20});
					
				}

			});	
		</script>
		
	</body>
</html>

事件绑定与解绑

事件绑定
1.eventName(fn);
编码效率高，部分事件jQuery没有实现，所以不能添加
2.on(eventName,fn)
编码效率低，所有js事件都能添加
注意点：可以添加多个相同或者不同的事件，不会覆盖
事件解绑
$().off()
如果不传递参数,会移除所有的事件
如果传递一个参数,会移除所有指定类型的事件
如果传递两个参数,会移除所有指定类型的指定事件
示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
		</script>
	</head>
	<body>
		<button>我是按钮</button>
		<script type="text/javascript">
			$(function() {
				/*
				1.eventName(fn);
				编码效率高，部分事件jQuery没有实现，所以不能添加
				2.on(eventName,fn)
				编码效率低，所有js事件都能添加
				
				注意点：可以添加多个相同或者不同的事件，不会覆盖
				*/
				//事件绑定
				var test1=function() {
					alert("hello world 1")
				};
				var test2=function() {
					alert("hello world 2")
				};
				$("button").click(test1)

				$("button").click(test2)
				$("button").mouseenter(function() {
					alert("mouseenter")
				})
				$("button").mouseleave(function() {
					alert("mouseleave")
				})

				//事件移除
				//如果不传递参数,会移除所有的事件
				
				// $("button").off();
				//off方法如果传递一个参数,会移除所有指定类型的事件
				// $("button").off("click");
				//off方法如果传递两个参数,会移除所有指定类型的指定事件
				$("button").off("click",test1);

			});
		</script>

	</body>
</html>

jQuery自动触发事件

1.trigger():如果使用trigger方法,会触发事件冒泡,也会触发默认行为
2.triggerHandler():如果使用triggerHandle方法,不会触发事件冒泡,也不会触发默认行为
示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
		</script>
		<style type="text/css">
			*{margin: 0;
			padding: 0;}
			.father{
				width: 200px;
				height: 200px;
				background: #8A2BE2;
				position: relative;
			}
			.son{
				width: 100px;
				height: 100px;
				background: #ADFF2F;
				position: absolute;
				left: 50px;
				top: 50px;
			}
		</style>
	</head>
	<body>
		
		<div class="father">
			<div class="son">
				
			</div>
		</div>
		<script type="text/javascript">
			$(function() {
				$(".father").click(function(){
					alert("我是父标签");
				});
				$(".son").click(function(){
					alert("我是子标签");
					//阻止事件冒泡
					// return false;
				});
				
				//自动触发事件的方法
				// 1.trigger():如果使用trigger方法,会触发事件冒泡,也会触发默认行为
				// $(".son").trigger("click");
				//2.triggerHandler():如果使用triggerHandle方法,不会触发事件冒泡,也不会触发默认行为
				$(".son").triggerHandler("click");
				
				//小面试题
				/*
				如果想在自动触发事件的情况下也触发默认行为，
				应该在该标签中添加一个子标签span，
				然后用trigger时，直接触发子标签span即可，
				否则只能触发事件，不能触发默认行为
				*/
				

			});	
		</script>
		
	</body>
</html>

jQuery自定义事件

想要自定义事件必须满足两个条件
1.事件必须通过on来绑定
2.事件必须通过trigger或者triggerHandle来触发
示例

<script type="text/javascript">
			$(function() {
				/*
				想要自定义事件必须满足两个条件
				1.事件必须通过on来绑定
				2.事件必须通过trigger或者triggerHandle来触发
				*/
			   $(".son").on("myclick",function(){
				   alert("son的自定义事件");
			   });
			   $(".son").trigger("myclick");
				

			});	
		</script>

jQuery命名空间

对同一个事件多个人写不同的方法
想要命名空间有效必须满足两个条件
1.事件是通过on来绑定的
2.通过trigger来触发事件
示例

<script type="text/javascript">
			$(function() {
				/*
				想要命名空间有效必须满足两个条件
				1.事件是通过on来绑定的
				2.通过trigger来触发事件
				*/
				$(".son").on("click.zs",function(){
					alert("我是张三添加的子标签事件");
				})
				$(".son").on("click.ls",function(){
					alert("我是李四添加的子标签事件");				
				});
				//点击父标签触发子标签
				$(".father").click(function(){
					$(".son").trigger("click.zs");
				})
				
				
			});	
		</script>

jQuery事件委托

什么是事件委托？
可以找一个在入口函数执行之前就有的元素来监听动态添加的某些事件
为什么要事件委托
新增的节点没有click响应,因为jQuery入口函数加载$(“ul>li”).click时没有把
新增的节点也绑定事件，因此如果要让新增的节点也要绑定事件，要用到事件委托
示例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">
		</script>
	</head>
	<body>
		<ul>
			<li>我是第一个li</li>
			<li>我是第二个li</li>
			<li>我是第三个li</li>
		</ul>
		<button>新增li</button>
		<script type="text/javascript">
			$(function() {
				/*
				在jQuery中如果通过核心函数找到的元素不知一个，那么在添加事件的时候，jQuery
				会遍历所有找到的元素，给所有找到的元素添加事件
				*/
			   $("button").click(function(){
				   $("ul").append("<li>我是新增的li</li>")
			   });
			   // $("ul>li").click(function(){
				  //  console.log($(this).html());
			   // })
			  /* 新增的节点没有click响应,因为jQuery入口函数加载$("ul>li").click时没有把
			   新增的节点也绑定事件，因此如果要让新增的节点也要绑定事件，要用到事件委托 
			   什么是事件委托：
			   可以找一个在入口函数执行之前就有的元素来监听动态添加的某些事件
			   应用了冒泡原理*/
			   $("ul").delegate("li","click",function(){
				   console.log($(this).html());
			   })

			});	
		</script>
		
	</body>
</html>