文章目录
1、认识JQuery
jQuery 就是一个 JavaScript 函数库
内部包含了大量的封装好的、可以直接调用的 JS 函数
jQuery是一个快速、小巧、功能丰富的JavaScript库。它通过一个跨多种浏览器工作的易于使用的API，使HTML文档遍历和操作、事件处理、动画和Ajax变得更加简单。jQuery结合了多功能性和可扩展性，改变了数百万人编写JavaScript的方式。
1.1官方网站
主要版本：目前包含三个主要版本
- 1.x ：市场使用最多的是 1.11.x、1.12.x ；号称兼容所有浏览器
- 2.x ：目前市场主流版本，不再对低版本浏览器保证兼容性
- 3.x ：最新版本
.
下载历史版本：下载页面中下拉页面到最底部，可以看到这个链接记录
下载对应的版本文件
.现在就可以使用JQuery 函数库了当然，下面就是熟练熟悉JQuery的语法了
1.1
jQuery常见函数函数 描述 示例 jQuery(selector)选择器，用来根据 css语法选择页面标签jQuery("#box")$(selector)选择器， jQuery()选择器简化语法$("#box")$(function() {...})加载函数，等待网页 DOM加载完成后执行的函数
是$(document).ready(function() {...})语法简化show()隐藏的元素显示 hide()显示的元素隐藏 toggle()切换显示状态 slideDown()隐藏的元素卷帘显示 slideUp()显示的元素卷帘隐藏 slideToggle()卷帘动画切换显示状态 fadeIn()透明度显示元素 fadeOut()透明度隐藏元素 fadeTo()透明度变化到指定值 fadeToggle()透明度切换动画 animate()自定义动画 stop()清除动画队列 $(window)操作浏览器窗口对象 $(window).scroll(function() {...}))滚动条事件$(window).resize(function() {...})窗口尺寸变化事件
注意：原生js bom操作已经很便捷，没有特殊要求没有必要转换offset()获取元素在页面中的(非绝对定位)位置： {left: 200, top: 100}
获取x坐标：$box.offset().left
获取y坐标：$box.offset().topposition()获取元素在页面中的(绝对定位)位置： {left: 200, top: 100}
获取x坐标：$box.position().left
获取y坐标：$box.position().topwidth()innerWidth()outerWidth()获取目标元素的 width宽度
获取目标元素的width + padding宽度
获取目标元素的width + padding + border宽度height()innerHeight()outerHeight()获取目标元素的 height高度
获取目标元素的height + padding高度
获取目标元素的height + padding + border高度$selector.eq(index)获取指定索引位置的 jQuery对象$selector.get(index)获取指定索引位置的 JS对象$selector.parents()获取目标元素的所有先辈节点 $selector.parent()获取目标元素的父节点 $selector.children()获取目标元素的子节点 $selector.prev()获取上一个兄弟节点 $selector.prevAll()获取前面所有兄弟节点 $selector.next()获取下一个兄弟节点 $selector.nextAll()获取后面所有兄弟节点 $("<标签名称>")新增节点 $("<div>")$n1.append($n2)新增子节点，将 $n2添加到$n1最后一个子节点$n2.appendTo($n1)新增子节点，将 $n2添加到$n1最后一个子节点$n1.prepend($n2)新增子节点，将 $n2添加到$n1到第一个子节点$n2.prependTo($n1)新增子节点，将 $n2添加到$n1到第一个子节点$n1.before($n2)前面新增兄弟节点 $n2.insertBefore($n1)前面新增兄弟节点 $n1.after($n2)后面新增兄弟节点 $n2.insertAfter($n1)后面新增兄弟节点 $box.attr(name, value)给 $box设置一个值为value的属性name
只能设置标签属性$box.attr(name)获取 $box的属性name的值$box.prop(name, value)给 $box设置一个值为value的属性name，可以设置节点属性
如nodeType$box.prop(name)获取 $box的属性name的值$box.css(key, value)给 $box设置一个样式$box.css({k1:v1, k2:v2..})给 $box设置多个样式$box.text()$box.text(内容)获取文本数据
设置文本数据$box.html()$box.html(内容)获取富文本数据
设置富文本数据$box.on(fn)给目标元素添加绑定事件 $box.off(fn)给目标元素解除事件 以上就是常见的JQuery 常见函数
通过下面的多个案例熟悉JQuery的应用
1.2 案例1.通过按钮控制 div 元素的动画效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box { width: 300px; height: 500px; background-color: aqua; } </style> </head> <body> <button>点击切换div 显示/隐藏</button> <div id="box"></div> <script src="./js/jquery-3.6.1.js"></script> <script> $(function () { //等待页面DOM加载完成后执行代码。类似window.onload $("button").click(function () { //给按钮添加一个单击事件 //显示或者隐藏的时间，指定3S $("#box").toggle(3000) }) }) </script> </body> </html>效果如下：
2、JQuery 页面加载事件
JavaScript 中提供了一个 window.onload 等待页面 DOM 元素和静态资源加载完成后再去执行事件中的代码，保障代码执行时可以访问页面中的所有数据
jQuery 中提供了一个 document.ready() 等待页面 DOM 元素加载完成后执行回调函数内部的代码，保障代码执行时可以访问页面中的所有 DOM 元素
<script> // 完整语法，编写过程过于繁琐 $(document).ready(function() { // 等待页面DOM加载完成后执行的代码 }) // jQuery进行了页面加载方式简化 // jQuery提供了/封装了一个jQuery()函数 jQuery(function() { // 等待页面加载后执行的代码 }) // 【推荐的最终语法】 // jQuery再次进行封装，将jQuery()封装成了$() // jQuery = $ $(function(){ // 等待页面DOM结构加载完成后执行代码 }) </script>备注： jQuery 提供了 $(fn) 等待页面 DOM 加载完成后再去执行的函数，但是如果需要访问或者等待页面静态资源(如图片)加载完成后再去执行，建议还是使用 JS 中的 window.onload = function() {}
3、标签选择器
jQuery 提供了一个选择器语法，可以快捷的根据 css 选择器选择页面中需要的标签
<script> //选择并获取到的标签对象：jQuery对象 $("css选择器") </script>3.1认识JQuery对象
<script src="./js/jquery-3.6.1.js"></script> <script> //1.认识JQuery对象 //JS语法，选择标签 const _ct = document.querySelector("#container") //JS选择器：标签对象、DOM对象 console.log('_ct',_ct) //JQ语法，选择标签 const $ct = $("#container") //JQ选择器：JQuery对象，是一个类似数组的集合 console.log('$ct',$ct) //JS对象 -> JQ对象：JS对象转换后就可以使用JQuery的函数 const jqObj = $(_ct) console.log(jqObj) //JQ对象 ——> JS对象 const jsObj = $ct.get(0) console.log(jsObj) </script>
3.2常见选择器
选择器大全官方链接
常见选择器看以下案例：3.3示例2.常见选择器
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <div id="container"> <h3>琵琶行 <small>白居易</small></h3> <p class="impt">浔阳江头夜送客，枫叶荻花秋瑟瑟。</p> <p>主人下马客在船，举酒欲饮无管弦。</p> <p>醉不成欢惨将别，别时茫茫江浸月。</p> <p>忽闻水上琵琶声，主人忘归客不发。</p> <p>寻声暗问弹者谁，琵琶声停欲语迟。</p> <p>移船相近邀相见，添酒回灯重开宴。</p> <p class="impt">千呼万唤始出来，犹抱琵琶半遮面。</p> <p>转轴拨弦三两声，未成曲调先有情。</p> <p>弦弦掩抑声声思，似诉平生不得志。 </p> <div> <p>低眉信手续续弹，说尽心中无限事</p> </div> <hr> <button id="btn1">id选择器</button> <button id="btn2">class选择器</button> <button id="btn3">标签选择器</button> <button id="btn4">包含选择器</button> <button id="btn5">子类选择器</button> <button id="btn6">伪类选择器</button> </div> <script src="./js/jquery-3.6.1.js"></script> <script> $("#btn1").click(function () { //id选择器 const $ct = $("#container") $ct.css("border","solid 1px red") }) $("#btn2").click(function () { //class选择器 const $ps = $(".impt") $ps.css("background-color", "pink") }) $("#btn3").click(function () { //标签选择器 const $p = $("p") $p.css("border-bottom", "orangered 2px solid") }) $("#btn4").click(function () { // 包含选择器 const $ps = $("#container p") $ps.css("border-bottom", "pink 5px solid") }) $("#btn5").click(function () { // 子类选择器 const $ps = $("#container > p") $ps.css("border-bottom", "green solid 2px") }) $("#btn6").click(function (){ // 伪类选择器 const $p = $("#container > p:nth-of-type(1)") $p.css("border-bottom", "solid 2px red") }) </script> </body> </html>效果如下：
4、JQuery动画
jQuery 针对网页中的常见的动画效果进行了封装
动画：进入动画、离开动画、切换(显示/隐藏)动画
toggle() 显示/隐藏直接切换 hide() 隐藏 show() 显示 fadeIn() 透明度显示 fadeOut() 透明度隐藏 fadeToggle() 透明度显示/隐藏切换 fadeTo(0~1) 透明度切换到某个值 slideDown() 卷帘动画显示 slideUp() 卷帘动画隐藏 slideToggle() 卷帘动画显示/隐藏 animate() 自定义动画 代码操作如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> #box { width: 300px; height: 150px; background-color: blueviolet; position: absolute; top: 50px; left: 0 } </style> </head> <body> <button id="btn1">显示动画</button> <button id="btn2">隐藏动画</button> <button id="btn3">切换动画</button> <button id="btn4">卷帘显示动画</button> <button id="btn5">卷帘隐藏动画</button> <button id="btn6">卷帘切换动画</button> <button id="btn7">透明度显示动画</button> <button id="btn8">透明度隐藏动画</button> <button id="btn9">透明度切换动画</button> <button id="btn10">透明度指定动画</button> <button id="btn11">自定义动画</button> <div id="box"></div> <script src="./js/jquery-3.6.1.js"></script> <script> $("#btn1").click(function () { // 显示动画：让隐藏的元素显示 // $("#box").toggle() $("#box").show(2000) }) $("#btn2").click(function () { // 隐藏动画：让显示的元素隐藏 // $("#box").toggle() $("#box").hide(1000) }) $("#btn3").click(function () { // 切换动画：让显示的元素隐藏 // $("#box").toggle() $("#box").toggle(1000) }) $("#btn4").click(function () { // 切换动画：让隐藏的元素显示 $("#box").slideDown(1000) }) $("#btn5").click(function () { // 卷帘动画：让显示的元素隐藏 $("#box").slideUp(1000) }) $("#btn6").click(function () { // 卷帘动画：让显示的元素隐藏 $("#box").slideToggle(1000) }) $("#btn7").click(function () { // 透明度动画：让显示的元素隐藏 $("#box").fadeIn(1000) }) $("#btn8").click(function () { // 透明度动画 $("#box").fadeOut(1000) }) $("#btn9").click(function () { // 透明度动画 $("#box").fadeToggle(1000) }) $("#btn10").click(function () { // 透明度动画 $("#box").fadeTo(1000, 0.5) }) $("#btn11").click(function () { // 自定义动画 $("#box").animate({ left: "1000px" }, 1000) .animate({ top: '200px' }, 500) .animate({ left: "100px", top: '100px' }, 1000) .animate({ width: "100px", left: "150px" }, 200) .animate({ width: "300px", left: "50px" }, 200) .animate({ width: "300px", left: "50px" }, 200) .animate({ width: "100px", left: "150px" }, 200) .animate({ width: "300px", left: "50px" }, 200) .animate({ width: "100px", left: "150px" }, 200) .animate({ width: "300px", left: "50px" }, 200) .animate({ width: "100px", left: "150px" }, 200) .animate({ width: "300px", left: "50px" }, 200) .animate({ width: "100px", left: "150px" }, 200) .animate({ width: "300px", left: "50px" }, 200) .animate({ width: "200px", left: 0, top: "50px" }, 500); }) </script> </body> </html>l>网页显示如下：
5、事件操作
jQuery中提供了事件的绑定方式，也提供了事件拓展功能（阻止冒泡、阻止默认行为）① 快捷绑定
一般情况下，我们给网页中已经存在的元素进行事件绑定，使用快捷绑定函数；通过回调函数的方式给标签绑定事件// 当用户点击了id="box"的标签时，执行传递给click()处理单击事件的回调函数 $("#box").click(回调函数) // $("#box") 选择器，选择了页面中id="box"的标签 // click() 处理单击事件的函数，jQuery是JS函数库，所有的操作都是函数式开发 // click(回调函数) 当单击事件发生了之后，调用回调函数 $("#box").click(function() { // 处理单击事件发生后的操作 })② 常用绑定函数
bind()：给指定的元素绑定事件，3.0版本废弃unbind()：给指定的元素取消绑定的事件
live()：给指定的元素绑定事件，支持事件委托；1.7版本废弃die()：给指定的元素取消绑定的事件
delegate()：给指定的元素绑定事件，支持事件委托；3.0版本废弃undelegate()给指定的元素取消绑定的事件
on()：给指定的元素添加绑定事件，支持事件委托（特殊语法）【推荐】off()给指定的元素取消绑定的事件
代码操作：
<body> <div id="box"> <div id="inner"></div> </div> <!-- 引入1.x版本的jquery--> <script src="./js/jquery-1.12.4.js"></script> <script> // function handle() { // alert("用户点击了box div") // } // $("#box").click(handle) // 1、快捷绑定 $("#box").click(function () { alert("用户点击了box div") }) // 2、on绑定事件 // 2-1 直接绑定事件，不支持事件委托 $("#inner").on("click", function () { alert("用户点击了inner div") }) // 2-2 事件委托绑定；支持未来元素 $("#box").on("click", "#inner", function () { alert("用户点击了inner div 2事件委托") }) </script> </body>③ 标准规范绑定
PC端项目开发中，jQuery使用的非常频繁，事件的处理一般有两种规范：规范1：建议页面已有元素的绑定，使用快捷方式；未来元素的绑定使用
on()函数进行事件委托绑定规范2：建议页面中不论是存在的或者未来元素，统一使用
on()进行绑定【推荐】，便于提高代码可读性、便于后期的的项目维护④ 事件拓展
事件执行过程中，需要处理事件冒泡和默认行为的问题，
jQuery中如何处理？遵循
JavaScript中处理方式！对原生JS的处理进行了扩展-
阻止冒泡：
event.stopPropagation() -
阻止默认行为：
event.preventDefault()
6、BOM / DOM
jQuery/JavaScript对浏览器和网页文档进行数据处理的内建模型，可以通过BOM操作浏览器对象、可以通过DOM操作网页文档对象6.1
BOMBOM操作，依然使用原生JavaScript中的内建对象进行操作windowlocationhistorynavigatorscreendocument
jQuery中可以将DOM对象转还成jQuery对象进行操作console.log(window, "BOM对象") console.log($(window), "jQuery对象,支持使用jQuery提供的功能函数")案例分析：吸顶菜单
1、滚动事件
- 原生：
window.onscroll = function() {} jQuery:$(window).scroll(function() {...})
2、卷去网页的高度
- 原生：
document.body.scrollTop || document.documentElement.scrollTop jQuery：$(window).scrollTop()
3、修改
css样式- 原生：
obj.style.position = 'absolute';... jQuery：$(obj).css("position", "absolute")
6.2
DOMDOM操作都是对网页文档中标签对象的增删改查① 查询
DOM节点语法 描述 $(css选择器)jQuery选择器② 新增
DOM节点语法 描述 $("<标签名称>")创建一个节点
如：$("<div>")$box.append($new)将 $new节点，追加到$box的子节点的末尾[记]$new.appendTo($box)将 $new节点，追加到$box的子节点的末尾$box.prepend($new)将 $new节点，插入到$box的第一个子节点位置[记]$new.prependTo($box)将 $new节点，插入到$box的第一个子节点位置$ex1.after($ex2)将 $ex2添加到$ex1的后面（同级/兄弟节点）[记]$ex1.before($ex2)将 $ex2添加到$ex1的前面[记]$ex2.insertAfter($ex1)将 $ex2添加到$ex1的后面（同级/兄弟节点）$ex2.insertBefore($ex1)将 $ex2添加到$ex1的前面③ 查询节点
语法 描述 $ps.eq(index)获取索引位置的 jQuery对象$ps.get(index)获取索引位置的 JS对象$ps.first()获取第一个匹配的 jQuery对象$ps.last()获取最后一个匹配的 jQuery对象$ps.children()获取子节点 $ps.parents()获取所有父节点 $ps.parent()获取唯一的直接父节点 $ps.next()获取下一个兄弟节点 $ps.nextAll()获取后面所有兄弟节点 $ps.prev()获取上一个兄弟节点 $ps.prevAll(0)获取前面所有的兄弟节点 ④ 删除节点
语法 描述 $box.remove()删除当前节点 $box.empty()删除 $box中所有的子节点6.3
DOM 属性语法 描述 $box.attr(name, value)给名称为 name的属性设置value值[记]$box.attr(name)获取名称为 name的属性值[记]$box.removeAttr(name)删除名称为 name的属性值[记]$box.prop(name, value)给名称为 name的属性设置value值$box.prop(name)获取名称为 name的属性值$box.removeAttr(name)删除名称为 name的属性值6.4
DOM样式语法 描述 $box.css(key, value)给名称为 key的样式设置value值$box.css({k1:v1, k2:v2...})给 $box同时设置多个样式$box.css(key)获取 $box中名称为key的样式6.5
DOM内容语法 描述 $box.text(内容)设置文本内容 $box.text()获取文本内容 $box.html(内容)设置富文本内容 $box.html()获取父文本内容 6.6
class样式处理语法 描述 $box.addClass(cname)给 $box添加一个类名称$box.removeClass(cname)删除 $box上的一个类名称$box.toggleClass(cname)TODO 7、案例3.选项卡
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> *{padding: 0; margin: 0; box-sizing: border-box;} #container { width: 300px;height: 200px; border: 2px solid blueviolet; margin: 200px auto;} #title { display: flex; height: 50px;} #title span{display: inline-block; flex: 1; height: 50px; text-align: center; line-height: 50px; cursor: pointer;} #title span:hover {background-color: crimson;} #title span.active{background-color: hotpink; color: white;} #content { position: relative;} #content p{position: absolute; left: 10px; top: 50px; display: none;} #content p.active{display: block;} </style> </head> <body> <div id="container"> <div id="title"> <span calss="active"> 小汉堡</span> <span>中汉堡</span> <span>大汉堡</span> </div> <div id="content"> <p class="active">吃不饱</p> <p>吃半饱</p> <p>吃饱了</p> </div> </div> <script src="./js/jquery-3.6.1.js"></script> <script> // 等待网页DOM加载完成后再执行代码 $(function() { //标题上添加单击事件 $("#title span").click(function() { //移除所有标题高亮 $("#title span").removeClass("active") //高亮当前标题 $(this).addClass("active") //隐藏所有选项内容 $("#content p").removeClass("active") //显示当前所有内容 let index = $(this).index() $("#content p").eq(index).addClass("active") }) }) </script> </body> </html>显示效果如下：
8、案例4.动态菜单
代码如下：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } .nav { position: relative; display: flex; list-style: none; } .nav li { height: 50px; padding: 10px 20px; text-align: center; line-height: 30px; cursor: pointer; } .nav li.active { color: white; } .bg { background: orangered; position: absolute; left: 0; top: 0; z-index: -1; } </style> </head> <body> <ul class="nav"> <li class="active">首页</li> <li>个人主页</li> <li>日志</li> <li>相册</li> <li>留言板</li> <li>说说</li> <p class="bg"></p> </ul> <script src="./js/jquery-3.6.1.js"></script> <script> //设置第一个激活的背景宽度 $(".nav .bg").css({ width: $(".nav .active").outerWidth(), height: $(".nav .active").outerHeight() }) // 背景移动 $('.nav li').click(function () { //移除所有的active $('.nav li').removeClass('active') //给当前点击的标签添加active $(this).addClass('active') //获取当前点击li的坐标 offset(): {left:22,top:20} const left = $(this).offset().left const top = $(this).offset().top const width = $(this).outerWidth() const height = $(this).outerHeight() //设置背景位置 $(".bg").animate({ left: left + 12, top, width, height }, 50) .animate({ left: left - 12, top, width, height }, 50) .animate({ left: left + 10, top, width, height }, 30) .animate({ left: left - 10, top, width, height }, 30) .animate({ left: left + 8, top, width, height }, 20) .animate({ left: left - 8, top, width, height }, 20) .animate({ left: left + 4, top, width, height }, 10) .animate({ left: left - 4, top, width, height }, 10) .animate({ left, top, width, height }, 100) }) </script> </body> </html>效果如下：
9、案例5.拖拽效果
代码如下：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box } #box { position: absolute; width: 400px; height: 300px; border: solid 1px #123456; border-radius: 5px; overflow: hidden } #title { width: 100%; height: 40px; background: #123456 } </style> </head> <body> <div id="box"> <div id="title"></div> </div> <script src="./js/jquery-3.6.1.js"></script> <script> $(function () { // 声明变量，记录鼠标在元素上的偏移距离 let ox = oy = 0; // 鼠标移动的事件函数 function move({ clientX: cx, clientY: cy }) { // 计算box的位置 let left = cx - ox let top = cy - oy // 边界判断 if (left <= 0) { left = 0 } // 定位 $("#box").css({ left, top }) } $("#title").on('mousedown', function ({ offsetX, offsetY }) { // 获取鼠标在标签上的偏移距离 ox = offsetX oy = offsetY // 鼠标移动:绑定事件 $(document).on('mousemove', move) }) $("#title").on('mouseup', function () { // 接触拖动事件:取消绑定 $(document).off('mousemove', move) }) }) </script> </body> </html>效果如下：
10、案例6.放大镜效果
代码如下：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } #glass { display: flex; } #small { position: relative; } #small, #small img { width: 400px; height: 400px; } #small #view { width: 200px; height: 200px; background: #fff; opacity: 0.3; position: absolute; left: 0; top: 0; display: none; } #big { position: relative; width: 400px; height: 400px; overflow: hidden; margin-left: 20px; display: none; } #big img { position: absolute; } </style> </head> <body> <div id="glass"> <div id="small"> <img src="./img/85.jpg" alt=""> <div id="view"></div> </div> <div id="big"> <img src="./img/85.jpg" alt="" width="800px" height="800px"> </div> </div> <script src="./js/jquery-3.6.1.js"></script> <script> $(function () { // 1、鼠标移入small，让view 和big显式 // 鼠标移出small，让view，big消失 $("#glass #small").on('mouseenter', function () { // 让#view和#big显示 $("#view, #big").css('display', 'block') // 鼠标拖动 $("#glass #view").on('mousemove', function ({ clientX: cx, clientY: cy }) { // 计算view的位置 let left = cx - $("#small").offset().left - $("#view").outerWidth() / 2 let top = cy - $("#small").offset().top - $("#view").outerHeight() / 2 // 边界 if (left <= 0) { left = 0 } else if (left >= $("#small").outerWidth() - $("#view").outerWidth()) { left = $("#small").outerWidth() - $("#view").outerWidth() } if (top <= 0) { top = 0 } else if (top >= $("#small").outerHeight() - $("#view").outerHeight()) { top = $("#small").outerHeight() - $("#view").outerHeight() } // 定位view $("#glass #view").css({ left, top }) // 计算大图坐标 let _bigLeft = left * $("#big").outerWidth() / $("#view").outerWidth() let _bigTop = top * $("#big").outerHeight() / $("#view").outerHeight() // 定位大图 $("#big img").css({ left: -_bigLeft, top: -_bigTop }) }) }) $("#glass #small").on('mouseleave', function () { // 让#view和#big隐藏 $("#view, #big").css('display', 'none') }) }) </script> </body> </html>效果如下：
11、JQuery常用核心函数
11-1、
$(selector)选择器，可以用于选择页面中的标签对象，等价于
jQuery()；查看源代码// Expose jQuery and $ identifiers, even in AMD // (#7102#comment:10, https://github.com/jquery/jquery/pull/557) // and CommonJS for browser emulators (#13566) if (!noGlobal) { window.jQuery = window.$ = jQuery; }<script src="./js/jquery-2.2.4.js"></script> <script> // $() 等价于 jQuery() console.log( $("#box") ) console.log( jQuery("#box") ) </script>11-2、
each()jQuery选择了页面标签对象之后，可以针对选择的标签进行遍历处理，包含隐式迭代和显式迭代两种情// each() 隐式和显式迭代 const $ps = $("p") // 设置样式:隐式迭代 // 尽管我们没有编写循环语法，但是jQuery底层对选择器选择的标签 // 进行了循环遍历完成了样式处理； // 不由开发人员编写循环，而是`jQuery`自身循环处理的过程：隐式迭代 // $ps.css("border-bottom", "solid 2px orangered") // 设置样式：显示迭代 for (let i = 0; i < $ps.size(); i++) { console.log(getRandColor()) $ps.eq(i).css("border-bottom", "solid 2px " + getRandColor()) } // jQuery提供了一个可以直接遍历选择器标签的函数each() // $ps.each(function (index, ele) { $ps.each( (index, ele) => { $(ele).css("border-bottom", "solid 2px " + getRandColor()) }) // jQuery提供了一个通用的迭代函数 // $.each($ps, function (index, ele) { $.each($ps, (index, ele) => { $(ele).css("border-bottom", "solid 2px " + getRandColor()) }) function getRandColor() { return "#" + Math.random().toString(16).substr(2, 6) }11-3、插件封装
jQuery本身虽然提供了大量插件，但是项目中的需求千变万化的，不可能满足所有情况；jQuery提供了扩展自己功能函数的方法，让开发人员可以制作JQuery插件jQuery.fn.extend()：函数级插件jQuery.extend()：应用级插件
/** 自定义插件 */ // 函数插件 jQuery.fn.extend({ trim: function () { console.log(this.text().trim(), " 插件中的this") return this.text().trim() } }) // 应用插件 jQuery.extend({ globalTrim: function (value) { return value.toString().trim() } })12、案例7.瀑布流效果
代码如下：
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } #container { width: 90%; position: relative; margin: 0 auto; } .outer { position: absolute; padding: 5px; width: 200px; } .inner { padding: 5px; width: 190px; border: solid 1px #000; border-radius: 5px; box-shadow: #000 2px 2px 5px; } .inner img { vertical-align: middle; width: 180px; height: auto; } </style> </head> <body> <div id="container"> <div class="outer"> <div class="inner"><img src="./img/23.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/2.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/3.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/4.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/5.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/68.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/7.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/8.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/9.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/10.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/11.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/12.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/13.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/14.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/15.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/16.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/17.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/18.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/19.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/20.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/21.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/22.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/23.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/24.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/25.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/26.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/27.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/28.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/29.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/30.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/31.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/32.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/33.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/34.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/35.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/36.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/37.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/38.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/39.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/40.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/41.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/42.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/43.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/44.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/45.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/46.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/47.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/48.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/49.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/50.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/51.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/52.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/53.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/54.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/55.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/56.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/57.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/58.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/59.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/60.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/61.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/62.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/63.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/64.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/65.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/66.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/67.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/68.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/69.jpg" alt=""></div> </div> <div class="outer"> <div class="inner"><img src="./img/70.jpg" alt=""></div> </div> </div> <script src="./js/jquery-3.6.1.js"></script> <script> // 瀑布流函数 function loadImg() { // 获取存放所有图片的容器标签 const $ct = $("#container") // 计算一行放多少张图片 const _col = Math.floor($ct.outerWidth() / 200) // 循环遍历所有图片 const arr = [] $(".outer").each((index, ele) => { if (index < _col) { // ，存放第一行图片 $(ele).css({ left: index * 200, top: 0 }) arr.push($(ele).outerHeight()) } else { // 其他图片 // 从数组中找出最小高度 const minHeight = Math.min.apply(null, arr) // 最小高度 const minIndex = arr.indexOf(minHeight) // 对应索引 // 定位下一张图片 $(ele).css({ left: minIndex * 200, top: minHeight }) // 更新当前最小高度 arr[minIndex] += $(ele).outerHeight() } }) } window.onload = function () { loadImg() } window.onresize = function () { loadImg() } </script> </body> </html>效果如下：
13、jQuery Ajax
jQuery封装了原生JS提供了异步请求操作操作如下：
// 通用函数 $.ajax({ url: "http://www.baidu.com", methods: "GET", data: {参数数据}, success: function(res) { console.log(res, "服务器返回的数据") }, error: function(err) { console.log("请求失败") } })// GET请求 $.get('http://www.baidu.com', {参数}, function(res) => { console.log(res, "返回的数据") })// POST请求 $.post('http://www.baidu.com', {参数}, function(res) => { console.log(res, "请求到的数据") })14、jQuery UI
又到了看JQuery官网的时候了
熟练应用插件，可以让你的工作效率更高，更快，更卷
15、各种 特效插件 网站
这里还有更多插件好用的网站，链接都放在下面了
2.https://www.jq22.com/daima11
3.https://element.eleme.cn/#/zh-CN
4.https://vant-contrib.gitee.io/vant/#/zh-CN
7.https://tdesign.tencent.com/
8.http://www.htmleaf.com/jQuery/Image-Effects/
2332
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
