jQuery 小知识点(插件)
1.jQuery插件小知识点:
估计很多人都没弄明白下面的东西,特从网络上搜索了下面的知识,自己以后用起来也比较方便:
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例(对象)每一个有效。
如扩展$.fn.abc()
那么你可以这样子:$("#div").abc();
通常使用extend方法扩展,详细请看API.
$.fx是指jquery的特效。
如果使用显示、滑动、淡入淡出、动画等。
$.fx.off可以关闭动画,其实是直接显示结果。
jquery的extend和fn.extend
jQuery为开发插件提拱了两个方法,分别是:
jQuery.fn.extend(object);
jQuery.extend(object);
jQuery.extend(object); 为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。
fn 是什么东西呢。查看jQuery代码,就不难发现。
jQuery.fn = jQuery.prototype = {
init: function( selector, context ) {//....
//......
};
原来 jQuery.fn = jQuery.prototype.对prototype肯定不会陌生啦。
虽然 javascript 没有明确的类的概念,但是用类来理解它,会更方便。
jQuery便是一个封装得非常好的类,比如我们用 语句 $("#btn1") 会生成一个 jQuery类的实例。
jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:
$.extend({
add:function(a,b){return a+b;}
});
便为 jQuery 添加一个为 add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,
$.add(3,4); //return 7
jQuery.fn.extend(object); 对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert 当前编辑框里的内容。可以这么做:
Java代码 $.fn.extend({ alertWhileClick:function(){ $(this).click(function(){ alert($(this).val()); }); } }); $("#input1").alertWhileClick(); //页面上为:<input id="input1" type="text"/>
$("#input1") 为一个jQuery实例,当它调用成员方法 alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。
真实的开发过程中,当然不会做这么小白的插件,事实上jQuery提拱了丰富的操作文档,事件,CSS ,Ajax、效果的方法,结合这些方法,便可以开发出更加 Niubility 的插件。
jquery(function(){})与(function(){}(jQuery)的区别
1.first
jQuery(function(){});
全写为
jQuery(docunemt).ready(function(){
});
意义为在DOM加载完毕后执行ready()方法
2.
(funtion(){
}(jQuery);
实际执行()(para)匿名方法,只不过传递了jQuery对象。
总结:jQuery(funtion(){});用于存放DOM对象的代码,执行其中代码时DOM对象已经存在。
不可用于存放开发插件代码。因为jQuery对象没有得到传递,外部通过jQuery.methodye
调用不来其中方法。
(funtion(){
}(jQuery);用于存放开发插件的代码,执行其中代码DOM不一定存在,直接自动执行DOM操作代码请小心使用
jQuery 小知识点(插件)的更多相关文章
- JQuery小知识点代码
1.链式操作 $(function(){ /*var oDiv = $('#div1'); oDiv.html('hello'); oDiv.css('background','red'); oDiv ...
- Intel项目所用jquery小知识点总结
1.$("#tdGeo input[type='checkbox']:checked") ---筛选出所有已经Check的Checkbox 2.$("#tdCount ...
- JQuery小知识点
//get() : 就是把JQ转成原生JS,可以让通过jquery获得元素使用JS的innerHTML方法. $(function(){ //document.getElementById('div1 ...
- jquery 小知识点
//计算checkbox有多少个被选中 $("input[name='user_apply']:checked").length)://可以查看 所有的name=user_appl ...
- 黑色半透明镂空遮罩指引效果实现jQuery小插件
/*! * by zhangxinxu(.com) 2017-05-18 * 新版上线时候的黑色半透明镂空遮罩指引效果实现jQuery小插件 * 兼容到IE8+ * MIT使用协议,使用时候保留版权 ...
- 基于HTML5 audio元素播放声音jQuery小插件
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=1609 一.前面的些唠 ...
- 小教程:自己创建一个jQuery长阴影插件
长阴影设计是平面设计的一个变体,添加了阴影,产生了深度的幻觉,并导致了三维的设计.在本教程中,我们将创建一个jQuery插件,通过添加完全可自定义的长阴影图标,我们可以轻松地转换平面图标. 戳我查看效 ...
- 10个jQuery小技巧
收集的10个 jQuery 小技巧/代码片段,可以帮你快速开发. 1.返回顶部按钮 你可以利用 animate 和 scrollTop 来实现返回顶部的动画,而不需要使用其他插件. $('a.top' ...
- 分享22款响应式的 jQuery 图片滑块插件
响应式(Responsive)设计的目标是要让产品界面能够响应用户的行为,根据不同终端设备自动调整尺寸,带给用户良好的使用体验.这篇文章收集了22款优秀的响应式 jQuery 幻灯片插件,它们能够帮助 ...
随机推荐
- 机器学习(1)之梯度下降(gradient descent)
机器学习(1)之梯度下降(gradient descent) 题记:最近零碎的时间都在学习Andrew Ng的machine learning,因此就有了这些笔记. 梯度下降是线性回归的一种(Line ...
- 『GitHub』Git常用命令记录
Commands: git init 把当前目录变成Git可以管理的仓库 随后出现.git目录,这个目录是Git来跟踪管理版本库的git commit -m "change message& ...
- could only be replicated to 0 nodes, instead of 1
周末机房断电,然后hadoop爆出如题的错误,解决方案就是关闭所有节点的防火墙,相关命令如下: 查看防火墙状态: /etc/init.d/iptables status 暂时关闭防火墙: /etc/i ...
- 测试Flask+PYTHON的WEB框架
参数URL: http://blog.csdn.net/qwiwuqo/article/details/8970621 安装flask之前,你必须要先安装python和easy_install. 安装 ...
- PKUSC2016滚粗记
Day0 坐飞机来北京,地铁上接到电话,以为是诈骗电话马上就挂了,然后看了一下是北京的电话,赶脚有点不对...打回去居然是报到处老师的电话..走了几个小时,到勺园和其他学校的神犇合住.TAT,感觉第二 ...
- 调用系统API还是很高效的,不必担心性能
代码如下: void MainWindow::on_pushButton_2_clicked() { QTime total; total.start(); ; ; i<=*; i++) { Q ...
- B - The Accomodation of Students - hdu 2444(最大匹配)
题意:现在有一些学生给你一下朋友关系(不遵守朋友的朋友也是朋友),先确认能不能把这些人分成两组(组内的人要相互不认识),不能分的话输出No(小写的‘o’ - -,写成了大写的WA一次),能分的话,在求 ...
- Unity3D基础学习 NGUI之Example 13 - Tabs简要概述
首先建一个2D相机,在Anchor下新建一个子物体,添加WindowDrag Tilt脚本,用作拖动窗口 然后新建一个Panel,包含两个content,两个Tab,设置两个Content用来显示切换 ...
- java遍历map方法
java 代码: import java.util.HashMap; import java.util.Iterator; import java.util.Map; public class Map ...
- 菜鸟学习 - Unity中的热更新 - LuaInterface用户指南
[由于学习,所以翻译!] 1.介绍 LuaInterface 是 Lua 语言和 Microsoft.NET 平台公共语言运行时 (CLR) 之间的集成库. 非常多语言已经有面向 CLR 编译器和 C ...