jQuery知识点记录

2017-07-04 本文已影响31人 BryantHe

关于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标签，比如或者xxxx或者xxxx，则jQuery会创建它，存入内存，等待下一步处理。

这个和获取元素的区别在于，获取元素的话是直接写元素名，比如li，而创建则是写<li>。

然后，关于创建元素还有一点，比起一条全部写完（比如xxxx），还可以传入对象来精确定制:

$( '<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' );