jQuery 基础语法
jQuery 基础语法
一、 jQuery 概述
1、 JS 库
仓库:可以把很多东西放到这个仓库里面,找东西只需要到仓库里面查找到就可以了
JS 库:即 library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库,就是在这个库中,封装了很多预先定义好的函数里面,比如动画 animate、hide、show,比如获取元素等
简单理解:就是 JS 文件,里面对我们原生 JS 代码进行了存储,存放到里面。这样我们可以快速高效的使用这些封装好的函数
比如 jQuery,就是为了快速方便的操作 DOM,里面基本都是函数(方法)
2、 jQuery 概念
jQuery 是一个快速、简洁的 JS 库,其设计的宗旨是 "writeLessDoMore" ,即倡导写更少的代码,做更少的代码
j 就是 JS;Query 查询;意思就是查询 JS,把 JS 中的 DOM 操作做了封装,我们可以快速的查询使用里面的功能
jQuery 封装了 JS 常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax 交互
学习 jQuery 本质就是学习调用这些函数(方法)
jQuery 出现的目的是加快前端人员的开发速度,我们可以非常方便的调用和使用它,从而提高开发效率
3、 jQuery 优点
- 轻量级,核心文件才 几十kb,不会影响页面加载速度
- 跨浏览器兼容,基本兼容了现在主流的浏览器
- 链式编程,隐式迭代
- 对事件、样式、动画支持,大大简化了 DOM 操作
- 支持插件扩展开发,有着丰富的第三方插件,例如:树形菜单、日期控件、轮播图等
- 免费、开源
二、 jQuery 基本使用
1、 jQuery 使用步骤
-
引入 jQuery文件
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> -
然后直接使用即可
2、 jQuery 入口函数
$ (function () { ··· // 此处是页面 DOM 元素加载完成的入口 }) $ (document).ready(function () { ··· // 此处是页面 DOM 加载完成的入口 })
3、 jQuery 顶级对象
- ,但一般为了方便,通常都直接使用 $
- 包装成 jQuery 对象,就可以调用 jQuery 的方法
4、 jQuery 对象和 DOM 对象
- 用原生 JS 获取来的对象就是 DOM 对象
- 用 jQuery 方法获取的元素就是 jQuery 对象
- jQuery 对象的本质是:利用 $ 对 DOM 对象包装后产生的对象(伪数组形式存储)
- jQuery 对象只能使用 jQuery 方法,DOM 对象则使用原生的 JS 属性和方法
这两个对象是可以相互转换的
因为原生 JS 比 jQuery 更大,原生一些属性和方法 jQuery 没有给我们封装,要像是用这些属性和方法需要把 jQuery 对象转换为 DOM 对象才能使用
-
DOM 对象转换为 jQuery 对象
$(DOM 对象); -
jQuery 对象转换为 DOM 对象
$("div")[index]; // index 是索引号 $("div").get(index); // index 是索引号 // 该对象以伪数组的形式存储
<div></div> <script> // DOM 对象 var div = document.querySelector("div"); $(div); // 转换成 jQuery 对象 // jQuery 对象 $("div"); $("div")[0]; // 转换成 DOM 对象 </script>
三、 jQuery 常用 API
1、 jQuery 选择器
原生 JS 获取元素方式很多、很杂,而且兼容性情况不一致,因此 jQuery 给我们提供了封装,是获取元素同一标准
$("选择器") // 里面选择器直接写成 CSS 选择器即可,但是要加引号
名称 | 用法 | 描述 |
---|---|---|
ID 选择器 | $("#id"); | 获取指定 ID 的元素 |
全选选择器 | $("*"); | 匹配所有元素 |
类选择器 | $(".class"); | 获取同一类 class 的元素 |
标签选择器 | $("div"); | 获取同一标签所有元素 |
并集选择器 | $("div, p, li"); | 选取多个元素 |
交集选择器 | $("li.current"); | 交集选择器 |
子代选择器 | $("ul>li"); | 使用 > 号,获取亲儿子层级的元素 |
后代选择器 | $("ul li"); | 使用空格,代表后代选择器,包括孙子等 |
2、 隐式迭代
遍历内部 DOM 元素(伪数组形式存储)的过程就叫做隐式迭代
简单理解:给匹配到的所有元素进行循环遍历,执行相应的方法,而不用我们在进行循环,简化我们的操作,方便我们调用
3、 jQuery 筛选选择器
语法 | 用法 | 描述 |
---|---|---|
:first | $("li:first"); | 获取第一个 li 元素 |
:last | $("li:last"); | 获取最后一个 li 元素 |
:eq(index) | $("li:eq(2)"); | 获取到的 li 元素中,选择索引号为 2 的元素,索引号从 0 开始 |
:odd | $("li:odd"); | 获取到的 li 元素中,选择索引号为奇数的元素 |
:even | $("li:even"); | 获取到的 li 元素中,选择索引号为偶数的元素 |
4、 jQuery 筛选方法
语法 | 用法 | 说明 |
---|---|---|
parent() | $("li").parent(); | 查找父级 |
children(selector) | $("ul").children("li"); | 查找最近一级(亲儿子)子代选择器 |
find(selector) | $("ol").find("li"); | 相当于后代选择器 |
siblings(selector) | $(".first").siblings("li"); | 查找兄弟节点,不包括自己本身 |
nextAll([expr]) | $(".first").nextAll(); | 查找当前元素之后所有的同辈元素 |
prevtAll([expr]) | $(".last").prevtAll(); | 查找当前元素之前所有的同级元素 |
hasClass(class) | $("div").hasClass("protected"); | 检查当前元素是否有某个特定的类 |
eq(index) | $("li").eq(2); | 获取到的 li 元素中,选择索引号为 2 的元素,索引号从 0 开始 |
index(): 获取索引号
parents("选择器"):选择符合条件的祖先元素
5、 jQuery 里面的排他思想
想要多选一的效果,排他思想:当前元素设置样式,其余的兄弟元素清除样式
$(function () { // 隐式迭代,给所有的按钮都绑定了点击事件 $("li").click(function () { // 当前的元素样式改变 $(this).css("background", "pink"); // 其余兄弟去掉背景颜色 $(this).siblings("li").css("background", ""); }); });
6、 链式编程
链式编程是为了节省代码量,看起来更优雅
$(function () { $("li").click(function () { $(this).css("background", "pink").siblings().css("background", ""); }); });
即重复的代码可以省略,直接写在第一行代码后面
四、 jQuery 样式操作
1、 操作 CSS 方法
jQuery 可以使用 CSS 方法来修改简单元素样式;也可以操作类,修改多个样式
-
参数只写属性名,则是返回属性值
$(this).css("color"); -
参数是 (属性名, 属性值) 中间用逗号分割,是设置一组样式,属性必须加引号,值如果是数字可以不用加单位和引号
$("div").css("width", "300px"); -
参数可以是对象形式,方便设置多组样式,属性名和属性值用冒号隔开,属性名可以不用加引号
$(this).css({"width": "20px", "background-color": "red"}); 如果是符合属性则必须采用驼峰命名法,如果属性值不是数字,则必须加引号
2、 设置类样式方法
作用等同于 classList,可以操作样式,注意操作类里面的参数不要加点
-
添加类
$("div").addClass("current"); // 注意不要添加 . -
删除类
$("div").removeClass("current"); // 注意不要添加 . -
切换类
$("div").toggleClass("current"); // 如果没有这个类就添加,有就删除这个类
3、 JQuery 类操作和 className 区别
原生 JS 中 className 会覆盖元素原先里面的类名
jQuery 里面类操作只是对指定类进行操作,不影响原先的类名
五、 jQuery 效果
jQuery 给我们封装了很多动画效果,最为常见的如下:
1、 显示和隐藏
show(); // 显示 hide(); // 隐藏 toggle(); // 反转
1.1 语法规范
show([speed, [easing], [fn]]);
参数:
- 参数都可以省略,无动画直接显示
- speed:三种预定速度之一的字符串(slow,normal,fast)或表示动画时长的毫秒数值
- easing:用来指定切换效果,默认是 swing,可用参数 linear
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
2、 滑动
slideDown(); // 下拉 slideUp(); // 上拉 slideToggle(); // 反转
2.1 语法规范
slideDown([speed, [easing], [fn]]);
参数:
- 参数都可以省略,无动画直接显示
- speed:三种预定速度之一的字符串(slow,normal,fast)或表示动画时长的毫秒数值
- easing:用来指定切换效果,默认是 swing,可用参数 linear
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
3、 淡入淡出
fadeIn(); // 淡入以隐藏的元素 fadeOut(); fadeToggle(); fadeTo();
3.1 语法规范
fadeIn([speed, [easing], [fn]]); // 参数和滑动的参数类似,注意fadeTo fadeTo([speed], opacity, [easing], [fn]); // opacity:修改不透明度
4、 自定义动画
animate(params, [speed], [easing], [fn]);
参数:
- params:想要修改的样式属性,以对象形式传递,必须写。属性名可以不带引号,如果是复合属性,则需要采取驼峰命名法。其余参数可以省略
- speed:三种预定速度之一的字符串(slow,normal,fast)或表示动画时长的毫秒数值
- easing:用来指定切换效果,默认是 swing,可用参数 linear
- fn:回调函数,在动画完成时执行的函数,每个元素执行一次
<div></div> <script> $(function () { $("div").click(function(){ $("div").animate({ left: 500, top: 200, opacity: 0.6, }, 500, 'linear', function () { alert("移动完成") }); }); }); </script>
5、 事件切换
hover([over, ], out)
如果只写一个函数,那么鼠标经过和鼠标离开都会触发这个函数
参数:
- over:鼠标移动到元素上要触发的函数(相当于 mouseenter)
- out:鼠标移出元素要触发的函数(相当于 mouseleave)
$(".nav>li").hover(function () { // 鼠标经过 $(this).children("ul").slideDown(200); }, function () { // 鼠标离开 $(this).children("ul").slideUp(200); }); // 也可以写成 $(".nav>li").hover(function () { $(this).children("ul").slideToggle(200); });
6、 动画队列及其停止排队方法
6.1 动画或效果队列
动画或者效果队列一旦触发执行,如果多次触发,就造成对个动画或者效果排队执行
6.2 停止排队
stop();
- stop 方法用于停止动画或效果
- 注意:stop 写到动画或者效果的前面,相当于停止结束上一次动画
$(".nav>li").hover(function () { $(this).children("ul").stop().slideToggle(200); }); // 写在动画前面,相当于停止结束上一次动画
六、 jQuery 属性操作
1、 元素固有的属性
所谓元素固有属性就是元素本身自带的属性,比如 a 标签里面的 href
1.1 获取属性值
element.prop("attr");
1.2 设置属性值
element.prop("attr", "val");
<input type="checkbox" name="" id=""> <script> $( function () { $("input").change(function () { // 当复选框里面的值改变的时候 console.log($("input").prop("checked")); $("input").prop("checked", "true"); }) } ) </script>
2、 元素自定义属性
2.1 获取属性值
element.attr("attrName");
2.2 设置属性值
element.attr("attrName", "val");
其也可以修改 h5 自定义属性
3、 数据缓存
elemen t.data();
data 方法可以在指定的元素上存取数据,并不会修改 DOM 元素结构;一旦页面刷新,之前存放的数据都将被移除
<span></span> <script> $(function() { $("span").data("uname", "andy"); console.log($("span").data("uname")); }) </script>
获取 h5 自定义属性 data-index 时,第一个属性不需要写 data-,其余返回的是数字型
<span data-index = "1"></span> <script> $(function() { console.log($("span").data("index")); }) </script>
七、 jQuery 元素内容
主要针对元素的内容还有表单的值操作
1、 普通元素内容
html(); // 获取元素的内容,相当于原生的 innerHTML; html("content"); // 设置元素内容
2、 元素文本内容
text(); // 相当于原生的 innerText; text("content"); // 修改文本内容
3、 设置表单值
val(); // 获取表单的值,相当于原生的 value; val("content"); // 设置表单值
var num = 1.35555; console.log(num.toFixed(2)); // 保留两位小数
八、 jQuery 元素操作
主要是遍历、创建、添加、删除元素操作
1、 遍历元素
jQuery 隐式迭代是对同一类元素做了同样的操作,如果想要给同一类元素做不同操作,就需要用到遍历
语法1
$("div").each(function (index, demoEle) { });
var arr = ["red", "green", 'pink']; $("div").each(function (index, demoEle) { // 第一个参数一定是索引号,名称可以是 i // 第二个参数是 DOM 对象,其没有 jQuery 方法 $(demoEle).css("color", arr[index]); });
each()方法遍历匹配每一个元素,主要用 DOM 处理
参数:
index:每个元素的索引号
demEle:每个 DOM 元素对象,不是 jQuery 对象
所以,想要使用 jQuery 方法,需要给这个 DOM 元素转换为 jQuery 对象 $(demoEle)
语法2
$.each($("div"), function(index, demoEle) {}); // 遍历元素,主要用于遍历数据,处理数据
第一个参数,可以传入对象、数组和元素等
2、 创建元素
语法
var li = $("<li>我是创建的元素</li>"); // 动态创建一个 li 标签
3、 添加元素
3.1 内部添加
语法
$("ul").append(li); // 将创建的 li 标签放入 ul 里面 $("ul").prepend(li); // 内部添加并且放到内容的最前面
append 方法,把内容放入匹配元素内部最后面,类似于原生的 appendChild
3.2 外部添加
语法
element.after("content"); // 把内容放到目标元素的后面 element.before("content"); // 把内容放入目标元素前面
外部添加元素是兄弟关系;内部添加关系是父子关系
4、 删除元素
element.remove(); // 删除匹配元素(本身) element.empty(); // 删除匹配元素集合中所有的节点,不删除本身 element.html(""); // 清空匹配的元素里面的字节点,不删除本身
九、 jQuery 尺寸、位置操作
1、 jQuery 尺寸
语法 | 用法 |
---|---|
windth() / height() | 取得匹配元素宽度和高度值,只算 width / height |
innerWidth() / innerHeight() | 取得匹配元素宽度和高度值,包含 padding |
outerWidth() / outerHeight() | 取得匹配元素宽度和高度值,包含 padding、border |
outerWidth(true) / outerHeight(true) | 取得匹配元素宽度和高度值,包含 padding、border、margin |
以上宽度为空,则是获取相应值,返回数字类型
如果参数为数字,则是修改相应值
参数不用写单位
2、 jQuery 位置
位置主要有三个:offset() / position() / scrollTop() / scrollLeft()
2.1 offset
设置偏移量或获取元素偏移
- offset 方法设置或返回被选元素相对于文档的偏移坐标,跟父级没有关系
- 该方法有两个属性:left 和 top 用于获取距离文档顶部的距离
- 可以设置元素的偏移:
offset({top: 20, left: 30})
2.2 position
获取元素位移
- position 方法用于返回被选元素相对于带有定位的父级偏移坐标,如果父级都没有定位,则以文档为准
- 其只能获取距离,不能设置偏移量
2.3 scroll
设置或获取元素被卷去的头部和左侧
-
scrollTop 方法设置或返回被选定元素被卷去的头部
$(function () { $(window).scroll(function () { console.log($(document).scrollTop()); // 得到被卷去头部的距离,如果里面传值,就可以设置位置 }); }); // 返回顶部 $("body, html").stop().animate({ // 注意不能使用文档做动画,而是元素做动画 scrollTop: 0, }); -
scroll 对象的到元素距离头部的距离
十、 jQuery 事件
1、 jQuery 事件注册
1.1 单个事件
element.条件(function () {事件处理程序});
1.2 事件处理
on() 方法在匹配元素上绑定一个或多个事件的事件处理函数
element.on(events, [sleector], fn);
参数:
- events:一个或多个事件,如果事件函数相同用空格分开的事件类型
- selector:元素的子元素选择器
- fn:回调函数,即绑定在元素身上的监听函数
$("div").on({ mouseenter: function () { $(this).css("backgroundColor", "red"); }, click: function() { $(this).css("backgroundColor", "pink"); } }); // 事件函数不相同 $("div").on("mouseenter mouseleave", function () { $(this).toggleClass(".nav"); }) // 事件函数一样
on() 方法优势
-
可以绑定多个事件
-
可以事件委派事件,事件委派的定义就是,把原来加给子元素身上的事件绑定在父元素身上,就是把事件委派给元素
$("div").on("click", "li", function () { alert(11); }); // click 是绑定在 ul 身上的,但是触发的对象是 ul 里面的小 li -
动态创建元素,click 没有办法绑定事件,on 可以给未来生成的元素绑定事件
2、 jQuery 事件解绑
利用 off 解绑事件
$("div").off(); // 解除 div 里面绑定的所有事件 $("div").off("click", function () {}); // 解除点击事件,后面还可以添加监听函数 $("ul").off("click", "li"); // 解除事件委托
如果有的事情只想发生一次,可以使用 one() 来绑定事件
3、 jQuery 自动触发事件
trigger();
有些事情希望自动触发,比如轮播图自动播放功能跟点击右侧按钮一致,可以利用定时器自动触发右侧按钮点击事件,不必鼠标触发
$("div").on("click", function () { alert(11); }); // 自动触发事件 // 1. 元素.事件();该事件会触发元素的默认行为 $("div").click(); // 2. 元素.trigger("事件");该事件会触发元素的默认行为 $("div").trigger("click"); // 3. triggerHandler("事件");,该事件不会触发元素的默认行为 $("div").triggerHandler("click");
3、 jQuery 事件对象
事件被触发,就会有事件对象产生
element.on(events, [selector], function (event) {});
十一、 jQuery 其他方法
1、 jQuery 拷贝对象
如果想要把某个对象拷贝(合并)给另外一个对象使用,此时可以使用 $.extend()
方法
语法
$.extend([deep], target, object1, [object2]);
参数:
- deep:如果为 true 为深拷贝,默认为浅拷贝
- target:要拷贝的目标对象
- 浅拷贝是把拷贝的对象复杂数据类型中的地址拷贝给目标对象,修改目标对象会影响被拷贝对象
- 深拷贝,前面加 true,完全克隆(拷贝的对象,而不是地址),修改目标对象不会影响被拷贝对象
- 把里面的数据完全复制一份给目标对象,如果里面有不冲突的属性,会合并到一起
- object1:待拷贝到第一个对象的对象
$(function () { var to = { id: 0, name: "Make", }; var obj = { id: 1, name: "Andy", }; // 会覆盖 to 原来的数据 $.extend(to, obj); });
2、 jQuery 多库共存
问题概述:
jQuery 使用 作为标识符,这样一起使用会引起冲突
客观需求:
需要一个解决方案,让 jQuery 和其他库 JS 库不存在冲突,可以同时存在,这就叫做多库共存
jQuery 解决方案:
-
把里面的 $ 符号统一改为 jQuery,比如:
jQuery("div");
-
jQuery 变量规定新的名称:
$.noConflict()
var otherName = $.noConflict(); // 让 jQuery 释放对 $ 的控制权,让用户自己决定
3、 jQuery 插件
jQuery 功能比较有限,想要更复杂的特效效果,可以借助于 jQuery 插件完成
注意:这些插件也是依赖于 jQuery 来完成的,所以必须要先引入 jQuery 文件,因此也称为 jQuery 插件
jQuery 插件常用的网站:
jQuery 插件使用步骤:
- 引入相关文件(jQuery 和 插件文件)
- 复制相关 HTML、CSS、JS (调用插件)
4、 图片懒加载
图片懒加载(图片使用延迟加载,可提高网页下载速度,它也能帮助减轻服务器负载)
当我们页面滑动到可视区域,再显示图片
我们使用 jQuery 插件库 EasyLazyload
5、 全局滚动
本文来自博客园,作者:Kenny_LZK,转载请注明原文链接:https://www.cnblogs.com/liuzhongkun/p/15941734.html
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】博客园社区专享云产品让利特惠,阿里云新客6.5折上折
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 【.NET】调用本地 Deepseek 模型
· CSnakes vs Python.NET:高效嵌入与灵活互通的跨语言方案对比
· DeepSeek “源神”启动!「GitHub 热点速览」
· 我与微信审核的“相爱相杀”看个人小程序副业
· Plotly.NET 一个为 .NET 打造的强大开源交互式图表库