jQuery基础01

最新推荐文章于 2024-06-14 10:11:23 发布
最新推荐文章于 2024-06-14 10:11:23 发布
阅读量100 收藏
点赞数
分类专栏： JQuery 文章标签： jquery js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qwq_666/article/details/113726148
版权

什么是jQuery

jQuery是一款JavaScript的库，作用是能让我们对HTML文档遍历和操作、事件处理、动画以及Ajax变得更简单。

jQuery的使用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>HelloWorld</title>
		<!-- 引入jQuery -->
		<script src="../lib/jquery.js"></script>
		
		<script>
			//1.原生JS的固定写法
			window.onload = function(ev){ }
			//2.jQuery的固定写法
			$(document).ready(function(){
				alert("Hello jQuery");
			});
		</script>
	</head>
	<body>
	</body>
</html>

jQuery和js入口函数的区别

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery和js入口函数的区别</title>
		<script src="../lib/jquery.js">
			
		</script>
		<script>
			/* window.onload = function(ev){
				//1.通过原生的js入口函数可以拿到DOM元素
				var img = document.getElementsByTagName("img")[0];
				console.log(img);
				//2.通过原生的js入口函数可以拿到DOM元素的宽高
				var width = window.getComputedStyle(img).width;
				console.log("onload",width);
			} */
			
			$(document).ready(function(){
				//1.通过jQuery的入口函数可以拿到Dom函数
				var $img = $("img");
				console.log($img);
				//2.通过jQuery入口函数也可以拿到DOM元素的宽高（以前貌似不行）
				var $width = $img.width();
				console.log("ready",$width);
			});
			/* 
				1.原生的js如果编写了多个入口函数，后面编写的会覆盖前面编写的，只弹出hello 2
				2.jQuery中编写多个入口函数，后面的不会覆盖前面的，hello 3 与hello 4先后弹出
			 */
			/* window.onload = function(ev){
				alert("hello 1");
			}
			window.onload = function(ev){
				alert("hello 2");
			} */
			
			$(document).ready(function(){
				alert("hello 3");
			})
			$(document).ready(function(){
				alert("hello 4");
			})
		</script>
	</head>
	<body>
		<img src="https://imggif.gamersky.com/upimg/users/2020/07/22/origin_202007222258575594.gif" >
	</body>
</html>

jQuery入口函数的其他写法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery入口函数的其他写法</title>
		<script src="../lib/jquery.js"></script>
		<script>
			//第一种写法
			$(document).ready(function(){
				alert("芜湖1~");
			});
			//第二种写法
			jQuery(document).ready(function(){
				alert("芜湖2~");
			});
			//第三种写法
			$(function(){
				alert("芜湖3~");
			});
			//第四种写法
			jQuery(function(){
				alert("芜湖4~");
			});
		</script>
	</head>
	<body>
	</body>
</html>

jQuery的冲突问题

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>jQuery冲突问题</title>
		<script src="../lib/jquery.js"></script>
		<script src="../lib/test.js"></script><!-- 会覆盖上面的jquery.js文件，引发冲突 -->
		<script>
			//冲突问题的两种解决方案
			//1.释放$的使用权
			//注意：释放操作必须在编写其他jQuery代码之前编写，释放之后就不能再使用$，改为使用jQuery
			//jQuery.noConflict();
			
			//2.自定义一个访问符号
			var xy = jQuery.noConflict();
			xy(function(){
				alert("hello c");
			});
		</script>
	</head>
	<body>
	</body>
</html>

核心函数

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>核心函数</title>
		<script src="../lib/jquery.js"></script>
		<script>
			//$();就代表调用jQuery的核心函数
			//1.接收一个函数
			$(function(){
				alert("hello!");
			
			//2.接收一个字符串
				//2.1接收一个字符串选择器
				//返回一个jQuery对象，对象中保存了找到的DOM元素
				var $box1 = $(".box1");
				var $box2 = $("#box2");
				console.log($box1);
				console.log($box2);
				//2.2接收一个字符串代码片段
				//返回一个jQuery对象，对象中保存了创建的DOM元素
				var $p = $("<p>我是段落</p>");
				console.log($p);
				$box1.append($p);
				//2.3接收一个DOM元素
				//会被包装成一个jQuery对象返回给我们
				var span = document.getElementsByTagName("span")[0];
				console.log(span);
				var $span = $(span);
				console.log($span);
			});
		</script>
	</head>
	<body>
		<div class="box1"></div>
		<div id="box2"></div>
		<span>我是span</span>
	</body>
</html>

对象

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>对象</title>
		<script src="../lib/jquery.js"></script>
		<script>
			$(function(){
				/* 
					1.jQuery对象是一个伪数组
					2.伪数组：有0到length-1的属性，并且有length属性
				 */
				var $div = $("div");
				console.log($div);
				
				var arr = [1,3,5];
				console.log(arr);
			});
		</script>
	</head>
	<body>
		<div>div1</div>
		<div>div2</div>
		<div>div3</div>
	</body>
</html>

静态方法和实例方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>静态方法和实例方法</title>
		<script src="../lib/jquery.js"></script>
		<script>
			//1.定义一个类
			function AClass(){
				
			}
			//2.给这个类添加一个静态方法
			//直接添加给类的就是静态方法
			AClass.staticMethod = function(){
				alert("staticMethod");
			}
			//静态方法通过类名调用
			AClass.staticMethod();
			
			//3.给这个类添加一个实例方法
			AClass.prototype.instanceMethod = function(){
				alert("instanceMethod");
			}
			//实例方法通过类的实例调用
			//创建一个实例对象(创建一个对象)
			var a = new AClass();
			//通过实例调用实例方法
			a.instanceMethod();
		</script>
	</head>
	<body>
	</body>
</html>

静态方法each方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>静态方法each方法</title>
		<script src="../lib/jquery.js"></script>
		<script type="text/javascript">
			var arr = [1,3,5,7,9];
			/* 
				第一个参数：遍历到的元素
				第二个参数：当前遍历到的索引
				注意点：
					1.原生的forEach方法只能遍历数组，不能遍历伪数组
			 */
			arr.forEach(function (value,index){
				console.log(value,index);
			})
			/*
			var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
			obj.forEach(function(value,index){
				console.log(value,index);
			}); 
			报错：Uncaught TypeError: obj.forEach is not a function
			*/
		   
		   //利用jQuery的each静态方法遍历数组
		   /* 
			第一个参数：遍历到的元素
			第二个参数：当前遍历到的索引
			注意点：jQuery方法是可以遍历伪数组的
		   */
		   /* var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
		   $.each(arr,function (index,value){
		   	console.log(index,value);
		   }); */
		   var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
		   $.each(obj,function (index,value){
		   	console.log(index,value);
		   });
		</script>
	</head>
	<body>
	</body>
</html>

map方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>静态方法map方法</title>
		<script src="../lib/jquery.js"></script>
		<script>
			var arr = [1,3,5,7,9];
			var obj = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
			//利用原生js的map方法遍历
			/* 
				第一个参数：当前遍历到的元素
				第二个参数：当前遍历到的索引
				第三个参数：当前被遍历的数组
				注意：和原生的forEach一样，不能遍历伪数组
			 */
			/* 	
			arr.map(function(value,index,array){
			console.log(index,value,array);
			});
			*/
			/* 
			obj.map(function(value,index,array){
				console.log(index,value,array);
			}); 
			报错
			*/
		   /* 
				第一个参数：要遍历的数组
				第二个参数：每遍历一个元素之后执行的回调函数
				回调函数的参数：
					第一个参数：遍历到的元素
					第二个参数：遍历到的索引
		    $.map(arr,function(value,index){
				console.log(index,value);
			});
			
			注意：和jQuery中的each方法一样，map方法也可以遍历伪数组
		    */
			var res = $.map(obj,function(value,index){
				console.log(index,value);
				return value + index;//[1, 4, 7, 10, 13]
			});
			
			var res2 = $.each(obj,function (index,value){
				console.log(index,value);
				return value + index;//{0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5}
			});
			/* 
				jQuery中的each静态方法和map静态方法的区别：
					each静态方法默认的返回值就是，遍历谁就返回谁
					map静态方法默认的返回值是一个空数组
					
					each静态方法不持支在回调函数中对遍历的数组进行处理
					map静态方法可以在回调函数中通过return对遍历的数组进行处理，然后生成一个新的函数返回
			 */
			console.log(res);//[]
			console.log(res2);//{0: 1, 1: 3, 2: 5, 3: 7, 4: 9, length: 5}
		</script>
	</head>
	<body>
	</body>
</html>

其他方法

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>其他静态方法</title>
		<script src="../lib/jquery.js"></script>
		<script type="text/javascript">
			/*
				$.trim();
				作用：去除字符串两端的空格
				参数：需要去除空格的字符串
				返回值：去除空格之后的字符串
			 */
			var str = "   cqd   ";
			var res = $.trim(str);
			console.log("——————" + str + "——————");//——————   cqd   ——————
			console.log(res);//cqd
			
			/* 
				$.isWindow();
				作用：判断传入的对象是否为window对象
				返回值：true/false
			 */
			//真数组
			var arr = [1,3,5,7,9];
			//伪数组
			var arrlike = {0:1, 1:3, 2:5, 3:7, 4:9, length:5};
			//对象
			var obj = {"name":"cqd",age:"22"}; 
			//函数
			var fn = function(){};
			//window对象
			var w = window;
			//$.isWindow();
			
			var res2 = $.isWindow(w);
			console.log(res2);//true
			//传其他arr、arrlike。。。结果都是false
			
			/* 
				$.isArray();
				作用：判断传入的对象是否为真数组
				返回值：true/false
			 */
			var res3 = $.isArray(arr);//true
			console.log(res3);
			//传其他arrlike。。。结果都是false
			
			/* 
				$.isFunction();
				作用：判断传入的对象是否是一个函数
				返回值：true/false
				注意：jQuery框架本质上就是一个函数
				(function(window,undefined){
					
				})(window);
			 */
			var res4 = $.isFunction(fn);//true
			console.log(res4);
			
			var res5 = $.isFunction(jQuery);//true
			console.log(res5);
		</script>
	</head>
	<body>
	</body>
</html>

holdReady方法（理解）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>holdReady方法（理解）</title>
		<script src="../lib/jquery.js"></script>
		<script>
			/* 
				$.holdReady(true);
				作用：暂停ready执行
			 */
			$.holdReady(true);
			$(document).ready(function(){
				alert("ready");
			});
		</script>
	</head>
	<body>
		<button>恢复ready事件</button>
		<script type="text/javascript">
			var btn = document.getElementsByTagName("button")[0];
			btn.onclick = function(){
				$.holdReady(false);
			}
			/*
				$.holdReady(false);
				作用：恢复ready执行
			 */
		</script>
	</body>
</html>
最爱琴女E
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Jquery01.md
07-07
本篇文章记录了Jquery基础学习过程中的Jquery选择器以及核心函数。Jquery选择器：基本元素选择器，层级选择器，过滤选择器，子元素过滤选择器，表单过滤选择器，属性选择器，表单对象过滤选择器。
jquery基础教程01
08-23
jquery基础教程，总共分为10章，内容全面，讲解详细，是入门精通的好教程。
Jquery第01天.zip
12-21
在这个视频系列中，我们将带你深入了解WEB前端开发的基础知识和实践技巧。 这个视频系列适合那些对于网页设计和开发有兴趣的初学者和入门者。无论你是想要成为一名专业的前端工程师，还是只是想了解一些基本概念和...
JQuery01.doc
12-16
Jquery技术的基础详细学习笔记，总结了Jquery技术的各个知识点，可以用来复习以及对基础知识的巩固，对新人的学习很有帮助。
day01-jquery基础.pdf
03-22
day01-jquery基础.pdf
JS中一个dom元素能绑定多少事件
ggq53219的博客
06-10 505
在JavaScript中，一个DOM元素可以绑定的事件数量并没有明确的限制，这主要取决于浏览器的实现和内存限制。然而，在实际应用中，为同一个DOM元素绑定过多的事件监听器可能会导致性能问题，尤其是在事件处理函数执行复杂操作的情况下。总之，虽然JavaScript中DOM元素可以绑定的事件数量没有明确的限制，但在实际应用中应注意避免过度绑定和优化事件处理函数，以确保良好的性能和用户体验。
[Vue-常见错误]浏览器显示Uncaught runtime errors
一个喜欢什么都研究一下的小小后端程序员
06-09 334
在vue.config.js中配置关闭Uncaught runtime errors显示。
基于JavaScript 如何实现爬山算法以及优化方案
乐闻世界
06-10 1219
爬山算法（Hill Climbing Algorithm）是一种常见的启发式搜索算法，常用于解决优化问题。其核心思想是从一个初始状态出发，通过逐步选择使目标函数值增大的邻近状态来寻找最优解。接下来，我们将通过 JavaScript 实现一个简单的爬山算法，帮助大家理解其原理和应用。从一个初始状态开始。评估当前状态的目标函数值。在当前状态的邻居中选择一个目标函数值更大的状态。如果找到了更优的邻居，则移动到该邻居并重复步骤2和步骤3。如果没有更优的邻居，则算法结束，当前状态即为局部最优解。
vue3如何定义一个组件
Java程序员专栏
06-09 525
注意在子组件的 <template> 中，你使用 {{ propName }} 来显示传递进来的参数值。在父组件中，你使用 :propName="parentMessage" 来将 parentMessage 数据的值绑定到子组件的 propName prop 上。当使用 <script setup> 语法糖时，你不能直接在 <script> 标签内使用 props 选项。在 Vue 3 中，定义一个可以接收参数的组件通常是通过在组件的 props 选项中定义这些参数来完成的。// 其他组件逻辑...
（Javascript）AI数字人mp4转canvas播放并去除背景绿幕
lx_nhs的博客
06-12 420
去除前：去除后： 3、可能会出现的报错 （1）视频路径跨域问题：解决：vue开启代理
第二十一节:带你梳理Vue2: 父组件使用子组件时的修饰符和双向数据绑定
我们专注于分享最实用的编程技术和干货，帮助你提升编程能力,感谢您的支持和关注！
06-10 1228
原生事件修饰符.native ,关于组件标签上的事件 在组件标签上是没办法触发原生的js事件的,vue会将其作为自定义事件处理
VUE el-select Select 选择器 选项是对象，显示是一个值name ，但是绑定的对象值是id方案
最新发布
mqiqe的专栏
06-14 145
在 Vue 中使用 Element UI 的 el-select 组件时，如果希望显示对象的某个属性（如 name），但实际绑定的是对象的另一个属性（如 id），需要使用 value-key 和 label 属性来分别指定这两个属性。在这个示例中，v-model=“selectedId” 用于绑定选择的值，该值将是选中项的 id。当用户选择一个选项时，selectedId 将被更新为选中项的 id，而 el-select 下拉列表中显示的是每个选项的 name 属性。
前端工程化：基于Vue.js 3.0的设计与实践
weixin_44976692的博客
06-08 4553
本书由程沛权倾力撰写，基于其多年的前端开发和一线团队管理经验，将Vue 3的知识点按照工程师做项目的实施顺序梳理成章。从前端工程化的基础开始，到TypeScript的深入学习，再到使用TypeScript开发Vue 3项目，通过循序渐进的学习过程，帮助读者在前端工程化领域不断提升实战能力。程沛权，养了三只猫的程序员，热爱烹饪、设计和音乐。在前端领域有多年的开发经验和一线开发团队管理经验。
Ethereum-Score-Hella怎么使用，举例说明
ZJQ的博客
06-09 48
Node.js是一个基于Chrome V8引擎的JavaScript运行环境，它使得。
Vue在表单校验中trigger属性指定何时触发校验规则
李长渊的博客
06-13 593
Vue在表单校验中trigger属性指定何时触发校验规则
vue2中如何使用函数式组件
JackZhouMine
06-08 1037
vue 在 render 函数的第二个参数中提供了context，用于访问propsslotsprops: 组件 props 对象。data: 组件的数据对象，即 h 的第二个参数。listeners: 组件上监听的事件对象，在组件上监听 ` event-name ` ，listeners 对象就有 ` event-name ` 属性，值为函数，数据可通过该函数的参数抛到父组件。listeners 是 ` data.on ` 的别名。slots: 函数，返回了包含所有插槽的对象。
vue antdesgin table 动态表头动态数据示例
xfp5158的博客
06-08 266
vue antdesgin table 动态表头动态数据示例
Vue2基础：.sync修饰符的使用，认识，作用，本质案例演示，实现父子之间的通信。
我就知道你会来，我们一起进步吧！
06-10 283
.sync修饰符的使用，认识，作用，本质案例演示，实现父子之间的通信。
vue3 防止按钮的连续点击（连点）
MtangEr的博客
06-13 240
vue3防止按钮连续点击，可注册自定义指令 v-prevent-reclick实现
jquery基础教程
09-28
下面是学习jQuery的基础教程步骤： 1. 引入jQuery库：在HTML文件中引入jQuery库，可以使用CDN链接或者本地引入文件的方式。 2. 选择器：学习使用jQuery选择器来选取HTML元素。jQuery提供了多种选择器，包括基本...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值