新手从零入手 JQuery 【看这篇】
2024-05-06 13:23:56
文章目录
- 1、认识JQuery
- 1.1`jQuery`常见函数
- 1.2 案例1.通过按钮控制 div 元素的动画效果
- 2、JQuery 页面加载事件
- 3、标签选择器
- 3.1认识JQuery对象
- 3.2常见选择器
- 3.3示例2.常见选择器
- 4、JQuery动画
- 5、事件操作
- 6、BOM / DOM
- 6.1 `BOM`
- 6.2 `DOM`
- 6.3 `DOM 属性`
- 6.4`DOM`样式
- 6.5`DOM`内容
- 6.6`class`样式处理
- 7、案例3.选项卡
- 8、案例4.动态菜单
- 9、案例5.拖拽效果
- 10、案例6.放大镜效果
- 11、JQuery常用核心函数
- 11-1、 `$(selector)`
- 11-2、 `each()`
- 11-3、插件封装
- 12、案例7.瀑布流效果
- 13、jQuery Ajax
- 14、jQuery UI
- 15、各种 特效插件 网站
1、认识JQuery
jQuery 就是一个 JavaScript 函数库
内部包含了大量的封装好的、可以直接调用的 JS 函数
jQuery是一个快速、小巧、功能丰富的JavaScript库。它通过一个跨多种浏览器工作的易于使用的API，使HTML文档遍历和操作、事件处理、动画和Ajax变得更加简单。jQuery结合了多功能性和可扩展性，改变了数百万人编写JavaScript的方式。
1.1官方网站
》 点击这里进入 JQuery 官网
主要版本：目前包含三个主要版本
- 1.x ：市场使用最多的是 1.11.x、1.12.x ；号称兼容所有浏览器
- 2.x ：目前市场主流版本，不再对低版本浏览器保证兼容性
- 3.x ：最新版本
.
下载历史版本：下载页面中下拉页面到最底部，可以看到这个链接记录
过去相应版本点这里 JQuery CDN下载对应的版本文件
.现在就可以使用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().leftconst top = $(this).offset().topconst 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 - oxlet top = cy - oy// 边界判断if (left <= 0) {left = 0}// 定位$("#box").css({ left, top })}$("#title").on('mousedown', function ({ offsetX, offsetY }) {// 获取鼠标在标签上的偏移距离ox = offsetXoy = 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() / 2let 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、各种 特效插件 网站
这里还有更多插件好用的网站，链接都放在下面了
1.https://v3.bootcss.com/
2.https://www.jq22.com/daima11
3.https://element.eleme.cn/#/zh-CN
4.https://vant-contrib.gitee.io/vant/#/zh-CN
5.https://www.iviewui.com/
6.https://iview.github.io/
7.https://tdesign.tencent.com/
8.http://www.htmleaf.com/jQuery/Image-Effects/
新手从零入手 JQuery 【看这篇】相关推荐
- 新手从零入手 Git【看这篇】
文章目录 1.认识Git 1.1 `Git` 是什么 1.2 为什么要使用 `Git ` 1.3 `Git ` 工作流程 1.4 下载和安装 2.初始化Git 2.1认识管理流程 2.2初始化Git ...
- python教程是什么课文_新手快速入门Python必看这篇文章
Python是一门多种用途的编程语言,时常在扮演脚本语言的角色.一般来说,Python可定义为面向对象语的脚本语言:这个定义把面向对象的支持和全面的面向脚本语言的角色融合在一起.事实上,人们往往以&q ...
- mac 删除分区 command r 选择网络_Mac使用必看基础篇，Mac快捷键大全，mac新手入门指南...
你是Mac新手吗?你对使用Mac电脑有疑问吗?你还不知道mac有哪些快捷键吗?别着急,来看看小编给大家准备的Mac使用必看基础篇--Mac快捷键大全,对于新手用户很有帮助哦!! 一.开机相关命令快捷键 ...
- Python-Excel 零基础学习xlwings，看这篇文章就够了
零基础学习xlwings,看这篇文章就够了 | 一起大数据-技术文章心得 (17bigdata.com) 1.xlwings是什么 2.xlwings安装更新与卸载 3.xlwings详细使用 4.案 ...
- python入门书籍推荐，看这篇文章就够，请！
python入门书籍推荐,看这篇文章就够,请! 事实上,有关python的书籍很多很多,就当当网就有50000件和python有关的书籍,我特地去了当地的新华书店,蹲了大半天,回来给大家推荐,适合想学 ...
- TF卡里删掉文件后内存没变大_双11，TF卡，SD卡，读卡器如何选，看这篇就够了...
此文章发布已经半年有余,各大厂家推出了很多新的SD卡,且SD卡组织也推出了新的标准,所以这篇文章的内容已经有些过时,还得烦请各位移步到新的文章: 黄昏百分百:TF卡,SD卡,读卡器,USB拓展坞如何选 ...
- 如何学习前端？看这篇就够了
引子 作为一个前端工作多年的老鸟,见过各种各样的萌新入行前端,正好有些时间,把心里的一些话写一写,实在是不吐不快. 我见过入职之后不明白什么是前端是做什么的"中级前端". ...
- iphone11与android换机,苹果手机数据转移到新手机：iPhone 11用户换机必看——备忘录篇...
原标题:苹果手机数据转移到新手机:iPhone 11用户换机必看--备忘录篇 最近很多用户将自己现在的苹果设备进行了升级,iPhone 11以其低价再次上演了"真香"警告.不知道你 ...
- Vue开发入门看这篇文章就够了
摘要: 很多值得了解的细节. 原文:Vue开发看这篇文章就够了 作者:Random Fundebug经授权转载,版权归原作者所有. 介绍 Vue 中文网 Vue github Vue.js 是一套构建 ...
最新文章
- 定时将应用日志移动到指定目录
- sku属性组合小例子
- 阿拉伯数字转中文小写数字
- 文献记录(part81)--Clustering-based k -nearest neighbor classification for large-scale data with ...
- layer之jquery 弹窗插件 （最后版本v1.8.5）
- [Object-C语言随笔之三] 类的创建和实例化以及函数的添加和调用！
- java 1.6 32位_JDK1.6 32位官方下载
- 如何下载Chrome谷歌浏览器历史版本
- html 科赫雪花,CSS3 科赫雪花分形动画
- 真正优秀的人，更懂得尊重别人
- 极光推送在Android端的集成
- 采集微信公众号数据的思路
- 免费英语听力工具voscreen
- 证券市场基础知识（三）——回购市场
- 【Python】图像-粘贴PNG透明图片及处理圆角
- Android X86更改屏幕分辨率
- Text-to-Table: A New Way of Information Extraction
- JAVA数据类型笔记
- 图解 | 你管这破玩意儿叫TCP？
- 西游记中孙悟空的蜕变