jQuery的主体如下:
(function(){ ……})();
对于Javascript基础不太好好的人来说比较奇怪。实际上，这个表达式声明了一个匿名函数（第一个括号），然后再执行它（第二个括号）。在这个函数中，完成了jQuery一系列方法和对象的定义。第24行很关键，
复制代码 代码如下:
jQuery = window.jQuery = window.$ = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
}
在这里，定义了十分强大的$函数。$其实是jQuery的一个别名。jQuery才是“正宗”的jQuery函数，$的定义只是为了减少程序员的打字量。$很容易和其他库冲突，例如著名的prototype库也使用了这个名字。不过jQuery和其他库冲突的机会就少多了，因此使用jQuery 要比$安全的多。下面再说冲突的问题。再看return的对象fn的定义，第35行
复制代码 代码如下:
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) { …… }, ……
};
很显然fn只是一个jQuery的原型的简写而已。其中定义了一个init函数。实际上，init充当的是jQuery的构造函数的角色。当我们使用var i=$(‘selector')这样的代码的时候，可以发现变量i被jQuery包裹起来了，也就是i带上了jQuery.fn的方法。很明显，i的prototype被指向了jQuery.fn。再Javascript的世界里，可以说，i是jQuery的一个实例，你尝试下 i instanceof jQuery,返回的是true。然而，这里并没有用 i=new $(selector); 我估计，$是如此常用的一个函数，如果每次都要使用new来构造一个对象的话，那也太麻烦了，这就是init存在的理由，$本身被定义为一个很简单的函数，它内部仅有一行代码，返回一个init对象。我们每调用一次$(selector)方法，都返回一个jQuery对象。有点工厂模式的味道。当然，如果你对Javascript比较熟悉，就会知道这样是不够的，我们需要把init的prototype设为jQuery.fn，代码541行：
jQuery.fn.init.prototype = jQuery.fn;
到540行为止，都是定义的jQuery的原型对象，用OO语言的话说，相当于实例方法，从540行开始，定义了一系列jQuery的方法，相当于静态方法。至此，抛开方法的具体实现不谈（有些实在是太困难了），jQuery的结构基本上是明了的了。下面开始介绍扩展。
扩展jQuery首先要注意的就是避免命名冲突，尤其是抢手的$。考虑周到的jQuery设计了一个jQuery.noConflict()方法，使得jQuery可以拱手让出$符号，避免和其他库冲突，而程序员可以使用完整的符号jQuery来调用jQuery提供的方法。noConflict()的实现简单而巧妙，顺便看一下，首先在第21行，
// Map over the $ in case of overwrite
_$ = window.$,jQuery首先记录下windows.$，注意这行代码的运行时间非常早，在jQuery任何函数执行之前就会被执行。当然，这里的_$也有冲突的可能，不过概率是在是太小了，谁会用这么诡异的名字作为关键的变量呢。此时如果$已经被其他库占用，它的值会保留在_$中，在任何时候，只要调用jQuery.noConflict方法，619行，其代码如下：
复制代码 代码如下:
noConflict: function( deep ) {
window.$ = _$;
if ( deep )
window.jQuery = _jQuery;
return jQuery;
},
这样，$就又还回去了。
作为插件开发者，我们无法保证$是否被拱手相让，最保险的是调用jQuery方法，然而有一个技巧可以保留简单的$而不影响其他部分，那就是:
复制代码 代码如下:
(function($){
// plugin code goes here, you can use $ safely.
})(jQuery);
关于插件的js文件的命名，一般是jquery.pluginname.js。
要扩展jQuery工具函数（静态函数）是很容易的，下面一个例子实现一个将数字扩展成固定位数的字符串的函数。
复制代码 代码如下:
(function($) {
$.toFixedWidth = function(value, length, fill) {
var res = value.toString();
if (!fill) fill = 0;
var padding = length - res.length;
if (padding < 0) {
res = res.substr(-padding);
} else {
for (var n = 0; n < padding; n++)
res = fill + res;
}
return res;
}
})(jQuery);
要编写包装集的方法也同样容易，下面实现一个使表单元素只读的方法：
复制代码 代码如下:
$.fn.setReadOnly = function(readonly) {
return this.find('input:text').attr('readonly', readonly).css('opacity', readonly ? 0.5 : 1.0);
}
下面编写一个小页面测试下，这个页面模拟的是订单提交页面，如果用户需要发票，需要填写发票信息，否则不能填写发票信息。
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Extension</title>
<script src="/UploadFiles/2021-04-02/jquery-1.3.2.js"><script src="jquery.yinzixin.js"><script type="text/javascript">
$(function() {
$('#OrderID').val($.toFixedWidth('123', 8));
$('#InvoiceRequired').click(function() {
$('.InvoiceInfo').setReadOnly(!this.checked);
});
$('.InvoiceInfo').setReadOnly(false);
}
);
</script>
</head>
<body>
<form>
Order ID:<input type="text" id="OrderID" /> <br />
<input type="checkbox" id="InvoiceRequired" />Invoice Required<br />
<div class="InvoiceInfo">
Inovice Tilte:<input type="text" id="Text1" />
Invoice Content:<input type="text" id="Text2" />
</div>
<input type="button" value="Submit" />
</form>
</body>
</html>
(function(){ ……})();
对于Javascript基础不太好好的人来说比较奇怪。实际上，这个表达式声明了一个匿名函数（第一个括号），然后再执行它（第二个括号）。在这个函数中，完成了jQuery一系列方法和对象的定义。第24行很关键，
复制代码 代码如下:
jQuery = window.jQuery = window.$ = function( selector, context ) {
// The jQuery object is actually just the init constructor 'enhanced'
return new jQuery.fn.init( selector, context );
}
在这里，定义了十分强大的$函数。$其实是jQuery的一个别名。jQuery才是“正宗”的jQuery函数，$的定义只是为了减少程序员的打字量。$很容易和其他库冲突，例如著名的prototype库也使用了这个名字。不过jQuery和其他库冲突的机会就少多了，因此使用jQuery 要比$安全的多。下面再说冲突的问题。再看return的对象fn的定义，第35行
复制代码 代码如下:
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) { …… }, ……
};
很显然fn只是一个jQuery的原型的简写而已。其中定义了一个init函数。实际上，init充当的是jQuery的构造函数的角色。当我们使用var i=$(‘selector')这样的代码的时候，可以发现变量i被jQuery包裹起来了，也就是i带上了jQuery.fn的方法。很明显，i的prototype被指向了jQuery.fn。再Javascript的世界里，可以说，i是jQuery的一个实例，你尝试下 i instanceof jQuery,返回的是true。然而，这里并没有用 i=new $(selector); 我估计，$是如此常用的一个函数，如果每次都要使用new来构造一个对象的话，那也太麻烦了，这就是init存在的理由，$本身被定义为一个很简单的函数，它内部仅有一行代码，返回一个init对象。我们每调用一次$(selector)方法，都返回一个jQuery对象。有点工厂模式的味道。当然，如果你对Javascript比较熟悉，就会知道这样是不够的，我们需要把init的prototype设为jQuery.fn，代码541行：
jQuery.fn.init.prototype = jQuery.fn;
到540行为止，都是定义的jQuery的原型对象，用OO语言的话说，相当于实例方法，从540行开始，定义了一系列jQuery的方法，相当于静态方法。至此，抛开方法的具体实现不谈（有些实在是太困难了），jQuery的结构基本上是明了的了。下面开始介绍扩展。
扩展jQuery首先要注意的就是避免命名冲突，尤其是抢手的$。考虑周到的jQuery设计了一个jQuery.noConflict()方法，使得jQuery可以拱手让出$符号，避免和其他库冲突，而程序员可以使用完整的符号jQuery来调用jQuery提供的方法。noConflict()的实现简单而巧妙，顺便看一下，首先在第21行，
// Map over the $ in case of overwrite
_$ = window.$,jQuery首先记录下windows.$，注意这行代码的运行时间非常早，在jQuery任何函数执行之前就会被执行。当然，这里的_$也有冲突的可能，不过概率是在是太小了，谁会用这么诡异的名字作为关键的变量呢。此时如果$已经被其他库占用，它的值会保留在_$中，在任何时候，只要调用jQuery.noConflict方法，619行，其代码如下：
复制代码 代码如下:
noConflict: function( deep ) {
window.$ = _$;
if ( deep )
window.jQuery = _jQuery;
return jQuery;
},
这样，$就又还回去了。
作为插件开发者，我们无法保证$是否被拱手相让，最保险的是调用jQuery方法，然而有一个技巧可以保留简单的$而不影响其他部分，那就是:
复制代码 代码如下:
(function($){
// plugin code goes here, you can use $ safely.
})(jQuery);
关于插件的js文件的命名，一般是jquery.pluginname.js。
要扩展jQuery工具函数（静态函数）是很容易的，下面一个例子实现一个将数字扩展成固定位数的字符串的函数。
复制代码 代码如下:
(function($) {
$.toFixedWidth = function(value, length, fill) {
var res = value.toString();
if (!fill) fill = 0;
var padding = length - res.length;
if (padding < 0) {
res = res.substr(-padding);
} else {
for (var n = 0; n < padding; n++)
res = fill + res;
}
return res;
}
})(jQuery);
要编写包装集的方法也同样容易，下面实现一个使表单元素只读的方法：
复制代码 代码如下:
$.fn.setReadOnly = function(readonly) {
return this.find('input:text').attr('readonly', readonly).css('opacity', readonly ? 0.5 : 1.0);
}
下面编写一个小页面测试下，这个页面模拟的是订单提交页面，如果用户需要发票，需要填写发票信息，否则不能填写发票信息。
复制代码 代码如下:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery Extension</title>
<script src="/UploadFiles/2021-04-02/jquery-1.3.2.js"><script src="jquery.yinzixin.js"><script type="text/javascript">
$(function() {
$('#OrderID').val($.toFixedWidth('123', 8));
$('#InvoiceRequired').click(function() {
$('.InvoiceInfo').setReadOnly(!this.checked);
});
$('.InvoiceInfo').setReadOnly(false);
}
);
</script>
</head>
<body>
<form>
Order ID:<input type="text" id="OrderID" /> <br />
<input type="checkbox" id="InvoiceRequired" />Invoice Required<br />
<div class="InvoiceInfo">
Inovice Tilte:<input type="text" id="Text1" />
Invoice Content:<input type="text" id="Text2" />
</div>
<input type="button" value="Submit" />
</form>
</body>
</html>
标签：
jQuery,扩展,插件开发
免责声明：本站文章均来自网站采集或用户投稿，网站不提供任何软件下载或自行开发的软件！
如有用户或公司发现本站内容信息存在侵权行为，请邮件告知！ 858582#qq.com
狼山资源网 Copyright www.pvsay.com
暂无“jQuery 学习第七课 扩展jQuery的功能 插件开发”评论...
苹果官宣WWDC 2024！预计会有大批AI功能 - 2024/11/16
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
3月27日消息，苹果宣布2024年全球开发者大会（WWDC）将于6月10日至6月14日举行，巧合的是，这次大会与端午假期重合。
苹果官方表示：
在线参加 Apple 每年规模最大的开发者盛会。亲眼见证 Apple 最新平台、技术和工具的发布。了解如何创建和改进你的 App 和游戏。与 Apple 设计师和工程师互动交流，与全球开发者社区建立联系。以上活动均免费在线举行。
探索各种新的工具、框架和功能，助力你打造出理想的 App 和游戏。通过视频讲座学习新技能，与 Apple 专家进行一对一会面，以推进你的项目，完善你的构思。
Swift Student Challenge 旨在支持和鼓舞下一代开发者、创作者和企业家。太平洋时间 3 月 28 日，我们将公布今年的获奖者名单。获奖者将有资格参加在 Apple Park 举办的特别活动。我们还会选出 50 名杰出获胜者，他们将受邀前往库比提诺，获得为期三天的非凡体验，包括参加 Apple Park 的特别活动。
RTX 5090要首发 性能要翻倍！三星展示GDDR7显存
三星在GTC上展示了专为下一代游戏GPU设计的GDDR7内存。
首次推出的GDDR7内存模块密度为16GB，每个模块容量为2GB。其速度预设为32 Gbps（PAM3），但也可以降至28 Gbps，以提高产量和初始阶段的整体性能和成本效益。
据三星表示，GDDR7内存的能效将提高20%，同时工作电压仅为1.1V，低于标准的1.2V。通过采用更新的封装材料和优化的电路设计，使得在高速运行时的发热量降低，GDDR7的热阻比GDDR6降低了70%。