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 相关文章推荐
Javascript执行效率全面总结
Nov 04 Javascript
JS判断文本框内容改变事件的简单实例
Mar 07 Javascript
js获取元素相对窗口位置的实现代码
Sep 28 Javascript
JavaScript中实现单体模式分享
Jan 29 Javascript
jQuery基于扩展简单实现倒计时功能的方法
May 14 Javascript
Servlet实现文件上传,可多文件上传示例
Dec 05 Javascript
vue.js利用defineProperty实现数据的双向绑定
Apr 28 Javascript
Sublime Text新建.vue模板并高亮(图文教程)
Oct 26 Javascript
对vue中methods互相调用的方法详解
Aug 30 Javascript
Vue利用Blob下载原生二进制数组文件
Sep 25 Javascript
vue keep-alive实现多组件嵌套中个别组件存活不销毁的操作
Oct 30 Javascript
keep-alive保持组件状态的方法
Dec 02 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中OR与|| AND与&amp;&amp;的区别总结
2013/10/26 PHP
用js来定义浏览器中一个左右浮动元素相对于页面主体宽度的位置的函数
2012/01/21 Javascript
JavaScript之编码规范 推荐
2012/05/23 Javascript
getJSON调用后台json数据时函数被调用两次的原因猜想
2013/09/29 Javascript
JavaScript制作windows经典扫雷小游戏
2015/03/31 Javascript
Javascript实现的简单右键菜单类
2015/09/23 Javascript
通过设置CSS中的position属性来固定层的位置
2015/12/14 Javascript
基于javascript显示当前时间以及倒计时功能
2016/03/18 Javascript
js实现按钮控制带有停顿效果的图片滚动
2016/08/30 Javascript
JS定时检测任务任务完成后执行下一步的解决办法
2016/12/22 Javascript
js实现淡入淡出轮播切换功能
2017/01/13 Javascript
简单谈谈gulp-changed插件
2017/02/21 Javascript
Vue非父子组件通信详解
2017/06/12 Javascript
使用ef6创建oracle数据库的实体模型遇到的问题及解决方案
2017/11/09 Javascript
nginx+vue.js实现前后端分离的示例代码
2018/02/12 Javascript
layer 关闭指定弹出层的例子
2019/09/25 Javascript
js实现上下左右键盘控制div移动
2020/01/16 Javascript
vue抽出组件并传值实例
2020/07/31 Javascript
Python3安装Pymongo详细步骤
2017/05/26 Python
pandas.dataframe中根据条件获取元素所在的位置方法(索引)
2018/06/07 Python
django中ORM模型常用的字段的使用方法
2019/03/05 Python
详解python深浅拷贝区别
2019/06/24 Python
Python通过cv2读取多个USB摄像头
2019/08/28 Python
Python 字符串、列表、元组的截取与切片操作示例
2019/09/17 Python
python实现定时发送邮件到指定邮箱
2020/12/23 Python
CSS3色彩模式有哪些?CSS3 HSL色彩模式的定义
2016/04/26 HTML / CSS
使用canvas生成含有微信头像的邀请海报没有微信头像问题
2019/10/29 HTML / CSS
C/C++程序员常见面试题二
2015/11/19 面试题
上海中网科技笔试题
2012/02/19 面试题
质量承诺书格式
2014/05/20 职场文书
高效课堂标语
2014/06/26 职场文书
同志主要表现材料
2014/08/21 职场文书
十月围城观后感
2015/06/08 职场文书
如何使用PostgreSQL进行中文全文检索
2021/05/27 PostgreSQL
python中opencv实现图片文本倾斜校正
2021/06/11 Python
Python自动化爬取天眼查数据的实现
2021/06/15 Python