jQuery入门03--选择元素与理解结果集

在前端使用JavaScript很大程度是为了选择页面中元素对其进行一些操作，jQuery提供了非常强大的选择器和处理结果集的方法，方便我们选中需要操作的元素。
使用$(‘selector’) 可以得到一个jQuery对象，这个对象是一个类似数组结构的结果集，结果集中包含一个或多个元素。例：

$('div') 返回一个jQuery对象，其中包含着页面中所有div元素对象

选择器

上述中的selector就是这里所说的选择器，jQuery中的选择器与CSS选择器高度一致，如：

$('div') 选中页面中所有的div元素
$('#div1') 选中id为div1的元素
$('.style1') 选中class含有style1的元素
......

这里不一一举例，几乎所有CSS选择器都可以在jQuery中使用，完整文档请参考官方文档：selectors 或者中文文档：选择器
当然，jQuery中扩展了CSS的选择器，请参考官方文档：jquery-selector-extensions 或者中文文档：jQuery 选择器扩展

理解结果集

文章开头已经提到$(‘selector’)返回一个结果集，这个结果集是一个jQuery对象，既然这个集合是一个jQuery对象，那么就可以使用jQuery对象特有的方法和属性。

// body 中
<div id="div1"></div>
<div></div>
<div></div>

// script 中
var $div = $('div');

//属性: length 返回集合中元素的个数，没有与选择器匹配的元素则返回0
$div.length;  // 3

// 方法: get(index) 根据index返回一个元素对象
// 注意: 返回的是一个不是jQuery对象，以此返回值不能使用jQuery对象特有的功能
$div.get(0); // <div id="div1"></div>
$div[0]; // <div id="div1"></div> 等效

// 方法: index(selector|element) 根据参数返回下标
$div.index('#div1'); // 0
$div.index($('#div1')); // 0
$div.index(document.getElementById('#div1')); // 0 

// 方法: toArray() 将jQuery对象中包含的所有元素存入一个数组中，返回该数组
$div.toArray() // [<div id="div1"></div>,<div></div>,<div></div>]

// 遍历结果集中的元素 1
for (var i = 0; i < $div.length; i++) {
    console.log($div[i]);
}

// 遍历结果集中的元素 2
// each()是jQuery遍历结果集的方法，传入一个function作为参数，
// i与上例for中的i值一样，elem为遍历的元素
// 这里function会自动被调用3次($div中有3个元素)，i分别是0 1 2，elem分别是3个div元素
$div.each(function(i, elem) {
    console.log(elem)
});