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 相关文章推荐
window.addeventjs事件驱动函数集合addEvent等
Feb 19 Javascript
jquery.lazyload  实现图片延迟加载jquery插件
Feb 06 Javascript
js传中文参数controller里获取参数乱码问题解决方法
Jan 03 Javascript
javascript实例--教你实现扑克牌洗牌功能
May 15 Javascript
JavaScript优化专题之Loading and Execution加载和运行
Jan 20 Javascript
D3.js实现散点图和气泡图的方法详解
Sep 21 Javascript
Bootstrap基本插件学习笔记之标签切换(17)
Dec 08 Javascript
bootstrap table分页模板和获取表中的ID方法
Jan 10 Javascript
基于canvas粒子系统的构建详解
Aug 31 Javascript
通过js控制时间,一秒一秒自己动的实例
Oct 25 Javascript
微信小程序实现图片上传功能
May 28 Javascript
Vue初始化中的选项合并之initInternalComponent详解
Jun 11 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和MySql来与ODBC数据连接
2006/10/09 PHP
PHP5.2中date()函数显示时间与北京时间相差8小时的解决办法
2009/05/28 PHP
WordPress主题中添加文章列表页页码导航的PHP代码实例
2015/12/22 PHP
ThinkPHP中where()使用方法详解
2016/04/19 PHP
Laravel等框架模型关联的可用性浅析
2019/12/15 PHP
ajax 文件上传应用简单实现
2009/03/03 Javascript
读jQuery之十四 (触发事件核心方法)
2011/08/23 Javascript
c#和Javascript操作同一json对象的实现代码
2012/01/17 Javascript
js获得网页背景色和字体色的方法
2014/03/21 Javascript
推荐9款炫酷的基于jquery的页面特效
2014/12/07 Javascript
jQuery实现带滚动导航效果的全屏滚动相册实例
2015/06/19 Javascript
详解JavaScript基于面向对象之继承
2015/12/13 Javascript
javascript比较语义化版本号的实现代码
2016/09/09 Javascript
js实现下拉菜单效果
2017/03/01 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
基于iScroll实现下拉刷新和上滑加载效果
2017/07/18 Javascript
Webpack实战加载SVG的方法
2017/12/26 Javascript
详解基于DllPlugin和DllReferencePlugin的webpack构建优化
2018/06/28 Javascript
React Native基础入门之初步使用Flexbox布局
2018/07/02 Javascript
JavaScript常用内置对象用法分析
2019/07/09 Javascript
原生js实现无缝轮播图
2020/01/11 Javascript
python实现俄罗斯方块
2018/06/26 Python
django小技巧之html模板中调用对象属性或对象的方法
2018/11/30 Python
python:接口间数据传递与调用方法
2018/12/17 Python
Python基于datetime或time模块分别获取当前时间戳的方法实例
2019/02/19 Python
PyQt5下拉式复选框QComboCheckBox的实例
2019/06/25 Python
Python企业编码生成系统之主程序模块设计详解
2019/07/26 Python
python matplotlib库的基本使用
2020/09/23 Python
Python tempfile模块生成临时文件和临时目录
2020/09/30 Python
基于html5绘制圆形多角图案
2016/04/21 HTML / CSS
DataReader和DataSet的异同
2014/12/31 面试题
防火标语大全
2014/10/06 职场文书
承诺保证书格式
2015/02/28 职场文书
2016年综治和平安建设宣传月活动总结
2016/04/01 职场文书
职场干货:简历中的自我评价应该这样写!
2019/05/06 职场文书
Python之matplotlib绘制折线图
2022/04/13 Python