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[js]获取url参数的代码
Oct 17 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
Aug 18 Javascript
javascript函数定义的几种区别小结
Jan 06 Javascript
禁止页面刷新让F5快捷键及右键都无效
Jan 22 Javascript
浏览器缩放检测的js代码
Sep 28 Javascript
js实现同一页面多个不同运动效果的方法
Apr 10 Javascript
jQuery结合AJAX之在页面滚动时从服务器加载数据
Jun 30 Javascript
jQuery展示表格点击变色、全选、删除
Jan 05 Javascript
JS表单验证方法实例小结【电话、身份证号、Email、中文、特殊字符、身份证号等】
Feb 14 Javascript
Ionic + Angular.js实现图片轮播的方法示例
May 21 Javascript
vue移动端下拉刷新和上拉加载的实现代码
Sep 08 Javascript
Vue + Node.js + MongoDB图片上传组件实现图片预览和删除功能详解
Apr 29 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
制作美丽的拉花
2021/03/03 冲泡冲煮
在数据量大(超过10万)的情况下
2007/01/15 PHP
让你的PHP7更快之Hugepage用法分析
2016/05/31 PHP
Laravel5.* 打印出执行的sql语句的方法
2017/07/24 PHP
PHP中register_shutdown_function函数的基础介绍与用法详解
2017/11/28 PHP
PHP实现的数据对象映射模式详解
2019/03/20 PHP
PHP 计算至少是其他数字两倍的最大数的实现代码
2020/05/26 PHP
仿服务器端脚本方式的JS模板实现方法
2007/04/27 Javascript
定义JavaScript二维数组采用定义数组的数组来实现
2012/12/09 Javascript
原生js实现shift/ctrl/alt按键的获取
2013/04/08 Javascript
浅析JavaScript中的类型和对象
2013/11/29 Javascript
js怎么判断flash swf文件是否加载完毕
2014/08/14 Javascript
Javascript的setTimeout()使用闭包特性时需要注意的问题
2014/09/23 Javascript
浅谈Nodejs中的作用域问题
2016/12/26 NodeJs
jQuery、zepto、js常用小技巧
2017/02/12 Javascript
Angular.Js中过滤器filter与自定义过滤器filter实例详解
2017/05/08 Javascript
vue-baidu-map 进入页面自动定位的解决方案(推荐)
2018/04/28 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
layui对工具条进行选择性的显示方法
2019/09/19 Javascript
在vue中使用防抖和节流,防止重复点击或重复上拉加载实例
2019/11/13 Javascript
Javascript文本框脚本实现方法解析
2020/10/30 Javascript
Vue+Vant 图片上传加显示的案例
2020/11/03 Javascript
浅谈python装饰器探究与参数的领取
2017/12/01 Python
Python应用库大全总结
2018/05/30 Python
Python父目录、子目录的相互调用方法
2019/02/16 Python
Python 实现文件读写、坐标寻址、查找替换功能
2019/09/11 Python
Django实现文件上传下载功能
2019/10/06 Python
Django和Flask框架优缺点对比
2019/10/24 Python
详解python中的lambda与sorted函数
2020/09/04 Python
Django创建一个后台的基本步骤记录
2020/10/02 Python
欧舒丹美国官网:L’Occitane美国
2018/02/23 全球购物
Unix如何在一行中运行多个命令
2015/05/29 面试题
网游商务专员求职信
2013/10/15 职场文书
大学生职业生涯规划范文——找准自我,定位人生
2014/01/23 职场文书
英文留学推荐信范文
2014/01/25 职场文书
2015关于重阳节的演讲稿
2015/03/20 职场文书