关于jQuery的知识点记录
1.jQuery基础
core functionality: getting some elements and doing something with them.
jQuery的核心能力：获取元素，然后操作之
jQuery() = $()
由于JS中一切皆对象，函数也不例外，所有$()也有属性和方法，这也是jQuery实现获取元素，并对其操作的基础。
即$()的参数是DOM元素，这样就获取了这个DOM元素，然后在$()后面加上属性或方法，这样可以操作被选定的DOM元素。
2.$(document).ready( function() { /.../ } )
功能和 window.onload 一样，是等待页面加载好了再对页面操作，简写是$(function() { /.../ } )
不过这里$(document)是从页面的DOM树创建了jQuery对象，然后用.ready()作用在jQuery对象，对.ready()传入我们将要执行的函数
3.对$()传入CSS选择器
传入标准的的CSS选择器，以此来获取DOM元素，这个好理解，比如$( 'img' )
但值得注意的一点：这样获取DOM元素并不是动态的，即$( 'img' )，选定了这个img后，如果你又新加入了一个img，那么之前$( 'img' )选定的img不会包含这个后面新加入的img。
4.创建jQuery对象的其他方法
$( document.body.children[0] ) 这个方法就是用DOM的方式，选择body元素的第一个子元素
$( [ window, document ] ) 用list包含所有DOM元素，然后传入jQuery
// make a selection in the context of a DOM element
var firstBodyChild = document.body.children[0];
$( 'li', firstBodyChild );
// make a selection within a previous selection
var paragraph = $( 'p' );
$( 'a', paragraph );
5.判断是否获得了元素
因为$()永远返回true，所以用简单 if ( $() ) 无论获取到元素没有，都返回true。
所以要用length属性来判断：
if ( $( '#nonexistent' ).length > 0 ) {
// Correct! This code will only run if there's an element in your page
// with an ID of 'nonexistent'
}
简写：
因为0是falsy value，所以可以如下简写，如果返回的是0，则是false
if ( $( '#nonexistent' ).length ) {
// This code will only run if there's a matching element
}
6.对获取的单一元素使用jQuery方法
这时候必须用eq()，参数为元素的索引值，例子：
var listItems = $( 'li' );
var secondListItem = listItems.eq( 1 );
secondListItem.remove();
不用eq()的话，就只能用DOM属性了：
var listItems = $( 'li' );
var rawListItem = listItems[0]; // or listItems.get( 0 )
var html = rawListItem.innerHTML;
7.用jQuery创建新元素
对$()传入一个html标签，比如<p>或者<p>xxxx</p>或者<p class="xxx">xxxx</p>，则jQuery会创建它，存入内存，等待下一步处理。
这个和获取元素的区别在于，获取元素的话是直接写元素名，比如li，而创建则是写<li>。
然后，关于创建元素还有一点，比起一条全部写完（比如<p class="xxx">xxxx</p>），还可以传入对象来精确定制:
$( '<p>', {
html: 'Hello!',
'class': 'greet'
});
注意class属性必须用''包住，因为class是JS的保留关键字。
至于后续怎么处理这些被创建的元素，留待后面。
8. DOM的层级
<ul>
<li>
<span>
<i>Foo</i>
</span>
</li>
<li>Bar</li>
</ul>
The first list item is a child of the unordered list.
The unordered list is the parent of both list items.
The span is a descendant of the unordered list.
The unordered list is an ancestor of everything inside of it.
The two list items are siblings.
9. 过滤（遍历之一）
var listItems = $( 'li' );
// filter the selection to only items with a class of 'special'
var special = listItems.filter( '.special' );
// filter the selection to only items without a class of 'special'
var notSpecial = listItems.not( '.special' );
// filter the selection to only items that contain a span
var hasSpans = listItems.has( 'span' );
三个过滤方法filter, not, has，其中filter和not是反义，而has则过滤当前元素的后代。
10. 上下左右（遍历之一）
// get the first list item on the page
var listItem = $( 'li' ).first(); // also: .last()
// get the siblings of the list item
var siblings = listItem.siblings();
// get the next sibling of the list item
var nextSibling = listItem.next(); // also: .prev()
// get the list item's parent
var list = listItem.parent();
// get the list items that are immediate children of the list
var listItems = list.children();
// get ALL list items in the list, including nested ones
var allListItems = list.find( 'li' );
// find all ancestors of the list item that have a class of "module"
var modules = listItem.parents( '.module' );
// find the closest ancestor of the list item that has a class of "module"
var module = listItem.closest( '.module' );
网友评论