jQuery 核心方法

jQuery

$和$()

$是 jQuery 的缩写，在 jQuery 中这两者可以相互替换。
jQuery 中的大多数方法都在$.fn命名空间下，但是也有少数的方法在$命名空间下，对于这点我们需要知道的是

• 在 jQuery 选择上调用的方法都是在$.fn命名空间下。
• $命名空间下的方法多为多功能的方法。

少数情况下，$.fn和$下会有同名的方法，这需要引起格外的注意。

$(document).ready()

• $(document).ready()在文档的 DOM 结构加载完成时触发。
• $(document).load()在文档（包括图片和框架）完全加载完时触发。
• $()等于$(document).ready()。

避免与其他库的冲突

当其他库占用$时可以通过以下方法解决

• 创建新的别名
  可以通过 noConfict()方法用其他字符串替换$。

var $j = jQuery.noConflict();
//后面的代码中"$"均用"$j"代替
$j(document).ready(function() {
    $j( "div" ).hide();
});

• 使用立即执行函数
  如果执意要使用$，可以将$作为参数传入一个立即执行函数中。

(function( $ ) {
    //
})( jQuery );

• 将$作为参数传入$(document).ready()

jQuery(document).ready(function( $ ) {
    //
});

特性

.attr()方法既可以取得也可以设置特性。

$( "a" ).attr( "href", "allMyHrefsAreTheSameNow.html" );
$( "a" ).attr({
    title: "all titles are the same too!",
    href: "somethingNew.html"
});
$( "a" ).attr( "href" ); //返回 href 特性

选择元素

选择

向$()传入 CSS 选择器，jQuery 中支持绝大多数的 CSS3选择器，包括一些没有被列入标准的 CSS 选择器。

$( "#contents ul.people li" );

另外，只要使用了$()就会返回一个对象，即使是没有取得任何元素。因此以下的 if 判断中的代码始终会执行。

if ( $( "div.foo" ) ) {
    ...
}

这种情况下可以改为判断$("div.foo").length。

精炼和混合选择

jQuery 还提供了一些方法来精炼和混合选择。

$( "div.foo" ).has( "p" );         // 含有 p元素的 div.foo
$( "h1" ).not( ".bar" );           // 类名中不含有 bar 的h1
$( "ul li" ).filter( ".current" ); // 既拥有 current 类名有时 ul li 的元素
$( "ul li" ).first();              // 第一个 ul li
$( "ul li" ).eq( 5 );              // 第六个 ul li

表单选择

jQuery 提供了一些伪类来对表单元素进行选择。

• :checked：被选择的单选框、复选框或者选择菜单。
• :disabled：被禁用的<input>元素。
• :input：所有<input>、<textarea>、<select>和<button>元素。
• :selected：所有<option>元素中的<select>元素。
• 还可以根据 type 选择如:password、:reset 等等。

使用选择

getter 和setter

jQuery 中许多方法既可以作为 getter 也可以作为 setter，这些方法在没有传入参数时作为 getter 返回值，传入了参数时作为 setter 设置值为参数。

当 getter 在选择上被调用时，getter 只会返回第一个元素相应的值；当 setter 在选择上被调用时，setter 会对所有元素的相应值进行设置。

链式调用

setter 会返回原来的 jQuery 对象，因此可以在 setter 返回的对象上继续调用方法，链式调用跨行也可以执行。

//以下代码可以被执行
$( "h1" ).html("hello world").addClass( "test" );
//以下代码不可以被执行
$( "h1" ).html().addClass( "test" );

在中间调用.end()可以返回到最初的选择返回的对象。

$( "#content" )
    .find( "h3" )
    .eq( 2 )
        .html( "new text for the third h3!" )
        .end() // 返回#content 中的所有 h3
    .eq( 0 )
        .html( "new text for the first h3!" );

操纵元素

取得和设置元素特性

• .html()
• .text()
• .attr()：返回或者设置给出属性的值。
• .width()：以整数形式返回元素的宽度或者设置元素宽度。
• .height()：以整数形式返回元素的高度或者设置元素高度。
• .position()：返回元素相对于定位元素的坐标。
• .val()：返回或者设置表单元素的值。

移动、复制和移除元素

在 jQuery 中共有两种途径来移动元素

• 将被选择元素相对于另一元素放置。
• 将另一元素相对于被选择元素放置。

.insertAfter()、.insertBefore()、.appendTo()和 prependTo()这个几个方法都是以第一种途径来移动元素。
而.after()、.before()、.append()和 prepend()这个几个方法都是以第二种途径来移动元素。

var li = $( "#myList li:first" ).appendTo( "#myList" );
$( "#myList" ).append( $( "#myList li:first" ) );

.clone()复制元素，如果要同时复制元素的数据和事件，那么可以传入 true

$( "#myList li:first" ).clone().appendTo( "#myList" );

移除元素可以使用.remove()和.detach()方法，两个方法移除的同时都会返回移除元素的引用，后者还会带有元素的数据和事件。

创建元素

$( "<p>This is a new paragraph</p>" );
$( "<li class=\"new\">new list item</li>" );
$( "<a/>", {
    html: "This is a <strong>new</strong> link",
    "class": "new",
    href: "foo.html"
});

通常属性名是不用带上引号的，class 需要带上引号的原因是 class 是JavaScript 的保留词。

操作特性

//操作一个特性
$( "#myDiv a:first" ).attr( "href", "newDestination.html" );

//操作多个特性
$( "#myDiv a:first" ).attr({
    href: "newDestination.html",
    rel: "nofollow"
});

//用函数来决定特性值
$( "#myDiv a:first" ).attr({
    rel: "nofollow",
    href: function( idx, href ) {
        return "/new/" + href;
    }
});
$( "#myDiv a:first" ).attr( "href", function( idx, href ) {
    return "/new/" + href;
});

jQuery 对象

当$()方法接受一个 CSS 选择器后会返回一个包含所有符合条件的元素的 jQuery 对象。这个对象具有 length 属性，确认 length 属性常用的检查是否正确包括相应元素的方法。

取得这个 jQuery 对象中的元素可以使用.eq()方法、.get()方法或者方括号。这几种方法的区别在于.eq()方法返回的是一个 jQuery-wrapped DOM 元素，.get()方法和方括号返回的是原生的 DOM 元素。

var headings = $( "h1" );
//返回 jQuery-wrapped DOM 元素
var firstHeading = headings.eq( 0 );
//返回原生的 DOM 元素
var firstHeadingElem = $( "h1" ).get( 0 );
var firstHeadingElem = $( "h1" )[ 0 ];

使用$()传入 CSS 选择器创建的 jQuery 对象是独一无二的，即使是用相同的 CSS 选择器所创建的两个 jQuery 对象也不是===的。

通常，开发者会在保存了 jQuery 对象的变量名前面加上$作为前缀以区分 jQuery 对象以及原生 DOM 元素。

jQuery 对象不会实时更新。

节点树遍历

遍历可以分为三个部分：父节点、子节点、同胞节点。节点树遍历的方法调用在选择上时会对每个元素调用这个方法，然后合并输出。

父节点

通过选择取得父节点的方法有以下几个：.parent()、.parents()、.parentsUntil()和.closest()
以以下 DOM 结构为例

<div class="grandparent">
    <div class="parent">
        <div class="child">
            <span class="subchild"></span>
        </div>
    </div>
    <div class="surrogateParent1"></div>
    <div class="surrogateParent2"></div>
</div>

//直接选择元素的父元素
$( "span.subchild" ).parent(); //[ div.child ]
//选择元素的所有父元素:
$( "span.subchild" ).parents( "div.parent" ); //[ div.parent ]
$( "span.subchild" ).parents(); //[ div.child, div.parent, div.grandparent ]
//返回选择元素的所有父元素直到一父元素，不包括该父元素
$( "span.subchild" ).parentsUntil( "div.grandparent" ); //[ div.child, div.parent ]
//返回选择元素最近的祖先元素，包括选择元素本身。
$( "span.subchild" ).closest( "div" ); //[ div.child ]
$( "div.child" ).closest( "div" ); //[ div.child ]

子元素

取得子元素的方法有.children()和.find()，这两个方法的区别在于.children()方法只会取得该元素直接的子元素，而.find()方法会包括子元素的子元素。

同胞元素

• .next()：选择下一个同胞节点。
• .prev()：选择前一个同胞节点。
• .nextAll()：选择元素之后的所有同胞节点。
• .prevAll()：选择元素之前的所有同胞节点。
• .sibling()：选择所有同胞节点（不包括该节点本身）。

修改样式

.css()方法可以取得或者设置元素的属性，传入的属性名既可以用 CSS 格式的font-size，也可以是 JS 格式的fontSize。这个方法也支持同时设置多个属性。

$("h1").css({
    fontSize:"100px",
    color:"red"
});

jQuery 还提供了一些修改 class 特性的方法。.addClass()方法添加类名，.removeClass()方法移除类名，.toggleClass()方法转换类名，.hasClass()方法确定元素是否存在该类名。

还有.width()方法、.height()方法和.position()方法。

数据方法

.data()方法可以在元素上面储存数据，或者提取数据。这个方法接受一个或两个参数，第一个参数是键名，第二个参数是值，也可以直接以对象的形式传入多个键值对。当该方法作为 geter 时返回取得的数据，当该方法作为 setter 时，返回 jquery 对象本身。

$( "#myDiv" ).data( "foo", "bar" );

实用方法

jquery 在$命名空间下提供了一些实用的方法。

• $.trim()：接受一个字符串，去掉字符串首尾多余的空格。
• $.each()：遍历数组或者对象，这个方法接受两个参数，遍历的数组或者对象，执行的操作。这个方法也可以在 jquery 选择上调用，这时该选择将会替代第一个参数。

$.each({ foo: "bar", baz: "bim" }, function( k, v ) {
    console.log( k + " : " + v );
});

• $.inArray()：返回一个值在数组中的序号，"-1"表示不存在。

$.inArray( 4, myArray )

• $.extend()：这个方法可以接受任意个参数，使用后面的对象的属性来改变第一个对象的属性。
• $.proxy()：接受一个已有的函数，返回一个在给定上下文中执行的函数。它有两种使用方式，第一种是传入函数和上下文，第二种是传入上下文和函数名。

$("#test").click($.proxy(you.test,you));
$("#test").click($.proxy( you, "test"))

• $.type()：传入变量，返回数据类型。

遍历

$.each()方法。这个方法接受两个参数，遍历的数组和处理的函数。在这个方法中遍历到的数组元素序数和值将分别保存在函数的第一二个参数中。

$.each( arr, function( index, value ){
    sum += value;
});

.each()方法在选择上调用，接受一个处理元素的函数，这个函数的两个参数分别是序数和遍历到的这个元素。在这个函数中 this 将指向这个元素。

$( "li" ).each( function( index, element ){
    console.log( $( this ).text() );
});

.map()方法用法同.each()方法，只不过这个方法会返回一个由所有返回值组成的 jQuery-wrapped 数组，如果在后面加上.get()就可以转换为原生数组。

$.map()方法用法同$.each()方法。$.map()方法返回一个由所有返回值组成的原生数组，在这后面不需要再调用.get()。

.is()方法接受一个 CSS 选择器，如果调用它的 jQuery 对象中有符合这个选择器的元素，则返回 true。

jQuery 的.index()方法

.index()方法可以传入四种参数而有四种语义。

• 没有参数的.index()方法
  返回选择中的第一个元素在其父元素中的序数。
• 传入字符串的.index()方法
  传入一个 CSS 选择器，返回原本的选择中第一个元素在.index()的选择中的序数。
• 传入 jQuery 对象的.index()方法
  返回这个 jQuery 对象的第一个元素在选择中的序列。
• 传入 DOM 元素的.index()方法
  返回这个元素在选择中的序列。