关于前端: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 属性});

不要滥用 $(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 办法。