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 相关文章推荐
图片连续滚动代码[兼容IE/firefox]
Jun 11 Javascript
javascript 流畅动画实现原理
Sep 08 Javascript
window.js 主要包含了页面的一些操作
Dec 23 Javascript
javascript获取所有同类checkbox选项(实例代码)
Nov 07 Javascript
jquery向上向下取整适合分页查询
Sep 06 Javascript
全面解析JavaScript的Backbone.js框架中的Router路由
May 05 Javascript
js实现淡入淡出轮播切换功能
Jan 13 Javascript
js实现textarea限制输入字数
Feb 13 Javascript
angularjs ui-router中路由的二级嵌套
Mar 10 Javascript
JS中‘hello’与new String(‘hello’)引出的问题详解
Aug 14 Javascript
微信小程序 wxParse插件显示视频问题
Sep 27 Javascript
vue实现滑动解锁功能
Mar 03 Vue.js
浅谈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中的extract的作用分析
2008/04/09 PHP
php设计模式 Composite (组合模式)
2011/06/26 PHP
PHP中fwrite与file_put_contents性能测试代码
2013/08/02 PHP
实例介绍PHP的Reflection反射机制
2014/08/05 PHP
PHP利用func_get_args和func_num_args函数实现函数重载实例
2014/11/12 PHP
PHP下载远程图片并保存到本地方法总结
2016/01/22 PHP
PHP实现表单提交时去除斜杠的方法
2016/12/26 PHP
javascript 表单规则集合对象
2009/07/21 Javascript
js通过googleAIP翻译PHP系统的语言配置的实现代码
2011/10/17 Javascript
7款吸引人眼球的jQuery/CSS3特效实例分享
2013/04/25 Javascript
JS中setInterval、setTimeout不能传递带参数的函数的解决方案
2013/04/28 Javascript
当滚动条滚动到页面底部自动加载增加内容的js代码
2014/05/13 Javascript
基于BootStrap实现局部刷新分页实例代码
2016/08/08 Javascript
js实现图片懒加载效果
2017/07/17 Javascript
vue实现导航标题栏随页面滚动渐隐渐显效果
2020/03/12 Javascript
微信小程序返回上一级页面的实现代码
2020/06/19 Javascript
快速了解Vue父子组件传值以及父调子方法、子调父方法
2020/07/15 Javascript
python中使用OpenCV进行人脸检测的例子
2014/04/18 Python
Python实现把数字转换成中文
2015/06/29 Python
Python内置的HTTP协议服务器SimpleHTTPServer使用指南
2016/03/30 Python
django限制匿名用户访问及重定向的方法实例
2018/02/07 Python
python list删除元素时要注意的坑点分享
2018/04/18 Python
详谈Python3 操作系统与路径 模块(os / os.path / pathlib)
2018/04/26 Python
python 计算平均平方误差(MSE)的实例
2019/06/29 Python
linux下python中文乱码解决方案详解
2019/08/28 Python
Python 根据数据模板创建shapefile的实现
2019/11/26 Python
Python创建数字列表的示例
2019/11/28 Python
Python正则表达式急速入门(小结)
2019/12/16 Python
html5教程画矩形代码分享
2013/12/04 HTML / CSS
制药工程专业应届生求职信
2013/09/24 职场文书
应届毕业生应聘自荐信
2013/12/07 职场文书
母亲节感恩寄语
2014/02/21 职场文书
百年校庆节目主持词
2014/03/27 职场文书
党员转正意见怎么写
2015/06/03 职场文书
2019幼儿教师求职信(3篇)
2019/09/20 职场文书
python删除csv文件的行列
2021/04/06 Python