jquery插件写法 jquery拼接html正确写法
大家好，今天小编来为大家解答jquery插件写法这个问题，jquery拼接html正确写法很多人还不知道，现在让我们一起来看看吧！
如何封装jquery插件
前言
如今做web开发，jquery几乎是必不可少的，就连vs神器在2010版本开始将Jquery及ui内置web项目里了。至于使用jquery好处这里就不再赘述了，用过的都知道。今天我们来讨论下jquery的插件机制，jquery有着成千上万的第三方插件，有时我们写好了一个独立的功能，也想将其与jquery结合起来，可以用jquery链式调用，这就要扩展jquery，写成插件形式了，如下面就是一个简单扩展Jquery对象的demo：
//sample:扩展jquery对象的方法，bold()用于加粗字体。
(function($){
$.fn.extend({"bold": function(){///<summary>
///加粗字体
///</summary>
return this.css({ fontWeight:"bold"});
}
});
})(jQuery);
调用方式：
这是一个非常简单的扩展。接下来我们一步步来解析上面的代码。
一、jquery的插件机制
为了方便用户创建插件，jquery提供了jQuery.extend()和jQuery.fn.extend()方法。
1. jQuery.extend()方法有一个重载。
jQuery.extend(object),一个参数的用于扩展jQuery类本身，也就是用来在jQuery类/命名空间上增加新函数，或者叫静态方法，例如jQuery内置的 ajax方法都是用jQuery.ajax()这样调用的，有点像“类名.方法名”静态方法的调用方式。下面我们也来写个jQuery.extend(object)的例子：
//扩展jQuery对象本身 jQuery.extend({"minValue": function(a, b){///<summary>
///比较两个值，返回最小值
///</summary>
return a< b? a: b;
},"maxValue": function(a, b){///<summary>
///比较两个值，返回最大值
///</summary>
return a> b? a: b;
}
});//调用
var i= 100; j= 101; var min_v=$.minValue(i, j);// min_v等于 100
var max_v=$.maxValue(i, j);// max_v等于 101
重载版本：jQuery.extend([deep], target, object1,[objectN])
用一个或多个其他对象来扩展一个对象，返回被扩展的对象。
如果不指定target，则给jQuery命名空间本身进行扩展。这有助于插件作者为jQuery增加新方法。
如果第一个参数设置为true，则jQuery返回一个深层次的副本，递归地复制找到的任何对象。否则的话，副本会与原对象共享结构。
未定义的属性将不会被复制，然而从对象的原型继承的属性将会被复制。
参数
deep:可选。如果设为true，则递归合并。
target:待修改对象。
object1:待合并到第一个对象的对象。
objectN:可选。待合并到第一个对象的对象。
示例1：
合并 settings和 options，修改并返回 settings。
var settings={ validate: false, limit: 5, name:"foo"};
var options={ validate: true, name:"bar"};
jQuery.extend(settings, options);
结果：
settings=={ validate: true, limit: 5, name:"bar"}
示例2：
合并 defaults和 options,不修改 defaults。
var empty={};
var defaults={ validate: false, limit: 5, name:"foo"};
var options={ validate: true, name:"bar"};
var settings= jQuery.extend(empty, defaults, options);
结果：
settings=={ validate: true, limit: 5, name:"bar"}
empty=={ validate: true, limit: 5, name:"bar"}
这个重载的方法，我们一般用来在编写插件时用自定义插件参数去覆盖插件的默认参数。
jQuery.fn.extend(object)扩展 jQuery元素集来提供新的方法（通常用来制作插件）。
首先我们来看fn是什么东西呢。查看jQuery代码，就不难发现。
jQuery.fn= jQuery.prototype={
init: function( selector, context){.....};
};
原来 jQuery.fn= jQuery.prototype，也就是jQuery对象的原型。那jQuery.fn.extend()方法就是扩展jQuery对象的原型方法。我们知道扩展原型上的方法，就相当于为对象添加”成员方法“，类的”成员方法“要类的对象才能调用，所以使用jQuery.fn.extend(object)扩展的方法，jQuery类的实例可以使用这个“成员函数”。jQuery.fn.extend(object)和jQuery.extend(object)方法一定要区分开来。
二、自执行的匿名函数/闭包
1.什么是自执行的匿名函数?
它是指形如这样的函数:(function{// code})();
2.疑问为什么(function{// code})();可以被执行,而function{// code}();却会报错?
3.分析
(1).首先,要清楚两者的区别:(function{// code})是表达式, function{// code}是函数声明.
(2).其次, js"预编译"的特点: js在"预编译"阶段,会解释函数声明,但却会忽略表式.
(3).当js执行到function(){//code}();时,由于function(){//code}在"预编译"阶段已经被解释过, js会跳过function(){//code},试图去执行();,故会报错;
当js执行到(function{// code})();时,由于(function{// code})是表达式, js会去对它求解得到返回值,由于返回值是一个函数,故而遇到();时,便会被执行.
另外，函数转换为表达式的方法并不一定要靠分组操作符()，我们还可以用void操作符，~操作符，!操作符……
例如：
bootstrap框架中的插件写法：
!function($){
//do something;
}(jQuery);
和
(function($){
//do something;
})(jQuery);是一回事。
匿名函数最大的用途是创建闭包（这是JavaScript语言的特性之一），并且还可以构建命名空间，以减少全局变量的使用。
例如：
var a=1;
(function()(){
var a=100;
})();
alert(a);//弹出 1
更多闭包和匿名函数可查看Javascript的匿名函数与自执行这篇文章。
三、一步一步封装JQuery插件
接下来我们一起来写个高亮的jqury插件
1.定一个闭包区域，防止插件"污染"
//闭包限定命名空间(function($){
})(window.jQuery);
2.jQuery.fn.extend(object)扩展jquery方法，制作插件
//闭包限定命名空间(function($){
$.fn.extend({"highLight":function(options){//do something}
});
})(window.jQuery);
3.给插件默认参数，实现插件的功能
//闭包限定命名空间(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(){
$("p").highLight();//调用自定义高亮插件});
这里只能直接调用，不能链式调用。我们知道jQuey是可以链式调用的，就是可以在一个jQuery对象上调用多个方法，如：
$('#id').css({marginTop:'100px'}).addAttr("title","测试“);
但是我们上面的插件，就不能这样链式调用了。比如：$("p").highLight().css({marginTop:'100px'});//将会报找不到css方法，原因在与我的自定义插件在完成功能后，没有将 jQuery对象给返回出来。接下来，return jQuery对象，让我们的插件也支持链式调用。（其实很简单，就是执行完我们插件代码的时候将jQuery对像return出来，和上面的代码没啥区别）
jquery mobile按钮写法有哪些
按钮是标准的HTML锚和输入元素的编码，通过jQuery移动的增强，使其更具吸引力和可移动设备上的。采用锚链接（一个元素）的导航按钮标记，并提交表单输入按钮元素。
为了容易的样式化按钮，Jquery Mobile自动把type为submit,reset,button或image的按钮元素或输入元素样式化为按钮，所以没有必要增加data-role="button"的属性。基于表单(form-based)的按钮的原始按钮(input)是隐藏的，但是依然保留其标记。当一个按钮的点击事件触发时，也会在原始的表单按钮上触发点击事件。
按钮事件create( event, ui)创建按钮触发的事件event：是第一个参数。类型：事件。ui：是第二个参数。类型：对象。//初始化按钮，并且创建指定的回调函数$(".selector").buttonMarkup({ create: function( event, ui){}});//给按钮，绑定一个事件监听器$(".selector").on("buttoncreate", function( event, ui){});
按钮方法disable()禁用表单按钮此方法不接受任何参数$("[type='submit']").button("disable");$(".selector").buttonMarkup("disable"); enable()启用禁用表单按钮此方法不接受任何参数$("[type='submit']").button("enable");$(".selector").buttonMarkup("enable"); refresh()更新的表单按钮此方法不接受任何参数如果你操作一个表单按钮通过java script，你必须调用Refresh方法上更新的视觉风格$("[type='submit']").button("refresh");$(".selector").buttonMarkup("refresh");
按钮选项corners圆角类型:布尔值默认值: true如果设置为真，将主题应用于按钮边界半径。此选项也可以通过 data-corners="false"的属性设置.//使用编程方式设置$("a").buttonMarkup({ corners: false});//在HTML中使用data-corners="false"的属性设置<a rel="external nofollow" href="#" data-role="button" data-corners="false">No rounded corners</a>与角选项指定初始化buttonMarkup$(".selector").buttonMarkup({ corners: false});初始化后，获取或设置选项的圆角。// gettervar corners=$(".selector").buttonMarkup("option","corners"
主题按钮 data-theme在白色图标后的半透明的黑色圆圈确保了在任何背景色下图片都能够清晰显示，也使它能很好的工作在Jquery Mobile主题系统中。以下是一些在不同主题样式下图标按钮的例子"A"主题下的图标按钮 data-theme="a"<div data-role="content"><div data-role="controlgroup" data-type="horizontal"><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-role="button" data-icon="bars" data-iconpos="notext" data-theme="a" data-inline="true">My button</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-role="button" data-icon="edit" data-iconpos="notext" data-theme="a" data-inline="true">My button</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-role="button" data-icon="arrow-l"
分组按钮 data-role=controlgroup有时候，你想把一组按钮放进一个单独的容器内，使他们看起来想一个独立的导航部件。你可以把一组按钮包裹在一个容器内，然后给该容器添加 data-role="controlgroup"属性，Jquery Mobile会创建一个垂直的按钮组，删除掉按钮间的margin和阴影，然后只在第一个按钮和最后一个按钮产生圆角，使他们看起来是一组按钮。<div data-role="controlgroup"><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-role="button">Yes</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-role="button">No</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-role="button">Maybe</a></div>水平排列 data-type="horizontal"默认情况下，组按钮表现为垂直列表，如果给容器添加 data-type="horizontal"的属性，则可以转换为水平按钮的列表，按钮会横向一个挨着一个地水平排列，并设置只有足够大以适应内容的宽
内联按钮 data-inline=true默认情况下，在体内含量的所有按钮都称为块级元素，所以他们填补了屏幕的宽度。但是，如果你想让按钮外观紧凑，宽度只符合里面的文字和icon，那就给按钮添加data-inline="true"的属性。如果你有多个按钮，应该肩并肩地坐在同一行，将data-inline="true"的属性为每个按钮。这将风格的按钮将其内容的宽度和浮动按钮让他们坐在同一条直线上。<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-role="button" data-inline="true">Cancel</a><a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-role="button" data-inline="true" data-theme="b">Save</a>添加 data-mini="true"对内联按钮创建一个更紧凑的版本:
给按钮添加图标 data-iconjQuery Mobile框架包括一组选定的图标移动应用程序通常需要。尽量减少下载大小，jQuery Mobile包含一个单一的白色图标的精灵，和自动添加一个半透明的黑圈背后的图标来确保它有任何背景颜色对比度好。一个图标，可以通过添加一个对锚杆指定要显示的图标数据图标属性添加到一个按钮。例如，下面的标记：<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-role="button" data-icon="delete">Delete</a>迷你版添加 data-mini="true"属性图标样式列表jQuery Mobile自带很多按钮小图标，如下图所示：左箭头：data-icon="arrow-l"右箭头：data-icon="arrow-r"上箭头：data-icon="arrow-u"下箭头：data-icon="arrow-d"删除：data-icon="delete"添加：data-icon="Plus"减少：data-icon="minus"检查：data-icon="Ch
创建按钮 data-role=button给HTML元素添加 data-role="button"属性。jQuery Moble就会给此元素增强为按钮样式。 Jquery Mobile框架包含了一组最常用的移动应用程序所需的图标，为了减少下载的大小，Jquery Mobile包含的是的白色的图标sprite图片，并自动在图标后添加一个半透明的黑圈以确保在任何背景色下图片都能够清晰显示。样式链接按钮在一个网页的主要内容块，你可以样式的任何锚链接为按钮添加 data-role="button"属性。该框架将加强与标记和类的链接方式链接按钮。例如，这个标记：<a rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" href="index.html" data-role="button">Link button</a>注：风格像按钮链接都相同的视觉选择的按钮下面的真正形成，但也有一些重要的差异。基于链接的按钮，按钮是插件，不仅使用基本的button标记插件生成按钮的风格，所以窗体按钮方法（启用，禁用，刷新）不支持。如果你需要禁用基于链接的按钮（或元素），它可能申请伤残等级的UI残疾人自己用java script实现相同的效果。迷你版 data-mini="true"一个更紧凑的版本，在工具栏和紧空间是有用的，添
vue.js和jquery的区别
首先对这他们两个做一个简单的介绍，Vue.js（读音/vjuː/,类似于 view）是一个构建数据驱动的 web界面的渐进式框架。Vue.js的目标是通过尽可能简单的 API实现响应的数据绑定和组合的视图组件。
Query是一个快速、简洁的JavaScript框架，是继Prototype之后又一个优秀的JavaScript代码库（或JavaScript框架）。jQuery设计的宗旨是“write Less，Do More”，即倡导写更少的代码，做更多的事情。
两者的主要区别：1、在build/webpack.dev.conf.js和build/webpack.prod.conf.js中配置即可。2、在模块中使用的时候代码如下：plugins:[//这里是需要导入的插件列表，定意思jquery为全局参数newwebpack.ProvidePlugin({$:'jquery',jquery:'jquery','window.jQuery':'jquery',jQuery:'jquery'})]也可以使用import的这种写法：importjQueryfrom'jQuery'ready:function(){varself=this;jQuery(window).resize(function(){self.$refs.thisherechart.drawChart();})},
好了，文章到此结束，希望可以帮助到大家。