jQuery(三)之 选择器(基础版)
对于jQuery的调用,我们一般都会传入参数
html: <div></div>
js: console.log($('<a />'));
console.log($('div'));
一、前置(DOM对象和jQuery对象)
- DOM对象,
关于这个,应该是前端的基础知识了,在文档对象模型中,每个部分都是节点。 - jQuery对象
这个是指通过jQuery构造函数创建出来的对象,可以通过jQuery选择器获取到,并以类数组的形式保存在jQuery中
二、实践
仔细观察返回的jQuery对象,感觉像是对DOM节点进行封装,并将其保存在jQuery上
一、实现一个基本的创建选择器
- 获取到传入参数,判断是创建一个jquery节点,还是查询节点,
- 创建新节点,传入的是一个html标签,以此进行判断
//获取到传入的参数
var jQuery = function(selector, content) {
return new jQuery.prototype.init(selector, content);
}
jQuery.prototype = {
length: 0,
init: function(selector, content) {
content = content || document;
var match; //match 用来保存selector;
if(typeof selector === 'string') {
// 判断selector传入的是一个html标签;
if(selector.charAt(0) === '<' && selector.charAt(selector.length-1) === '>' && selector.length >= 3 ) {
match = [selector];
}
if (match) {
//创建一个jQuery对象。
}
}
}
}
- 确定好是需要创建一个节点之后,我们就需要思考需要进行什么操作。需要将标签名解析出来,然后利用createElement创建节点,并保存。
- 定义一个html解析函数
var reg = /^<(\w+)\s*\/?>(?:<\/\1>|)$/;
jQuery.extend({
parseHtml: function(data, content) {
if (!data && typeof data != 'string') {
return null;
}
var parse = reg.exec(data);
return [content.createElement(parse[1])] //ok,这里是将创建的一整个DOM节点保存在了数组中。
}
})
* 已经可以获取到创建的节点了,下面将节点挂载在jQuery上就可以了。
if(match) {
for(; i < match.length; i++) {
var opt = match[i]
this[i]=jQuery.parseHtml(opt, content)[i]
}
}
好了,现在我们就可以看下代码的执行结果了。
ok,勉强可以实现,但好像还是有点不对的样子, 让我们来看下jQuery的源码。
可以看出是调用了merge方法。跳转到merge方法查看一下,一般来说,merge用于合并两个数组, 也可以用于将数组合并在有length属性的对象上。
// push.apply(_, arraylike) throws on ancient WebKit
merge: function (first, second) {
var len = +second.length,
j = 0,
i = first.length;
for (; j < len; j++) {
first[i++] = second[j];
}
first.length = i;
return first;
}
了解的区别后,我们来优化代码吧,
4. 优化
二、实现一个基本的标签选择器
- DOM原生节点查询
- document.querySelector
- document.querySelectorAll //返回一个NodeList
- 实践
利用document原生查取节点的方式,获得结果,再将其每一个放在jQuery上
var ele, i = 0;
if(match) {}
else {
ele = document.querySelectorALL(selector);
for(; i < ele.length; i++) {
this[i] = ele[i]
}
this.length = ele.length;
}
三、关于传入一个方法的选择器
- 首先看下init中是如何处理的:
var rootjQuery;
init = jQuery.fn.init = function(selector, context, root) {
...
root = root || rootjQuery;
if(typeof selector === 'string') {
...
} else if (isFunction(selector)) {
return root.ready !== undefined ? root.ready(selector) : selector(jQuery);
}
}
rootjQuery = jQuery(document);
代码可以看出,其实js是可以传递三个参数的,且root默认为document,如果root.ready没有初始话的话就立刻执行传入的方法,否则调用root.ready方法。关于root,从代码可以看出,是个全局,那么root.ready == jQuery.ready。
2. 在看ready方法前,需要明确一个问题,jquery传入方法的处理是在文档加载之后执行,所以首先应该对文档是否加载完毕进行判断。
function completed() {
document.removeEventListener('DOMContentLoaded',completed);
window.removeEventListener('load', completed);
jQuery.ready();
}
if(document.readyState === 'complete' || (document.readyState !== "loading" && !document.documentElement.doScroll)) {
window.setTimeout(jQuery.ready);
} else {
//dom加载完毕后,调用complate移除监听事件。
document.addEventListener('DOMContentLoaded', complete);
window.addEventListener('load', completed);
}
- 可以看下jQuery.ready方法了。
jQuery.extend({
// DOM是否已经准备好要使用了,发生更改,则修改为true;
isReady: false,
//跟踪就绪事件触发前要等待的项目数计数器
readyWait: 1,
ready: function(wait) {
if(wait === true ? --jQuery.readyWait : jQuery.isReady) {
return ;
}
//DOM节点已经准备好了
jQuery.isReady = true;
if(wait !== true && --jQuery.readyWait > 0) {
return
}
//如果有函数绑定,立即执行。
readyList.resolveWidth(document, [jQuery])
}
})
从2.的时候可以看出,在DOM节点加载完的时候,调用了一次ready,此时没有传入wait,ready中第一个判断直接跳过,记录jQuery.isReady = true,然后再看下一句执行,调用readyList.resolveWidth方法,此时DOM节点已经加载完毕,可以执行绑定的函数了,
关于这个readyList是什么,我们在代码中找一下看下,
var readyList = jQuery.Deferred();
jQuery.fn.ready = function(fn) {
ready.then(fn).catch(error) {
jQuery.readyException(error);
}
return this;
}
从以上代码可以看出,readyList是Deferred函数的返回值,且从下面的调用,可以推测Defferred函数应该是个promise对象。对于Defferred函数,下次再仔细研究一下。
现在让我们来回顾整个函数流程:
上面的内容只是我自己的理解,如果有什么不对的地方,希望大家帮忙指出啊!
jQuery(三)之 选择器(基础版)的更多相关文章
- jquery双向列表选择器select版
这个是select版的,若想美化某些样式是不支持得,可以用div模拟版的,功能基本实现能用了,需要其他功能自己加上. div模拟版链接:http://www.cnblogs.com/tie123abc ...
- jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jquery筛选方法
jQuery---jq基础了解(语法,特性),JQ和JS的区别对比,JQ和JS相互转换,Jquery的选择器(基础选择器,层级选择器,属性选择器),Jquery的筛选器(基本筛选器,表单筛选器),Jq ...
- java:JQuery(声明,JQ和JS对象的区别,prop,attr,addClass,offset,trigger,dblclick和change事件,hide,show,toggle,slideUp,slideDown,slideToggle,三种选择器,标签的获取,三张图片的放大与缩小)
1.JQuery: jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架).jQuery设计 的宗旨是“ ...
- jquery选择器基础知识(复制w3c)
jQuery 元素选择器 jQuery 使用 CSS 选择器来选取 HTML 元素. $("p") 选取 <p> 元素. $("p.intro") ...
- 强大的JQuery(一)--基础篇
JQuery是一个优秀的Javascript框架,是轻量级的js库,使用jQuery将极大的提高编写javascript代码的效率,,让写出来的代码更加优雅,更加健壮. 学好了jquery,我们相当于 ...
- jQuery初识之选择器、样式操作和筛选器(模态框和菜单示例)
一.jQuery 1.介绍 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架). jQuery设计的 ...
- jQuery使用(一):jQuery对象与选择器
一.简单的一些介绍 1.jQuery是由普通的是由一些系列操作DOM节点的函数和一些其他的工具方法组成的js库. 2.为什么要使用jQuery库? jQuery面向用户良好的设计在使用过程中彻底解放了 ...
- jQuery学习笔记(基础部分)
参考:菜鸟教程 一.简介 1.jQuery 是一个 JavaScript 库. 2.jQuery的版本:压缩版(用户生成)和未压缩(用于测试和开发) 3.jQuery的引入方式: 从http://jq ...
- 从零开始学习jQuery (三) 管理jQuery包装集
本系列文章导航 从零开始学习jQuery (三) 管理jQuery包装集 一.摘要 在使用jQuery选择器获取到jQuery包装集后, 我们需要对其进行操作. 本章首先讲解如何动态的创建元素, 接着 ...
随机推荐
- SpringMVC的乱码问题
1:表单提交controller获得中文参数后乱码解决方案 注意: jsp页面编码设置为UTF-8 form表单提交方式为必须为post,get方式下面spring编码过滤器不起效果 <%@ p ...
- 绕过dva dispatch在更新model数据的异步
我的业务是在更新选择列表后,马上进行总价格更新,那么由于model的更新不是实时的,因此我在this.props得到的值还是旧值,解决办法就是通过dispatch成功返回的值,传给计算函数 handl ...
- 用!htrace调试句柄泄漏的一般步骤
Windbg调试器的!htrace扩展对于调试泄漏处理非常方便.该过程基本上可归结为以下简单步骤: 启用跟踪 拍张快照 情景分析 显示差异 在第四步!htrace将在最后一个快照之后显示所有额外打开的 ...
- 异常DBG_PRINTEXCEPTION_C(0x40010006)和DBG_PRINTEXCEPTION_WIDE_C(0x4001000A)
简介 DBG_PRINTEXCEPTION_C,代码0x40010006:DBG_PRINTEXCEPTION_WIDE_C,代码0x4001000A:在调试器的控制台窗口打印异常信息/调试信息.它定 ...
- Qt常用类——QWidget
QWidget类是所有用户界面对象的基类. Widget是用户界面的基本单元:它从窗口系统接收鼠标,键盘和其他事件,并在屏幕上绘制自己. 每个Widget都是矩形的,它们按照Z-order进行排序.
- Educational Round 66 题解
作为橙名来水了一发…… 这次题目就比上次良心多了.7题有5题会做. 然而风格仍然很怪异……还是练少了? A 水题.不过一开始没注意细节挂了几发,罚时罚的真痛…… 明显是能除以 $k$ 就除以 $k$, ...
- 测试之selenium简介
目录 selenium是什么? 应该具备的知识 Selenium功能特性 Selenium的局限性 Selenium与QTP比较 Selenium工具套件 Selenium集成开发环境(IDE) Se ...
- CentOS7.6安装MYSQL8.0
1.一般CentOS默认安装了mariadb,所以先查看是否安装mariadb,如果安装就需要先卸载mariadbrpm -qa|grep mariadbrpm -e mariadb-libs --n ...
- java calendar获取系统当前小时数
calendar获取系统当前小时数 24小时制 Calendar calendar = Calendar.getInstance(); int curHour24 = calendar.get(c ...
- QuantLib 金融计算——收益率曲线之构建曲线(4)
[TOC] 如果未做特别说明,文中的程序都是 C++11 代码. QuantLib 金融计算--收益率曲线之构建曲线(4) 本文代码对应的 QuantLib 版本是 1.15.相关源代码可以在 Qua ...