怎样在Vue.js中使用jquery插件
安装 jQuery 和 cropper.js
# install jQuery & cropper
$ npm install jquery cropper –save
为jquery和Vue自定义指令配置webpack
为webpack配置添加jquery和Vue自定义指令的映射。
通常webpack已经引入了完整的jquery版本，但还是建议再一次引入一下。
您可以看到Vue的webpack模板已经添加到组件的文件夹中。我通常会添加很多其他文件夹像自定义指令，mixin等等。在这个例子中，我们只添加了自定义指令。
这将帮助我们引入依赖关系而无需知道其确切的路径。这也是有益的在你重构你的应用的时候。你也并不需要管理相对路径。
把下面高亮部分添加到build/webpack.base.conf文件中。
resolve: {
extensions: [’’, ’.js’, ’.vue’],
fallback: [path.join(__dirname, ’../node_modules’)],
alias: {
’src’: path.resolve(__dirname, ’../src’),
’assets’: path.resolve(__dirname, ’../src/assets’),
’components’: path.resolve(__dirname, ’../src/components’),
’jquery’: path.resolve(__dirname, ’../node_modules/jquery/src/jquery’),
’directives’: path.resolve(__dirname, ’../src/directives’)
}
},
用jquery插件实现pdf文件的在线预览，大概是怎么个思路
其实也就是简单的在浏览器中实现一个打开pdf文件，并有类似预览功能的边框。
其实在中国上经常见到类似的页面，在浏览器中打开pdf文档，可大部分都是由于版权的原因使用了一些很特殊的技术，自然很难模仿了。
即使有直接在浏览器打开的例子，也必须手动点击一下链接然后才能打开pdf文件。如何直接打开，而不用点击链接呢？
本以为自己对js很熟，也就使用js模拟点击，可就是不管用，没办法，只能在中国上继续寻找资料。最终想不到代码却很简单。
最主要的是使用到了一个jquery的插件jquery.media.js，使用这个插件就很容易实现了。
核心代码：
河套西部一次局地大暴雨成因分析 使用jquery.media.js就可以直接把一个连接到pdf文件的链接打
如何封装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 插件详解
jQuery 如何写插件 –
jQuery插件的开发包括两种：
一种是类级别的插件开发，即给jQuery添加新的全局函数，相当于给jQuery类本身添加方法。jQuery的全局函数就是属于jQuery命名空间的函数，另一种是对象级别的插件开发，即给jQuery对象添加方法。下面就两种函数的开发做详细的说明。
1、类级别的插件开发
类级别的插件开发最直接的理解就是给jQuery类添加类方法，可以理解为添加静态方法。典型的例子就是$.AJAX()这个函数，将函数定义于jQuery的命名空间中。关于类级别的插件开发可以采用如下几种形式进行扩展：
1.1
添加一个新的全局函数
添加一个全局函数，我们只需如下定义：
jQuery.foo =
function() {
alert(’This is a test. This is only a
test.’);
};
1.2
增加多个全局函数
添加多个全局函数，可采用如下定义：
Java代码 收藏代码
jQuery.foo = function() {
alert(’This is a test. This is
only a test.’);
};
jQuery.bar =
function(param) {
alert(’This function takes a
parameter, which is “’ + param + ’“.’);
};
调用时和一个函数的一样的:jQuery.foo();jQuery.bar();或者$.foo();$.bar(’bar’);
1.3
使用jQuery.extend(object);
jQuery.extend({
foo:
function() {
alert(’This is a test. This is
only a test.’);
},
bar: function(param)
{
alert(’This function takes a
parameter, which is “’ + param +’“.’);
}
});
1.4
使用命名空间
虽然在jQuery命名空间中，我们禁止使用了大量的javaScript函数名和变量名。但是仍然不可避免某些函数或变量名将于其他jQuery插件冲突，因此我们习惯将一些方法封装到另一个自定义的命名空间。
jQuery.myPlugin =
{
foo:function()
{
alert(’This is a test. This is only a
test.’);
},
bar:function(param)
{
alert(’This function takes a parameter, which is “’ + param +
’“.’);
}
};
采用命名空间的函数仍然是全局函数，调用时采用的方法：
$.myPlugin.foo();
$.myPlugin.bar(’baz’);
通过这个技巧（使用独立的插件名），我们可以避免命名空间内函数的冲突。
2、对象级别的插件开发
对象级别的插件开发需要如下的两种形式：、
形式1：
(function($){
$.fn.extend({
pluginName:function(opt,callback){
// Our plugin implementation code goes
here.
}
})
})(jQuery);
形式2：
(function($)
{
$.fn.pluginName = function()
{
// Our plugin implementation code goes here.
};
})(jQuery);
上面定义了一个jQuery函数,形参是$，函数定义完成之后,把jQuery这个实参传递进去.立即调用执行。这样的好处是,我们在写jQuery插件时,也可以使用$这个别名,而不会与prototype引起冲突.
2.1
在JQuery名称空间下申明一个名字
这是一个单一插件的脚本。如果你的脚本中包含多个插件，或者互逆的插件（例如：
$.fn.doSomething() 和
$.fn.undoSomething()），那么你需要声明多个函数名字。但是，通常当我们编写一个插件时，力求仅使用一个名字来包含它的所有内容。我们的示例插件命名为“highlight“
$.fn.hilight
= function() {
// Our plugin implementation
code goes
here.
};
我们的插件通过这样被调用：
$(’#myDiv’).hilight();
但是如果我们需要分解我们的实现代码为多个函数该怎么办？有很多原因：设计上的需要；这样做更容易或更易读的实现；而且这样更符合面向对象。这真是一个麻烦事，把功能实现分解成多个函数而不增加多余的命名空间。出于认识到和利用函数是javascript中最基本的类对象，我们可以这样做。就像其他对象一样，函数可以被指定为属性。因此我们已经声明“hilight”为jQuery的属性对象，任何其他的属性或者函数我们需要暴露出来的，都可以在“hilight“
函数中被声明属性。稍后继续。
2.2
接受options参数以控制插件的行为
让我们为我们的插件添加功能指定前景色和背景色的功能。我们也许会让选项像一个options对象传递给插件函数。例如：
// plugin definition
$.fn.hilight =
function(options) {
var defaults = {
foreground:
’red’,
background:
’yellow’
};
//
Extend our default options with those provided.
var
opts = $.extend(defaults, options);
// Our
plugin implementation code goes here.
};
我们的插件可以这样被调用：
$(’#myDiv’).hilight({
foreground: ’blue’
});
2.3
暴露插件的默认设置
我们应该对上面代码的一种改进是暴露插件的默认设置。这对于让插件的使用者更容易用较少的代码覆盖和修改插件。接下来我们开始利用函数对象。
//
plugin definition
$.fn.hilight =
function(options) {
// Extend our default options with those
provided.
// Note that the first arg to extend is an
empty object –
// this is to keep from overriding our
“defaults“ object.
var opts = $.extend({},
$.fn.hilight.defaults, options);
// Our
plugin implementation code goes here.
};
// plugin
defaults – added as a property on our plugin function
$.fn.hilight.defaults = {
foreground: ’red’,
background: ’yellow’
};
现在使用者可以包含像这样的一行在他们的脚本里：
//这个只需要调用一次，且不一定要在ready块中调用
$.fn.hilight.defaults.foreground
=
’blue’;
接下来我们可以像这样使用插件的方法，结果它设置蓝色的前景色：
$(’#myDiv’).hilight();
如你所见，我们允许使用者写一行代码在插件的默认前景色。而且使用者仍然在需要的时候可以有选择的覆盖这些新的默认值：
//
覆盖插件缺省的背景颜色
$.fn.hilight.defaults.foreground = ’blue’;
// …
//
使用一个新的缺省设置调用插件
$(’.hilightDiv’).hilight();
// …
//
通过传递配置参数给插件方法来覆盖缺省设置
$(’#green’).hilight({
foreground:
’green’
});
jquery插件库一般怎么使用
jQuery的插件使用方法具体步骤如下：
一、调用库文件
使用jQuery必须链接jQuery的库文件，无论是压缩版还是正常版，必须至少在网页中链接一个，如：
《script type=“text/javascript“ src=“jquery.js“》《/script》
二、调用Jquery插件
应用做好的jQuery插件效果。
比如jQuery官网制作的插件jQuery，在使用它时不仅要链接库文件，还要链接UI文件以及UI的CSS文件，如：
《link href=“
jquery 插件怎么使用
1.使用script标签加载jquery框架
2.使用script标签加载插件
3.看插件是否有api，如果有的话按照api调用
4.如果没有api，就自己看源码
一般来说jquery插件的调用方法都是
$(’element’).plugName(param);
其中element是你用选择选择的要执行插件方法的对象，plugName是你插件中的方法名称，param是插件方法的参数。
当然，也有的插件不是这样调用的，也有的插件是需要你在html标签中加入以下class。
具体还是要看你用的插件的api
如何编写一个面向对象的jQuery插件
jquery插件开发模式
jquery插件一般有三种开发方式：
通过$.extend()来扩展jQuery
通过$.fn 向jQuery添加新的方法
通过$.widget()应用jQuery UI的部件工厂方式创建
第一种$.extend()相对简单，一般很少能够独立开发复杂插件，第三种是一种高级的开发模式，本文也不做介绍。第二种则是一般插件开发用到的方式，本文着重讲讲第二种。
插件开发
第二种插件开发方式一般是如下定义
$.fn.pluginName = function() {
//your code here
}
插件开发，我们一般运用面向对象的思维方式
例如定义一个对象
var Haorooms= function(el, opt) {
this.$element = el,
this.defaults = {
’color’: ’red’,
’fontSize’: ’12px’,
’textDecoration’:’none’
},
this.options = $.extend({}, this.defaults, opt)
}
//定义haorooms的方法
haorooms.prototype = {
changecss: function() {
return this.$element.css({
’color’: this.options.color,
’fontSize’: this.options.fontSize,
’textDecoration’: this.options.textDecoration
});
}
}
$.extend({}, this.defaults, opt)有{}主要是为了创建一个新对象，保留对象的默认值。
$.fn.myPlugin = function(options) {
//创建haorooms的实体
var haorooms= new Haorooms(this, options);
//调用其方法
return Haorooms.changecss();
}
调用这个插件直接如下就可以
$(function() {
$(’a’).myPlugin({
’color’: ’#2C9929’,
’fontSize’: ’20px’
});
})
jquery插件开发有几种
//类级别插件开发，主要是在jQuery中定义全局方法：
//第一种写法
jQuery.myFunc = function(str){
alert(“直接在jquery中定义方法“,str)
}
//调用方式 $.myFunc(“hello!“);
//第二种写法
jQuery.extend({
myFunc:function(str){
alert(“extend扩展$的方法“,str)
}
})
//调用方式 $.myFunc(“hello!“);
//第三种写法： 为了不污染全局，挂载一个对象作为命名空间，自定义的所有方法放在这里，保证jQuery全局安全。
jQuery.define={
myFunc:function(str){
alert(“命名空间的写法“,str)
}
}
//调用方式：$.define.myFunc(“hello“);
//以上三种是级别插件开发方式，不常用，从调用方式看出，他们是全局执行的，不需要绑定节点对象。
//对象级别插件开发：有规范模板
;(function($){
$.fn.plugin = function(options){
var defaults = {
//各种默认参数
}
var options = $.extend(defaults,options); //传入的参数覆盖默认参数
this.each(function(){
var _this = $(this); //缓存一下插件传进来的节点对象。
//执行内容
})
return $(this); //把节点对象返回去，为了支持链式调用。
}
})(jQuery);
//调用方式
$(“selector“).plugin({
//自定义参数，json格式
})
如何使用jquery插件lightbox
1.Lightbox_me插件功能
用于显示弹出层
2.Lightbox_me官方地址
在网页的下面有演示地址和常用属性。
3.Lightbox_me使用方法
1.首先引用jquery.js与jquery.lightbox_me.js
《script src=“/ref/jquery-1.7.2.min.js“》《/script》
《script src=“/ref/lightbox_me/jquery.lightbox_me.js“》《/script》
2.使用的代码
《script type=“text/javascript“》
$(function() {
$(’#login’).click(function(e) {
$(’#loginbox’).lightbox_me({
centered: true,
onLoad: function() {
$(’#loginbox’).find(’input:first’).focus()
}
});
e.preventDefault();
});
$(’#cancel’).click(function(){
$(’#loginbox’).trigger(’close’);
//alert(’aaa’);
});
});
《/script》
4.Lightbox_me修改样式
弹出层的样式修改非常简单，只需要会使用css就可以了。例如一下代码：
#loginbox{
width:400px;
display:none;
background:white;
border:1px solid #ccc;
}
body {
font-size:12px;
font-family:微软雅黑;
}
.loginbox-title {
background: #eef2f7;
border-bottom: 1px solid #ccc;
margin-bottom:10px;
padding:8px 0;
font-size:14px;
text-align:center;
}
.loginbox-footer{
padding:8px 0;
border-top:1px solid #ccc;
text-align:center;
background:#eef2f7;
}
table {
width:98%;
margin:0 8px;
}
th, td {
padding:8px 0;
}
th {
text-align:left;
}
.big {
padding:5px 18px;
}
以上所述就是本文的全部内容了，希望大家能够喜欢。