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 相关文章推荐
Prototype 学习 Prototype对象
Jul 12 Javascript
最新28个很棒的jQuery 教程
May 28 Javascript
ie8 不支持new Date(2012-11-10)问题的解决方法
Jul 31 Javascript
javascript根据时间生成m位随机数最大13位
Oct 30 Javascript
jQuery中$.ajax()和$.getJson()同步处理详解
Aug 12 Javascript
javascript中Date对象应用之简易日历实现
Jul 12 Javascript
JQuery遍历元素的父辈和祖先的方法
Sep 18 Javascript
详解vue axios中文文档
Sep 12 Javascript
Vue结合SignalR实现前后端实时消息同步
Sep 19 Javascript
vue2.0父子组件间传递数据的方法
Aug 16 Javascript
微信小程序点击图片实现长按预览、保存、识别带参数二维码、转发等功能
Jul 20 Javascript
JavaScript获取URL参数的方法分享
Apr 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
一个域名查询的程序
2006/10/09 PHP
php 格式化数字的时候注意数字的范围
2010/04/13 PHP
解析如何去掉CodeIgniter URL中的index.php
2013/06/25 PHP
深入解析PHP的Laravel框架中的event事件操作
2016/03/21 PHP
详解PHP文件的自动加载(autoloading)
2018/02/04 PHP
JS Excel读取和写入操作(模板操作)实现代码
2010/04/11 Javascript
Jquery 插件开发笔记整理
2011/01/17 Javascript
基于jQuery的模仿新浪微博时间的组件
2011/10/04 Javascript
JavaScript 学习笔记之一jQuery写法图片等比缩放以及预加载
2012/06/28 Javascript
JavaScript中的运算符种类及其规则介绍
2013/09/26 Javascript
javascript获取所有同类checkbox选项(实例代码)
2013/11/07 Javascript
JQuery表格拖动调整列宽效果(自己动手写的)
2014/09/01 Javascript
JavaScript实现网页截图功能
2014/10/16 Javascript
Javascript中数组方法汇总(推荐)
2015/04/01 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
原生js实现轮播图
2017/02/27 Javascript
JavaScript之map reduce_动力节点Java学院整理
2017/06/29 Javascript
BootStrap模态框和select2合用时input无法获取焦点的解决方法
2017/09/01 Javascript
vue使用vue-i18n实现国际化的实现代码
2018/04/08 Javascript
jQuery实现模糊查询的方法分析
2018/05/10 jQuery
Vue父子组件之间的通信实例详解
2018/09/28 Javascript
深入解析koa之中间件流程控制
2019/06/17 Javascript
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
酷! 程序员用Python带你玩转冲顶大会
2018/01/17 Python
python 实现查询Neo4j多节点的多层关系
2019/12/23 Python
Python 在局部变量域中执行代码
2020/08/07 Python
外贸采购员求职的自我评价
2013/11/26 职场文书
一年级班主任寄语
2014/01/19 职场文书
2014最新版群众路线四风整改措施
2014/09/24 职场文书
2014年党支部工作总结
2014/11/13 职场文书
民政工作个人总结
2015/02/28 职场文书
2015年秋季新学期寄语
2015/03/25 职场文书
民事辩护词范文
2015/05/21 职场文书
2016年春季开学典礼新闻稿
2015/11/25 职场文书
vue组件冲突之引用另一个组件出现组件不显示的问题
2022/04/13 Vue.js