选择器

[george-wq]

2.2.1 选择器

课程目标常用的jQuery选择器接口、选择器接口源码分析

jQuery对象和DOM对象

DOM对象是由宿主环境所提供的对象，在文档对象模型中，每个部分都是节点。
如：所有的HTML元素是元素节点，而Element对象表示HTML元素。HTML DOM Element 对象可以拥有类型为元素节点、文本节点、注释节点的子节点。

jQuery对象：jQuery构造函数创建出来的对象。通过jQuery选择器可以获取HTML的元素，并且以一种类数组的形式存储jQuery对象中。

错误用法和对象转换

//错误用法示例代码
$('div').innerHTML;

//错误用法示例代码
document.getElementsByTagName('div')[0].html();

//Element对象转换成jQuery对象
var domObj = document.getElementById('id');
var obj$ = $(domObj); //jQuery对象

//jQuery对象转换成Element对象
var $box = $('.box');
var box = $box[0];

常用的jQuery接口

//传入对象
$(this) $(document) 把传入的对象包装成jQuery对象

//传入函数
$(function(){}) 这个是在页面文档加载完成后加载执行的,等效于在DOM加载完毕后执行了$(document).ready()方法

//传入字符串
$('.box') 查询DOM节点包装成jQuery对象

//传入HTML字符串
$('<div>') 创建DOM节点包装成jQuery对象

//空
$() 创建jQuery对象

Sizzle 与 querySelector

Sizzle

• 一个纯粹的javascript css选择器引擎，可以轻松的插入主机库;
• jQuery中引入了Sizzle,以实现选择器查询

querySelector

• 文档对象模型Document引用的querySelector()方法返回文档中与指定选择器或选择器匹配的第一个html元素Element。如果找不到匹配项，则返回null。

如何创建DOM节点包装成jQuery对象?

• context.createElement创建DOM节点存储在数组中，调用merge方法把数组中存储的DOM节点的成员添加到jQuery实例对象上.

jQuery实例对象length属性的作用?

• 存储DOM节点的数组对象平滑地添加到jQuery实例对象上。

merge方法的应用场景有哪些?

• 合并数组
• 把数组成员合并在有length属性的对象上。

$(document).ready()和$(function(){})的关系?

• $(document).ready()是对document.DOMContextLoaded事件封装,$(function(){})每次调用$()传入的参数会收集readyList数组中,当document.DOMContextLoaded事件触发依次执行readyList中收集的处理函数。