jQuery封装函数

//1,插件命名:jQuery.插件名.js 为拉避免和其他库的冲突
//
//2,自定义插件尽量避免使用$ 如果非要使用$就一定要将jQuery传递进去,
//写在最后加一个小括号写jquery ;结束 封装函数是自执行函数
//3,插件的结尾一定要以 ; 结束 避免和前面代码产生瓜葛
//4,封装分为全局的方法和局部的方法
//.nav后还可以继续封装更多的函数

在调用时谁用谁.nav()就行

在html中全局调用

$(function (){

$.nav();

})

$.extend({
//全局封装

})

局部的封装调用

局部的  谁需要谁调用

$.fn({

})

(function(){

//封装全局的
$.extend({

‘nav‘:function(){
$(‘.nav‘).css({
‘listStyle‘: ‘none‘,
‘margin‘:‘0px‘,
‘padding‘:‘0px‘,
‘display‘:‘none‘
})

//不能再使用$(‘list li‘) 因为要封装 需要内部查找
//find()找到所有子元素
$(‘.nav‘).parent().hover(function(){
$(this).find(‘.nav‘).slideDown(1000);
},function(){
$(this).find(‘.nav‘).stop().slideUp(1000);
});
}

})

})(jQuery);

时间: 2024-10-22 00:40:58

jQuery封装函数的相关文章

jQuery中对AJAX操作的封装函数

jQuery提供了6个简化AJAX操作的函数,每个都可以代替元素AJAX中的四步代码! (1)$('xxx').load()         jQuery对象函数 (2)$.get()                   jQuery全局函数 (3)$.post()                 jQuery全局函数 (4)$.getScript()          jQuery全局函数 (5)$.getJSON()           jQuery全局函数 (6)$.ajax()     

JQuery之JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案

JQuery的版本 JQuery入门 属性获取 JQuery就绪函数 JS文档就绪函数和JQuery文档就绪函数的区别 JS对象和JQuery对象的区别 关于$的使用 多个JS库的冲突解决方案 JQuery的版本 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>jQuery的版本</title> <

Jquery核心函数

在Jquery中,所有的DOM对象都将封装成Jquery对象,而且只有Jquery对象才能使用Jquery方法或者属性来执行相应的操作. 所以Jquery提供了一个可以将DOM对象封装成Jquery对象的函数,就是Jquery核心函数jquery(),也称为工厂函数. jquery核心函数有7个重载,分别如下: jquery()  该函数返回一个空的jquery对象. jquery(elements)  该函数将一个或多个DOM元素转化为Jquery对象(或jquery集合) jquery(ca

jQuery.ajaxComplete() 函数详解

ajaxComplete()函数用于设置当AJAX请求完成(无论成功或失败)时执行的回调函数. 这是一个全局AJAX事件函数,用于为所有AJAX请求的ajaxComplete事件绑定事件处理函数.当AJAX请求完成(无论成功或失败)时,将触发ajaxComplete事件,并执行绑定的事件处理函数. 该函数必须在jQuery对象实例上调用,ajaxComplete()将为每个匹配元素的ajaxComplete事件绑定处理函数.当AJAX请求完成后,所有匹配元素上的处理函数都将被触发执行.事件处理函

jQuery.ajax() 函数详解

jQuery.ajax()函数用于通过后台HTTP请求加载远程数据. jQuery.ajax()函数是jQuery封装的AJAX技术实现,通过该函数,我们无需刷新当前页面即可获取远程服务器上的数据. jQuery.ajax()函数是jQuery的底层AJAX实现.jQuery.get(). jQuery.post().load(). jQuery.getJSON(). jQuery.getScript()等函数都是该函数的简化形式(都调用该函数,只是参数设置有所不同或有所省略). 该函数属于全局

jQuery 封装、插件浅析

今天小码哥突发兴致想学习jQuery.当正在研究一个不错的插件的时候,又突然有了一个疑问,那就是为啥很多大拿前辈们在封装自己写的插件的时候总是按照这个格式:如;(function($){})(jQuery);.或者是这样定义方法对象的?如:$.fn.add=function(){}啥的!!尤其是后一个$.fn中的fn是干什么的?(大家不要笑俺,,,小码哥也是初学者,还有很多没有达到深刻理解的境界.)因此,偶就上网借鉴了一下别人总结的,然后又加上俺自己的理解,成就了一下的一片博文! 大家都晓得,j

javascript 学习小结 (三) jQuery封装ajax尝试 by FungLeo

javascript 学习小结 (三) jQuery封装ajax尝试 by FungLeo 前言 在JS学习中,对于原生的很多东西我理解得并不透彻.但是使用jQuery来操作DOM,基本上还是非常熟练的.但是对于AJAX数据交互的处理,我不是很理解. 近期团队交给我一个后端全接口提供给我的项目.我要利用这些接口来自己组织前端代码.为了学习,我决定不使用VUE或者其他的前端框架来做.而是只使用jQuery框架,数据的部分全部使用拼接字符串的形式实现. 获取数据,显示数据,提交数据. 在这个项目中(

jQuery.ajaxSetup() 函数详解

该函数用于更改jQuery中AJAX请求的默认设置选项.之后执行的所有AJAX请求,如果对应的选项参数没有设置, 将使用更改后的默认设置. //设置AJAX的全局默认选项$.ajaxSetup( {    aysnc: true, // 默认同异加载    type: "POST" , // 默认使用POST方式    headers: { // 默认添加请求头        "Author": "arzorath" ,        "

js入口函数跟jQuery入口函数的区别

JS的window.onload事件必须要等到所有内容,以及外部图片之类的文件加载完之后,才会去执行. JQuery入口函数是在所有标签加载完之后,就会去执行. 接着,通过JS的一个覆盖问题引出对JQuery入口函数实现的解释. JS的入口函数window.onload函数有一个覆盖的问题,当文档中出现2个window.onload函数的时候,后者会覆盖前者,导致功能实现不了.但是JQuery却没有这样的问题,重要是因为JQuery入口函数只是对封装好了的方法的一个调用,只不过传的参数不同而已.