关于JQuery里的$.fn详解(jquery扩展)
来源:互联网 发布:java小游戏代码 编辑:程序博客网 时间:2024/06/04 18:18
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
</head>
<body>
<p id="n1">
<span id="n2">
<span id="n3">A</span>
</span>
<label id="n4">B</label>
<span id="n5">
<span id="n6">C</span>
</span>
<strong id="n7" class="active">D</strong>
<span id="n8" class="active">E</span>
</p>
<p id="n9">
<span id="n10"></span>
<label id="n11"></label>
<span id="n12" class="active"></span>
</p>
</body>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">
//用于将jQuery对象所有匹配元素的标识信息追加到body元素内
//每个元素的标识信息形如:"tagName"或"tagName#id"
jQuery.fn.showTagInfo = function(){
var tags = this.map( function(){
return this.tagName + ( this.id ? "#" + this.id : "" );
} ).get();
$("body").append( tags.join("<br>") + "<br><br>" );
};
var $n4 = $("#n4");
//showTagInfo()现在所有对象多可以调用这个方法
var $elements = $n4.siblings( );
$elements.showTagInfo(); // #n2,#n5,#n7,#n8
//匹配n4所有的同辈span元素
var $matches = $n4.siblings("span");
$matches.showTagInfo(); // #n2,#n5,#n8
var $label = $("label");
//匹配所有label元素的含有类名"active"的同辈元素
var $actives = $label.siblings(".active");
$actives.showTagInfo(); // #n7,#n8,#n12
</script>
</html>
以上自己可以运行下,下面是转载的
jquery $.fn$.fx是什么意思
$.fn是指jquery的命名空间,加上fn上的方法及属性,会对jquery实例每一个有效。
如扩展$.fn.abc(),即$.fn.abc()是对jquery扩展了一个abc方法,那么后面你的每一个jquery实例都可以引用这个方法了.
那么你可以这样子:$("#div").abc();
通常使用extend方法扩展,详细请看API.
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肯定不会陌生啦。
虽然 javas
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(); //页面上为:
$("#input1") 为一个jQuery实例,当它调用成员方法alertWhileClick后,便实现了扩展,每次被点击时它会先弹出目前编辑里的内容。
- 关于JQuery里的$.fn详解(jquery扩展)
- jQuery.extend()、jQuery.fn.extend()扩展方法详解
- jQuery.extend()、jQuery.fn.extend()扩展方法详解
- 关于jquery的$.extend()和$.fn.extend()详解
- jquery的extend和fn.extend (扩展jQuery类或jQuery对象方法)
- 关于jquery.fn等
- 关于jquery.fn
- 关于jquery.fn
- 关于jquery.fn
- 关于jquery $.fn
- 关于jquery.fn
- 关于jquery.fn
- 关于jquery.fn
- jQuery.fn详解
- $.fn. 给jQuery扩展插件
- jquery扩展之jQuery.fn.extend
- jquery之重写(扩展)$.ajax和$.fn.load等方法详解
- jquery之重写(扩展)$.ajax和$.fn.load等方法详解
- Password UVA
- cassandra报错问题
- 心得
- c++11 thread 参数
- centos7 搭建 reids-cluster 缓存集群
- 关于JQuery里的$.fn详解(jquery扩展)
- groovy之正则表达式
- 1021: C语言程序设计教程(第三版)课后习题6.11
- arm交叉编译器gnueabi、none-eabi、arm-eabi、gnueabihf、gnueabi区别
- windows下Mysql定时备份
- 在eclipse中,如何查看webservice请求头(转载)
- 欢迎使用CSDN-markdown编辑器
- 理解事务的4种隔离级别
- Oracle最无奈错误PLS-00103