JQuery -- this 和 $(this) 的区别

<h1 class="postTitle" >JQuery -- this 和 $(this) 的区别</h1> <div class="clear" ></div> <div class="postBody" > <div id="cnblogs_post_body"> <p><span >起初以为this和$(this)就是一模子刻出来。但是我在阅读时,和coding时发现,总不是一回事。</span></p> <h4>What is &quot;this&quot;?</h4> <blockquote> <p><span >In many object-oriented programming languages, this (or self) is a keyword which can be used in instance methods to refer to the object on which the currently executing method has been invoked.</span></p> </blockquote> <p></p> <p><span >$(</span><span >&quot;</span><span >#textbox</span><span >&quot;</span><span >).hover(<br /> <span class="Apple-converted-space"></span></span><span >function</span><span >(){<br /> <span class="Apple-converted-space"></span></span><span >this</span><span >.title</span><span >=</span><span ></span><span >&quot;</span><span >Test</span><span >&quot;</span><span >;</span><br /> <span > },<br /> <span class="Apple-converted-space"></span></span><span >fucntion</span><span >(){<br /> <span class="Apple-converted-space"></span></span><span >this</span><span >.title</span><span >=</span><span ></span><span >&quot;</span><span >OK&rdquo;;</span><br /> <span ></span><span > }</span><br /> <span >);</span><br /> <br /> <span >这里的this其实是一个Html 元素(textbox),textbox有text属性,所以这样写是完全没有什么问题的。</span><br /> <span >但是如果将this换成$(this)就不是那回事</span>了,Error--报了。</p> <blockquote> <p>Error Code:<span class="Apple-converted-space"></span><br /> <span >$(&quot;#textbox&quot;).hover(<span class="Apple-converted-space"></span></span><br /> <span class="Apple-converted-space"></span><span >function</span><span >() {<span class="Apple-converted-space"></span></span><br /> <span > $(this).title = &quot;Test&quot;;<span class="Apple-converted-space"></span></span><br /> <span > },<span class="Apple-converted-space"></span></span><br /> <span class="Apple-converted-space"></span><span >function</span><span >() {<span class="Apple-converted-space"></span></span><br /> <span > $(this).title = &quot;OK&quot;;<span class="Apple-converted-space"></span></span><br /> <span > }<span class="Apple-converted-space"></span></span><br /> <span >);</span></p> </blockquote> <p><span >这里的</span><strong >$</strong>(this)是一个JQuery对象,而jQuery对象?有title 属性,因此这样写是错误的。</p> <p><span >JQuery拥有attr()方法可以get/set DOM对象的属性,所以正确的写法应该是这样:</span></p> <blockquote> <p>正确的代码:<span class="Apple-converted-space"></span><br /> <span >$(&quot;#textbox&quot;).hover(<span class="Apple-converted-space"></span></span><br /> <span class="Apple-converted-space"></span><span >function</span><span >() {<span class="Apple-converted-space"></span></span><br /> <span > $(this).attr(&rsquo;title&rsquo;, &lsquo;Test&rsquo;);<span class="Apple-converted-space"></span></span><br /> <span > },<span class="Apple-converted-space"></span></span><br /> <span class="Apple-converted-space"></span><span >function</span><span >() {<span class="Apple-converted-space"></span></span><br /> <span > $(this).attr(&rsquo;title&rsquo;, &lsquo;OK&rsquo;);<span class="Apple-converted-space"></span></span><br /> <span > }<span class="Apple-converted-space"></span></span><br /> <span >);</span></p> </blockquote> <p><span >使用JQuery的好处是它包?了各种浏览器版本对DOM对象的操作,因此统一使用$(this)而不再用this应该是比较不错的选择。</span><br /> <br /> </p> </div> </div>
RangeTime:0.004519s
RangeMem:199.24 KB
返回顶部 留言