学好JQuery这一篇就够了😉

一、JQuery基本介绍

1. JavaScript库

JavaScript库 ：
即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。

简单的理解 ：
就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。

JQuery出来就是为了快速方便操作DOM，里面基本都是封装好的函数
#标题

1.1常见的JavaScript库

  1. Prototype : 是最早成型的JS库之一，对于JS的内置对象做了大量的扩展。
  2. Do jo : 提供了很多奇特JS库没有提供的功能。例如：离线存储的API，生成图标的组件等等。
  3. YUI : 是由Yahoo公司开发的一套完备的，扩展性良好的富交互网页程序工作集。
  4. Ext JS : 原本是对YUI的一个扩展，主要用于创建前端用户界面。
  5. Moo Tools : 是一套轻量、简洁、模拟化和面向对象的JS框架。
  6. JQuery : 同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使用它

这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，这篇主要讲解的是 jQuery。
官方地址：http://jquery.com/

1.2 为什么要使用JQuery

为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件

1.3 那些情况下使用

  • 中大型网站开发
  • 是一些前端框架的基础，比如EasyUI，Bootstrap

1.4 怎么用 ？

工具 ： HBuilderX
使用JQuery步骤 ：

  1. 下载JQuery库
    点击 JQuery文件下载在这里插入图片描述 2 . 引入到HBuiderX项目JS文件中
    将下载的Js文件直接复制到到相应的项目文件夹中在这里插入图片描述
    3 . 使用 ：
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>课堂案例</title>
		<!-- 载入函数 -->
		<script src="js/jquery-3.3.1.js"></script>
		<script>
			// $()构造了一个jquery对象。所以"$()"可以叫做jquery的构造函数
			//$(function(){})  $("选择器")  $("标签")  $(DOM对象)

			//ID选择器：#ID  ——单个元素 
			$(function() {
				$("#odiv").css("background","skyblue")
			});
		</script>
	</head>
	<body>
		<div id="odiv">姬霓太美</div>
	</body>
</html>

运行结果

2 . JQuery文件结构

2.1 JQuery版本

	jQuery版本有很多，分为1.X 2.X 3.X
  1. X版本 ：能够兼容IE6, 7, 8 浏览器（不再更新版本）
  2. x 版本：不兼容 IE6, 7, 8 浏览器（不再更新版本）
  3. x版本：不兼容 IE6, 7, 8，更加的精简（在国内不流行，因为国内使用 jQuery 的主要目的就是兼容 IE6, 7, 8）
    1.x 和 2.x 版本 jquery 都不再更新版本了，现在只更新3.x版本

2.2 JQuery闭包结构

打开jQuery库查看后有 一个基本架构如下

( function( global, factory ) {
} )();

  • 用一个函数域包起来，就是所谓的沙箱
  • 在这里边 var 定义的变量，属于这个函数域内的局部变量，避免污染全局
  • 把当前沙箱需要的外部变量通过函数参数引入进来
  • 只要保证参数对内提供的接口的一致性，你还可以随意替换传进来的这个参数。

jQuery 具体的实现，都被包含在了一个立即执行函数构造的闭包里面，为了不污染全局作用域，只在后面暴露 $ 和 jQuery 这 2 个变量给外界。

2.3 自执行函数

(function(){
    window.jQuery = window.$ = jQuery
}());

jQuery文件中可以看出是一个自执行函数

  • 自执行函数也叫立执行函数
  • 是将函数的声明和调用合并在一起
2.3.1 核心函数

$ 和 $() 引入JQuery库后,直接使用调用即可

  • 当函数调用 ：$(xxx)
  • 当对象调用 ：$.xxx()
2.3.2 JQquery的构造函数
  1. $( function ( ) { } )
  2. $( " 选择器 " )
  3. $( " 标签 " )
  4. $( DOM对象 )

具体使用如下目录

二 、 函数的使用

1. JQuery 函数的使用

1.1 作为一般函数调用 ：$( param )

  1. 参数为函数：当 DOM 加载完成后，执行此回调函数
  2. 参数为选择器字符：查找所有匹配的标签并将它们封装成jQuery对象
  3. 参数为 DOM 对象：将 dom 对象封装成jQuery对象
  4. 参数为 html 标签字符串（用得少）：创建标签对象并封装成jQuery对象

1.2 作为对象使用 ：$.xxx()

  1. $.each () : 隐式遍历数组
var arr = [3, 7, 4];
    $.each(arr, function (index, item) {
        console.log(index, item); 
    //结果（index是下标 item返回的是值） 0 3    1 7    2 4
    });
  1. $.trim () : 去除两端的空格
var text = "  hello 靓仔 ";
	$.trim(text).length;
	// 返回 7
1.2.1JQuery对象的使用

即执行JQuery核心函数返回的对象

  • jQuery对象内部包含的是 dom 元素对象的伪数组（可能只有一个元素）
  • jQuery对象拥有很多有用的属性和方法，让程序员能方便的操作 dom
1.2.2属性和方法

  • 基本行为：操作标签的基本方法

  • 属性：操作内部标签的属性或值

  • CSS：操作标签的样式

  • 文档：对标签进行增删改操作

  • 筛选：根据指定的规则过滤内部的标签

  • 事件：处理事件监听相关

  • 效果：实现一些动画效果

    这里我们先学习jQuery对象的基本行为，其他的在文章目录有详细介绍

1.3入口函数

一般代码写在页面底部，等元素加载完，才能执行 jQuery 代码，或者可以使用下方入口函数解决

方式一 :

~~~html
<script src="./jquery-3.6.0.js"></script>
<script>
    $(document).ready(function () {
        //
    });
</script>
~~~

等待页面 DOM 加载完毕后执行，相当于原生 js 中 DOMContentLoaded

方式二 ：

在这里插入代码片~~~html
<script src="./jquery-3.6.0.js"></script>
<script>
    $(function(){
     //
    })
</script>
~~~

方式三 ：

~~~html
<script src="./jquery-3.6.0.js"></script>
<script>
    $().ready(function() {
	//
    });
</script>
~~~

1.4 入口函数与window.onload的对比

  • JavaScript 的入口函数要等到页面中所有资源（包括图片、文件）加载完成才开始执行。
  • jQuery 的入口函数只会等待文档树加载完成就开始执行，并不会等待图片、文件的加载。

三 、选择器

jQuery 选择器是 jQuery 为我们提供的一组方法，让我们更加方便的获取到页面中的元素

1.1 基本选择器

名称用法描述
ID选择器$(‘#id’);获取指定ID的元素
类选择器$(‘.class’);获取同一类class的元素
标签选择器$(‘div’);获取同一类标签的所有元素
并集选择器$(‘div,p,li’);使用逗号分隔，只要符合条件之一就可。
交集选择器$(‘div.redClass’);获取class为redClass的div元素
属性选择器$(‘input[name=username]’)获取 input 标签中 name 属性为 username 的元素

注意：jQuery选择器返回的是jQuery对象。

案例：使用基本选择器，改变元素的背景颜色和字体颜色（div、p、span）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 导入jquery文件 -->
		<script src="../JQuery_01/js/jquery-3.6.4.min.js"></script>
		<script>
			$(function(){
				//设置按钮点击事件
				$("button").click(function(){
					//1.获取div修改css(直接获取元素)
					$("div").css("background","skyblue")
					//2.获取id $("#mydiv").css()
				})
			})
		</script>
	</head>
	<body>
		<div id="mydiv" style="background-color: aquamarine; height: 200px; width: 200px;"></div>
		<button>点我改变颜色</button>
	</body>
</html>

点击换颜色

1.2 层次选择器

名称用法描述
子代选择器$(‘ul > li’);使用 > 号，获取儿子层级的元素，注意，并不会获取孙子层级的元素
后代选择器$(‘ul li’);使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

1.3 过滤选择器

这类选择器都带冒号:

名称用法描述
:eq（index）$(‘li:eq(2)’).css(‘color’, ‘red’);获取到的li元素中，选择索引号为2的元素，索引号index从0开始。
:odd$(‘li:odd’).css(‘color’, ‘red’);获取到的li元素中，选择索引号为奇数的元素
:even$(‘li:even’).css(‘color’, ‘red’);获取到的li元素中，选择索引号为偶数的元素

1.4 jQuery 筛选方法

  • 筛选选择器的功能与过滤选择器有点类似，但是用法不一样，筛选选择器主要是方法。
名称用法描述
children(selector)$(‘ul’).children(‘li’)相当于$(‘ul>li’)，子类选择器
find(selector)$(‘ul’).find(‘li’);相当于$(‘ul li’),后代选择器
siblings(selector)$(‘#first’).siblings(‘li’);查找兄弟节点，不包括自己本身。
parent()$(‘#first’).parent();查找父亲
parents()$(‘li’).parents();查找祖先元素
eq(index)$(‘li’).eq(2);相当于$(‘li:eq(2)’),index从0开始
next()$(‘li’).next()找下一个兄弟
prev()$(‘li’).prev()找上一次兄弟
closest$(‘li’).closest(‘ul’)找最近一个祖先元素

1.5 this 和 当前索引

在对象的事件中， ( t h i s ) 表示当前操作的 j Q u e r y 对象， (this) 表示当前操作的 jQuery 对象， (this)表示当前操作的jQuery对象，(this).index() 表示当前元素的索引号

$("li").click(function () {
	console.log($(this).index());
}

JQuery支持链式编程哦

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<!-- 导入jquery文件 -->
		<script src="../JQuery_01/js/jquery-3.6.4.min.js"></script>
		<script>
			$(function(){
				//设置按钮点击事件
					//1.获取div修改css(直接获取元素)
					$("div>p").css("color","blue")
			})
		</script>
	</head>
	<body>
		<div id="mydiv" style="background-color: aquamarine; height: 200px; width: 200px;">
			<p>
				姬霓太美
			</p>
		</div>
	</body>
</html>

在这里插入图片描述

四、JS与JQuery转换

概述：

  • $类似java中的类
  • $() 类似java中的类的构造方法

JS与JQuery转换

  1. JS转换JQuery
    $(js对象) 将js对象放入 $( )中即可

  2. JQuery转换js

  • 可以通过下标转换成js对象

var $oDiv = $(“#oDiv”);
console.log( $oDiv[0].innerHTML)
console.log( $oDiv.innerHTML);

  • 可以通过get方法+下标获取

console.log($oDiv.get(0).innerHTML);

五、$工具方法与JQuery属性

1. $工具方法

方法作用
$.each()遍历数组、对象、对象数组中的数据
$.trim()去除字符串两边的空格
$.type()得到数据的类型
$.isArray( obj )判断是否是数组
$.isFuntion( obj )判断是否是函数
$.parseJSon( obj )解析json字符串转换为js对象/数组
				//each方法 遍历元素的方法
				//使用$.each(obj,function(){})方法的形式来遍历输出
				var arr = ["小黑","吉尼","钛镁"];
				i 为下标  n 为元素值
				$.each(arr,function(i,n){
					console.log(i,n);
				// 	0 '小黑'
				// 	1 '吉尼'
				// 	2 '钛镁'
				})

				//遍历对象案例
				var stu = {"name": "坤坤","sex": "男","age": 26};
				// a代表属性名称  b代表属性值
					$.each(stu, function(a, b) {
						console.log(a, b);
				// 		name 坤坤
				// 		sex 男
				// 		age 26
				});

				//遍历对象数组案例
				var stus = [{"name": "坤坤","sex": "男","age": 26},
				{"name": "小鸡仔","sex": "公","age": 3}];
				$.each(stus,function(index,stu){
					console.log(index,stu);
				//index 为下标  stu为对象(object)
					$.each(stu,function(name,value){
				//name 属性名称  value属性值
					})
				})

				//2.2去除字符串两边的空格trim
				var str = "hello 靓仔  ";
				console.log($.trim(str).length); // 返回 7
				//2.3得到数据的类型 type
				console.log($.type(str)); //string
				//2.4判断是否是数组
				console.log($.isArray(arr)) //true
				//2.5判断是否是函数
				console.log($.isFunction())

2. JQuery属性使用

方法作用
$().attr()获取某个标签属性的值
$().removeAttr()删除某个标签属性
$.addClass()给某个标签添加class属性值
$.removeClass()删除某个标签class属性值
$.prop()和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选
$().html()获取某一个标签体的内容（包括子标签）
$().val()主要用户获取/设置输入框的值
				// 1.attr()：获取某个标签属性的值，或设置某个标签属性的值
				$("#btn").click(function(){
					$("img").attr("src","img/瞳瞳.jpg");
				})
				// 2.removeAttr()：删除某个标签属性
				$("img").removeAttr("alt");
				// 3.addClass()：给某个标签添加class属性值
				//addClass 不会覆盖  但是attr会覆盖-重新赋值
				$("img").addClass("abc");
				$("img").attr("class","123");
				// 4.removeClass():删除某个标签class属性值
				$("img").removeClass("abc");
				// 5.prop():和attr()类似，区别在于prop用于属性值为Boolean类型的情况，比如多选
				$("img").prop("src","img/瞳瞳.jpg");
				$("input:checkbox").prop("checked",true);
				$("input:checkbox").attr("checked",true);
				// 6.html():获取某一个标签体内容（注意：该标签体中可以包含子标签）
				console.log($("#tab").html()) //打印的是改标签的和子标签的所有内容包括标签
				// 7.text()：获取某一个标签体内容(注意：该标签体不能包含子标签)
				console.log($("#tab").text())
				// 8.val()：主要用户获取/设置输入框的值
				$("#btn").click(function(){
					console.log($("input").val());
				})

六、JQuery筛选

1. 过滤

方法功能
first()获取匹配元素的第一个元素
last()获取匹配的最后一个元素
qe(N)获取匹配的第N或-N哥元素
filter(selector)筛选出指定表达式匹配的元素集合
has(selector)筛选出包含特定特点的元素的集合
not(selector)筛选出不含特定特点的元素集合
				//1.从元素数组中找到第一个元素 first()
				console.log($("li").first());
				//2.从元素数组中找到第一个元素 last()
				console.log($("li").last());
				//3.从元素数组中找到指定的某一个元素 eq()
				console.log($("li").eq(2).text());
				//4.从元素数组中找到属性titlt为a的元素
				//filter 筛选出指定表达式匹配的元素集合
				console.log($("li").filter("[title=a]"));
				//5.筛选出包含特定特点的元素的集合 has()
				console.log($("li").has("p").text())
				//6.筛选出不包含特定特点的元素的集合 not()
				console.log($("ul>li").not("p").text())

2. 查找

方法功能
children()查找子标签
find()查找后代标签
parent()父标签
prevAll()查找所有的兄弟标签
nextAll()查找后面所有的兄弟标签
siblings()查找前后所有的兄弟标签
				//1.从子标签中找 children()
				console.log($("li").children("p").text())
				//2.find() 后代标签中找
				console.log($("li").find("b").text())
				//3.父标签 parent()
				console.log($("p").parent().text())
				//4.prevAll() 前面所有的兄弟标签
				console.log($("b").prevAll().text())
				//5.nextAll() 侯建所有的兄弟标签
				console.log($("p").nextAll().text())
				//6.silings() 前后所有的兄弟标签
				console.log($("p").siblings().text())

七、文档处理

1.增

1.1内部插入

从前面：

//1.1将指定内容添加到指定元素前面 prepend() prependTo()
$(".myli").prepend("<p>你好</p>")
//仅仅是把当前整个标签元素追加到目的文本前面（不改变结构）
$(".AI").prependTo(".myli")

从后面：

//1.2将指定内容添加到指定元素后面 append() appendTo()
$(".AI").append("<p>你好</p>")
//把当前整个标签元素追加到目的文本后面
$(".AI").appendTo(".myli")

1.2 外部插入

//before() 在匹配元素之前插入内容
$(".AI").before("嘿嘿");
//after() 在匹配元素之后插入内容
$(".AI").after("<h1>hehe</h1>");

2. 删

				//empty() 删除匹配的元素集合中的所有子节点(不包括匹配的元素)
				$("h1").empty()
				//remove() 这个包括匹配的元素
				$("p").remove();

3. 改

				//replaceWith 将所有匹配的元素替换成指定的内容
				$(".AI").replaceWith("<p>哎呦~</p>");

八、事件

1.加载Dom两种方式

js方式：

当网页中所有的内容加载完成后才会执行 ，只能编写一个
window.onload = function(){
alert(“123”)
}

JQuery方式：

JQuery1.0版本和2.0版本 : JQuery比window.onload先执行
Jquery3.0 : window.onload比JQuery先执行
window.onload = function() {
alert(“123”)
}
$(function() {
alert(“456”);
})

注意：

window.addEventListener 此事件可以调用多次
window.addEventListener(“load”,function(){
alert(“123”);
})

2. 绑定事件的两种方式

//jQUery的事件绑定与解绑 on  off  bind  unbind
				元素.on(事件名，function(){})
				$("#dian").on("click", function() {
					$("#mydiv").css("background", "skyblue");
				})
				元素.事件名(function(){})
				$("#dian").click(function(){
					$("#mydiv").css("background", "blue");
				})

3. 合成事件/事件切换

//hover() 鼠标悬停合成事件
				$("#dian").hover(function(){
					$("div").hide(2000);
				},function(){
					$("div").show(2000);
				})
				//toggle鼠标点击合成事件
				$("#dian").toggle(function(){
					$("div").hide(2000);
				},function(){
					$("div").show(2000);
				})

在这里插入图片描述

4. 事件传播

$("body").click(function(){
		alert("123")
});
$("#dian").click(function(){
		alert("456");
		//阻止了其他事件
		return false ;
});

在这里插入图片描述

5. 事件坐标

offsetX:当前元素左上角 clientX：窗口左上角 pageX：网页左上角

$("body").click(function() {
	console.log(event.pageX, event.offsetX, event.clientX);
});

6. 移出事件

				//元素.unbind("事件名")
				var foo = function() {
					alert("123");
				}
				$("#dian").bind("click",foo);
				$("#dian").unbind("click",foo);	

				// one()只执行一次
				$("#dian").one("click",function(){
					alert("456")
				})

在这里插入图片描述

九、动画效果

1.基本功能

//显示 show(time)  隐藏hide(time) 切换toggle(time)
$("mydiv").show(3000)
$("#mydiv").hide(3000);
$("#mydiv").toggle(3000)

2.滑动动画

从下往上收缩

$(“#”).slideUp(2000);

在这里插入图片描述

从上往下收缩

$(“#”).slideDown(2000)
在这里插入图片描述

切换这两种效果

$(“#”).toggle(2000)
在这里插入图片描述

3.透明度动画

渐显

$(“#”).fadeIn(3000);
在这里插入图片描述

渐隐藏

$(“#”).fadeOut(3000);
在这里插入图片描述

切换这两种效果

$(“#”).fadeToggle(3000);

4.自定义动画

animate({“属性”:“属性值”},时间)

		window.setInterval(function() {
					$("#mydiv").animate({
						"width": "400px"
					}, 1000);
				}, 10)

在这里插入图片描述

十、扩展 - 表单插件

.Validate插件下载地址 jQuery Validate Plugin

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>课堂案例</title>
		<script src="../JQuery_01/js/jquery-3.6.4.min.js"></script>
		<!-- 导入表单插件 -->
		<script src="js/jquery.validate.min.js"></script>
		<script>
			$(function() {
				//案例4：表单验证(用户名、密码、确认密码、年龄、邮箱、网址url)
				//找到表单标签 调用表单插件中的validate方法设置规则
				$("#myForm").validate({
					//规则
					rules: {
						username: {
							//必须输入字段
							required: true,
							minlength: 1,
							maxlength: 6
						},
						password: {
							required: true,
							minlength: 6,
							maxlength: 18
						},
						passwordTwo: {
							required: true,
							//输入值必须与#field相同
							equalTo: "#password"
						},
						age: {
							required: true,
							//必须输入整数
							digits: true,
							//输入值必须介于1-120之间
							range: [1, 120]
						},
						email: {
							required: true,
							email: true
						},
						Internet: {
							required: true,
							url: true
						}
					},
					//信息提示
					messages: {
						username: {
							required: "必填项,请输入",
							minlength: "昵称不能为空",
							maxlength: "昵称不能超过六位"
						},
						password: {
							required: "必填项,请输入",
							minlength: "请输入长度为6-18的密码",
							maxlength: "密码超过了18位，请重试"
						},
						passwordTwo: {
							required: "必填项,请输入",
							//输入值必须与#field相同
							equalTo: "输入值必须与第一次密码相同"
						},
						age: {
							required: "必填项,请输入",
							//必须输入整数
							digits: "必须输入整数",
							//输入值必须介于1-120之间
							range: "输入值必须介于1-120之间"
						},
						email: {
							required: "必填项,请输入",
							email: "请输入正确格式的电子邮件"
						},
						Internet: {
							required: "必填项,请输入",
							url: "请输入正确格式的网址"
						}
					}

				})
			})
		</script>
	</head>
	<body>
		<form id="myForm" action="#" method="get">
			账户: <input type="text" name="username" id="username">
			<br>
			密码: <input type="text" name="password" id="password">
			<br>
			确认密码: <input type="text" name="passwordTwo" id="passwordTwo">
			<br>
			年龄: <input type="text" name="age" id="age">
			<br>
			邮箱: <input type="text" name="email" id="email">
			<br>
			网址url: <input type="text" name="Internet" id="Internet">
			<input type="submit">
		</form>
	</body>
</html>
# jquery # javascript # 前端 # html # css
Logo
开放原子开发者工作坊

开放原子开发者工作坊旨在鼓励更多人参与开源活动，与志同道合的开发者们相互交流开发经验、分享开发心得、获取前沿技术趋势。工作坊有多种形式的开发者活动，如meetup、训练营等，主打技术交流，干货满满，真诚地邀请各位开发者共同参与！

更多推荐

开源成为金融领域创新发展的新动力引擎

开源成为金融领域创新发展的新动力引擎

avatar 开放原子开发者工作坊

开源成为推动城市数字化转型的核心动力

城市，不仅是人们工作与生活的基本载体，更是承载着亿万人民的希望与梦想。近年来，我国智慧城市建设如火如荼，开源技术的深度融合为其发展注入了新的活力。在民生、环保、公共安全、城市服务等多个领域，开源技术的应用不仅为民众带来了切实的便捷，而且促进了政府决策的科学化，显著提升了城市综合治理能力。

avatar 开放原子开发者工作坊

OpenLoong项目通过技术监督委员会（TOC）评审

OpenLoong项目通过技术监督委员会（TOC）评审

avatar 开放原子开发者工作坊