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 相关文章推荐
Tab页界面 用jQuery及Ajax技术实现(php后台)
Oct 12 Javascript
TimergliderJS 一个基于jQuery的时间轴插件
Dec 07 Javascript
关于backbone url请求中参数带有中文存入数据库是乱码的快速解决办法
Jun 13 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
微信小程序链接传参并跳转新页面
Nov 29 Javascript
用jQuery实现圆点图片轮播效果
Mar 19 Javascript
vue中axios处理http发送请求的示例(Post和get)
Oct 13 Javascript
浅谈Vue响应式(数组变异方法)
May 07 Javascript
基于node.js实现爬虫的讲解
Feb 18 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
Sep 19 Javascript
vue ajax 拦截原理与实现方法示例
Nov 29 Javascript
基于javascript的无缝滚动动画实现2
Aug 07 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
WINXP下apache+php4+mysql
2006/11/25 PHP
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
jQuery 中使用JSON的实现代码
2011/12/01 Javascript
获取元素距离浏览器周边的位置的方法getBoundingClientRect
2013/04/17 Javascript
简约JS日历控件 实例代码
2013/07/12 Javascript
jquery属性选择器not has怎么写 行悬停高亮显示
2013/11/13 Javascript
动态的创建一个元素createElement及删除一个元素
2014/01/24 Javascript
JS实现定时自动关闭DIV层提示框的方法
2015/05/11 Javascript
深入解析JavaScript框架Backbone.js中的事件机制
2016/02/14 Javascript
Three.js的使用及绘制基础3D图形详解
2017/04/27 Javascript
用户管理的设计_jquery的ajax实现二级联动效果
2017/07/13 jQuery
vue判断input输入内容全是空格的方法
2018/03/02 Javascript
Vue 应用中结合vux使用微信 jssdk的方法
2018/08/28 Javascript
mpvue微信小程序多列选择器用法之省份城市选择的实现
2019/03/07 Javascript
使用Node.js写一个代码生成器的方法步骤
2019/05/10 Javascript
简单了解Vue computed属性及watch区别
2020/07/10 Javascript
Python实现的手机号归属地相关信息查询功能示例
2017/06/08 Python
python判断字符串是否是json格式方法分享
2017/11/07 Python
浅谈python数据类型及类型转换
2017/12/18 Python
Python callable()函数用法实例分析
2018/03/17 Python
python实现在pandas.DataFrame添加一行
2018/04/04 Python
Python小程序 控制鼠标循环点击代码实例
2019/10/08 Python
Python列表元素常见操作简单示例
2019/10/25 Python
Python Gluon参数和模块命名操作教程
2019/12/18 Python
CSS3制作圆角图片和椭圆形图片
2016/07/08 HTML / CSS
HealthElement海外旗舰店:新西兰大卖场
2018/02/23 全球购物
学生的自我鉴定范文
2013/10/24 职场文书
医学专业毕业生个人的求职信
2013/12/04 职场文书
优秀教师先进事迹
2014/01/22 职场文书
护理专业优质毕业生自荐书
2014/01/31 职场文书
土建工程师岗位职责
2014/06/10 职场文书
2014年工商所工作总结
2014/12/09 职场文书
个人事迹材料范文
2014/12/29 职场文书
大班上学期个人总结
2015/02/13 职场文书
2015迎新晚会开场白
2015/07/17 职场文书
Elasticsearch 基本查询和组合查询
2022/04/19 Python