jQuery中$.fn的用法示例介绍
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效,下面有个不错的示例,喜欢的朋友可以参考下
如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了.
那么你可以这样子:$("#div").abc();
jQuery为开发插件提拱了两个方法,分别是:
jQuery.extend(object);为扩展jQuery类本身.为类添加新的方法。
jQuery.fn.extend(object);给jQuery对象添加方法。
fn是什么东西呢。查看jQuery代码,就不难发现。
jQuery.fn = jQuery.prototype ={
init: function( selector, context ){//....
//......
};
原来 jQuery.fn =jQuery.prototype.对prototype肯定不会陌生啦。
jQuery便是一个封装得非常好的类,比如我们用语句 $("#btn1") 会生成一个 jQuery类的实例。
jQuery.extend(object); 为jQuery类添加添加类方法,可以理解为添加静态方法。如:
$.extend({
add:function(a,b){returna+b;}
});
便为 jQuery 添加一个为add 的 “静态方法”,之后便可以在引入 jQuery 的地方,使用这个方法了,
$.add(3,4); //return 7
jQuery.fn.extend(object);对jQuery.prototype进得扩展,就是为jQuery类添加“成员函数”。jQuery类的实例可以使用这个“成员函数”。
比如我们要开发一个插件,做一个特殊的编辑框,当它被点击时,便alert当前编辑框里的内容。可以这么做:
$.fn.extend({
alertWhileClick:function(){
$(this).click(function(){
alert($(this).val());
});
}
});
jQuery中$.fn的用法示例介绍的更多相关文章
- jquery 之$.fn的用法示例
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效. 若扩展$.fn.abc(),即$.fn.abc()是对jquery扩展一个abc的方法,那么每个jquer ...
- jQuery中$.fn的用法
原文:http://www.jb51.net/article/42816.htm $.fn是指jquery的命名空间,$.fn=$.prototype. 1.$.extend 为jquery添加静态方 ...
- JS中数组Array的用法示例介绍 (转)
new Array() new Array(len) new Array([item0,[item1,[item2,...]]] 使用数组对象的方法: var objArray=new Array() ...
- document.forms用法示例介绍
概述 forms 返回一个集合 (一个HTMLCollection对象),包含了了当前文档中的所有form元素. 语法 var collection = document.forms; documen ...
- jquery.validate.min.js 用法方法示例
页面html 代码 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://w ...
- jquery中的$.fn的用法
JQuery里的原型prototype分析 http://www.nowamagic.net/librarys/veda/detail/653 jquery中的$.fn的用法 ...
- jQuery中on()方法用法实例详解
这篇文章主要介绍了jQuery中on()方法用法,实例分析了on()方法的功能及各种常见的使用技巧,并对比分析了与bind(),live(),delegate()等方法的区别,需要的朋友可以参考下 本 ...
- jquery中$.each()的用法
each()函数是基本上所有的框架都提供了的一个工具类函数,通过它,你可以遍历对象.数组的属性值并进行处理.jQuery和jQuery对象都实 现了该方法,对于jQuery对象,只是把each方法简单 ...
- 腾讯云上PhantomJS用法示例
崔庆才 前言 大家有没有发现之前我们写的爬虫都有一个共性,就是只能爬取单纯的html代码,如果页面是JS渲染的该怎么办呢?如果我们单纯去分析一个个后台的请求,手动去摸索JS渲染的到的一些结果,那简直没 ...
随机推荐
- xcode6.0以上创建一个Empty Application
运行Xcode 6,创建一个Single View Application工程. 创建好后,把工程目录下的Main.storyboard和LaunchScreen.xib删除,扔进废纸篓. 打 ...
- 前端开发week1
1.前端开发前期相关工具 photoshop:主要学习运用与前端相关工具,了解UI与前端的关联. axure:原型设计,通过设计原型了解网页基本结构,结合ps对UI有更好的理解. webs ...
- TCP Socket 通讯(客户端与服务端)
/*----------------------------编译环境:VS2015---------------------------------------*/ /*--------------- ...
- 008-Scala主构造器、私有构造器、构造器重载实战详解
008-Scala主构造器.私有构造器.构造器重载实战详解 Scala主构造器实战 无参数的主构造器 分析 1.name 需要赋初值,一般通过占位符来代表空值 2.private 声明私有的age 生 ...
- asp.net文件下载文件另存为
这是一个困惑已久的问题…… 首先,用<a>标签的href打开浏览器能解读的文件(如txt,jpg,pdf等),会自动打开,无法做到弹出另存为的效果. 其次,网上搜索了各种JS解决办法,包括 ...
- My97DatePicker的使用
一. 简介 1. 简介 目前的版本是:4.8 2. 注意事项 My97DatePicker目录是一个整体,不可破坏里面的目录结构,也不可对里面的文件改名,可以改目录名 My97DatePicker.h ...
- 开始JavaScript
将脚本放在那里? 将本可以放在HTML页面上的两个位置:<head>和</head>标签之间(称为头脚本,header script),或者<body>和</ ...
- Sort Characters By Frequency
Given a string, sort it in decreasing order based on the frequency of characters. Example 1: Input: ...
- iOS应用性能调优好文mark
http://www.cocoachina.com/ios/20150408/11501.html
- 'Check Android SDK'has encountered a problem.An internal error during:"Check Android SDK".
在android项目下的layout目录下创建一个xml文件finish之后,报此错误.虽然点ok之后,不影响使用. 解决方案: 1.把project菜单下的build automatically前面 ...