jquery中的this与$(this)的区别总结(this:html元素)($(this):JQuery对象)
jquery中的this与$(this)的区别总结(this:html元素)($(this):JQuery对象)
一、总结
1、this所指的是html 元素,有html的属性,可用 this.属性 方法获取
2、$(this)是一个JQuery对象,jquery中可以使用$(this)对象对各种浏览器版本对DOM对象的操作
3、$()作用:
$()这是jQuery的一个函数,也是最核心最基本的函数
功能一:传入一个选择器字符串,获得这个选择器对应的dom内容,保存在[]中,也就是俗称的jQuery对象。例如
('#id')(‘.class’) $(‘tag’)
功能二:传入一个匿名函数,例如
$(function(){})//这个匿名函数在网页载入完成后开始执行
功能三:将JavaScript对象包装成为jQuery对象。例如
$(this)
$({a:1,b:2,c:3})
$(document.getElementById('idstr'))
二、jquery中的this与$(this)的区别总结
这里就谈谈this与$(this)的区别。
1、jQuery中this与$(this)的区别
$("#textbox").hover(
function() {
this.title = "Test";
},
fucntion() {
this.title = "OK”;
}
);
这里的this其实是一个html 元素(textbox),textbox有text属性,所以这样写是完全没有什么问题的。
但是如果将this换成(this)就不是那回事了,报Error了。this与(this)的区别在此。
\\Error Code:
$("#textbox").hover(
function() {
$(this).title = "Test";
},
function() {
$(this).title = "OK";
}
);
$()这是jQuery的一个函数,也是最核心最基本的函数
功能一:传入一个选择器字符串,获得这个选择器对应的dom内容,保存在[]中,也就是俗称的jQuery对象。例如
('#id')(‘.class’) $(‘tag’)
功能二:传入一个匿名函数,例如
$(function(){})//这个匿名函数在网页载入完成后开始执行
功能三:将JavaScript对象包装成为jQuery对象。例如
$(this)
$({a:1,b:2,c:3})
$(document.getElementById('idstr'))
this是javascript**自身的** 语法关键字,它指向一个javascript对象,所以可以使用所指向的目标javascript对象所拥有的方法, 但他自己不是一个普通的变量,所以你无法自己定义一个变量叫this
所以为了使用jQuery对象的方法,你必须传入jQuery函数$(this), 将javascript 对象包装成为一个jquery对象。
这里的$(this)是一个JQuery对象,而jQuery对象沒有title 属性,因此这样写是错误的。
JQuery拥有attr()方法可以get/set DOM对象的属性,所以正确的写法应该是这样:
正确的代码:
$("#textbox").hover(
function() {
$(this).attr(’title’, ‘Test’);
},
function() {
$(this).attr(’title’, ‘OK’);
}
);
使用jQuery的好处是它包裝了各种浏览器版本对DOM对象的操作,因此统一使用$(this)而不再用this应该是比较不错的选择。
jQuery中this与$(this)的区别就介绍到这里。
2、典型错误与注意点
var node = $('#id');
node.click(function(){
this.css('display','block'); //报错 this是一个html元素,不是jquery对象,因此this不能调用jquery 的css()方法
$(this).css(); //正确 $(this)是一个jquery对象,不是html元素,可以用css()方法
this.style.display = 'block'; //正确 this是一个html元素,不是jquery对象,因此this不能调用jquery的css()方法,但是可以用javascript来更改style属性
});
3、不要滥用$(this)
如果不了解javasrcipt中基本的DOM属性和方法的话,很容易滥用jQuery对象。比如:
$(‘#someAnchor’).click(function() {
alert( $(this).attr(‘id’) );
});
如果你只是通过jQ对象获取简单的dom元素的属性比如id,那么你完全可以使用js原生的方法:
$(‘#someAnchor’).click(function() {
alert( this.id );
});
诸如“src,” “href,” 和“style.”等一些属性在老版本的ie中使用了getAttribute方法。
jquery中的this与$(this)的区别总结(this:html元素)($(this):JQuery对象)的更多相关文章
- jQuery中的bind() live() delegate()之间区别分析
jQuery中的bind() live() delegate()之间区别分析 首先,你得要了解我们的事件冒泡(事件传播)的概念,我先看一张图 1.bind方式 $('a').bind('click', ...
- 深入理解jQuery中live与bind方法的区别
本篇文章主要是对jQuery中live与bind方法的区别进行了详细的分析介绍,需要的朋友可以过来参考下,希望对大家有所帮助 注意如果是通过jq添加的层和对象一定要用live(),用其他的都不起作用 ...
- jQuery中attr和prop方法的区别说明
jquery中attr和prop的基本区别可以理解为:如果是内置属性,建议用prop,如果是自定义的建议用attr. 例如 <input type=check node=123 id=ck & ...
- jquery中的$().each和$.each的区别
jquery中的$().each和$.each的区别 注意:jquery中的$().each和$.each的区别,前者只能遍历数组,后者可以遍历数组和对象 备注:sinobook项目中地名本体相关地按 ...
- jQuery中attr和prop方法的区别
jQuery中attr和prop方法的区别。 http://my.oschina.net/bosscheng/blog/125833 http://www.javascript100.com/?p=8 ...
- jquery中this与$(this)的用法区别
jquery中this与$(this)的用法区别.先看以下代码: $("#textbox").hover( function() { this.title = "Test ...
- jquery 中 html与text函数的区别
jquery 中 html与text函数的区别 共同点:它们都能讲函数中的参数渲染到页面中: 异同点: text() 只是简单的讲参数的内容写入到页面中: html() 会根据参数的值,判断是否字体符 ...
- 前端开发入门到进阶附录一【JQuery中parent(),parents(),parentsUntil()区别和使用技巧】
JQuery中parent(),parents(),parentsUntil()区别和使用技巧:https://blog.csdn.net/china1223/article/details/5193 ...
- JQuery中$.each 和$(selector).each()的区别详解
PS:晚上在写页面时,发现了一个问题,$.each 和$(selector).each()有哪些区别?百度搜索关键词,首页显示出来一些前人的经验,总结一下,发上来. 1.$(selector).eac ...
随机推荐
- monkey基础知识(二)
- 用Navicat连接MySQL数据库出现1251错误:密码方式错误
原因:因为MySQL8.0是最新版密码保存方式,而图形化数据库管理工具还是原先的密码保存方式. 解决方式: 用CMD命令号方式进入MySQL use mysql: ALTER USER 'root'@ ...
- Android时间戳与字符串相互转换
import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Date; public cl ...
- java poi 向excel写入图片
import java.awt.image.BufferedImage; import java.io.ByteArrayOutputStream; import java.io.File; impo ...
- golang matrix
package main import ( "fmt" "go.matrix-go1" //比较有名的关于Matrix在golang中的方法库 "st ...
- C# 映射
public class Myclass1 { private int m_Count = 100; public string love{get;set;} public int Count { g ...
- [C/C++]_[0基础]_[static_cast,reinterpret_cast,dynimic_cast的使用场景和差别]
场景: 1. C++的对象差别于C的原因是他们能够有继承关系, 方法有重载, 覆盖关系等, 他们的对象内存数据结构因此也比較复杂. 2. 非常多情况下我们须要一个父类来存储子类的指针对象进行通用方法的 ...
- Lucene 查询方式
QueryParser类 QueryParser类对输入字符串的解析 格 式 含 义 “David” 在默认的字段中检索“David”关键字 “content:David” 在“conte ...
- win8.1 “服务器运行失败”的解决方法
平台:win8.1 SP1 问题:安装QQ安全管家又卸载后出现了奇怪的问题,1.在桌面点右键→个性化时,提示“服务器运行失败”.2.右键点击“这台电脑”,选择“属性”时没有反应.3.开始屏幕里随便选择 ...
- JS实现穿墙效果(判断鼠标划入划出的方向)
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...