如何正确有效的学习jquery
众所周知，jQuery现在已经非常流行，百度新首页中也已经开始使用jQuery，所以学习它的人很多，为了帮助人更好的学习jquery，以下是学习啦小编分享给大家的有效的学习jquery的方法，希望可以帮到你!
有效的学习jquery的方法
1.正确引用jQuery
1.尽量在body结束前才引入jQuery，而不是在head中。
2.借助第三方提供的CDN来引入jQuery，同时注意当使用第三方CDN出现问题时，要引入本地的jQuery文件。(对于已经使用了cdn的网站可以忽略，现在用户带宽都升级了，这个可以忽略了，放别人机器不一定稳定)
3.如果在</body>前引入script文件的话，就不用写document.ready了，因为这时执行js代码时DOM已经加载完毕了。
<body>
<script src="http://libs.baidu.com/jquery/1.8.3/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="jquery1.8.min.js">\x3C/script>')</script>
</body>
2.优化jQuery选择器
高效正确的使用jQuery选择器是熟练使用jQuery的基础，而掌握jQuery选择器需要一定的时间积累，我们开始学习jQuery时就应该注意选择器的使用。
<div id="nav" class="nav">
<a class="home" href="http://www.jb51.net">脚本之家</a>
<a class="articles" href="http://www.jb51.net/list/list_172_1.htm">jQuery教程</a>
</div>
如果我们选择class为home的a元素时，可以使用下边代码：
$('.home'); //1
$('#nav a.home'); //2
$('#nav').find('a.home'); //3
1.方法1会使jQuery在整个DOM中查找class为home的a元素，性能可想而知。
2.方法2为要查找的元素添加了上下文，在这里变为查找id为nav的子元素，查找性能得到了很大提升。
3.方法3使用了find方法，它的速度更快，所以方法三最好。
关于jQuery选择器的性能优先级，ID选择器快于元素选择器，元素选择器快于class选择器。因为ID选择器和元素选择器是原生的JavaScript操作，而类选择器不是，大家顺便可以看下find context 区别，find() children区别。
3.缓存jQuery对象
缓存jQuery对象可以减少不必要的DOM查找，关于这点大家可以参考下缓存jQuery对象来提高性能。
4.正确使用事件委托
事件委托可以使事件更好的执行，在动态添加的元素上绑定事件也需要委托来实现，在新版本的jQuery中推荐大家使用on来给元素绑定一个或多个事件的处理函数。
<table id="t">
<tr>
<td>我是单元格</td>
</tr>
</table>
比如我们要在上边的单元格上绑定一个单击事件，不注意的朋友可能随手写成下边的样子：
$('#t').find('td').on('click', function () {
$(this).css({ 'color': 'red', 'background': 'yellow' });
});
这样会为每个td绑上事件，在为100个单元格绑定click事件的测试中，两者性能相差7倍之多，好的做法应该是下边写法：
$('#t').on('click', 'td', function () {
$(this).css({ 'color': 'red', 'background': 'yellow' });
});
5.精简jQuery代码
如在上述代码中我们对jQuery代码进行了适当的合并，类似的还有.attr()方法等，我们没有写成下边的方式：
$('#t').on('click', 'td', function () {
$(this).css('color', 'red').css('background', 'yellow');
});
6.减少DOM操作
刚开始使用jQuery时可能会频繁的操作DOM，这是相当耗费性能的。如我们要在body中动态输出一个表格，一些朋友会这样写：
var $t = $('body');
$t.append('<table>');
$t.append('<tr><td>1</td></tr>');
$t.append('</table>');
好的做法：
$('body').append('<table><tr><td>1</td></tr></table>');
这样在拼接完table串后再添加到body中，对DOM的操作只需一次。群里以前有朋友就因为这个导致在IE下输出时出现问题，而关于字符串的拼接可以参考下最快创建字符串的方法。
7.不使用jQuery
原生函数总是最快的，这点不难理解，在代码书写中我们不应该忘记原生JS。
就先总结这几条吧，每条建议并不难理解，但总结全面的话还是要花费不少时间的。
有效的学习jquery的技巧
1关于页面元素的引用
通过jquery的$引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象(集合对象)，不能直接调用dom定义的方法。
2jQuery对象与dom对象的转换
只有jquery对象才能使用jquery定义的方法。注意dom对象和jquery对象是有区别的，调用方法时要注意操作的是dom对象还是jquery对象。普通的dom对象一般可以通过$转换成jquery对象。
如：$(document.getElementById("msg"))则为jquery对象，可以使用jquery的方法。
由于jquery对象本身是一个集合。所以如果jquery对象要转换为dom对象则必须取出其中的某一项，一般可通过索引取出。
如：$("#msg")[0]，$("div").eq(1)[0]，$("div").get[1]，$("td")[5]这些都是dom对象，可以使用dom中的方法，但不能再使用Jquery的方法。
以下几种写法都是正确的：
$("#msg").html;
$("#msg")[0].innerHTML;
$("#msg").eq(0)[0].innerHTML;
$("#msg").get(0).innerHTML;
3如何获取jQuery集合的某一项
对于获取的元素集合，获取其中的某一项(通过索引指定)可以使用eq或get(n)方法或者索引号获取，要注意，eq返回的是jquery对象，而get(n)和索引返回的是dom元素对象。对于jquery对象只能使用jquery的方法，而dom对象只能使用dom的方法，如要获取第三个
元素的内容。
有如下两种方法：
$("div").eq(2).html;//调用jquery对象的方法
$("div").get(2).innerHTML;//调用dom的方法属性
4同一函数实现set和get
Jquery中的很多方法都是如此，主要包括如下几个：
$("#msg").html;//返回id为msg的元素节点的html内容。
$("#msg").html("new content");
//将“new content” 作为html串写入id为msg的元素节点内容中,页面显示粗体的new content
$("#msg").text;//返回id为msg的元素节点的文本内容。
$("#msg").text("newcontent");
//将“new content” 作为普通文本串写入id为msg的元素节点内容中,页面显示new content
$("#msg").height;//返回id为msg的元素的高度
$("#msg").height("300");//将id为msg的元素的高度设为300
$("#msg").width;//返回id为msg的元素的宽度
$("#msg").width("300");//将id为msg的元素的宽度设为300
$("input").val(");//返回表单输入框的value值
$("input").val("test");//将表单输入框的value值设为test
$("#msg").click;//触发id为msg的元素的单击事件
$("#msg").click(fn);//为id为msg的元素单击事件添加函数
同样blur,focus,select,submit事件都可以有着两种调用方法
有效的学习jquery的书籍推荐
JavaScript: 语言精粹
JavaScript: 语言精粹 的作者是 Douglas Crockford，这是一本在 JavaScript 书籍历史上具有开创性的，是每一位 JavaScript 编程者都需要阅读的书。 Douglas Crockford 也是 JSON 和 JSLint 的作者，对 JavaScript 的发展做出了很多贡献。
JavaScript: 语言精粹 专注于让 JavaScript 成为最伟大的面向对象的语言。涉及到函数，对象，语法，声明等。这些好的想法和糟糕的点子混在一起是不好，例如： 基于全局变量的编程模型。这本书向你展示了怎样避开语言有缺陷的地方，利用该语言优秀的地方写出最好的代码。
JavaScript: 语言精粹 向你展现了无论你以什么方式使用JavaScript这门语言，都可以写出优雅的代码的方式。如果你开发一个网站或者 Web 应用，这本书是必读的。如果你需要写出复杂的交互，做很多计算并且把JS视为一门面向对象的语言的话，这本书更是你阅读的首选。
你不知道的 JavaScript
你不知道的 JavaScript 的作者是 Kyle Simpson，这本书是关于 JavaScript 的系列书籍，其中将会展现一些你不知道 JavaScript 知识缺口，也会教您用来填补这些缺口的关于 JavaScript 一切您需要知道的知识。Kyle Simpson 是最好的 JavaScript 老师之一，任何一位认真对待 JavaScript 的开发者都应该关注 Kyle 的教学。
你不知道的 JavaScript 系列书籍着重处理 JavaScript 令人棘手的部分，帮助你成为一位真正的 JavaScript 大师。这系列书籍的知识点都很相似，并且涵盖了那些平时不容易理解的话题。你不知道的 JavaScript 对每一水平的开发者都是适用的。书籍对每一个知识点都有具体的解释，这是它最大的优点。
你不知道的 JavaScript 系列书籍对所有的 JavaScript 开发者都是必读书籍。书籍短小精悍，让你能够快速读完，而不会显得枯燥。这系列书籍是最建议阅读的。
JavaScript: 权威指南
JavaScript: 权威指南 的作者是 David Flanagan，这是一本“名副其实”的书，绝对可以称得上是最好的 javaScript 书籍之一。David Flanagan 在 Mozilla 工作，他将生命中很多时间都投注于编程相关书籍的写作中。
JavaScript: 权威指南 分为两个部分: 讨论和参考。每个部分又包含核心章节和客户端章节。核心章节涵盖了语言的特点，比如： 数据类型，函数，类等。客户端章节涵盖了 JavaScript 在浏览器中的使用。JavaScript: 权威指南 基于作者的经验提供了准确的文档。
JavaScript: 权威指南 有多个版本，每隔几年就会更新一次，这是好的地方。这本书经常改进，作者也参与到新版本的制定，包含一些其他 JavaScript 书籍缺少的东西。无论是哪个版本，这本书的核心都和 JavaScript 语言规范保持一致。
JavaScript: 权威指南 是一本关于 JavaScript 的权威性的指南，从每一个基本的语法开始到高级特性。JavaScript: 权威指南 属于每个编程开发者的书架，强力推荐。
JavaScript 忍者秘籍
JavaScript 忍者秘籍 的作者是 John Resig, Bear Bibeault 和 Josip Maras ，是一本经典作品，把你变成 JavaScript 的编程忍者高手。John Resig 是 jQuery 的作者，Bear Bibeault 是一位 web 开发者， Josip Maras 是一位博士后.
JavaScript 忍者秘籍 由四部分组成。每一个部分聚焦在几个话题上，并且这些是相互关联的，从基础到高级。这些话题包括函数，对象，原型，promise 等。 这本书有大量有用的的总结和练习。
JavaScript 忍者秘籍 用非常实际的例子清楚地解释每个核心概念和技术。JavaScript 忍者秘籍 也包含了 API ,最佳实践，跨浏览器测试等。
JavaScript 忍者秘籍 非常的巧妙, 并不令人惊奇，因为作者有大量的开发经验。JavaScript 忍者秘籍 建议每一位想成为高手的开发者阅读。
猜你喜欢：
