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获取事件对象代码
Aug 05 Javascript
Ext JS 4官方文档之三 -- 类体系概述与实践
Dec 16 Javascript
JS获取几种URL地址的方法小结
Feb 26 Javascript
借助javascript代码判断网页是静态还是伪静态
May 05 Javascript
JavaScript简单遍历DOM对象所有属性的实现方法
Oct 21 Javascript
三个js循环的关键字示例(for与while)
Feb 16 Javascript
Angular4自制一个市县二级联动组件示例
Nov 21 Javascript
jQuery Migrate 插件用法实例详解
May 22 jQuery
elementUI select组件使用及注意事项详解
May 29 Javascript
layui checkbox默认选中,获取选中值,清空所有选中项的例子
Sep 02 Javascript
vue-quill-editor 自定义工具栏和自定义图片上传路径操作
Aug 03 Javascript
JS绘图Flot如何实现动态可刷新曲线图
Oct 16 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 include_path设置技巧分享
2011/07/03 PHP
php cli模式学习(PHP命令行模式)
2013/06/03 PHP
有关于PHP中常见数据类型的汇总分享
2014/01/06 PHP
深入理解PHP中的global
2014/08/19 PHP
Yii把CGridView文本框换成下拉框的方法
2014/12/03 PHP
简单谈谈PHP vs Node.js
2015/07/17 PHP
复制本贴标题和地址的js代码
2008/07/01 Javascript
Javascript remove 自定义数组删除方法
2009/10/20 Javascript
javascript中undefined与null的区别
2015/08/16 Javascript
ashx文件获取$.ajax()方法发送的数据
2016/05/26 Javascript
jQuery Ajax 上传文件处理方式介绍(推荐)
2016/06/30 Javascript
IOS中safari下的select下拉菜单文字过长不换行的解决方法
2016/09/26 Javascript
Angualrjs和bootstrap相结合实现数据表格table
2017/03/30 Javascript
jQuery实现jQuery-form.js实现异步上传文件
2017/04/28 jQuery
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
微信小程序实现打卡日历功能
2020/09/21 Javascript
vue实现页面滚动到底部刷新
2019/08/16 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
JQuery通过键盘控制键盘按下与松开触发事件
2020/08/07 jQuery
python 读写txt文件 json文件的实现方法
2016/10/22 Python
python实现手机销售管理系统
2019/03/19 Python
Python3将数据保存为txt文件的方法
2019/09/12 Python
python 生成器和迭代器的原理解析
2019/10/12 Python
python dumps和loads区别详解
2020/02/04 Python
Python爬虫小例子——爬取51job发布的工作职位
2020/07/10 Python
飞利浦美国官网:Philips美国
2020/02/28 全球购物
JBL加拿大官方商店:扬声器、耳机等
2020/10/23 全球购物
某公司Java工程师面试题笔试题
2016/03/27 面试题
网络公司美工设计工作个人的自我评价
2013/11/03 职场文书
经理秘书岗位职责
2013/11/14 职场文书
小学生环保倡议书
2014/05/15 职场文书
社区服务活动小结
2014/07/08 职场文书
关于运动会的广播稿(10篇)
2014/09/12 职场文书
2014年会计工作总结
2014/11/27 职场文书
团员个人总结
2015/02/26 职场文书
监守自盗观后感
2015/06/10 职场文书