jQuery中$this和$(this)的区别介绍(一看就懂)


Posted in Javascript onJuly 06, 2015
// this其实是一个Html 元素。
// $this 只是个变量名,加$是为说明其是个jquery对象。
// 而$(this)是个转换,将this表示的dom对象转为jquery对象,这样就可以使用jquery提供的方法操作。


(function($){
	$.fn.hilight = function(options){
		debug(this);

		var defaults = {
			foreground: 'red',
			background: 'yellow'
		};

		var opts = $.extend({}, $.fn.hilight.defaults, options);

		return this.each(function() {
      // this其实是一个Html 元素。
      // $this 只是个变量名,加$是为说明其是个jquery对象。
      // 而$(this)是个转换,将this表示的dom对象转为jquery对象,这样就可以使用jquery提供的方法操作。
			$this = $(this);

			// build element specific options
			var o = $.meta ? $.extend({}, opts, $this.data()) : opts;
			
			// update element styles
			$this.css({
				backgroundColor: o.background,
				color: o.foreground
			});

			var markup = $this.html();
			// call our format function

			markup = $.fn.hilight.format(markup);

			$this.html(markup);
		});

	};


	// define our format function
	$.fn.hilight.format = function(txt) {
		return '<strong>' + txt + '</strong>';
	};


	// 插件的defaults
	$.fn.hilight.defaults = {
		foreground: 'red',
		background: 'yellow'
	};

	function debug($obj) {
		if (window.console && window.console.log){
			window.console.log('hilight selection count: ' + $obj.size());
		}
	};

})(jQuery)
Javascript 相关文章推荐
不要在cookie中使用特殊字符的原因分析
Jul 13 Javascript
一些常用弹出窗口/拖放/异步文件上传等实用代码
Jan 06 Javascript
JS中把字符转成ASCII值的函数示例代码
Nov 21 Javascript
分享33个jQuery与CSS3实现的绚丽鼠标悬停效果
Dec 15 Javascript
举例讲解AngularJS中的模块
Jun 17 Javascript
JS实现屏蔽网页右键复制及ctrl+c复制的方法【2种方法】
Sep 04 Javascript
微信小程序 网络API Websocket详解
Nov 09 Javascript
jquery 禁止鼠标右键并监听右键事件
Apr 27 jQuery
微信小程序学习笔记之跳转页面、传递参数获得数据操作图文详解
Mar 28 Javascript
bootstrap table实现横向合并与纵向合并
Jul 18 Javascript
在Vue环境下利用worker运行interval计时器的步骤
Aug 01 Javascript
vue递归组件实战之简单树形控件实例代码
Aug 27 Javascript
浅谈Javascript实现继承的方法
Jul 06 #Javascript
JavaScript保存并运算页面中数字类型变量的写法
Jul 06 #Javascript
angularjs客户端实现压缩图片文件并上传实例
Jul 06 #Javascript
jQuery 遍历函数详解
Jul 05 #Javascript
php结合imgareaselect实现图片裁剪
Jul 05 #Javascript
kindeditor编辑器点中图片滚动条往上顶的bug
Jul 05 #Javascript
jQuery插件pagewalkthrough实现引导页效果
Jul 05 #Javascript
You might like
漫威DC御用漫画家去世 他的表情包曾走红网络
2020/04/09 欧美动漫
用PHP查询域名状态whois的类
2006/11/25 PHP
smarty中常用方法实例总结
2015/08/07 PHP
微信公众号开发客服接口实例代码
2016/10/21 PHP
Laravel5.5 数据库迁移:创建表与修改表示例
2019/10/23 PHP
js下判断 iframe 是否加载完成的完美方法
2010/10/26 Javascript
jQuery 三击事件实现代码
2013/09/11 Javascript
原生javascript实现获取指定元素下所有后代元素的方法
2014/10/28 Javascript
百度UEditor编辑器如何关闭抓取远程图片功能
2015/03/03 Javascript
简单的jQuery banner图片轮播实例代码
2016/03/04 Javascript
关于RequireJS的简单介绍即使用方法
2016/10/20 Javascript
Javascript DOM事件操作小结(监听鼠标点击、释放,悬停、离开等)
2017/01/20 Javascript
Vue 实现复制功能,不需要任何结构内容直接复制方式
2019/11/09 Javascript
vue通过过滤器实现数据格式化
2020/07/20 Javascript
解决vue项目中出现Invalid Host header的问题
2020/11/17 Javascript
Win7下搭建python开发环境图文教程(安装Python、pip、解释器)
2016/05/17 Python
Python实现PS图像调整颜色梯度效果示例
2018/01/25 Python
python障碍式期权定价公式
2019/07/19 Python
Python字典推导式将cookie字符串转化为字典解析
2019/08/10 Python
执行Python程序时模块报错问题
2020/03/26 Python
pycharm第三方库安装失败的问题及解决经验分享
2020/05/09 Python
Python模拟登录requests.Session应用详解
2020/11/17 Python
python包的导入方式总结
2021/03/02 Python
利用Canvas模仿百度贴吧客户端loading小球的方法示例
2017/08/13 HTML / CSS
Meli Melo官网:名媛们钟爱的英国奢侈手包品牌
2017/04/17 全球购物
美国高档百货Nordstrom的折扣店:Nordstrom Rack
2017/11/13 全球购物
绢花、人造花和人造花卉:BLOOM
2019/08/07 全球购物
LORAC官网:美国彩妆品牌
2019/08/27 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
描述JSP和Servlet的区别、共同点、各自应用的范围
2012/10/02 面试题
农业资源与环境专业自荐信范文
2013/12/30 职场文书
酒鬼酒广告词
2014/03/21 职场文书
业绩倒数第一的检讨书
2014/09/24 职场文书
乔布斯辞职信(中英文对照)
2015/05/12 职场文书
WebWorker 封装 JavaScript 沙箱详情
2021/11/02 Javascript
SQL Server数据库查询出现阻塞之性能调优
2022/04/10 SQL Server