【jQuery】如何添加自定义函数及封装自定义插件_09

儒雅的烤地瓜

已于 2022-07-19 10:46:16 修改

阅读量1k

点赞数 1

分类专栏： # ⭐️ JQuery教程文章标签： jquery javascript 前端框架自定义函数封装插件

于 2022-07-19 10:34:34 首次发布

本文链接：https://blog.csdn.net/sunyctf/article/details/125665104

版权

⭐️ JQuery教程专栏收录该内容

10 篇文章 0 订阅

订阅专栏

❣️ 总结：jQuery简化版函数3大特点

❣️ 总结：$()共有4种

❣️ 总结：知识点提炼

🆙【前文回顾】👉 jQuery之类数组对象操作_08

❣️ 添加自定义函数

1. 何时添加自定义函数

今后，如果想用的功能，jquery没有提供，我们可以向jquery中添加自定义的新函数

2. 如何添加自定义函数

(1). 定义新函数: 只要定义一个新函数，放入jQuery的原型对象中！

jQuery.prototype.新函数=function(){

//强调: this->将来调用这个新函数的.前的子对象

// 如果this继续调用jq简化版函数，

// 不用$()包装，就可直接调用！因为this指向的已经是jquery对象了

}

(2). 调动: 必须用jQuery子对象才能调用

$(...).新函数()

3. 示例: 定义函数，可对找到的所有元素内容求和

11_sum.html

<!DOCTYPE html>
<html>
  <head lang="en">
    <meta charset="UTF-8" />
    <title>自定义函数库myLib.js，为jQuery扩展sum函数，计算找到的所有元素内容的和。</title>
  </head>
  <body>
    <ul>
      <li>85</li>
      <li>91</li>
      <li>73</li>
      <li>59</li>
    </ul>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
      //假设项目中经常需要对查找结果中的所有元素内容求和
      //1. 先在jquery的原型对象中添加一个专门求和的函数
      jQuery.prototype.sum = function () {
        console.log(`调用了一次我们自定义的sum()函数`);
        //获得将来要遍历的查找结果对象
        //this, 且不用$()
        //定义变量准备累加元素内容
        var result = 0;
        //遍历查找结果对象中每个DOM元素
        //因为jquery-1.11.3不支持for of
        //所以，可以each来遍历当前jq查找结果对象中每个DOM元素对象
        //          一个DOM元素对象
        //                      ↓
        this.each(function (i, elem) {
          //获得当前正在遍历的一个DOM元素对象的内容，转为整数，累加到result中
          result += parseInt(elem.innerHTML);
        });
        return result;
      };
      //2. 用新函数sum()对ul下的所有li的内容求和
      var result = $("ul>li").sum();
      console.log(result);
    </script>
  </body>
</html>

运行结果:

❣️ 封装自定义插件

1. 什么是插件/组件

拥有专属的HTML+CSS+JS的可重用的页面上独立的功能区域

2. 为什么封装插件

重用！

3. 何时封装插件

今后只要页面上发现一个可以反复使用的功能区域，都要先封装为插件，再反复使用插件

4. jQuery-UI

jquery官方已经提供了一套非常好用的插件: jquery-ui——了解

(1). 下载: jqueryui.com

(2). 将插件文件保存到项目中对应目录下:

(3). 在页面中引入插件的文件:

(4). 按照插件的要求，编写HTML内容和结构，不用定义任何class！

(5). 找到插件HTML内容的父元素，调用插件函数！

(6). 问题: 逐渐退出历史舞台（😆bootstrap逐渐流行起来）

a. 只有PC端，没有移动端！

b. 所有的样式和行为，都是自动侵入到元素上的，程序员一无所知。所以，几乎不可维护！

😆不像bootstrap每个class都是程序员自己根据需要加到元素上的，也知道每个class的含义与功能

(7). 示例: 使用官方jquery插件实现手风琴效果:

◼️ 12_widget_accordion.html ◼️

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="css/jquery-ui.css">
  <script src="js/jquery-1.11.3.js"></script>
  <script src="js/jquery-ui.js"></script>
 </head>
 <body>
  <h1>jQueryUI：Widgets —— Accordion</h1>
	<div id="my-accordion">
		<div>《西游记》简介</div>
		<div>一个和尚和四个动物的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique nulla voluptas velit minus esse voluptatem illum quis magni nihil sint facilis cupiditate nobis quia ab neque. Modi veniam omnis nisi?	</div>
		<div>《水浒传》简介</div>
		<div>105个男人和三个女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis provident sapiente aperiam reprehenderit repellat rem magnam vel odio quia harum hic impedit dolorem similique ea est consequatur adipisci at nemo!</div>
		<div>《红楼梦》简介</div>
		<div>一个男人和一群女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus minima quidem aspernatur eligendi optio cupiditate minus nam expedita? Aliquid veritatis doloribus maxime vel dicta illo unde iusto qui quasi doloremque.</div>
  </div>
  <script>
    $("#my-accordion").accordion();
  </script>
 </body>
</html>

运行结果：

5. 模仿官方插件的方式，定义一个自定义的插件：

(0). 前提: 插件的功能已经用HTML+CSS+JS实现了！只不过暂时和别的代码混在一起不便于重用而已！所以，封装插件的过程是提取代码的过程！

(1). 将插件涉及的css代码提取到一个独立的css文件中保存

(2). 在独立的js文件中，定义一个插件函数，保存到jQuery的原型对象中。做2件事：

a. 为当前插件父元素及其子元素自动添加对应样式类: 即为元素添加样式(css)

b. 自动添加事件绑定: 即为元素添加行为(js)

6. 使用自定义插件: 同使用jqueryui

(1). 引入插件css和js

(2). 按插件要求编写HTML内容和结构

(3). 找到插件父元素，调用自定义插件函数

7. 示例: 封装自定义手风琴插件:

👉 my-ui/my-ui.css

/*专门保存插件的css样式*/
.accordion{
  width:80%; 
  margin:0 auto;
}
.accordion>.title{
  background:#eee; border:1px soild #aaa;
  padding:6px; font-size:1.5em; 
  font-weight:bold; cursor:pointer;
}
.accordion>.content{
  border-left:1px solid #eee;
  border-right:1px solid #eee;
}
.accordion>:last-child{
  border-bottom:1px solid #eee;
}
.fade{
  height:0;
  opacity:0;
  overflow:hidden;
  transition:all .5s linear;
}
.in{
  height:84px;
  opacity:1;
}

👉 my-ui/my-ui.js

//定义一个插件函数，保存到jquery的原型对象中
jQuery.prototype.myAccordion=function(){
  //1. 为元素自动添加样式: 
  //为当前父元素添加class accordion
  //因为将来是$("#my-accordion").myAccordion()使用函数的，所以
  //this->点前的$("#my-accordion")->当前父元素
  this.addClass("accordion")
  //return 当前父元素
  //为父元素下的所有奇数位置的元素加class title
  .children(":nth-child(2n+1)")
  .addClass("title")
  //return 所有奇数位置的元素
  //为所有奇数位置元素的下一个兄弟元素加class content fade
  .next()
  .addClass("content fade")
  //return 所有奇数位置元素的兄弟
  //为所有奇数位置元素的兄弟中第一个元素加class in
  //新: 想获得任意查找结果中第一个元素，可用: .first()
  .first()
  .addClass("in");
  //2. 为元素添加行为:
  $(".accordion")
  .on("click",".title",e=>
    $(e.target).next(".content").toggleClass("in")
      .siblings(".content").removeClass("in")
  );
}

📦 14_accordion.html ——封装后

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="my-ui/my-ui.css">
  <script src="js/jquery-1.11.3.js"></script>
  <script src="my-ui/my-ui.js"></script>
 </head>
 <body>
  <h1>使用“高度动画”实现“手风琴”组件</h1>
  <div id="my-accordion" >
    <div>《西游记》简介</div>
    <div>一个和尚和四个动物的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique nulla voluptas velit minus esse voluptatem illum quis magni nihil sint facilis cupiditate nobis quia ab neque. Modi veniam omnis nisi? </div>
    <div>《水浒传》简介</div>
    <div>105个男人和三个女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis provident sapiente aperiam reprehenderit repellat rem magnam vel odio quia harum hic impedit dolorem similique ea est consequatur adipisci at nemo!</div>
    <div>《红楼梦》简介</div>
    <div>一个男人和一群女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus minima quidem aspernatur eligendi optio cupiditate minus nam expedita? Aliquid veritatis doloribus maxime vel dicta illo unde iusto qui quasi doloremque.</div>
  </div>
  <script>
    //找到插件的父元素，调用自定义插件函数
    $("#my-accordion").myAccordion();
  </script>
 </body>
</html>

运行结果：

💥 14_accordion.html ——未封装

<!DOCTYPE html>
<html>
 <head>
  <title> new document </title>
  <meta charset="utf-8">
	<style>
		.accordion{width:80%; margin:0 auto;}
		.accordion>.title{
			background:#eee; border:1px soild #aaa;
			padding:6px; font-size:1.5em; 
			font-weight:bold; cursor:pointer;
		}
    .accordion>.content{
      border-left:1px solid #eee;
      border-right:1px solid #eee;
    }
    .accordion>:last-child{
      border-bottom:1px solid #eee;
    }
    .fade{
      height:0;
      opacity:0;
      overflow:hidden;
      transition:all .5s linear;
    }
    .in{
      height:84px;
      opacity:1;
    }
	</style>
 </head>
 <body>
	<h1>使用“高度动画”实现“手风琴”组件</h1>
	<div class="accordion">
		<div class="title">《西游记》简介</div>
		<div class="content fade in">一个和尚和四个动物的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Similique nulla voluptas velit minus esse voluptatem illum quis magni nihil sint facilis cupiditate nobis quia ab neque. Modi veniam omnis nisi?	</div>
		<div class="title">《水浒传》简介</div>
		<div class="content fade">105个男人和三个女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Omnis provident sapiente aperiam reprehenderit repellat rem magnam vel odio quia harum hic impedit dolorem similique ea est consequatur adipisci at nemo!</div>
		<div class="title">《红楼梦》简介</div>
		<div class="content fade">一个男人和一群女人的故事: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Delectus minima quidem aspernatur eligendi optio cupiditate minus nam expedita? Aliquid veritatis doloribus maxime vel dicta illo unde iusto qui quasi doloremque.</div>
	</div>
	<script src="js/jquery-1.11.3.js"></script>
	<script>
		$(".accordion").on("click",".title",e=>
      $(e.target).next(".content").toggleClass("in")
        .siblings(".content").removeClass("in")
    );
	</script>
 </body>
</html>

运行结果:

❣️ 总结：jQuery简化版函数3大特点

1. 自带for循环

2. 一个函数两用

3. 绝大多数函数都会自动返回正在操作的.前的主语jq对象。如果后一句话所需的.前的主语，刚好和前一句话返回的主语相同，则可以直接用.继续操作，不用把.前主语反复写2遍！——链式操作。👉 链式操作具体示例——参看按节点间关系查找之示例7_tabs.html⏫

❣️ 总结：$()共有4种

1. $("选择器") 查找DOM元素，并包装进jQuery对象中

2. $(DOM元素对象) 不用查找，直接将DOM元素包装进jQuery对象中

3. $(`HTML片段`) 创建新元素

4. $(function(){ ... }) 绑定DOMContentLoaded事件处理函数，在DOM内容加载后就自动提前执行！

❣️ 总结：知识点提炼

1. 引入jQuery.js: 2种

(1). 引入项目本地jquery.js文件:

(2). 引入CDN网络中共享的jquery.js文件:

2. 创建jQuery类型子对象: 2种

(1). 只有jQuery类型子对象才能使用jQuery家简化版函数。

DOM家元素对象无权直接使用jQuery家简化版函数。

所以只要使用jQuery家简化版函数，都要先创建jQuery家子对象，其中保存一个要操作的DOM元素对象。

(2). 如何:2种:

a. 查找DOM元素对象，并保存进新创建的jQuery对象中:

var $jq子对象=$("选择器")

b. 不查找，直接将DOM元素对象保存进新创建的jQuery对象中:

var $jq子对象=$(DOM元素对象)

3. 原理:

(1). $=jQuery=new jQuery

(2). jq子对象其实是一个类数组对象，可保存找到的多个DOM元素对象

(3). 对jq子对象调用简化版函数，会被自动翻译为对应的原生DOM的方法和属性。

所以jQuery中的所有简化版函数效果和DOM中原生方法和属性效果一样。

jQuery中的this、e、e.target等，和DOM中的完全一样！

4. jQuery简化版函数3大特点:

(1). 自带for循环: 对整个jquery子对象调用一次简化版函数，等效于对jQuery子对象中保存的每个DOM元素对象分别调用一次对等的DOM原生方法或属性——不用自己写for循环

(2). 一个函数两用: 调用函数时:

a. 没给新值作为参数，默认执行获取旧值的操作

b. 给了新值作为参数，自动切换为执行修改操作

(3). 多数函数都会返回正在操作的.前的主语jq对象——链式操作。

5. 查找元素:

(1). jQuery支持用所以CSS3选择器查找

(2). jQuery新增选择器: (css中不能用)

a. 基本过滤: (下标从0开始)

:first :last :eq(i) :lt(i) :gt(i) :even :odd

b. 内容过滤:

:contains(文本) :has(选择器) :parent :empty

c. 可见性过滤:

:visible :hidden(只能选择display:none和input type="hidden")

d. 表单元素过滤:
:input :text :password :radio :checkbox ... ...

(3).用节点间关系查找: 2大类关系, 8个函数

a. 父子关系：3个函数:

$元素.parent()

$元素.children("选择器")

$元素.find("选择器")

b. 兄弟关系：5个

$元素.prev()

$元素.prevAll("选择器")

$元素.next()

$元素.nextAll("选择器")

$元素.siblings("选择器")

6. 修改元素: 3种:

修改中的所有函数，都是一个函数两用！

(1). 内容: 3种:

a. 原始HTML内容:

$元素.html("新HTML内容") 代替.innerHTML

b. 纯文本内容:

$元素.text("纯文本内容") 代替.textContent

c. 表单元素的值:

$元素.val("新值") 代替.value

(2). 属性: 3种:

a. 字符串类型的HTML标准属性:2种:

1). $元素.attr("属性名","新属性值")

代替元素.getAttribute()和setAttribute()

2). $元素.prop("属性名", bool值)

代替元素.属性名=bool值
b. bool类型的HTML标准属性: 只有1种

$元素.prop("属性名", bool值)

代替元素.属性名=bool值

c. 自定义扩展属性:只有一种:

$元素.attr("属性名","新属性值")

代替元素.getAttribute()和setAttribute()

反过来总结:

$元素.attr()可修改一切字符串类型的属性(字符串类型HTML标准属性+自定义扩展属性)

$元素.prop()可修改一切可用.访问的属性(所有HTML标准属性)

(3). 样式:

a. 获取或修改单个css属性: 只有1种

$元素.css("css属性名", "属性值")

获取属性值时被翻译为getComputedStyle(元素)

修改属性值时被翻译为.style.css属性=属性值

b. 使用class批量修改样式:

$元素.addClass("class名")

$元素.removeClass("class名")

$元素.hasClass("class名")

$元素.toggleClass("class名")

修改相关的函数都可同时修改多个属性值:

$元素.attr或prop或css({

属性名:"属性值",

... : ...

})

7. 添加删除替换克隆元素:

(1). 添加新元素: 2步

a. 使用HTML片段批量创建新元素:

$(`HTML片段`)

b. 将新元素添加到DOM树: 5种方式，10个函数

1). 末尾追加:

$父元素.append($新元素)

    $新元素.appendTo($父元素)
    2). 开头插入: 新增:
    $父元素.prepend($新元素)

$新元素.prependTo($父元素)

3). 插入到一个现有元素之前:

$现有元素.before($新元素)

$新元素.insertBefore($现有元素)

4). 插入到一个现有元素之后:

$现有元素.after($新元素)

$新元素.insertAfter($现有元素)

5). 替换现有元素:

$现有元素.replaceWith($新元素)

$新元素.replaceAll($现有元素)

(2). 删除元素: $元素.remove()

(3). 克隆元素: $元素.clone()

(4). 判断一个元素是否具有什么特征: $元素.is("选择器")

8. 事件绑定:

(1). 标准写法:
$元素.on("事件名", 事件处理函数)

$元素.off("事件名", 原事件处理函数)

(2). 简写: $元素.事件名(事件处理函数)

(3). 事件委托:

$父元素.on("事件名","选择器",function(){

...this指向e.target...

})

9. 事件:

(1). 页面加载后自动执行:

a. 先$(document).ready(function(){})

简写: $(function(){ ... })

b. 后$(window).load(function(){ ... })

(2). 鼠标事件:

mouseenter代替mouseover

mouseleave 代替mouseout

简写: .hover(处理函数1,处理函数2)

等于: .mouseenter(处理函数1)

.mouseleave(处理函数2)

(3). 模拟触发:

a. 标准: $元素.trigger("事件名")

b. 如果属于常用事件列表，可简写为:

$元素.事件名()

10. 动画:

(1). 简单动画: 3种固定效果

a. 显示隐藏:

.show() .hide() . toggle()

b. 淡入淡出:

.fadeIn() .fadeOut() .fadeToggle()

c. 上滑下滑:

.slideUp() .slideDown() .slideToggle()

(2). 万能动画:

$元素.animate({

css属性: 目标值

},动画持续时间,function(){

动画播放结束自动执行

})

(3). 排队和并发:

a. 放在一个animate()中的多个css属性并发变化

b. 放在一个元素的多个animate()中的多个css属性排队变化

(4). 停止动画:

a. 只停止当前一个动画

$元素.stop()

b. 停止队列中所有动画

$元素.stop(true)

(5). 选择器匹配正在播放动画的元素: :animated

11. 类数组对象操作:

(1). 遍历查找结果中每个DOM元素对象:

$查找结果.each(function(i, domElem){ ... })

(2). 查找一个DOM元素在整个查找结果中的下标位置

var i=$查找结果.index(要找的DOM元素)

12. 添加自定义函数: ⏬ 👇

(1). 添加jQuery.fn.自定义函数=function(){ ... }

(2). 调用: $jq对象.自定义函数()

13. 封装自定义插件: ⏬ 👇

(1). 封装:

a. 将css提取到独立的插件.css文件中

b. 在独立js文件中为jquery原型对象添加自定义插件函数

jQuery.prototype.自定义插件函数=function(){

//自动做2件事:

//1. 为插件所在元素及其子元素自动添加class
//2. 将原网页中插件所需的事件绑定代码剪切到插件函数中

}

(2). 使用自定义插件:

a. 引入jquery.js，插件.js，插件.css

b. 按插件要求编写HTML内容，不用加任何class

c. 在自定义js中，查找插件所在元素，调用自定义插件函数

🆕【后文传送门】👉 jQuery中如何发送ajax请求以及解决跨域问题_10

如果这篇【文章】有帮助到你，希望可以给【青春木鱼】点个赞👍，创作不易，相比官方的陈述，我更喜欢用【通俗易懂】的文笔去讲解每一个知识点，如果有对【前端技术】感兴趣的小可爱，也欢迎关注❤️❤️❤️【青春木鱼】❤️❤️❤️，我将会给你带来巨大的【收获与惊喜】💕💕！