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 相关文章推荐
解决extjs在firefox中关闭窗口再打开后iframe中js函数访问不到的问题
Nov 06 Javascript
js动态加载以及确定加载完成的代码
Jul 31 Javascript
JS滚轮事件onmousewheel使用介绍
Nov 01 Javascript
推荐8款jQuery轻量级树形Tree插件
Nov 12 Javascript
jQuery实现定位滚动条位置
Aug 05 Javascript
jQuery选择器特殊字符与属性空格问题
Aug 14 jQuery
jQuery实现的手动拖动控制进度条效果示例【测试可用】
Apr 18 jQuery
webpack 开发和生产并行设置的方法
Nov 08 Javascript
vue-cli2.0转3.0之项目搭建的详细步骤
Dec 11 Javascript
js array数组对象操作方法汇总
Mar 18 Javascript
vue+vant使用图片预览功能ImagePreview的问题解决
Apr 10 Javascript
ES6中的Javascript解构的实现
Oct 30 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多进程简单实例小结
2019/11/09 PHP
Laravel框架Eloquent ORM删除数据操作示例
2019/12/03 PHP
不用AJAX和IFRAME,说说真正意义上的ASP+JS无刷新技术
2008/09/25 Javascript
表单JS弹出填写提示效果代码
2011/04/16 Javascript
javascript中的startWith和endWith的几种实现方法
2013/05/07 Javascript
js innerHTML 改变div内容的方法
2013/08/03 Javascript
jquery 获取 outerHtml 包含当前节点本身的代码
2014/10/30 Javascript
jQuery监听浏览器窗口大小的变化实例
2017/02/07 Javascript
深入理解Node.js中的进程管理
2017/03/13 Javascript
微信小程序媒体组件详解(视频,音乐,图片)
2017/09/19 Javascript
JavaScript实现全选取消效果
2017/12/14 Javascript
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
React-redux实现小案例(todolist)的过程
2019/09/29 Javascript
Python操作Excel之xlsx文件
2017/03/24 Python
Python学习小技巧之列表项的拼接
2017/05/20 Python
Python中用字符串调用函数或方法示例代码
2017/08/04 Python
详解Python中的正则表达式
2018/07/08 Python
浅述python中深浅拷贝原理
2018/09/18 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
Python threading的使用方法解析
2019/08/28 Python
解决python -m pip install --upgrade pip 升级不成功问题
2020/03/05 Python
python爬虫基础之urllib的使用
2020/12/31 Python
Python爬虫入门教程01之爬取豆瓣Top电影
2021/01/24 Python
使用Python+Appuim 清理微信的方法
2021/01/26 Python
四年级下册教学反思
2014/02/01 职场文书
绩效考核实施方案
2014/03/18 职场文书
无毒社区工作方案
2014/05/23 职场文书
档案工作汇报材料
2014/08/21 职场文书
2014最新毕业证代领委托书
2014/09/26 职场文书
2014年建筑工程工作总结
2014/12/03 职场文书
委托收款证明
2015/06/23 职场文书
学校少先队工作总结
2015/08/12 职场文书
导游词之江南周庄
2019/12/06 职场文书
解析Redis Cluster原理
2021/06/21 Redis
一次SQL如何查重及去重的实战记录
2022/03/13 MySQL
JavaScript实现音乐播放器
2022/08/14 Javascript