jquery插件扩展的学习
2024-10-12 17:40:49
jquery插件的学习可以点击这里
举个例子
//首先先来一个插件
(function($){
$.fn.extent({
bigfont:function(){
return this.css('fontSize':"30px")
}
})
})(jQuery)
<p class='p1'>好好学习天天向上</p>
运行
jquery的插件机制
jquery.extent方法的重载，如$.each,$.ajax的功能
举个例子
<p>2+1=?<p>
运行
关于extent的重载的深入学习
$.extent([deep],obj1,obj2,obj3)
//deep: 可选。如果设为true，则递归合并。
// target: 待修改对象。
// object1: 待合并到第一个对象的对象。
// objectN: 可选。待合并到第一个对象的对象。
//举个例子
运行
//举个例子
运行
//举个例子
运行
插件的另外的写法
//(1)
!function($){
//do something
}(jQuery);
(function($){
//do something
})(jQuery)
插件实例
//闭包限定命名空间
(function ($) {
$.fn.extend({
"highLight": function (options) {
var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
this.each(function () { //这里的this 就是 jQuery对象
//遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom
//根据参数来设置 dom的样式
$this.css({
backgroundColor: opts.background,
color: opts.foreground
});
});
}
});
//默认参数
var defaluts = {
foreground: 'red',
background: 'yellow'
};
})(window.jQuery);
//闭包限定命名空间
(function ($) {
$.fn.extend({
"highLight": function (options) {
//检测用户传进来的参数是否合法
if (!isValid(options))
return this;
var opts = $.extend({}, defaluts, options); //使用jQuery.extend 覆盖插件默认参数
return this.each(function () { //这里的this 就是 jQuery对象。这里return 为了支持链式调用
//遍历所有的要高亮的dom,当调用 highLight()插件的是一个集合的时候。
var $this = $(this); //获取当前dom 的 jQuery对象，这里的this是当前循环的dom
//根据参数来设置 dom的样式
$this.css({
backgroundColor: opts.background,
color: opts.foreground
});
//格式化高亮文本
var markup = $this.html();
markup = $.fn.highLight.format(markup);
$this.html(markup);
});
}
});
//默认参数
var defaluts = {
foreground: 'red',
background: 'yellow'
};
//公共的格式化 方法. 默认是加粗，用户可以通过覆盖该方法达到不同的格式化效果。
$.fn.highLight.format = function (str) {
return "" + str + "";
}
//私有方法，检测参数是否合法
function isValid(options) {
return !options || (options && typeof options === "object") ? true : false;
}
})(window.jQuery);
最新文章
- iOS 组件化方案探索
- iOS视频边下边播--缓存播放数据流
- 四:分布式事务一致性协议paxos通俗理解
- 常用排序算法集合-C实现
- 特卖电商俏物悄语或面临破产 ihush域名夭折？:域名新闻:域名门户:eName.CN
- 命令版本git 分支篇-----不断更新中
- findhex
- magento 由于Httpd进程增多，导致CPU占用100%问题
- 利用svn的补丁文件打包生成增量文件
- 如何删除新添加的项目Module
- play framework系列之maven 构建
- 用Qemu搭建x86_64学习环境
- rabbitmq的简单介绍一
- eclipse如何优化构建的速度
- PageViewController和UIPageControl
- 微信小程序—day05
- FL2440 Linux-3.0内核触摸屏的支持
- java程序——随机数求和
- eclipse自动提示功能没了的解决办法
- sun.misc.BASE64Encoder()编码有换行符需要手动去除passwordEncode.replace("\n","");