【传智播客郑州校区分享】JQ插件机制
JQ插件概述
所谓的jquery插件,其实就是利用jquery语法,完成的一些工具或者模块.jquery插件是jQuery功能的扩展.可以让开发人员能更好更快速的完成某些特定的需求,只需要用很少的代码就能实现很好的效果。
自定义插件
JQ允许自定义插件,对JQ的方法进行扩展.自定义插件主要分两种: JQ元素扩展和JQ本身扩展.
JQ元素扩展:
方法: jQuery.fn.extend(object)
概述
扩展 jQuery 元素集来提供新的方法(通常用来制作插件)。
也就是说,该方法可以用来扩展JQ元素的用法
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery插件机制-jQuery.fn.extend(object)</title> <script type="text/javascript" src="./js/jquery.min.js"></script> </head> <body> <div> 爱好:<input type="checkbox" name="hobby" value="basketball" /> 篮球 <input type="checkbox" name="hobby" value="Football" />足球 <input type="checkbox" name="hobby" value="Volleyball" />排球 <br /> 用户名:<input type="text" name="username" /><br /> </div> <script type="text/javascript"> $.fn.extend({ check: function() { // 扩展一个check方法,该方法是将所有的多选按钮全部选中 this.each(function() { this.checked = true; }); }, userNameText: function() { // 自定义一个userNameText方法,该方法的功能是:将文本框自动赋值,并且字体颜色变为灰色 this.each(function() { this.style.color = "gray"; this.value = "请输入用户名"; }); } }); //注:如果是加上标签内的属性则需要写在[]内 具体使用如下所示 // $("input[type=checkbox]").check(); //将type等于checkbox的多选框全部选中 $("input[name=hobby]").check(); //将name等于hobby的多选框全部选中 $("input[type=text]").userNameText(); //将type等于text的所有文本框自动赋值,并且字体颜色变为灰色 </script> </body> </html>
JQ本身扩展:
方法: jQuery.extend(object)
概述
扩展jQuery对象本身,用来在jQuery命名空间上增加新函数
简单来说就是增加全局函数,也就是 $.函数()
示例
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>JQuery插件机制-jQuery.extend(object)</title> <script type="text/javascript" src="./js/jquery.min.js"></script> </head> <body> <script type="text/javascript"> $.extend({ plus: function(a, b) { return a + b; }, // 给$扩展一个plus方法,用于求两个数的和. minus: function(a, b) { return a - b }, // 给$扩展一个minus方法,用于求两个数的差. multiply: function(a, b) { return a * b }, // 给$扩展一个plus方法,用于求两个数的乘积. max: function(a, b) { return a > b ? a : b; } // 给$扩展一个plus方法,用于求两个数的最大值. }); alert($.plus(2, 3)); //结果5 alert($.minus(2, 3)); //结果-1 alert($.multiply(2, 3)); //结果6 alert($.max(2, 3)); //结果3 </script> </body> </html>
注意事项:
因为所做插件为JQ插件,使用的语法也都是JQ的语法,所以,无论在自定义插件或者使用别人定义好的插件的时候,都要求先引入JQ的js文件,才能正常的使用,切记.
【传智播客郑州校区分享】JQ插件机制相关推荐
- 【传智播客郑州校区分享】MyBatis的架构设计分析
[传智播客郑州校区分享]MyBatis的架构设计分析 MyBatis是目前非常流行的ORM框架,它的功能很强大,然而其实现却比较简单.优雅.本文主要讲述MyBatis的架构设计思路,并且讨论MyBat ...
- 【传智播客郑州校区分享】HTTP/2技术整理
[传智播客郑州校区]HTTP/2技术整理 1. HTTP协议发展 1.1. HTTP的历史 HTTP于1989年正式发布,也就是HTTP/1啦,在经历10年后于1999年更新出了HTTP/1.1,也是 ...
- 【传智播客郑州校区分享】在传智播客郑州校区学习倍感幸运
小李是传智播客郑州校区的一名学员,他大学学的是土木工程,当初报这个专业是觉得毕业后比较好找工作,然而经历四年的学习后才发现很多事情并不是自己想象的那样,但是刚毕业的小李还是不得不去从事与专业相关的工作 ...
- 【传智播客郑州校区分享】AndroidAnnotations框架详解
AndroidAnnotations框架详解 文/传智播客郑州中心就业服务部 简介 在之前的开发中,你肯定用到了xUtils及ButterKnife等依赖注入框架,你可以使用这些框架来简化你的代码,因 ...
- 【传智播客郑州校区分享】数据库MYSQL笔记详解
第1章 数据库 1.1 数据库概述 l 什么是数据库 数据库就是存储数据的仓库,其本质是一个文件系统,数据按照特定的格式将数据存储起来,用户可以对数据库中的数据进行增加,修改,删除及查询操作. l 什 ...
- 【传智播客郑州校区分享】阿里大鱼短信介入demo
下面是关于大鱼短信平台对接的例子,发短信的话,可以用这个,很好用 /** * 通过阿里短信接口发送短信验证码 * * * */ public class SendSmsUtil { private s ...
- 【传智播客郑州校区】辞掉7年工作转行程序员,为了理想在传智播客前行
小何,一位已经工作了7年的白领,生活和工作衣食无忧,是什么原因让她辞掉干了七年的工作,选择到传智播客郑州校区参加培训,成为程序员的呢? 其实做程序员,是小何心里早就存在的想法.大学毕业的时候她很想做程 ...
- 【传智播客郑州】90后大学生到传智播客郑州校区追梦未来
小张来自河南南阳,是一名90后大学生.临近毕业时,小张对自己的前途很迷茫,不知道自己该干什么,能干什么.就在小张茫然无措的时候,传智播客的老师去小张所在的大学宣讲课程.听完传智播客老师讲的三天课程,小 ...
- 深圳php就业,传智播客深圳校区PHP04期毕业15个工作日就业率67.74%
近年来,随着PHP的应用更加广泛.全球有70%的站点在使用PHP开发,它与Linux/Mysql/Apache/Nginx等组成黄金搭档,无论是从成本投入还是从开发周期考虑,PHP都是一个不错的选择. ...
最新文章
- 什么是数据结构,为什么我们需要数据结构?
- DataGrip 2019.2.5 —— MySQL数据表迁移到SQL Server数据表解决方案
- 简单的busybox创建_用Busybox创建文件系统
- 计算机入域时域控用到的端口,【ADDC】域控需要开放的端口
- 降级!调离!取消研究生导师资格!西南交大发布最新通报,多人被问责
- 怎么查询表中BLOB字段的大小
- inner join 重复数据_Ramp;Python Data Science 系列:数据处理(2)
- mysql8.0版本的服务器名称_云服务器Mysql安装配置
- python 中self是怎样的一个参数_Python中self参数是什么?
- 2020美赛F奖论文(一):摘要、绪论和模型准备
- 计算机辅助工程分析及应用论文,毕业论文:《浅谈计算机辅助工程(CAE)》.doc...
- 实验报告(LCS算法和背包算法)
- 中山西路620号 的人才服务中心搬到 梅园路77号去了
- Redis(二) -- redis.conf详解(redis6)
- 淘宝被列入黑名单,确有其事还是另有原因
- ecshop添加多国货币
- webug 4.0 第二关 布尔注入
- 4.3 使用色阶命令调整图像亮度和对比度 [原创Ps教程]
- 转载:web 自动化测试
- UVALive - LED Circuit(Spfa)
热门文章
- zynq-linux 配置WN821(RTL8192)
- 中国房地产很大可能是走日本的路子,如果以作者的研究方式将中国未来走势给一个更详细的推算的话更好!总之很赞的文章! 作者:大个子111 链接:https://xueqiu.com/7620040989
- RPM打包原理spec
- stm32f407读写nfc 门禁源码可以移植到8位单片机
- ganache-cli的安装与使用
- 关于IDEA启动Spring Boot项目出现Caused by: java.lang.NoClassDefFoundError: javax/servlet/ServletContext 	at j
- Python-Django毕业设计大学生兼职平台(程序+Lw)
- Python3自动化打包项目发布到pypi
- 二叉树(C语言实现)——顺序存储结构
- Fast FW54U 54M无线USB网卡 驱动下载