学好JQuery这一篇就够了（超详细）
学好JQuery这一篇就够了😉
- 一、JQuery基本介绍
- 1. JavaScript库
- 1.1常见的JavaScript库
- 1.2 为什么要使用JQuery
- 1.3 那些情况下使用
- 1.4 怎么用 ？
- 2 . JQuery文件结构
- 2.1 JQuery版本
- 2.2 JQuery闭包结构
- 2.3 自执行函数
- 2.3.1 核心函数
- 2.3.2 JQquery的构造函数
- 二 、 函数的使用
- 1. JQuery 函数的使用
- 1.1 作为一般函数调用 ：$( param )
- 1.2 作为对象使用 ：$.xxx()
- 1.2.1JQuery对象的使用
- 1.2.2属性和方法
- 1.3入口函数
- 1.4 入口函数与window.onload的对比
- 三 、选择器
- 1.1 基本选择器
- 1.2 层次选择器
- 1.3 过滤选择器
- 1.4 jQuery 筛选方法
- 1.5 this 和 当前索引
- 四、JS与JQuery转换
- 五、$工具方法与JQuery属性
- 1. $工具方法
- 2. JQuery属性使用
- 六、JQuery筛选
- 1. 过滤
- 2. 查找
- 七、文档处理
- 1.增
- 1.1内部插入
- 1.2 外部插入
- 2. 删
- 3. 改
- 八、事件
- 1.加载Dom两种方式
- 2. 绑定事件的两种方式
- 3. 合成事件/事件切换
- 4. 事件传播
- 5. 事件坐标
- 6. 移出事件
- 九、动画效果
- 1.基本功能
- 2.滑动动画
- 3.透明度动画
- 4.自定义动画
- 十、扩展 - 表单插件
- .Validate插件下载地址 [jQuery Validate Plugin](https://jqueryvalidation.org/)
一、JQuery基本介绍
1. JavaScript库
JavaScript库 ：
即 library，是一个封装好的特定的集合（方法和函数）。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等。
简单的理解 ：
就是一个JS 文件，里面对我们原生js代码进行了封装，存放到里面。这样我们可以快速高效的使用这些封装好的功能了。
JQuery出来就是为了快速方便操作DOM，里面基本都是封装好的函数
#标题
1.1常见的JavaScript库
- Prototype : 是最早成型的JS库之一，对于JS的内置对象做了大量的扩展。
- Do jo : 提供了很多奇特JS库没有提供的功能。例如：离线存储的API，生成图标的组件等等。
- YUI : 是由Yahoo公司开发的一套完备的，扩展性良好的富交互网页程序工作集。
- Ext JS : 原本是对YUI的一个扩展，主要用于创建前端用户界面。
- Moo Tools : 是一套轻量、简洁、模拟化和面向对象的JS框架。
- JQuery : 同样是一个轻量级的库，拥有强大的选择器等更多优点，吸引了更多开发者去学习使用它
这些库都是对原生 JavaScript 的封装，内部都是用 JavaScript 实现的，这篇主要讲解的是 jQuery。
官方地址：http://jquery.com/
1.2 为什么要使用JQuery
为了简化JavaScript开发：选择器、CSS、HTML事件处理、JS动画、浏览器兼容、丰富插件
1.3 那些情况下使用
- 中大型网站开发
- 是一些前端框架的基础，比如EasyUI，Bootstrap
1.4 怎么用 ？
工具 ： HBuilderX
使用JQuery步骤 ：
- 下载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
- X版本 ：能够兼容IE6, 7, 8 浏览器（不再更新版本）
- x 版本：不兼容 IE6, 7, 8 浏览器（不再更新版本）
- 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的构造函数
- $( function ( ) { } )
- $( " 选择器 " )
- $( " 标签 " )
- $( DOM对象 )
具体使用如下目录
二 、 函数的使用
1. JQuery 函数的使用
1.1 作为一般函数调用 ：$( param )
- 参数为函数：当 DOM 加载完成后，执行此回调函数
- 参数为选择器字符：查找所有匹配的标签并将它们封装成
jQuery对象 - 参数为 DOM 对象：将 dom 对象封装成
jQuery对象 - 参数为 html 标签字符串（用得少）：创建标签对象并封装成
jQuery对象
1.2 作为对象使用 ：$.xxx()
- $.each () : 隐式遍历数组
var arr = [3, 7, 4];$.each(arr, function (index, item) {console.log(index, item); //结果（index是下标 item返回的是值） 0 3 1 7 2 4});
- $.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转换
-
JS转换JQuery
$(js对象) 将js对象放入 $( )中即可 -
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去除字符串两边的空格trimvar str = "hello 靓仔 ";console.log($.trim(str).length); // 返回 7//2.3得到数据的类型 typeconsole.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>