对jQuery的理解

最新推荐文章于 2022-06-15 19:48:12 发布

ninuxGithub

最新推荐文章于 2022-06-15 19:48:12 发布

阅读量655

点赞数

文章标签： jquery

本文链接：https://blog.csdn.net/shen19920619/article/details/72377293

版权

网上找的对两个方法的比较：

jQuery.fn.extend 与 jQuery.extend

extend 方法在 jQuery 中是一个很重要的方法，jQuey 内部用它来扩展静态方法或实例方法，而且我们开发 jQuery 插件开发的时候也会用到它。但是在内部，是存在 jQuery.fn.extend 和 jQuery.extend 两个 extend 方法的，而区分这两个 extend 方法是理解 jQuery 的很关键的一部分。先看结论：

1）jQuery.extend(object) 为扩展 jQuery 类本身，为类添加新的静态方法；

2）jQuery.fn.extend(object) 给 jQuery 对象添加实例方法，也就是通过这个 extend 添加的新方法，实例化的 jQuery 对象都能使用，因为它是挂载在 jQuery.fn 上的方法（上文有提到，jQuery.fn = jQuery.prototype ）。

它们的官方解释是：

1）jQuery.extend(): 把两个或者更多的对象合并到第一个当中，

2）jQuery.fn.extend()：把对象挂载到 jQuery 的 prototype 属性，来扩展一个新的 jQuery 实例方法。

也就是说，使用 jQuery.extend() 拓展的静态方法，我们可以直接使用 $.xxx 进行调用（xxx是拓展的方法名），

而使用 jQuery.fn.extend() 拓展的实例方法，需要使用 $().xxx 调用。

这段很精辟....

归纳： jQuery.extend() 是对多个对象的合并，类似jquery 的静态方法，需要$符合去掉用，例如 $.ajax(....)

jQuery.fn.extend()是对Jquery的原型prototype进行拓展，添加实例化的属性或者方法，其调用方式为：$('#myDiv').show();类似的需要jquery 对象调用的方法

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<!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">
<c:set var="contextPath" value="${pageContext.request.contextPath}" scope="application" />
<script type="text/javascript" src="${contextPath}/webjarslocator/jquery/jquery.js"></script>
<title>Insert title here</title>

<script type="text/javascript">

	
	//定义插件
	(function(){
		//面向对象的方式----> 定义类
		var Beautifier = function(ele, opt)
		{
			this.$element = ele;
			this.defaults = {
				'color' : 'red',
				'fontSize' : '12px',
				'textDecoration' : 'none'
			};
			this.options = $.extend({}, this.defaults, opt);
		}
		//借助对象的原型来拓展---->定义方法
		Beautifier.prototype = {
			beautify : function() {
				return this.$element.css({
					'color' : this.options.color,
					'fontSize' : this.options.fontSize,
					'textDecoration' : this.options.textDecoration
				});
			}
		}
		
		//在插件中使用这个定义好的类--->编写插件
		$.fn.myPlugin = function(options){
			var beautifier = new Beautifier(this, options);
			return beautifier.beautify();
		}
		
	})();

	
	//调用插件
	$(function() {
		$('.book').myPlugin({
			'fontSize' : '18px'
		});

	});
</script>
</head>
<body>

	<div>
		<a class='book' href="http://www.baidu.com">一本好书</a><br> 
		<a class='book' href="http://www.sina.com">一本好书</a><br>
	</div>

</body>
</html>

为了更好的代码的封装， 有个良好的结构 改造代码如下：//定义插件
	;(function($,window, document, undefined){
		//面向对象的方式----> 定义类
		var Beautifier = function(ele, opt)
		{
			this.$element = ele;
			this.defaults = {
				'color' : 'red',
				'fontSize' : '12px',
				'textDecoration' : 'none'
			};
			this.options = $.extend({}, this.defaults, opt);
		}
		//借助对象的原型来拓展---->定义方法
		Beautifier.prototype = {
			beautify : function() {
				return this.$element.css({
					'color' : this.options.color,
					'fontSize' : this.options.fontSize,
					'textDecoration' : this.options.textDecoration
				});
			}
		}
		
		//在插件中使用这个定义好的类--->编写插件
		$.fn.myPlugin = function(options){
			var beautifier = new Beautifier(this, options);
			return beautifier.beautify();
		}
		
	})(jQuery, window, document);

ninuxGithub

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
对jQuery的理解

网上找的：jQuery.fn.extend 与 jQuery.extendextend 方法在 jQuery 中是一个很重要的方法，jQuey 内部用它来扩展静态方法或实例方法，而且我们开发 jQuery 插件开发的时候也会用到它。但是在内部，是存在 jQuery.fn.extend 和 jQuery.extend 两个 extend 方法的，而区分这两个 extend 方
复制链接

扫一扫