jquery插件下载，js扩展插件免费下载

各位老铁们好，相信很多人对jquery插件下载都不是特别的了解，因此呢，今天就来为大家分享下关于jquery插件下载以及js扩展插件免费下载的问题知识，还望可以帮助大家，解决大家的一些困惑，下面一起来看看吧！

jquery表格插件哪个

大多数前端er都把网页中的table标签替换为div，主要就是因为div要比table更容易添加CSS样式。但是我们在日常应用中仍然要用到table表格，其中最好的例子就是对照表。今天彬Go将向大家推荐15个jQuery表格插件让你对数据表格进行显示、排序、筛选和操控。如jQuery表格排序插件、jQuery表格拖拽插件、jQuery树形表格插件、设置颜色、点击、替换等效果。

1.DataTables-强大的jQuery表格插件

datatables-jquery-插件

DataTables是提供了大量特性的强大jQuery表格插件。例如:你可以自动轻松筛选、Ajax预读取数据、分页、列排序、高亮排序列、扩展插件支持、使用CSS或jQuery UI ThemeRoller定制主题和完整文档。

2.uiTableFilter-jQuery表格过滤插件

ui-table-filter-jquery-插件

uiTableFilter是一个用于表格行筛选的jQuery插件。插件作者提供了详细的例子来告诉大家如何将自己的表格和插件整合在一起并完成表格筛选。

3.Scrollable HTML Table-jQuery表格滚动插件

scrollable-html-table-jquery

Scrollable HTML Table jQuery插件可以让你的表格变得可以滚动控制。

买空间、服务器就上主机网（CNIDC.COM）虚拟主机评测+IDC导航=IDC123.COM。

4.Tablesorter-jQuery表格排序插件

tablesorter-jquery-插件

Tablesorter这个jQuery插件是用来将一个包含thead和tbody标签的标准HTML表格转变为无页面刷新的可排序表格。它不但支持多列排序，而且跨浏览器兼容并且能通过widget系统进行扩展。

5.Flexigrid-Web2.0 jQuery表格插件

flexigrid-jquery

Flexigrid是一个轻量级的Web2.0 jQuery插件。它包含很多非常Cool的特性，如主题定制、分页、工具栏、搜索、排序、ajax读取数据源、调整列宽高尺寸等。

6.HeatColor-jQuery表格颜色插件

heatcolor-jquery

HeatColor可以让你根据元素的值来为元素设置颜色。它的值的比对时根据预设的一个范围来进行比较，最后对他们自动进行颜色值的设置。

买空间、服务器就上主机网（CNIDC.COM）虚拟主机评测+IDC导航=IDC123.COM。

7.JQTreeTable-jQuery树形表格插件

jqtreetable-jquery

使用JQTreeTable插件你可以得到一个树形表格，如果用户的浏览器禁用了JavaScript，那么他们也能看到普通形式的表格，并不影响可访问性。

8.Ingrid-jQuery表格插件

ingrid-jquery-表格-插件

Ingrid是另一个数据表jQuery插件。它也有很多特性，比如列调整尺寸、排序、行列添加样式等。在作者网站提供了很棒的文档来告诉大家如何从头使用这个jQuery表格插件。

9.jQuery ColumnManager plugin

jquery-column-manager-jquery-表格插件

columnManager是可以控制任意表格列显示或隐藏的jQuery插件，而且它可以保存当前表格的状态至你下次访问。这个jQuery插件非常小巧轻量，仅3.6kb。

买空间、服务器就上主机网（CNIDC.COM）虚拟主机评测+IDC导航=IDC123.COM。

10.jQuery treeTable-jQuery树形表格插件

jquery-treetable-树形表格插件

jQuery treeTable是小型的JQTreeTable,它也能让你的table显示成树形结构.这个插件也可以在浏览器禁用JavaScript时保持文档整洁并让原始table可以使用.

11.CSV2Table-CSV格式读取表格插件

csv2table-jQuery表格插件

CSV2Table可以读取CSV文件，它从CSV文件中读取内容并创建成table表格.

12.Table Pagination-jQuery表格分页插件

table-pagination-jQuery表格插件

这个jQuery表格分页插件可以在表格下面创建分页元素，你还可以通过各种设置来定制分页。

买空间、服务器就上主机网（CNIDC.COM）虚拟主机评测+IDC导航=IDC123.COM。

13.jQuery TableRowCheckboxToggle

jquery-table-插件

这个jQuery表格插件可以让你再点击表格行的时候改变多选框状态并修改该行CSS样式。

14.Table Drag and Drop jQuery plugin-jQuery表格拖拽插件

这个简单的jQuery插件可以让用户使用拖拽行的方式重新排列表格各行，任意单独行可以设置为不可拖拽和/或不可放置。

15.uiTableEdit

uiTableEdit是由Greg Weber制作的很酷的jQuery表格编辑插件，它允许用户编辑表格内容。

如何封装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插件

在html中引入jquery插件的方法有以下两种：

1：CDN引入，在head标签中加入下列代码

<head>

<scriptsrc=""></script>>

</script>

</head>2：本地引入,这种方法要求本地有jquery.js：

<head>

<scriptsrc="jquery.js"></script>>

</script>

</head>jquery可以到其官网下载，官网地址是www.jquery.com;

JQuery是继prototype之后又一个优秀的Javascript库。它是轻量级的js库，它兼容CSS3，还兼容各种浏览器。推荐使用CDN,许多用户在访问其他站点时，已经从其他加载过 jQuery。所有结果是，当他们访问您的站点时，会从缓存中加载 jQuery，这样可以减少加载时间。同时，大多数 CDN都可以确保当用户向其请求文件时，会从离用户最近的服务器上返回响应，这样也可以提高加载速度。同时推荐使用百度CDN，因为其他的比如谷歌和微软的CDN不可用！

jquery插件下载和js扩展插件免费下载的问题分享结束啦，以上的文章解决了您的问题吗？欢迎您下次再来哦！