标签:context xpl 简单 索引 body 是什么 长度 eth core
jQuery.fn = jQuery.prototype = { jquery: core_version, // 49行 core_version = "2.0.3" constructor: jQuery, init: function(){}, selector: "", length: 0, toArray: function(){}, get: function(){}, pushStack: function(){}, each: function(){}, ready: function(){}, slice: function(){}, first: function(){}, last: function(){}, eq: function(){}, map: function(){}, end: function(){}, push: core_push, // 其实这个方法就是Array.prototype.push。这样可以方便压缩代码。见53行及47行 sort: [].sort, splice: [].splice }
console.log($().jquery); // "2.0.3"
$(function(){}); // 当dom加载完成后就调用此方法(我们自己写的代码都在这里面) $("li"); // 选择所有的li标签 $("<div></div>"); // 创建元素 $("li", $(".class1")); // 选择所有的li标签,这个li标签必须在.class1标签下
情况一 // 容错处理 $(""), $(null), $(undefined), $(false) if (!selector) { return this; } 情况二 // 字符串的情况: 如选择器$("div"), $("div p") , 创建元素, $("<li></li>"),$("<ul><li></li></ul>") if (typeof selector === "string"){ 情况三 // $(this), $(document) }else if(selector.nodeType){ 情况四 // $(function(){}) }else if(jQuery.isFunction(selector){ } if (){}
// 111-117
if (selector.charAt(0) === "<" && selector.charAt(selector.length - 1) === ">" && selector.length >= 3){ // 创建元素 情况1
}else{ // 选择器 情况2
}
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/,
// A simple way to check for HTML strings // Prioritize #id over <tag> to avoid XSS via location.hash (#9521) // Strict HTML recognition (#11290: must start with <)
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/ ^必须是什么什么开始 $ 必须以什么什么结束 (?:\s*(<[\w\W]+>)[^>]*|#([\w-]*)) 这是为啥子要包裹一下括号,而且还有?: 这是非捕获型分组,主要是提高性能用的。 \s*(<[\w\W]+>)[^>]*|#([\w-]*) \s (space)是空格的意思。\r\n\f\v\\x20 等都可以被认为是空格 *代表可以重复0次或多次。*可以联想到天上的星星。有时候没有,而有时候数都数的不过来 注意到中间有一个管道符,这代表或的意思。 情况一 (<[\w\W]+>)[^>]* 情况二 #([\w-]*)) 情况一 (<[\w\W]+>)[^>]* 注意分组内容 <[\w\W]+> 这个正则很有意思 必须以< 开头,中间的字符任意(包括空格), 个数大于等于1。 [^>]* 代表除了^之外,啥字符都能匹配的上,匹配次数是0次或者多次 情况二 #([\w-]*) 这是匹配id选择器用的 第一个字符得是 # [\w-]的字符范围比较广,0到9,a到z,A到Z以及字符-。
1. $("<li></li>") [null, ‘<li></li>‘, null] 2. $("<li></li><li></li>") [null, ‘<li></li><li></li>‘, null]
rquickExpr = /^(?:\s*(<[\w\W]+>)[^>]*|#([\w-]*))$/ 1. $("#main") ["#main", undefined, "main"] 2. $("div p") // 对,没错,选择器其实不在这里做处理 null 3. $("<li>123") [‘<li>123‘, ‘<li>‘, null]
// 120-174
if (match && (match[1] || !context)){
// 创建标签或者id选择器的情况
// id选择器的match的第二个元素为undefined,但是id选择器是没有context的。
// context是啥? $(“li”, $("div")) $的第二个参数便是context,但我们如果使用id选择器的话,是不会传入第二个参数来缩小上下文的。
// 因此id选择器也算一个
if (match[1]){
// 创建标签的情况,见下面
}else{
// id选择器的情况, 见下面
}
}else if (!context || context.jquery){ }else{ }
// 124 context = context instanceof jQuery ? context[0] : context;
$("li", $("div")); //此时context便是jQuery的实例,但是这玩意不能直接用的,因此要将jQuery转为dom。 // (因为jQuery实例是一种伪数组的形式,因此直接context[0])
jQuery.merge(this, jQuery.parseHTML( match[1], context && context.nodeType ? context.ownerDocument || context : document, true ));
var arr1 = [1,2]; var arr2 = [3,4]; $.merge(arr1, arr2); console.log(arr1); // [1,2,3,4] console.log(arr2); // [3,4] var obj = { 0: 1, 1: 2, length: 2 } var arr3 = [3,4]; $.merge(obj, arr3); console.log(obj); // {0:1, 1:2, 2:3,3:4, length: 4} console.log(arr3); // [3,4]
$.parseHTML("<li></li>") // [li] 注意数组中的元素是node节点!!!! $.parseHTML("<li></li><li></li>") // [li, li] $.parseHTML("<ul><li></li><li></li></ul>") // [ul]
$.parseHTML("<li></li><li></li><script>alert(1)</script>") // [li, li]
$.parseHTML("<li></li><li></li><script>alert(1)</script>", document, true) // [li, li, script]
jQuery.merge(this, jQuery.parseHTML( match[1], context && context.nodeType ? context.ownerDocument || context : document, true ));
context && context.nodeType ? context.ownerDocument || context : document
$("<li></li>")
{ 0: li }
$("<p></p>", {title: 111, html: 123}}).appendTo($(document.body));
// <p title="111">123</p>
if (rsingleTag.test(match[1]) && jQuery.isPlainObject(context)) { for (match in context) { // Properties of context are called as methods if possible if (jQuery.isFunction(this[match])) { this[match](context[match]); // ...and otherwise set as attributes } else { this.attr(match, context[match]); } } }
rsingleTag = /^<(\w+)\s*\/?>(?:<\/\1>|)$/ \1 是反向引用,这里的字符得和第一个分组的结果一样,即这部分 (\w+) 如果是这样的html字符 <li></ul>, 那么就不满足要求
if (jQuery.isFunction(this[match]))
$("<li></li>", {html: 123}); // 会调用 this.html(123) ,注意这里this中的内容
return this;
// 调用原生方法 elem = document.getElementById(match[2]); // Check parentNode to catch when Blackberry 4.6 returns // nodes that are no longer in the document #6963 // 通过这个索引(#6963)可以去jQuery官网查看更详细的说明 // 这里也写了原因,是因为黑莓4.6删除了node后,这个node还会存在。因为需要判断下这个node的父节点在不在 if (elem && elem.parentNode) { // Inject the element directly into the jQuery object this.length = 1; this[0] = elem; } this.context = document; this.selector = selector; return this;
else if (!context || context.jquery){ return (context || rootjQuery).find(selector); }
// rootjQuery = jQuery(document); 见867行
$(‘li‘) // context 不存在 $(document).find(‘li‘) $(‘li‘, $(‘div‘)) // $(‘div‘).find(‘li‘)
return this.constructor(context).find(selector); // $(context).find(selector);
$(document.getElementById("main"))
else if(selector.nodeType){
this.context = this[0] = selector; this.length = 1; return this;
}
else if (jQuery.isFunction(selector)) { return rootjQuery.ready(selector); }
if (selector.selector !== undefined) { this.selector = selector.selector; this.context = selector.context; }
return jQuery.makeArray(selector, this)
jQuery.makeArray(selector, {0: 1, length: 1}) 返回这样的对象 0: 1 1: "111" length: 2
一.3-jQuery.prototype对象中的属性与方法(上)
标签:context xpl 简单 索引 body 是什么 长度 eth core
原文地址:https://www.cnblogs.com/re-is-good/p/12906215.html