重庆分公司,新征程启航
为企业提供网站建设、域名注册、服务器等服务
Jquery的扩展方法原型是:
我们拥有10年网页设计和网站建设经验,从网站策划到网站制作,我们的网页设计师为您提供的解决方案。为企业提供成都网站制作、做网站、外贸营销网站建设、微信开发、成都小程序开发、移动网站建设、H5建站、等业务。无论您有什么样的网站设计或者设计方案要求,我们都将富于创造性的提供专业设计服务并满足您的需求。
extend(dest,src1,src2,src3...);
它的含义是将src1,src2,src3...合并到dest中,返回值为合并后的dest,由此可以看出该方法合并后,是修改了dest的结构的。如果想要得到合并的结果却又不想修改dest的结构,可以如下使用:
var newSrc=$.extend({},src1,src2,src3...)//也就是将"{}"作为dest参数。
这样就可以将src1,src2,src3...进行合并,然后将合并结果返回给newSrc了。如下例:
var result=$.extend({},{name:"Tom",age:21},{name:"Jerry",sex:"Boy"})
那么合并后的结果
result={name:"Jerry",age:21,sex:"Boy"}
本文实例讲述了jQuery扩展实现text提示还能输入多少字节的方法。分享给大家供大家参考,具体如下:
1.添加jQuery自定义扩展
$(function($){
//
tipWrap:
提示消息的容器
//
maxNumber:
最大输入字符
$.fn.artTxtCount
=
function(tipWrap,
maxNumber){
var
countClass
=
'js_txtCount',
//
定义内部容器的CSS类名
fullClass
=
'js_txtFull',
//
定义超出字符的CSS类名
disabledClass
=
'disabled';
//
定义不可用提交按钮CSS类名
//
统计字数
var
count
=
function(){
var
val
=
lenFor($.trim($(this).val()));
if
(val
=
maxNumber){
tipWrap.html('span
class="'
+
countClass
+
'"\u8FD8\u80FD\u8F93\u5165
strong'
+
(maxNumber
-
val)
+
'/strong
\u4E2A\u5B57\u8282/span');
}else{
tipWrap.html('span
class="'
+
countClass
+
'
'
+
fullClass
+
'"\u5DF2\u7ECF\u8D85\u51FA
strong'
+
(val
-
maxNumber)
+
'/strong
\u4E2A\u5B57\u8282/span');
};
};
$(this).bind('keyup
change',
count);
return
this;
};
});
获取字节数函数
var
lenFor
=
function(str){
var
byteLen=0,len=str.length;
if(str){
for(var
i=0;
ilen;
i++){
if(str.charCodeAt(i)255){
byteLen
+=
3;
}
else{
byteLen++;
}
}
return
byteLen;
}
else{
return
0;
}
}
2.实例化
script
type="text/javascript"
//
demo
$(function($){
//
批量
$('.autoTxtCount').each(function(){
$(this).find('.text1').artTxtCount($(this).find('.tips'),
108);
});
});
/script
3.相应的html结构
div
class="form-group"
div
class="col-sm-9"
label
class="col-sm-1
control-label"
for="form-field-1"
内容:
/label
/div
/div
div
style="padding-left:100px;"
id="autoTxtCount"
class="autoTxtCount
form-group"
div
textarea
class="text1"
name="content"
cols="50"
rows="3"!--{$aData.content}--/textarea
/div
div
span
class="tips"/span
/div
/div
4.一些样式
#autoTxtCount
{
width:500px;
}
#autoTxtCount
.help,
#autoTxtCount
.help
a
{
color:#999;
}
#autoTxtCount
.tips
{
color:#999;
padding:0
5px;
}
#autoTxtCount
.tips
strong
{
color:#1E9300;
}
#autoTxtCount
.tips
.js_txtFull
strong
{
color:#F00;
}
#autoTxtCount
textarea.text1
{
width:474px;
}
效果如下:
更多关于jQuery相关内容可查看本站专题:《jQuery扩展技巧总结》、《jQuery字符串操作技巧总结》、《jQuery操作xml技巧总结》、《jQuery常见经典特效汇总》、《jquery选择器用法总结》及《jQuery常用插件及用法总结》
希望本文所述对大家jQuery程序设计有所帮助。
1.下载好jquery扩展的MXP文件:jQuery_API.mxp。打开已安装好的dreamweaver编辑器,找到安装扩展的菜单,这里有三种途径可选:①在dreamweaver的菜单栏找到“命令”→“扩展管理”②在dreamweaver的菜单栏找到“帮助”→“扩展管理”③在windows的开始菜单找到dreamweaver的扩展管理器,micromediaextensionmanager:3.打开的扩展管理器如下图所示:4.点击右上角的“安装新扩展”按钮,要求选择下载的扩展文件,然后点击安装,就已经开始安装了,并提示如下:5.选择接受,提示安装成功,显示如下:6、至此安装结束。二使用扩展功能要想使用所安装的扩展,安装完了可别完了重新启动一下dreamweaver,使dreamweaver能够识别所安装的扩展。
两种,一个种是扩展到对象层面的。一种是扩展到 选择器函数对象层面的。
jQuery.extend({
alert: function(){
//dosomething
}
});//对象层面。通过$.alert();这样调用
jQuery.fn.extend({
alert: function(){
//dosomething
}
});//选择器层面。通过$("选择器表达式").alert();这样调用
选择器与过滤器
jQuery的选择器和过滤器允许开发者在网页上识别和收集自己希望操作的元素。尽管jQuery已经内置了节点名、ID和class的标准选择器,但开发者还可以添加伪类(pseudo-class)选择器(扩展CSS定义的伪类),从而提供一致和简洁的方式来过滤前一个选择结果。开发者也可以添加集合过滤器,它可以获取到前一个选择器得到的整个集合以及每个元素在集合中的位置。第3章将会介绍如何创建这些选择器。
通过创建一个自定义选择器,开发者可以把整个选择的逻辑统一在一个地方,使它更容易在其他地方被重用,也保证了在整个项目中都有一致的实现。同时,这些选择器也更容易维护。当修改缺陷或者增加功能时,修改结果马上就能应用到各实例上。
集合插件
集合插件是可以应用在选择器返回的元素集合上的函数。这种函数就是大多数人所说的jQuery插件,它们也是第三方插件最大的构成部分。集合插件提供的功能从简单的属性修改,到通过监听元素上的事件来改变行为,再到用一个新的实现方法替换原来的整个组件。只有想不到,没有做不到。
第4章将讲解一系列插件开发的原则。第5章将讲解作者自己所使用的插件开发框架,以及它是如何实现这些原则的。这些原则概括了开发插件的一些最佳实践,使插件在降低与其他代码耦合度的情况下,更好地与jQuery进行集成。
插件开发中很重要的一点就是测试它的功能,使用单元测试工具可以使开发者更加容易、一致地测试代码,以保证它们如期运行。当开发者的代码准备好发布时,它需要被打包,这样就能更加容易地被其他人获取并整合入他们的项目中。开发者还需要提供一个网页来演示插件的功能,这样目标用户就能看到它能做什么以及是怎样工作的。为了让其他人更加了解自己的插件,开发者还必须为插件的每个方面都提供文档。第7章将会介绍这些方面。
函数插件
函数插件是一些不直接操作元素集合的工具函数。它们在jQuery的框架上提供了额外的功能,而且通常使用jQuery原生的功能来完成它们的职责。第6章将会详细介绍如何添加工具函数。
这些函数插件的例子包括向控制台发送调试信息以监控代码运行,或是获取和设置页面cookie值。把这些功能制作成一个jQuery插件,可以为用户提供一个熟悉的代码调用方式,并且降低了与外部代码相互影响的可能性。之前提及的原则中,有一部分也会被应用到这类插件中,比如测试、打包、演示以及书写文档。
jQuery UI小部件(Widget)
jQuery UI是一个用户界面交互、特效、小部件以及主题的集合,构建在jQuery JavaScript库之上()。它定义了一个小部件开发框架,从而允许开发者用一致的方式来创建插件,并且可以用一些现成的主题来设计界面风格。第8章将介绍小部件框架以及如何用它来创建自己的组件。
jQuery UI小部件框架同样遵循第4章中的插件开发原则,并且以一致的方式为所有jQuery UI小部件提供公共功能。基于这个框架来开发插件时,开发者就自动获得了这些内置的功能,从而只需要专注于开发插件独有的功能。如果开发者把ThemeRoller中定义的主题应用到自己的小部件上,它将马上与其他 jQuery UI 组件融为一体。如果开发者重新应用一个主题,它们的外观都会跟着变化。
许多jQuery UI小部件都依赖鼠标拖动来完成它们的功能,jQuery UI团队已经意识到这种交互方式的重要性。不用从头开始,开发者只需要使自已的小部件扩展jQuery UI的鼠标模块,并设置一些自定义的条件,就可以支持鼠标拖动,这样就可以专注于小部件本身功能的开发。第9章将介绍如何使用鼠标模块来创建依赖鼠标操作的小部件。
jQuery UI特效
jQuery UI也提供了一组可以应用在页面元素上的特效。开发者可以使用其中一些来隐藏或显现元素,比如blind(隐藏)、clip(裁剪)、fold(折叠)和slide(幻灯片)。有些可以用来吸引注意,比如highlight(高亮)和pulsate(跳动)。开发者也可以定义自己的特效,并且像使用内置特效一样使用它。第 10 章将介绍如何创建新的UI特效。
动画属性
jQuery提供了一个动画框架,开发者可以将其应用在任何数值类型的元素属性上。它允许开发者把属性从一个值变化到另一个值,并且可以控制这个过程的持续时间和步长。但是,如果开发者想动画的属性不是一个简单的数值类型,就需要自己来实现这个功能了。比如,jQuery UI提供了一个可以变幻颜色的动画模块。第 11 章将为复杂类型的属性创建一个动画。
Ajax处理
jQuery的Ajax功能是它的一个明显优势,它使加载和处理远程数据变得十分简单。开发者可以在Ajax调用时指定期望返回的数据类型:简单文本、HTML、XML、JSON。当远程调用返回结果时,后台会有一个转换过程把字节流转换为开发者期望的格式。开发者可以添加自己的转换逻辑,从而通过识别开发者指定的特殊格式直接进行转换。第12章将详细介绍如何扩展Ajax处理来直接处理一个通用文件格式。
事件处理
jQuery的事件处理功能允许开发者在元素上附加多个事件处理器,用来响应用户交互、系统事件以及自定义触发器。jQuery提供了几个让开发者创建自己的事件定义和触发点的钩子,使代码与现有功能一致。第13章将介绍如何实现一个新的事件,用来更容易地与鼠标交互。
验证规则
Jörn Zaefferer开发的验证插件被广泛地用来在客户端验证提交到服务器之前的用户输入。尽管这个插件不属于jQuery内核功能,但它也提供了一些可以用来创建自定义验证规则,并将其应用在现有流程里的扩展点。第 14 章将介绍如何创建自己的验证规则以及把它们与内置的行为进行集成。
jQuery是js的一个框架,是封装的js的一些常用函数。 而jQuery插件很明显就是基于jQuery的一些扩展函数。也就是你自己经常用的函数通过jQuery提供的接口进行封装,就变成了基于jQuery的插件了。 也就是说jQuery的插件是jQuery库的一个延伸!