jQuery 2.1.4版本的源码分析
jQuery 2.1.4版本的源码分析
jquery中获取元素的源码分析
jQuery.each({
// 获取当前元素的父级元素
parent: function(elem) {
var parent = elem.parentNode;
//nodeType为11的节点类型是DocumentFragment
return parent && parent.nodeType !== 11 ? parent : null;
},
//获取所有的 父节点 这涉及到 dir 方法
parents: function(elem) {
return jQuery.dir(elem, "parentNode");
},
parentsUntil: function(elem, i, until) {
return jQuery.dir(elem, "parentNode", until);
},
next: function(elem) {
return sibling(elem, "nextSibling");
},
prev: function(elem) {
return sibling(elem, "previousSibling");
},
nextAll: function(elem) {
return jQuery.dir(elem, "nextSibling");
},
prevAll: function(elem) {
return jQuery.dir(elem, "previousSibling");
},
nextUntil: function(elem, i, until) {
return jQuery.dir(elem, "nextSibling", until);
},
prevUntil: function(elem, i, until) {
return jQuery.dir(elem, "previousSibling", until);
},
//返回所有的兄弟节点
siblings: function(elem) {
return jQuery.sibling((elem.parentNode || {}).firstChild, elem);
},
children: function(elem) {
return jQuery.sibling(elem.firstChild);
},
//返回框架里面的所有内容 或者 元素的所有子节点
contents: function(elem) {
return elem.contentDocument || jQuery.merge([], elem.childNodes);
}
}, function(name, fn) {
jQuery.fn[name] = function(until, selector) {
var matched = jQuery.map(this, fn, until);
if(name.slice(-5) !== "Until") {
selector = until;
}
if(selector && typeof selector === "string") {
matched = jQuery.filter(selector, matched);
}
if(this.length > 1) {
// Remove duplicates
if(!guaranteedUnique[name]) {
jQuery.unique(matched);
}
// Reverse order for parents* and prev-derivatives
if(rparentsprev.test(name)) {
matched.reverse();
}
}
return this.pushStack(matched);
};
});
jQuery.extend({
// 寻找父级 直到 找到until结束 根据parents 方法可知 dir = parentNode
dir: function(elem, dir, until) {
var matched = [],
truncate = until !== undefined;
//进入循环的条件 不是根节点 且 且吧父节点复制给elem
while((elem = elem[dir]) && elem.nodeType !== 9) {
if(elem.nodeType === 1) {
//跳出循环
if(truncate && jQuery(elem).is(until)) {
break;
}
matched.push(elem);
}
}
return matched;
},
//通过上面的源码next方法可知 elem = nextSiblilng
sibling: function(n, elem) {
var matched = [];
for(; n; n = n.nextSibling) {
if(n.nodeType === 1 && n !== elem) {
matched.push(n);
}
}
return matched;
}
});
这里说一下 nextSibling 与 nextElementSibling的区别
nextSibling :返回元素之后的兄弟节点 (包含 注释 文本)
nextElementSibling:返回元素之后的兄弟节点 不包括注释 跟文本 且他的属性只为读
jQuery.noConflict源码分析
var
// 将JQuery挂载到Windows对象下
_jQuery = window.jQuery, // 将$挂载到Windows对象下
_$ = window.$;
// 当调用 Jquery.noConfict deep ==false 那么 $ 别名失效 如果 deep==true 那么 JQuery 的别名失效
jQuery.noConflict = function(deep) {
if(window.$ === jQuery) {
window.$ = _$;
} if(deep && window.jQuery === jQuery) {
window.jQuery = _jQuery;
} return jQuery;
}; // Expose jQuery and $ identifiers, even in AMD
// (#7102#comment:10, https://github.com/jquery/jquery/pull/557)
// and CommonJS for browser emulators (#13566)
if(typeof noGlobal === strundefined) {
window.jQuery = window.$ = jQuery;
2016-11-22 21:14:38
jQuery 2.1.4版本的源码分析的更多相关文章
- jQuery实现DOM加载方法源码分析
传统的判断dom加载的方法 使用 dom0级 onload事件来进行触发所有浏览器都支持在最初是很流行的写法 我们都熟悉这种写法: window.onload=function(){ ... } 但 ...
- jQuery deferred应用之ajax详细源码分析(二)
在上一节中,我只贴出了$.Deferred的源码分析,并没用讲解怎么使用它,现在我们先看看$.ajax是如何使用它,让我们进行异步任务的处理. 如果没看上节的代码,请先稍微了解一下jQuery Def ...
- jQuery().end()的内部实现及源码分析
jQuery().end()的作用是返回当前jQuery对象的上一个状态. 1.end()源码: // 所有通过pushStack方法获得的jQuery对象都可以通过end方法返回之前的状态 // ...
- jQuery-1.9.1源码分析系列(十六)ajax——响应数据处理和api整理
ajax在得到请求响应后主要会做两个处理:获取响应数据和使用类型转化器转化数据 a.获取响应数据 获取响应数据是调用ajaxHandleResponses函数来处理. ajaxHandleRespon ...
- angular源码分析:injector.js文件分析——angular中的依赖注入式如何实现的(续)
昨天晚上写完angular源码分析:angular中jqLite的实现--你可以丢掉jQuery了,给今天定了一个题angular源码分析:injector.js文件,以及angular的加载流程,但 ...
- jQuery1.9.1源码分析--数据缓存Data模块
jQuery1.9.1源码分析--数据缓存Data模块 阅读目录 jQuery API中Data的基本使用方法介绍 jQuery.acceptData(elem)源码分析 jQuery.data(el ...
- JDK源码分析(6)ConcurrentHashMap
JDK版本 ConcurrentHashMap源码分析 table:默认为null,初始化发生在第一次插入操作,默认大小为16的数组,用来存储Node节点数据,扩容时大小总是2的幂次方. nextTa ...
- JDK1.8源码分析03之idea搭建源码阅读环境
序言:上一节说了阅读源码的顺序,有了一个大体的方向,咱们就知道该如何下手.接下来,就要搭建一个方便阅读源码及debug的环境.有助于跟踪源码的调用情况. 目前新开发的项目, 大多数都是基于JDK1.8 ...
- drf源码分析系列---版本控制
版本的使用 第一步:写路由url(r'^api/(P<version>\w+)/user/$',views.UserView.as_view()), 第二步:写模块导入from rest_ ...
随机推荐
- jQuery火箭图标返回顶部代码
在网上找来段使用jQuery火箭图标返回顶部代码,感觉比较酷,比较炫,大概样式如下, 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1. ...
- bzoj 4032 [HEOI2015]最短不公共子串——后缀自动机
题目:https://www.lydsy.com/JudgeOnline/problem.php?id=4032 不是 b 的子串的话就对 b 建后缀自动机,在 a 上枚举从每个位置开始的子串或者找子 ...
- 实现对sqlite数据库增删改查
package com.example.db.dao;import java.util.ArrayList;import java.util.List;import android.content.C ...
- 从jvm角度来解析java语法糖
java有很多语法糖,比如自动拆箱,自动装箱,foreach等等,这些原理相信每一个入门教程里都有讲,但是我相信不是每一个人 都通过查看这些语法糖的字节码来确认这些原理,因为我也是现在才想看一下. 1 ...
- Hyperledger Fabric快速上手
安装go curl -O https://storage.googleapis.com/golang/go1.10.2.linux-amd64.tar.gz tar -xvf go1.10.2.lin ...
- FPGA中的“门”
逻辑门 在ASIC的世界里,衡量器件容量的常用标准是等效门.这是因为不同的厂商在单元库里提供了不同的功能模块,而每个功能模块的实现都要求不同数量的晶体管.这样在两个器件之间比较容量和复杂度就很困难. ...
- java代码====实现按钮点击改变颜色=======
总结: package com.a.b; import java.awt.Color; import java.awt.event.ActionEvent; import java.awt.event ...
- Vue.js:样式绑定
ylbtech-Vue.js:样式绑定 1.返回顶部 1. Vue.js 样式绑定 Vue.js class class 与 style 是 HTML 元素的属性,用于设置元素的样式,我们可以用 v- ...
- 基于angularJs+ui-router+bootstrap风格的表格生成指令
1 /** 根据参数定制表格 * api接口: * form-model:[item1,item2,item3] * form-properties:[ * {key:'',label:'',thCl ...
- windows右键打开方式里面添加新的应用程序
1.打开注册表编辑器.打开运行窗口,快捷键,开始+R.输入“regedit”,回车确定. 2.进入注册表编辑器的HKEY_CLASSES_ROOT文件夹下的*子文件夹下的shell文件夹. 3.右键s ...