白水网站建设,郑州网站推广优化公司,app界面设计风格,公司有必要建设网站吗一、jQuery事件处理
1.认识事件#xff08;Event#xff09;
Web页面经常需要和用户之间进行交互#xff0c;而交互的过程中我们可能想要捕捉这个交互的过程#xff1a;
比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置#xff1b;浏…一、jQuery事件处理
1.认识事件Event
Web页面经常需要和用户之间进行交互而交互的过程中我们可能想要捕捉这个交互的过程
比如用户点击了某个按钮、用户在输入框里面输入了某个文本、用户鼠标经过了某个位置浏览器需要搭建一条JavaScript代码和事件之间的桥梁当某个事件发生时让JavaScript执行某个函数所以我们需要针对事件编写处理程序handler
原生事件监听方法
事件监听方式一在script中直接监听很少使用。事件监听方式二DOM属性通过元素的on来监听事件。事件监听方式三通过EventTarget中的addEventListener来监听。
jQuery事件监听方法
事件监听方式一直接调用jQuery对象中的事件处理函数来监听例如clickmouseenter…。事件监听方式二调用jQuery对象中的on函数来监听使用off函数来取消监听。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyul idlist classpanelli classli-1li-1/lili classli-2li-2/lili classli-3li-3/lili classli-4li-4/lili classli-5li-5/li/ulbutton classcancel取消事件的监听/buttonscript src../libs/jquery-3.6.0.js/scriptscript// 1.监听文档完全解析完成$(function() {// 监听事件// 1.使用on来监听事件$(ul).on(click, function() {console.log(click1)})// 2.使用click来监听事件$(ul).click(function() {console.log(click2)})// 3.使用mouseenter来监听事件$(ul).mouseenter(function() {console.log(mouseenter)})// 取消监听事件$(.cancel).click(function() {// $(ul).off() // 取消ul元素上所有的事件// $(ul).off(mouseenter)$(ul).off(click)})// 使用程序-自动触发事件// $(ul).trigger(click) // 模拟用户点击了ul元素$(ul).trigger(mouseenter)})/script
/body
/html2.click和on的区别
click和on的区别
click是on的简写。它们重复监听不会出现覆盖情况都支持事件委托底层用的是addEventListener。如果 on 没有使用 selector 的话那么和使用click是一样的。on 函数可以接受一个 selector 参数用于筛选 可触发事件 的后代元素。on 函数支持给事件添加命名空间。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyul idlist classpanelli classli-1li-1/lili classli-2li-2/lili classli-3li-3/lili classli-4li-4/lili classli-5li-5/li/ulbutton classcancel取消事件的监听/buttonscript src../libs/jquery-3.6.0.js/scriptscript// 1.监听文档完全解析完成$(function() {// 监听事件// 1.使用on来监听事件 ( 支持给事件添加命名空间: liujun )$(ul).on(click.liujun, function() {console.log(click1)})// 2.使用click来监听事件$(ul).click(function() {console.log(click2)})// 取消监听事件$(.cancel).click(function() {$(ul).off(click.liujun)})/*1.on 监听的事件支持使用 命名空间2.on 函数支持一个 selector 的参数*/// $(ul).on(click, 字符串类型的选择器, function() {// })})/script
/body
/html3.click和on中this指向
click和on的this指向
this都是指向原生的DOM Element
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyul idlist classpanelli classli-1li-1/lili classli-2li-2/lili classli-3li-3/lili classli-4li-4/lili classli-5li-5/li/ulscript src../libs/jquery-3.6.0.js/scriptscript// 1.监听文档完全解析完成$(function() {// $(ul).click(function() {// console.log(%O, this) // DOM Element - UL// }) // $(ul).on(click, function() {// console.log(this) // DOM Element - UL// })// $(ul li).click(function() {// console.log(this) // DOM Element - UL// })// 底层实现的原理// var lisEl $(ul li).get() // [li, li, li]// for(var liEL of lisEl ){// liEL.addEventListener(click, function() {// console.log(this)// })// }// $(ul li).click(function() {// console.log( $(this) ) // DOM Element 转成 jQuery 对象// })$(ul li).click(() {console.log(this)})})/script
/body
/html4.jQuery的事件冒泡
我们会发现默认情况下事件是从最内层如下图span向外依次传递的顺序这个顺序我们称之为事件冒泡Event Bubble;
事实上还有另外一种监听事件流的方式就是从外层到内层如body - span这种称之为事件捕获Event Capture
为什么会产生两种不同的处理流呢 这是因为早期在浏览器开发时不管是IE还是Netscape公司都发现了这个问题; 但是他们采用了完全相反的事件流来对事件进行了传递 IE9仅采用了事件冒泡的方式Netscape采用了事件捕获的方式 IE9和现在所有主流浏览器都已支持这两种方式。
jQuery为了更好的兼容IE浏览器底层并没有实现事件捕获。
5.jQuery的事件对象( Event Object)
jQuery事件系统的规范是根据W3C的标准来制定jQuery事件对象。原始事件对象的大多数属性都被复制到新的jQuery事件 对象上。如以下原生的事件属性被复制到jQuery事件对象中 altKey, clientX, clientY, currentTarget, data, detail, key, keyCode, offsetX, offsetY, originalTarget, pageX, pageY, relatedTarget, screenX, screenY, target, …
jQuery事件对象通用的属性以下属性已实现跨浏览器的兼容
target、relatedTarget、pageX、pageY、which、metaKey
jQuery事件对象常用的方法
preventDefault() : 取消事件的默认行为例如a标签、表单事件等。stopPropagation() : 阻止事件的进一步传递例如事件冒泡。
要访问其它事件的属性可以使用 event.originalEvent 获取原生对象。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{width: 200px;height: 200px;background-color: pink;}.content{display: inline-block;width: 50px;height: 50px;background-color: green;}/style
/head
bodydiv classboxdivspan classcontentspan/span/divscript src../libs/jquery-3.6.0.js/scriptscript// 1.监听文档完全解析完成$(function() {// 1.获取原生的事件对象// var divEl document.querySelector(.box)// divEl.addEventListener(click, function(event) {// console.log(event)// })// 2.获取jQuery的事件对象$(.box).click(function($event) {console.log($event) // 是jQuery的事件对象console.log($event.originalEvent) // 拿到原生的事件对象})})/script
/body
/html6.jQuery的事件委托event delegation
事件冒泡在某种情况下可以帮助我们实现强大的事件处理模式 – 事件委托模式也是一种设计模式
那么这个模式是怎么样的呢 因为当子元素被点击时父元素可以通过冒泡监听到子元素的点击 并且可以通过event.target获取到当前监听事件的元素event.currentTarget获取到的是处理事件的元素
案例一个ul中存放多个li使用事件委托的模式来监听li中子元素的点击事件。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyleul li.item {width: 200px;height: 80px;margin-bottom: 10px;background-color: #ccc;}/style
/head
bodyscript src./utils/jquery-3.7.1.min.js/scriptscript$(function () {$(ul).on(click, li.item, function(event) {console.log($(event.target).text()被点击了)})})/scriptulli classitemitem1/lili classitemitem2/lili classitemitem3/lili classitemitem4/lili classitemitem5/li/ul
/body
/html7.jQuery常见的事件
鼠标事件Mouse Events
.click() 、.dblclick()、.hover()、.mousedown() 、.mouseup().mouseenter()、.mouseleave()、.mousemove().mouseover()、.mouseout() 、.contextmenu()、.toggle()
键盘事件Keyboard Events
.keydown() 、.keypress()、.keyup()
文档事件Document Loading Events
load、ready()、.unload
表单事件Form Events
.blur() 、.focus()、.change()、.submit()、.select()
浏览器事件Browser Events
.resize()、.scroll()
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyul idlist classpanelli classli-1li-1/lili classli-2li-2/lili classli-3li-3/lili classli-4li-4/lili classli-5li-5/li/ulinput typetextscript src../libs/jquery-3.6.0.js/scriptscript// 1.监听文档完全解析完成$(function() {// on(hover, func)// 1.hover 底层使用的是: mouseenter or mouseleaver// $(ul).hover(function() {// console.log(鼠标悬浮在ul)// }, function() {// console.log(鼠标离开在ul)// })// 2.监听浏览器resize事件 ( throttle 节流 )// on(resize, func)$(window).resize(function() {console.log(resize)})// 3.表单事件$(input).focus(function() {console.log(input focus事件)})$(input).blur(function() {console.log(input blur事件)})// input ( debounce 防抖操作 )$(input).on(input, function() {// console.log( $(input).val() )console.log( $(this).val() )})})/script
/body
/html8.mouseover和mouseenter的区别
mouseenter()和mouseleave()
不支持冒泡进入子元素依然属于在该元素内没有任何反应
mouseover()和mouseout()
支持冒泡进入元素的子元素时 先调用父元素的mouseout再调用子元素的mouseover因为支持冒泡所以会将mouseover传递到父元素中
9.jQuery的键盘事件
事件的执行顺序是 keydown()、keypress()、keyup()
keydown事件先发生keypress发生在文本被输入keyup发生在文本输入完成抬起、松开
我们可以通过key和code来区分按下的键
code“按键代码”“KeyA”“ArrowLeft” 等特定于键盘上按键的物理位置。key字符“A”“a” 等对于非字符non-character的按键通常具有与 code 相同的值。
10.jQuery的表单事件
表单事件Form Events
.blur() - 元素失去焦点时触发.focus() - 元素获取焦点时触发change() - 该事件在表单元素的内容改变时触发( , , , 和 ).submit() - 表单提交时触发( input keygen select textarea)
二、jQuery 动画
1.jQuery动画操作-animate
.animate() 执行一组 CSS属性的自定义动画允许支持数字的CSS属性上创建动画。
.animate( properties [, duration ] [, easing ] [, complete ] ).animate( properties, options ) propertys参数的支持 数值number 、string关键字‘show’、‘hide’和’toggle’相对值 、 -支持 em 、% 单位可能会进行单位转换。
自定义修改宽高度动画
height 100% - 0width 100% - 0opacity: 1 - 0
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{width: 200px;height: 100px;background-color: pink;}/style
/head
bodybutton classhide隐藏/buttonbutton classshow显示/buttondiv classboxbox/divscript src../libs/jquery-3.6.0.js/scriptscript// 1.监听文档完全解析完成$(function() {$(.hide).click(function() {// 需要一个隐藏的动画$(.box).animate({height: 0, // 100px - 0pxwidth: 0, // 200px - 0pxopacity: 0 // 1 - 0},2000, swing , function() {console.log(动画执行完毕之后会回调)})})$(.show).click(function() {$(.box).animate({height: 100,width: 200,opacity: 1}, function() {console.log(动画执行完毕之后会回调)})// $(.box).animate({// height: 100,// width: 200,// opacity: 1// }, 2000, swing, function() {// console.log(动画执行完毕之后会回调)// })// $(.box).animate({// height: 100,// width: 200,// opacity: 1// }, {// duration: slow,// complete: function() {// console.log(动画执行完毕之后会回调)// }// })})})/script
/body
/html2.jQuery常见动画函数
显示和隐藏匹配的元素
.hide() 、.hide( [duration ] [, complete ] )、.hide( options ) - 隐藏元素.show() 、.show( [duration ] [, complete ] )、.show( options ) - 显示元素.toggle() 、.toggle( [duration ] [, complete ] )、.toggle( options ) -显示或者隐藏元素
淡入淡出 .fadeIn()、.fadeIn( [duration ] [, complete ] )、.fadeIn( options ) - 淡入动画 .fadeOut()、.fadeOut( [duration ] [, complete ] )、.fadeOut( options ) -淡出动画 .fadeToggle()、.fadeToggle( [duration ] [, complete ] )、.fadeToggle( options ) - 淡入淡出的切换 .fadeTo( duration, opacity [, complete ] ) - 渐变到
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestylebody{height: 200px;}.box{width: 200px;height: 100px;background-color: pink;}/style
/head
bodybutton classhide隐藏/buttonbutton classshow显示/buttonbutton classtoggle切换/buttondiv classboxbox/divscript src../libs/jquery-3.6.0.js/scriptscript// 1.监听文档完全解析完成$(function() {$(.hide).click(function() {$(.box).hide(slow, function() {console.log(动画执行完成)})})$(.show).click(function() {$(.box).show(fast, function() {console.log(动画执行完成)})})$(.toggle).click(function() {// $(.box).toggle(2000)$(.box).toggle({duration: 3000,complete: function() {console.log(动画执行完成)}})})})/script
/body
/html3.jQuery元素中的动画队列
jQuery匹配元素中的animate和delay动画是通过一个动画队列(queue)来维护的。例如执行下面的动画都会添加到动画队列中
.hide() 、 .show().fadeIn() 、.fadeOut().animate()、delay()…
.queue()查看当前选中元素中的动画队列。
.stop( [clearQueue ] [, jumpToEnd ] )停止匹配元素上当前正在运行的动画。
clearQueue 一个布尔值指示是否也删除排队中的动画。默认为falsejumpToEnd 一个布尔值指示是否立即完成当前动画。默认为false
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{position: relative;width: 100px;height: 100px;background-color: pink;}/style
/head
bodybutton classstart开始动画/button button classstop停止动画/button button classqueue查看动画队列/button div classboxbox/divscript src../libs/jquery-3.6.0.js/scriptscript// 1.监听文档完全解析完成$(function() {var $box $(.box)$(.start).click(function() {$box.animate({top: 100}, 5000)$box.animate({left: 100}, 5000)$box.animate({top: 0}, 5000)$box.animate({left: 0}, 5000)})$(.queue).click(function() {console.log( $box.queue() ) // 查看动画队列 fx})$(.stop).click(function() {// $box.stop() // 停止 fx 动画队列( 停止当前执行的动画,还会继续执行动画队列中其它的动画 )// stop(false, false) 默认值// $box.stop(true) // 停止所有的动画, 清空了动画队列// $box.stop(true, true) // 清空了动画队列, 立即执行完当前的动画})})/script
/body
/html4.jQuery实现-隐藏侧边栏广告
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/titlestyle.box{position: fixed;bottom: 0;right: 0;}img{vertical-align: bottom;}.close{position: absolute;top: 0;right: 0;width: 25px;height: 25px;cursor: pointer;/* border: 1px solid red; */}/style
/head
bodydiv classboxspan classclose/spandiv classtopimg src./images/top.png alt/divdiv classbottomimg src./images/bottom.png alt/div/divscript src../libs/jquery-3.6.0.js/scriptscript// 1.监听文档完全解析完成$(function() {$(.close).click(function() {$(.bottom).animate({height: 0}, 600, function() {$(.box).animate({width: 0}, 600, function() {$(.box).css(display, none)})})})})/script
/body
/html5.jQuery中的遍历
.each( function ) 遍历一个 jQuery 对象为每个匹配的元素执行一个回调函数。
function 参数: Function( Integer index, Element element ) 函数中返回false会终止循环。
jQuery.each( array | object , callback ) : 一个通用的迭代器函数可以用来无缝地迭代对象和数组。 array参数支持数组array或者类数组array-like,底层使用for循环 。 object参数: 支持普通的对象 object 和 JSON对象等底层用for in循环。 function 参数: Function( Integer index, Element element ) 函数中返回false会终止循环。
.each() 和 jQuery.each(函数的区别
.each()是jQuery对象上的方法用于遍历 jQuery对象。jQuery.each( ) 是jQuery函数上的方法可以遍历对象、数组、类数组等它是一个通用的工具函数。
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyul idlist classpanelli classli-1li-1/lili classli-2li-2/lili classli-3li-3/lili classli-4li-4/lili classli-5li-5/li/ulscript src../libs/jquery-3.6.0.js/scriptscript// 1.监听文档完全解析完成$(function() {// 1.遍历jQuery对象 ( 已经实现了迭代器协议 for of )// 对象中的 each 底层调用的 jQuery函数上的each方法$(ul li).each(function(index, element) { // [].forEach( func(element, index, array ))console.log(index, element)})console.log(%O, $(ul) )// 2.使用 for of})/script
/body
/html三、jQuery AJAX
1.jQuery的AJAX
在前端页面开发中如果页面中的数据是需要动态获取或者更新的这时我们需要向服务器发送异步的请求来获取数据然后在无需刷新页面的情况来更新页面。那么这个发起异步请求获取数据来更新页面的技术叫做AJAX。
AJAX全称Asynchronous JavaScript And XML是异步的 JavaScript 和 XML它描述了一组用于构建网站和Web应用程序的开发技术。
简单点说就是使用 XMLHttpRequest 对象与服务器通信。它可以使用 JSONXMLHTML 和 text 文本等格式发送和接收数据。AJAX 最吸引人的就是它的“异步”特性。也就是说它可以在不重新刷新页面的情况下与服务器通信交换数据或更新页面。
AJAX请求方法Method
GET、POST、PUT、PACTH、DELETE 等
jQuery中也有AJAX模块该模块是在XMLHttpRequest的基础上进行了封装语法Syntax如下 $.ajax( [settings ] ) - 默认用 GET 请求从服务器加载数据 会返回jQXHR对象可以利用该对象的abort方法来取消请求。 $.get( url [, data ] [, success ] [, dataType ] ) - 发起GET请求底层调用的还是$ajax() $.post( url [, data ] [, success ] [, dataType ] ) - 发起POST请求底层调用的还是$ajax()
初体验jQuery中的AJAX
https://httpbin.org (是一个专门提供免费测试http服务的网站
2.AJAX请求参数(Parameters)
请求参数Parameters
url - 指定发送请求的 URL。method / type - 用于指定请求的类型 (e.g. “POST”, “GET”, “PUT”)默认为GETdata - 指定要发送到服务器的数据PlainObject or String or ArrayprocessData当data是一个对象时jQuery 从对象的键/值对生成数据字符串除非该processData选项设置为false. 例如{ a: “bc”, d: “e,f” }被转换为字符串abcde%2Cf默认为true。header - 请求头的内容PlainObjectcontentType - 默认值application/x-www-form-urlencoded; charsetUTF-8向服务器发送数据时指定内容类型。 application/x-www-form-urlencoded; charsetUTF-8 请求体的数据以查询字符串形式提交如abcde%2Cf。application/json; charsetUTF-8 指定为json字符串类型为时 false 代表是 multipart/form-data 。表单类型一般用于上传文件 dataType - 期望服务器端发回的数据类型json、xml、text…默认会根据响应的类型来自动推断类型。timeout - 请求超时时间。它以毫秒为单位。beforeSend - 这是一个在发送请求之前运行的函数返回false会取消网路请求。success - 请求成功回调的函数error - 请求失败回调的函数
!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyul idlist classpanelli classli-1li-1/lili classli-2li-2/lili classli-3li-3/lili classli-4li-4/lili classli-5li-5/li/ulscript src../libs/jquery-3.6.0.js/scriptscript// 1.监听文档完全解析完成$(function() {// console.log(encodeURIComponent(天河公园))// 1.url 添加查询字符串// $.ajax({// url: http://httpbin.org/get?cityId404100keyWord天河公园,// method: GET,// success: function(res) {// console.log(res)// }// })// 2.支持在data中提交参数// $.ajax({// url: http://httpbin.org/get,// method: GET,// data: {// cityId: 504100,// keyWord: 小蛮腰// },// success: function(res) {// console.log(res)// }// })// 3.给 get请求添加请求头// $.ajax({// url: http://httpbin.org/get,// method: GET,// data: {// cityId: 504100,// keyWord: 小蛮腰// },// headers: { // 比如你登录成功之后,后台会返回一个 token// accessToken: aaaaabbbbbcccccc // },// success: function(res) {// console.log(res)// }// })// 4.get简写 $.get(http://httpbin.org/get).then(function(res) { // jQuery 1.8 ; doneconsole.log(res)}).catch(function() { // failconsole.log(catch)}).always(function() { // finally console.log(always)})})/script
/body
/html!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyul idlist classpanelli classli-1li-1/lili classli-2li-2/lili classli-3li-3/lili classli-4li-4/lili classli-5li-5/li/ulscript src../libs/jquery-3.6.0.js/scriptscript// 1.监听文档完全解析完成$(function() {// 1. 在url中提交查询字符串(比较少见)// $.ajax({// url: http://httpbin.org/post?cityId404100keyWord天河公园,// method: POST,// success: function(res) {// console.log(res)// }// })// 2. 在data中提交查询字符串// $.ajax({// url: http://httpbin.org/post,// method: POST,// data: {// cityId: 504100,// keyWord: 小蛮腰// },// // contentType: application/x-www-form-urlencoded; charsetUTF-8,// // dataType: json, // 自动推断, response content-type// success: function(res) {// console.log(res)// }// })// 3. 在data中 JSON 字符串// $.ajax({// url: http://httpbin.org/post,// method: POST,// data: JSON.stringify({// cityId: 504100,// keyWord: 小蛮腰// }),// contentType: application/json; charsetUTF-8,// success: function(res) {// console.log(res)// }// })// 4. 在data中 FormData// var formData new FormData() // form input namecityId value404100/ input namekeyWord value小蛮腰/ /form// formData.append(cityId, 404100)// formData.append(keyWord, 小蛮腰)// // formData.append(file, 文件)// $.ajax({// url: http://httpbin.org/post,// method: POST,// data: formData,// processData: false, // processData:true, 会将data为对象的转成查询字符串// contentType: false, // 使用 原生 XHR 默认的 contentType// success: function(res) {// console.log(res)// }// })// 5. 在添加请求头// var formData new FormData()// formData.append(cityId, 404100)// formData.append(keyWord, 小蛮腰)// $.ajax({// url: http://httpbin.org/post,// method: POST,// data: formData,// processData: false, // processData:true, 会将data为对象的转成查询字符串// contentType: false, // 使用 原生 XHR 默认的 contentType// headers: {// liujunToken: xxxxxxxsssssssssssd// },// success: function(res) {// console.log(res)// }// })// 6. POST简写$.post(http://httpbin.org/post, {cityId: 504100,keyWord: 小蛮腰}).then(function(res) {console.log(res)})})/script
/body
/html四、jQuery插件开发
在我们开发时有时候jQuery提供的方法并不能满足我们的需求。如果我们想给jQuery扩展一些其它的方法那这种情况下 可能需要编写一个插件。
jQuery插件其实就是编写一些新增的方法并将这些方法添加到jQuery的原型对象上。
编写jQuery 插件的步骤
新建一个插件对应的JS文件命名规范jquery.插件名.js在立即执行函数中编写插件这样可以避免插件中的变量与全局变量冲突。在jQuery的原型对象上新增一些的方法。最后在html中导入就可以像使用其他 jQuery对象方法一样使用了到此就开发完一个jQuery的插件了。
案例开发一个 jquery.showlinklocation.js 的插件。
功能让网页上所有的a标签文本的后面追加对应的域名地址。
;(function(window, $) {// 1.在jquery的原型上添加了一个 showlinklocation// $.fn.showlinklocation function() {// console.log(this) // jQuery对象// this.append((http://www.liujun.com))// }// 2.需要过滤出a元素// $.fn.showlinklocation function() {// console.log(this) // jQuery对象// this.filter(a).append((http://www.liujun.com))// }// 3.需要遍历a元素$.fn.showlinklocation function() {console.log(this) // jQuery对象this.filter(a).each(function() {var $a $(this) // DOM Elementvar link $a.attr(href)$a.append((${link}))})return this}//
})(window, jQuery)!DOCTYPE html
html langen
headmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial-scale1.0titleDocument/title
/head
bodyul idlist classpanelli classli-1li-1/lili classli-2li-2/lili classli-3li-3/lili classli-4li-4/lili classli-5li-5/li/ula hrefhttps://www.jd.com京东商城/aa hrefhttps://www.taobao.com淘宝商城/aa hrefhttps://www.biyao.com必要商城/ascript src../libs/jquery-3.6.0.js/scriptscript src./utils/jquery.showlinklocation.js/scriptscript// 1.监听文档完全解析完成$(function() {$(a).showlinklocation().css(color, red)})/script
/body
/html
