简单的jquery,简单的jquery插件实例

如何写一个简单的jquery插件

：jquery插件开发模式 jquery插件一般有三种开发方式： 通过$.extend()来扩展jQuery 通过$.fn 向jQuery添加新的方法 通过$.widget()应用jQuery UI的部件工厂方式创建 第一种$.extend()相对简单，一般很少能够独立开发复杂插件

成都创新互联公司-专业网站定制、快速模板网站建设、高性价比淮阴网站开发、企业建站全套包干低至880元,成熟完善的模板库,直接使用。一站式淮阴网站制作公司更省心,省钱,快速模板网站建设找我们，业务覆盖淮阴地区。费用合理售后完善，十多年实体公司更值得信赖。

简单的jquery代码

这是封装好的json需要向后台传的值

json的格式为{key1:value1,key2:value2,key3:value3.........}中间用“，”隔开

后台获取key来都到value值

例：{suggest:txt}

这个json只有一个参数，参数名为suggest，值为txt也就是$("input").val()的值

这是jquery的ajax异步操作

我这样讲应该够清楚吧，望采纳……

如何自己开发一个简单的jquery 插件

现在网上关于js和jquery封装的插件很多，我刚刚接触前端的时候，就很敬佩那些自己写插件的大牛们！因为是他们给网站开发更多的便利，很多网页效果，网上很多现成的插件！那么这些插件是如何写的呢看首先是有扎实的js和jquery技术基础，其次还有一些写插件的方法和技巧。关于js和jquery的技术基础，那是一个慢慢积累的过程。但是关于写插件的一些注意和技巧，本文可以略微介绍一下，方便以后写插件的时候用得到。

jquery插件开发模式

jquery插件一般有三种开发方式：

通过$.extend()来扩展jQuery

通过$.fn 向jQuery添加新的方法

通过$.widget()应用jQuery UI的部件工厂方式创建

第一种$.extend()相对简单，一般很少能够独立开发复杂插件，第三种是一种高级的开发模式，本文也不做介绍。第二种则是一般插件开发用到的方式，本文着重讲讲第二种。

Jquery实现显示和隐藏的4种简单方式

Html代码：

复制代码

代码如下:

div

class="topicList"

h3span学习天地/span/h3

ul

li1111111111/li

li2222222222/li

li333333333/li

li4444444444/li

li5555555555/li

li6666666666/li

/ul

/div

Jquery代码：

第一种实现方式：

复制代码

代码如下:

1.

script

type="text/javascript"

$(function(){

$(".topicList

h3").click(function(){

var

UL

=

$(this).next("ul");

if(UL.css("display")=="none"){

UL.css("display","block");

}

else{

UL.css("display","none");

}

});

});

/script

第二种实现方式：

复制代码

代码如下:

2.

script

type="text/javascript"

$(function(){

$(".topicList

h3").toggle(function(){

$(this).next("ul").hide(1000);

},function(){

$(this).next("ul").show(1000);

});

});

/script

第三种实现方式：

可以使用Jquery提供的show和hide来完成带缓动的显示和隐藏效果，由于两个方法相似，可以直接使用toggle来完成。

复制代码

代码如下:

3.

script

type="text/javascript"

$(function(){

$(".topicList

h3").toggle(function(){

$(this).next("ul").css("display","none");

},function(){

$(this).next("ul").css("display","block");

});

});

/script

第四种实现方式：

toggle如果有两个参数，并且都是函数，表示第一次点击执行第一个函数，第二次点击执行第二个函数。

复制代码

代码如下:

4.

script

type="text/javascript"

$(function(){

$(".topicList

h3").toggle(topicHandler,topicHandler);

function

topicHandler(){

//使用fadeIn、show、slideDown可以完成某个容器的显示

//使用fadeOut、hide、slideUp可以完成某个容器的隐藏

//所以可以通过各个的toggle来完成两个之间的轮换

$(this).next("ul").toggle(1000);

}

});

/script

封装几个简单的jQuery方法

Query实质上是一个构造函数，该构造函数接受一个参数，jQuery通过这个参数利用原生API找到节点，之后返回一个方法对象，该方法对象上的方法对节点进行操作(方法使用了闭包)。

1.可以通过封装函数的方法。    

这时候可以通过传入节点和类名来实现addClass的操作。但是这样会污染变量。比如覆盖掉其他的addClass方法。

2.通过封装命名空间的方法。

var obj = {}

obj.addClass(node,classes){  classes.forEach((value) = {node.classList.add(value)}) }

封装命名空间就是所有封装的函数放入一个对象之中，通过调用对象来调用封装的函数，这样不会污染全局变量。

3.通过原型链调用封装函数

这种方法的优点是无侵入。jQuery构造函数生成一个新的对象，并给对象封装方法，不会修改节点上的原生Node对象。

然后通过window.$ = jQuery,通过$()就可以调用里面定义的addClass,getSiblings等方法了。