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操作select控件的几种方法
Jun 02 Javascript
JavaScript实用技巧(一)
Aug 16 Javascript
JS实现1000以内被3或5整除的数字之和
Feb 18 Javascript
分享12个实用的jQuery代码片段
Mar 09 Javascript
jQuery遍历DOM节点操作之filter()方法详解
Apr 14 Javascript
JS获取url参数、主域名的方法实例分析
Aug 03 Javascript
html判断当前页面是否在iframe中的实例
Nov 30 Javascript
深入理解js中的加载事件
Feb 08 Javascript
vue使用axios上传文件(FormData)的方法
Apr 14 Javascript
Vue中跨域及打包部署到nginx跨域设置方法
Aug 26 Javascript
jquery实现手风琴案例
May 04 jQuery
jQuery实现异步上传一个或多个文件
Aug 17 jQuery
浅谈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
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
PHP树-不需要递归的实现方法
2016/06/21 PHP
PHP开发APP端微信支付功能
2017/02/17 PHP
PHP实现笛卡尔积算法的实例讲解
2019/12/22 PHP
jQuery中与toggleClass等价的程序段 以及未来学习的方向
2010/03/18 Javascript
基于jQuery的Tab选项框效果代码(插件)
2011/03/01 Javascript
一个仿糯米弹框效果demo
2014/07/22 Javascript
Nodejs为什么选择javascript为载体语言
2015/01/13 NodeJs
jQuery实现感应鼠标动画效果自动伸长的输入框实例
2015/02/24 Javascript
详细分析JavaScript变量类型
2015/07/08 Javascript
jquery实现滑动特效代码
2015/08/10 Javascript
javascript模拟C#格式化字符串
2015/08/26 Javascript
JS实现动态表格的添加,修改,删除功能(推荐)
2016/06/15 Javascript
浅述Javascript的外部对象
2016/12/07 Javascript
使用JavaScript为一张图片设置备选路径的方法
2017/01/04 Javascript
jquery实现全选、全不选以及单选功能
2017/03/23 jQuery
js处理包含中文的字符串实例
2017/10/11 Javascript
jQuery实现新闻播报滚动及淡入淡出效果示例
2018/03/23 jQuery
vue实现组件之间传值功能示例
2018/07/13 Javascript
JavaScript数组基于交换的排序示例【冒泡排序】
2018/07/21 Javascript
详解Vue中watch对象内属性的方法
2019/02/01 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
JavaScript 正则应用详解【模式、欲查、反向引用等】
2020/05/13 Javascript
Python3实现将文件归档到zip文件及从zip文件中读取数据的方法
2015/05/22 Python
Python运算符重载用法实例
2015/05/28 Python
python保存字符串到文件的方法
2015/07/01 Python
Python使用django搭建web开发环境
2017/06/09 Python
Python Flask框架模板操作实例分析
2019/05/03 Python
如何运行带参数的python脚本
2019/11/15 Python
Python2与Python3关于字符串编码处理的差别总结
2020/09/07 Python
CSS3 border-image详解、应用及jQuery插件
2011/08/29 HTML / CSS
html5定位获取当前位置并在百度地图上显示
2014/08/22 HTML / CSS
史泰博(Staples)中国官方网站:办公用品一站式采购
2016/09/05 全球购物
群众路线教育党员自我剖析材料
2014/10/06 职场文书
python某漫画app逆向
2021/03/31 Python
SpringBoot 拦截器妙用你真的了解吗
2021/07/01 Java/Android