位置: 编程技术 - 正文

快速掌握jQuery插件开发(jquery插件怎么用到自己的网站)

编辑:rootadmin

推荐整理分享快速掌握jQuery插件开发(jquery插件怎么用到自己的网站),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:如何使用jquery插件,jquery插件怎么用到自己的网站,jquery插件的使用方法,简单的jquery插件实例,jquery插件怎么用到自己的网站,jquery插件怎么用到自己的网站,jquery插件怎么写,jquery插件怎么写,内容如对您有帮助,希望把文章链接给更多的朋友!

在实际开发工作中,总会碰到像滚动,分页,日历等展示效果的业务需求,对于接触过jQuery以及熟悉jQuery使用的人来说,首先想到的肯定是寻找现有的jQuery插件来满足相应的展示需求。目前页面中常用的一些组件,都有多种jQuery插件可供选择,网络上也有很多专门收集jQuery插件的网站。利用jQuery插件确实可以给我们的开发工作带来便捷,但是如果只是会简单使用,而对其中的原理不甚了解,那么在使用过程中碰到问题或者对插件进行定制开发时就会有诸多疑惑。本文的目的就是可以快速了解jQuery插件的开发原理以及掌握jQuery开发的基本技能。

进行jQuery插件开发前,首先要知道两个问题:什么是jQuery插件?jQuery插件如何使用?

第一个问题,jQuery插件就是用来扩展jQuery原型对象的一个方法,简单来说就是jQuery插件是jQuery对象的一个方法。其实回答了第一个问题,也就知道第二个问题的答案了,jQuery插件的使用方式就是jQuery对象方法的调用。

我们先看个例子:$("a").css("color","red")。我们知道每个jQuery对象都会包含jQuery中定义的DOM操作方法,这里使用$方法来选择a元素,返回一个a元素的jQuery对象,这个对象就可以使用jQuery中定义的DOM操作方法。那么jQuery对象是如何获取这些方法的呢?其实jQuery内部定义了一个jQuery.fn对象,查看jQuery源码可以发现jQuery.fn=jQuery.prototype,也就是说jQuery.fn对象是jQuery的原型对象,jQuery的DOM操作方法都在jQuery.fn对象上定义的,然后jQuery对象就可以通过原型继承这些方法。

基础版jQuery插件

知道了上面这些知识,我们就可以来写一个简单的jQuery插件。假如我现在需要一个jQuery插件用来改变标签内容颜色,就可以按下面的方式来实现这个插件:

然后按下面的方式来使用插件:

$("p").changeStyle("red");

插件调用的时候,插件内部的this就是当前调用插件的jQuery对象,这样的话每个使用$()方法选择的标签,在调用changeStyle()插件时都会使用css()方法重设color样式。

满足链式调用的jQuery插件

链式调用时jQuery的一大特色,一个通用的插件应该遵循jQuery风格,满足链式调用要求。实现链式调用的方式也很简单:

然后使用的时候就可以链式调用其他方法了:

$("p").changeStyle("red").addClass("red-color");

实现链式调用的关键点就一行代码return this,插件中加了这行代码,那么在插件执行完之后,就会把当前的jQuery对象返回,然后就可以在插件方法后面继续调用其它jQuery方法。

防止$符号污染的jQuery插件

快速掌握jQuery插件开发(jquery插件怎么用到自己的网站)

有很多js库都会使用$符号,虽然jQuery可以使用jQuery.noConflict()方法交出$符号的使用权,但是如果定义插件的时候,使用$.fn对象来定义的,那么这些插件使用的时候就会受到其它使用$变量的js库的影响。对于这种情况,我们可以使用立即执行函数通过传参的方式封装插件。形式如下:

因为使用了立即执行函数,所以此时的$只属于这个立即执行函数的函数作用域,这样就可以避免$符号的污染。

可以接受参数的jQuery插件

继续上面的例子,假如我还想为这个插件添加一个设置标签元素内容文字大小的功能,那么我可以这么来实现:

上面这种插件传参方式适用于参数比较少的情况,如果需要传给插件内部的参数比较多,我们可以定义一个参数对象,然后把需要传给插件的参数放在参数对象中。插件定义时如下:

使用方式:$("p").changeStyle({colorStr:"red",fontSize:});

把参数放到一个对象中传给插件还有一个好处就是我们可以在插件内部为一些参数定义一些缺省值,例如:

上面的代码用到了$.extend方法,这个方法在这里的用法就是合并两个对象,即把后面一个对象的存在的属性值赋值给第一个对象,具体用法可以参考这里。$.extend方法还有一种作用是用来扩展jQuery对象本身。

这样定义的插件,我们在使用时如果不传fontSize,那么使用这个插件的jQuery对象标签的内容会被设置成默认的px。

使用方式:$("p").changeStyle({colorStr:"red"});

注意:在为插件定义默认参数时,一定要把默认参数写在插件方法内部,这样默认参数的作用域就在插件内部。

总结

定义插件的方式除了上面说的用$.fn来定义,还有另外一种方式来定义插件,那就是使用$.fn.extend方法。类似下面的写法:

PS:$.extend方法和$.fn.extend方法都可以用来扩展jQuery功能,通过阅读jQuery源码我们可以发现这两个方法的本质区别,那就是$.extend方法是在jQuery全局对象上扩展方法,$.fn.extend方法是在$选择符选择的jQuery对象上扩展方法。所以扩展jQuery的公共方法一般用$.extend方法,定义插件一般用$.fn.extend方法。

参考资料

How to Create a Basic Plugin

jQuery实现鼠标悬停3d菜单展开动画效果 竖直的主菜单贴着页面左侧,当光标移入菜单项时,以3D动画的方式弹出对应的二级菜单。采用jQuery和CSS3实现。支持Chrome,火狐,Edge等浏览器。效果图

ajax与json 获取数据并在前台使用简单实例 用ajax获取后台数据,返回json数据,怎么在前台使用呢?后台if(dataType=="SearchCustomer"){intID;if(Int.TryParse(CustomerID,outID)){strings=GridComputer.GridCustomer.getCustomer(

ajax 提交数据到后台jsp页面及页面跳转问题 ajax提交数据到后台jsp页面及页面跳转问题我logincheck.jsp页面取传参数代码:Stringuser=request.getParameter("user1");Stringpwd=request.getParameter("pwd1");login.jspinput取2参

标签: jquery插件怎么用到自己的网站

本文链接地址:https://www.jiuchutong.com/biancheng/370612.html 转载请保留说明!

上一篇:EasyUi 打开对话框后控件赋值及赋值后不显示的问题解决办法(easyui点击弹出窗口)

下一篇:详解NODEJS基于FFMPEG视频推流测试(nodejs bff)

  • 电子税务局能查到个税申报信息吗
  • 销项税额和进项税额发票怎么区别
  • 为职工垫付的水电费应计入
  • 处置无形资产属于经营活动吗
  • 银行日记账期初余额写在什么科目
  • 民非企业是否可以盈利
  • 其他应收款重分类
  • 本期缴纳上期应纳税额是自动生成的吗?
  • 社保稽查公司提供不了会计分录怎么办
  • 期间费用的控制方法主要有
  • 税收筹划的具体方法有哪些
  • 保证金存款余额
  • 计提工资数大于实际支付数怎么办?
  • 应纳税所得额数学
  • 企业出口收汇核销怎么处理?
  • 成本核算会计科目包括
  • 小规模时取得的专票在一般纳锐人之后可以抵扣吗
  • 设立独立核算的销售机构的筹划
  • 安装属于劳务报酬吗
  • 高新企业国家补助收入怎么入账
  • 不动产测绘费谁交
  • 政府减免税款如何做账
  • 开了百分之五的票怎么办
  • 计提其他应收款坏账
  • 到期一次还本付息的利息怎么算
  • 设备安装公司如何经营
  • 如何修复在感情中受的伤害
  • 稿酬所得怎么纳税
  • 合并报表抵消分录实例
  • 差旅费是否可以所得税前扣除
  • 微信公众号 h5 保存openid
  • 摊余成本等于什么
  • .exe是什么文件
  • 贴现会不会损害所有者权益
  • 运城盐湖中国死海养生城
  • 资产负债表中各项目的期末数应根据各账户
  • 房屋出租一定要签合同吗
  • 信托融资放在哪个科目
  • vue组件引入外部js
  • 消耗品算什么科目
  • php中删除文件的函数
  • el-upload上传文件携带参数
  • stm32f103教程
  • react错误处理
  • php多选
  • 企业收到土地回收怎么办
  • js必学知识点
  • 收到购置税完税通知书
  • 印花税减免退回会计分录
  • dedecms上传视频
  • 门诊收费票据能重新打印吗
  • 简易征收预缴税款
  • 其他应付款的会计编码
  • 一次性伤残补助金怎么查询进度
  • 成本核算的意义与作用
  • 酒店没有营业执照开业犯法吗
  • 个体户所得税税率多少
  • 管理费用多计提了怎么冲
  • 结转收入会计分录怎么做
  • 计提工会经费如何扣除
  • 减免的费用怎么做账
  • centos7.6无法远程
  • mysqldump备份数据库不完整
  • 双击盘符弹出属性
  • macbookair无响应
  • centos7内存占用大
  • 优麒麟 apk
  • linux定时任务实现原理
  • 电脑win10显卡驱动
  • cocos creator 资源加密
  • 用dos杀毒的一个软件
  • 深入理解ffmpeg pdf
  • vue3.0diff
  • 基于JAVASCRIPT实现的可视化工具是
  • javascript中的原型和原型链
  • bootstrap怎么用
  • 国家医保平台查不到住院记录
  • 税务局开蔬菜普票需要几个点
  • 买下中国需要多少钱?
  • 我国税收征收机关包括
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设