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 相关文章推荐
基于jQuery实现表格数据的动态添加与统计的代码
Jan 31 Javascript
JS下拉框内容左右移动效果的具体实现
Jul 10 Javascript
使用js在页面中绘制表格核心代码
Sep 16 Javascript
JQuery EasyUI 加载两次url的原因分析及解决方案
Aug 18 Javascript
node.js express安装及示例网站搭建方法(分享)
Aug 22 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
解析jQueryEasyUI的使用
Nov 22 Javascript
输入框点击时边框变色效果的实现方法
Dec 26 Javascript
基于cookie实现zTree树刷新后展开状态不变
Feb 28 Javascript
Node.js安装配置图文教程
May 10 Javascript
JS+Ajax实现百度智能搜索框
Aug 04 Javascript
js实现简单放大镜效果
Mar 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
ThinkPHP使用getlist方法实现数据搜索功能示例
2017/05/08 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
JavaScript使用cookie
2007/02/02 Javascript
自己编写的类似JS的trim方法
2013/10/09 Javascript
给应用部分的js代码设定一个统一的入口
2014/06/15 Javascript
使用text方法获取Html元素文本信息示例
2014/09/01 Javascript
jQuery+ajax实现动态执行脚本的方法
2015/01/27 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
JS判断iframe是否加载完成的方法
2016/08/03 Javascript
JavaScript中setTimeout的那些事儿
2016/11/14 Javascript
详解react-webpack2-热模块替换[HMR]
2017/08/03 Javascript
jQuery选择器特殊字符与属性空格问题
2017/08/14 jQuery
javascript将url解析为json格式的两种方法
2017/08/18 Javascript
浅谈NodeJs之数据库异常处理
2017/10/25 NodeJs
Vue 第三方字体图标引入 Font Awesome的方法
2018/09/28 Javascript
简单学习5种处理Vue.js异常的方法
2019/06/17 Javascript
在Vue中使用Echarts可视化库的完整步骤记录
2020/11/18 Vue.js
[01:02:10]DOTA2上海特级锦标赛B组小组赛#2 VG VS Fnatic第一局
2016/02/26 DOTA
[33:15]2018DOTA2亚洲邀请赛3月30日 小组赛B组 VP VS Mineski
2018/03/31 DOTA
使用go和python递归删除.ds store文件的方法
2014/01/22 Python
详解在Python程序中使用Cookie的教程
2015/04/30 Python
python中将zip压缩包转为gz.tar的方法
2018/10/18 Python
pandas DataFrame 交集并集补集的实现
2019/06/24 Python
python Dijkstra算法实现最短路径问题的方法
2019/09/19 Python
浅析Python面向对象编程
2020/07/10 Python
详解向scrapy中的spider传递参数的几种方法(2种)
2020/09/28 Python
python实现经典排序算法的示例代码
2021/02/07 Python
Html5中的桌面通知Notification的实现
2018/09/25 HTML / CSS
Omio葡萄牙:全欧洲低价大巴、火车和航班搜索和比价
2019/02/09 全球购物
电子专业毕业生自荐信
2014/05/25 职场文书
刑事代理授权委托书
2014/09/17 职场文书
全陪导游词
2015/02/04 职场文书
致运动员加油稿
2015/07/21 职场文书
MySQL删除和插入数据很慢的问题解决
2021/06/03 MySQL
Spring Boot 使用 Spring-Retry 进行重试框架
2022/04/24 Java/Android
AndroidStudio图片压缩工具ImgCompressPlugin使用实例
2022/08/05 Java/Android