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 相关文章推荐
JS获取IUSR_机器名和IWAM_机器名帐号的密码
Dec 06 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
Oct 16 Javascript
JS+CSS实现简易的滑动门效果代码
Sep 24 Javascript
js两种拼接字符串的简单方法(必看)
Sep 02 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 Javascript
Bootstrap显示与隐藏简单实现代码
Mar 06 Javascript
Vue学习笔记进阶篇之vue-cli安装及介绍
Jul 18 Javascript
小程序实现层叠卡片滑动效果
Aug 26 Javascript
javascrpt密码强度校验函数详解
Mar 18 Javascript
vue proxy 的优势与使用场景实现
Jun 15 Javascript
js实现弹幕飞机效果
Aug 27 Javascript
vue中的计算属性和侦听属性
Nov 06 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
PHP生成网页快照 不用COM不用扩展.
2010/02/11 PHP
PHP网页游戏学习之Xnova(ogame)源码解读(四)
2014/06/23 PHP
jquery 选择器部分整理
2009/10/28 Javascript
小议Javascript中的this指针
2010/03/18 Javascript
基于Jquery 解决Ajax请求的页面 浏览器后退前进功能,页面刷新功能实效问题
2010/12/11 Javascript
Javascript创建自定义对象 创建Object实例添加属性和方法
2012/06/04 Javascript
基于JavaScript操作DOM常用的API小结
2015/12/01 Javascript
详解如何使用webpack+es6开发angular1.x
2017/08/16 Javascript
JS随机排序数组实现方法分析
2017/10/11 Javascript
vue.js项目打包上线的图文教程
2017/11/16 Javascript
jquery中为什么能用$操作
2019/06/18 jQuery
vue中@change兼容问题详解
2019/10/25 Javascript
深入理解Antd-Select组件的用法
2020/02/25 Javascript
JavaScript设计模式之门面模式原理与实现方法分析
2020/03/09 Javascript
vue.js 解决v-model让select默认选中不生效的问题
2020/07/28 Javascript
Antd表格滚动 宽度自适应 不换行的实例
2020/10/27 Javascript
Python中urllib2模块的8个使用细节分享
2015/01/01 Python
python实现用户登陆邮件通知的方法
2015/07/09 Python
Python用模块pytz来转换时区
2016/08/19 Python
Python request设置HTTPS代理代码解析
2018/02/12 Python
Django 源码WSGI剖析过程详解
2019/08/05 Python
python matplotlib画盒图、子图解决坐标轴标签重叠的问题
2020/01/19 Python
Python实现SMTP邮件发送
2020/06/16 Python
html5中的一些标签学习(心得)
2016/10/18 HTML / CSS
瑞典网上购买现代和复古家具:Reforma
2019/10/21 全球购物
英国最大的在线亚洲杂货店:Red Rickshaw
2020/03/22 全球购物
药剂学专业应届生自荐信
2013/09/29 职场文书
甜点店创业计划书
2014/01/27 职场文书
低碳日宣传活动总结
2014/07/09 职场文书
课外科技活动总结
2014/08/27 职场文书
2014年党风廉政建设工作总结
2014/11/19 职场文书
饭店服务员岗位职责
2015/02/09 职场文书
高中教师个人总结
2015/02/10 职场文书
2015年初一班主任工作总结
2015/05/13 职场文书
2015年小学教师培训工作总结
2015/07/21 职场文书
windows server2008 开启端口的实现方法
2022/06/25 Servers