逐行分析jquery源码的奥秘，jquery源码逐行详解

完全理解jQuery源代码,在前端行业算什么水平

1、前端领域现在很杂，很乱。有的专注于效果实现，跟动效设计师“愉快的玩耍”；有的专注于代码的动态更新维护，组件化吃天下。当然如果Jquery库弄的强无敌也是很有竞争能力的。jquery作为JavaScript的类库，解决了很多的问题，闲话不扯那么多了。

2、依读了2周jQuery源码的人感觉来说，完全理解jQuery，就拿jQuery 11这个版本10337行代码来说，水平已经很不错了。谦虚点说，已经入门。骄傲点，国内领先水平。但其码我感觉是js架构之路起行的第一步，完全理解源码，说明有独立构建或组织大型web前端框架的能力和基础。

3、初级前端工程师：能熟练使用html、css、js，主要工作还是搭建静态页面。进阶知识的话就是响应式这一块了，一套代码能适配pc+手机是初级前端工程师的进阶。中级前端工程师：作为一名中级前端工程师的话，除了上面的以外，还需要会使用一些框架之类的东西，像bootstrap、jquery之类的。

相关问答

Q1: 如何正确阅读jquery源码和jquery插件源码

1、jQuery 里面有很多东西是出于兼容性，历史遗留。比如 .ready() 之类的函数，为什么会很scroll 有关，那是为了兼容某些ie。这种代码对于编程思想来说不仅没用，而且是杂音，你要筛选出来就得了解这段代码的变动，费心费力得不偿失。

2、不是你学的不够好的问题。一般你看别人稍复杂点的插件源码确实是不能立马就清楚的。因为你不知道逻辑。简单的你可以打断点跟踪下 他整体的过程，这样就可以了解个大概，最后在扣扣细节就可以了。

3、第一种：查看 jquery 源码查看源码的方法很简单，右键 jqueryjs ，用记事本打开，不论是压缩版( min 版)还是开发版第一行你所用的 jquery 的版本号。

Q2: jQuery解决浏览器兼容性问题案例分析

1、本文实例分析了jQuery解决浏览器兼容性问题的方法。分享给大家供大家参考，具体如下：问题：当用户在名为abc的input控件按下回车键时，触发另一控件imgLogin的click事件 在IE 中 document.getElementById(abc).click()；能够调用abc的click事件 但是在FF中却不行。

2、当然 也可以直接scrollTop 而不使用pageYOffset 以下是MDN 提供的兼容性代码 scrolltop = (((t = document.documentElement) || (t = document.body.parentNode)) && typeof t.scrollTop == ‘number’ ？ t ： document.body).scrollTop 转载，仅供参考。

3、可以使用原生JS或者低版本的Jqueryx版本。因为Jquery从x版本开始已经不再进行IE低版本(IEIEIE8)的兼容性处理。如果需要兼容低版本的IE版本，建议使用原生JS或者低版本的Jqueryx版本。

Q3: jquery中append()与appendto()用法分析

append（）方法，向每个匹配的元素内部末尾追加内容。语法：【＄（＇＇）.append（＇＇）；】。相当于js中的appendChild（）方法。appendTo（）方法作用与append（）方法作用相同。语法：【＄（＇＇）.appendTo（＄（＇＇））；】。prepend（）方法，向每个匹配的元素内部前置内容。

参数介绍：expr (String)： 用于匹配元素的jQuery表达式。用法示例：HTML代码为I love china 把标签b追加到p元素中，写法为$(b).appendTo(p)；结果为：I love china 使用appendTo这个方法是颠倒了常规的$(A).append(B)的操作，即不是把B追加到A中，而是把A追加到B中。

关于append（）方法定义和用法：append() 方法在被选元素的结尾插入指定内容。此外，如需在被选元素的开头插入内容，请使用 prepend() 方法。语法：(selector).append(content，function(index，html))。设计一个简单的html页面，存在一个div，和一个添加按钮。

假设需要显示的数据是“123”。显示的div的ID是“aaa”。

Q4: jQuery中closest和parents的区别分析

1、这是因为closest是从当前元素开始向上遍历的。而不同于parents()方法，是从当前元素的父元素开始向上遍历。当点击Click me！时，颜色也会变化。这同样经过上面步骤，从当前元素向上匹配，只不过不符合条件，再往上时遇见了。

2、parent()是在父节点中，往前匹配。ps：请注意了---子节点和父节点都是相邻的，深度为1的节点，也就是标题提到的检索深度为1 后代节点的检索（检索深度N=1）find()检索的是子代元素和后代元素，不会检索兄弟节点。parents() 检索的是祖辈元素(包括父元素)的集合。

3、jquery获取父元素比如；parent()，parents，closest()，这些都可以查找父元素或节点，具体步骤如下：parent([expr])用一个包含着所有匹配元素的唯一父元素的元素集合。你用可选的表达式来筛选。

4、如果给定一个表示 DOM 元素集合的 jQuery 对象，.parents() 方法允许在 DOM 树中搜索这些元素的祖先元素，并用从最近的父元素向上的顺序排列的匹配元素构造一个新的 jQuery 对象。元素是按照从最近的父元素向外的顺序被返回的。

5、closest从本身意思上可以看出是：最靠近的。从本身开始，逐级向上级搜索匹配的元素，并返回最先匹配（最靠近该元素）的祖先元素。

6、(p).parent().parent()取到的是div1，这点比较奇特；不过Jquery对象本身的特点决定了这是可行的。

关于逐行分析jquery源码的奥秘和jquery源码逐行详解的介绍到此就结束了，不知道你从中找到你需要的信息了吗 ？如果你还想了解更多这方面的信息，记得收藏关注本站。