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 While 循环基础教程
Apr 05 Javascript
JS 事件绑定函数代码
Apr 28 Javascript
JS执行删除前的判断代码
Feb 18 Javascript
jquery中的ajax方法怎样通过JSONP进行远程调用
May 04 Javascript
javascript搜索框点击文字消失失焦时文本出现
Sep 18 Javascript
JavaScript实现同步于本地时间的动态时间显示方法
Feb 02 Javascript
JS简单循环遍历json数组的方法
Apr 22 Javascript
JS 调用微信扫一扫功能
Dec 22 Javascript
微信小程序 setData使用方法及常用错误解决办法
May 11 Javascript
Bootstrap Table 在指定列中添加下拉框控件并获取所选值
Jul 31 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
vuejs2.0运用原生js实现简单拖拽元素功能
Aug 21 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中使用__autoload()自动加载未定义类的实现代码
2013/02/06 PHP
PHP批量检测并去除文件BOM头代码实例
2014/05/08 PHP
动态表单验证的操作方法和TP框架里面的ajax表单验证
2017/07/19 PHP
解决FLASH需要点击激活的代码
2006/12/20 Javascript
javascript 设计模式之单体模式 面向对象学习基础
2010/04/18 Javascript
jQuery中live方法的重复绑定说明
2011/10/21 Javascript
兼容ie、firefox的图片自动缩放的css跟js代码分享
2013/08/12 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
JavaScript输入邮箱自动提示实例代码
2014/01/13 Javascript
nodejs教程之制作一个简单的文章发布系统
2014/11/21 NodeJs
jQuery.position()方法获取不到值的安全替换方法
2015/03/13 Javascript
JavaScript性能优化之函数节流(throttle)与函数去抖(debounce)
2016/08/11 Javascript
ES6新特性三: Generator(生成器)函数详解
2017/04/21 Javascript
详解webpack 入门总结和实践(按需异步加载,css单独打包,生成多个入口文件)
2017/06/20 Javascript
原生js实现省市区三级联动代码分享
2018/02/12 Javascript
Vue使用mixins实现压缩图片代码
2018/03/14 Javascript
Angular异步变同步处理方法
2018/08/13 Javascript
微信小程序实现通过js操作wxml的wxss属性示例
2018/12/06 Javascript
[52:05]EG vs OG 2019国际邀请赛小组赛 BO2 第二场 8.16
2019/08/18 DOTA
Python的__builtin__模块中的一些要点知识
2015/05/02 Python
Python之reload流程实例代码解析
2018/01/29 Python
python如何发布自已pip项目的方法步骤
2018/10/09 Python
python如何解析配置文件并应用到项目中
2019/06/27 Python
python监控进程状态,记录重启时间及进程号的实例
2019/07/15 Python
Python基于当前时间批量创建文件
2020/05/07 Python
HTML5实现文件断点续传的方法
2017/01/04 HTML / CSS
印度婴儿用品在线商店:Firstcry.com
2016/12/05 全球购物
世界领先的高品质定制产品平台:Zazzle
2017/07/23 全球购物
德国高端单身人士交友网站:ElitePartner
2018/12/02 全球购物
Nasty Gal英国:美国女性服饰销售网站
2021/03/02 全球购物
网络专业学生个人的自我评价
2013/12/16 职场文书
自荐信需注意事项
2014/01/25 职场文书
公司担保书范文
2014/05/21 职场文书
感恩的心主题班会
2015/08/12 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
处理canvas绘制图片模糊问题
2022/05/11 Javascript