jquery
script放在head中叭披，文檔前面時(shí)
window.onload=handle頁(yè)面全部加在完再執(zhí)行
jquery:$(handle) ,dom加載完再執(zhí)行
jQuery選擇器：
$('*')與css選擇器一樣
$()與querySelect()不一樣。選擇的不是一個(gè)原生dom對(duì)象
$()對(duì)象用jquery對(duì)象的api
jquery對(duì)象變?yōu)樵鷍s對(duì)象$()[0]變?yōu)榱嗽鷮?duì)象
原生對(duì)象變成jquery對(duì)象：$(document.querySelect(id))
$(x).eq(n)第n+1個(gè)子元素

jquery.png

$('li').eq(3); // 獲取結(jié)果集中的第四個(gè)jQuery對(duì)象
.next([selector]), .prev([selector])

next取得匹配的元素集合中每一個(gè)元素緊鄰的后面同輩元素的元素集合知押。如果提供一個(gè)選擇器疚沐，那么只有緊跟著的兄弟元素滿足選擇器時(shí)，才會(huì)返回此元素罕袋。prev正好相反改淑，獲取元素之前的同輩元素

$('.test').next();
$('.test').prev('li');
.nextAll([selector]), .prevAll([selector])

nextAll獲得每個(gè)匹配元素集合中每個(gè)元素所有后面的同輩元素，選擇性篩選的選擇器浴讯，prevAll與之相反朵夏，獲取元素前面的同輩元素
siblings([selectors])

獲得匹配元素集合中每個(gè)元素的兄弟元素,可以提供一個(gè)可選的選擇器

$('li.third-item').siblings('li')
.parent([selector])

取得匹配元素集合中，每個(gè)元素的父元素榆纽，可以提供一個(gè)可選的選擇器

$('li.item-a').parent()
.parents([selector])
index由里到外排列
獲得集合中每個(gè)匹配元素的祖先元素仰猖，可以提供一個(gè)可選的選擇器作為參數(shù)

$('li.item-a').parents('div')
.children([selector])

獲得匹配元素集合中每個(gè)元素的子元素，選擇器選擇性篩選

$('ul.level-2').children()
.find([selector])

查找符合選擇器的后代元素

$('ul').find('li.current');
篩選當(dāng)前結(jié)果集

.first()

獲取當(dāng)前結(jié)果集中的第一個(gè)對(duì)象

.last()

獲取當(dāng)前結(jié)果集的最后一個(gè)對(duì)象
filter(selector), .filter(function(index))

篩選當(dāng)前結(jié)果集中符合條件的對(duì)象奈籽，參數(shù)可以是一個(gè)選擇器或者一個(gè)函數(shù)

$('li').filter(':even')

$('li').filter(function(index) {
return index % 3 == 2;
})
.not(selector), .not(function(index))

從匹配的元素集合中移除指定的元素亮元，和filter相反
.is(selector), is(function(index)), is(dom/jqObj)

判斷當(dāng)前匹配的元素集合中的元素，是否為一個(gè)選擇器唠摹，DOM元素爆捞，或者jQuery對(duì)象，如果這些元素至少一個(gè)匹配給定的參數(shù)勾拉，那么返回true

if ( $target.is("li") ) {
$target.css("background-color", "red");

}
.has(selector), .has(dom)

篩選匹配元素集合中的那些有相匹配的選擇器或DOM元素的后代元素

$('li').has('span')

jQuery DOM操作

創(chuàng)建元素

只需要把DOM字符串傳入$方法即可返回一個(gè)jQuery對(duì)象

var obj = $('<div class="test"><p><span>Done</span></p></div>');
.append(content[,content]) / .append(function(index,html))

Insert content, specified by the parameter, to the end of each element in the set of matched elements.

可以一次添加多個(gè)內(nèi)容煮甥，內(nèi)容可以是DOM對(duì)象、HTML string藕赞、 jQuery對(duì)象
如果參數(shù)是function成肘，function可以返回DOM對(duì)象、HTML string斧蜕、 jQuery對(duì)象双霍，參數(shù)是集合中的元素位置與原來(lái)的html值
.appendTo(target)

把對(duì)象插入到目標(biāo)元素尾部，目標(biāo)元素可以是selector, DOM對(duì)象, HTML string, 元素集合, jQuery對(duì)象;

Insert every element in the set of matched elements to the end of the target.

$( "h2" ).appendTo( $( ".container" ) );
$( "<p>Test</p>" ).appendTo( ".inner" );
.prepend(content[,content]) / .prepend(function(index,html))

向?qū)ο箢^部追加內(nèi)容，用法和append類似洒闸，內(nèi)容添加到最開始

Insert content, specified by the parameter, to the beginning of each element in the set of matched elements.

$( ".inner" ).prepend( "<p>Test</p>" );
.prependTo(target)

把對(duì)象插入到目標(biāo)元素頭部染坯，用法和prepend類似

Insert every element in the set of matched elements to the beginning of the target.

$( "<p>Test</p>" ).prependTo( ".inner" );
.before([content][,content]) / .before(function)

在對(duì)象前面(不是頭部，而是外面丘逸，和對(duì)象并列同級(jí))插入內(nèi)容单鹿，參數(shù)和append類似

Insert content, specified by the parameter, before each element in the set of matched elements.

$( ".inner" ).before( "<p>Test</p>" );
$( ".container" ).before( $( "h2" ) );
$( "p" ).first().before( newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).before( "<b>Hello</b>" );
$( "p" ).before( document.createTextNode( "Hello" ) );
.insertBefore(target)
與appendTo()類似
把對(duì)象插入到target之前（同樣不是頭部，是同級(jí)）

Insert every element in the set of matched elements before the target.

$( "h2" ).insertBefore( $( ".container" ) );
.after([content][,content]) / .after(function（index）)

和before相反深纲，在對(duì)象后面(不是尾部仲锄，而是外面，和對(duì)象并列同級(jí))插入內(nèi)容湃鹊，參數(shù)和append類似

Insert content, specified by the parameter, after each element in the set of matched elements.

$( ".inner" ).after( "<p>Test</p>" );
$( "p" ).after( document.createTextNode( "Hello" ) );
.insertAfter(target)
和insertBefore相反儒喊，把對(duì)象插入到target之后（同樣不是尾部，是同級(jí)）
Insert every element in the set of matched elements after the target.
$( "<p>Test</p>" ).insertAfter( ".inner" );
$( "p" ).insertAfter( "#foo" );

刪除元素

.remove([selector])

刪除被選元素（及其子元素）

$("#div1").remove();
我們也可以添加一個(gè)可選的選擇器參數(shù)來(lái)過(guò)濾匹配的元素

$('div').remove('.test');
.empty()

清空被選擇元素內(nèi)所有子元素

Remove all child nodes of the set of matched elements from the DOM.

$('body').empty();
.detach()

.detach() 方法和.remove()一樣, 除了 .detach()保存所有jQuery數(shù)據(jù)和被移走的元素相關(guān)聯(lián)币呵。當(dāng)需要移走一個(gè)元素澄惊，不久又將該元素插入DOM時(shí)，這種方法很有用富雅。
包裹元素
wrap(wrappingElement) / .wrap(function(index))
為每個(gè)對(duì)象包裹一層HTML結(jié)構(gòu)，可以是selector, element, HTML string, jQuery object
Wrap an HTML structure around each element in the set of matched elements.
<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
包裹元素

$( ".inner" ).wrap( "<div class='new'></div>" );
看看結(jié)果

<div class="container">
<div class="new">
<div class="inner">Hello</div>
</div>
<div class="new">
<div class="inner">Goodbye</div>
</div>
</div>
.wrapAll(wrappingElement)

把所有匹配對(duì)象包裹在同一個(gè)HTML結(jié)構(gòu)中

Wrap an HTML structure around all elements in the set of matched elements.

<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
包裹元素

$( ".inner" ).wrapAll( "<div class='new' />");
看看結(jié)果

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
    <div class="inner">Goodbye</div>
  </div>
</div>

.wrapInner(wrappingElement) / .wrapInner(function(index))

包裹匹配元素內(nèi)容肛搬，這個(gè)不好描述没佑，一看例子就懂

Wrap an HTML structure around the content of each element in the set of matched elements.

<div class="container">
<div class="inner">Hello</div>
<div class="inner">Goodbye</div>
</div>
包裹元素

$( ".inner" ).wrapInner( "<div class='new'></div>");
看卡結(jié)果

<div class="container">
<div class="inner">
<div class="new">Hello</div>
</div>
<div class="inner">
<div class="new">Goodbye</div>
</div>
</div>
.unwap()

把DOM元素的parent移除

Remove the parents of the set of matched elements from the DOM, leaving the matched elements in their place.

pTags = $( "p" ).unwrap();
html([string])

這是一個(gè)讀寫兩用的方法，用于獲取/修改元素的innerHTML

當(dāng)沒(méi)有傳遞參數(shù)的時(shí)候温赔，返回元素的innerHTML
當(dāng)傳遞了一個(gè)string參數(shù)的時(shí)候蛤奢，修改元素的innerHTML為參數(shù)值
看個(gè)例子

$('div').html()

$('div').html('123')
后續(xù)這種讀寫兩用的方法很多，原理都類似

如果結(jié)果是多個(gè)進(jìn)行賦值操作的時(shí)候會(huì)給每個(gè)結(jié)果都賦值
如果結(jié)果多個(gè)陶贼，獲取值的時(shí)候啤贩，返回結(jié)果集中的第一個(gè)對(duì)象的相應(yīng)值
text()

和html方法類似，操作的是DOM的innerText值

屬性&CSS操作

屬性相關(guān)
.val([value])
這是一個(gè)讀寫雙用的方法拜秧，用來(lái)處理input的value痹屹，當(dāng)方法沒(méi)有參數(shù)的時(shí)候返回input的value值，當(dāng)傳遞了一個(gè)參數(shù)的時(shí)候枉氮，方法修改input的value值為參數(shù)值
$('input').val()$('input').val('newValue');

.attr()
.attr(attributeName)
獲取元素特定屬性的值
Get the value of an attribute for the first element in the set of matched elements.
var title = $( "em" ).attr( "title" );

.attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) )
為元素屬性賦值
Set one or more attributes for the set of matched elements.
$( "#greatphoto" ).attr( "alt", "Beijing Brush Seller" );$( "#greatphoto" ).attr({ alt: "Beijing Brush Seller", title: "photo by Kelly Clark"});$( "#greatphoto" ).attr( "title", function( i, val ) { return val + " - photo by Kelly Clark";});//這里用id選擇符舉例是不是function永遠(yuǎn)最多迭代一次志衍？用類選擇符是不是更好些？

.removeAttr()
為匹配的元素集合中的每個(gè)元素中移除一個(gè)屬性（attribute）
.removeAttr() 方法使用原生的 JavaScript removeAttribute() 函數(shù),但是它的優(yōu)點(diǎn)是可以直接在一個(gè) jQuery 對(duì)象上調(diào)用該方法聊替，并且它解決了跨瀏覽器的屬性名不同的問(wèn)題楼肪。
$('div').removeAttr('id');

.prop()/.removeProp()
這兩個(gè)方法是用來(lái)操作元素的property
的，property和attibute是非常相似的概念惹悄，感興趣的同學(xué)可以看看jQuery的attr與prop
CSS相關(guān)
.css()
設(shè)置的是行內(nèi)樣式春叫。style屬性
這是個(gè)和attr
非常相似的方法，用來(lái)處理元素的css
.css(propertyName) / .css(propertyNames)
獲取元素style特定property的值
Get the value of style properties for the first element in the set of matched elements.
var color = $( this ).css( "background-color" );var styleProps = $( this ).css([ "width", "height", "color", "background-color"]);

.css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( propertiesJson )
設(shè)置元素style特定property的值
Set one or more CSS properties for the set of matched elements.
$( "div.example" ).css( "width", function( index ) { return index * 50;});$( this ).css( "width", "+=200" );$( this ).css( "background-color", "yellow" );$( this ).css({ "background-color": "yellow", "font-weight": "bolder"});

.addClass(className) / .removeClass(className)
.addClass(className) / .addClass(function(index,currentClass))
為元素添加class，不是覆蓋原class暂殖，是追加价匠，也不會(huì)檢查重復(fù)
Adds the specified class(es) to each of the set of matched elements.
$( "p" ).addClass( "myClass yourClass" );$( "ul li" ).addClass(function( index ) { return "item-" + index;});

removeClass([className]) / ,removeClass(function(index,class))
移除元素單個(gè)/多個(gè)/所有class
Remove a single class, multiple classes, or all classes from each element in the set of matched elements.
$( "p" ).removeClass( "myClass yourClass" );$( "li:last" ).removeClass(function() { return $( this ).prev().attr( "class" );});

.hasClass(className)
檢查元素是否包含某個(gè)class，返回true/false
Determine whether any of the matched elements are assigned the given class.
$( "#mydiv" ).hasClass( "foo" )

.toggleClass(className)
toggle是切換的意思央星，方法用于切換霞怀，switch是個(gè)bool類型值，這個(gè)看例子就明白
<div class="tumble">Some text.</div>

第一次執(zhí)行
$( "div.tumble" ).toggleClass( "bounce" )<div class="tumble bounce">Some text.</div>

第二次執(zhí)行
$( "div.tumble" ).toggleClass( "bounce" )<div class="tumble">Some text.</div>
jquery 動(dòng)畫
.hide() //display不變莉给，最后變?yōu)閚one
.show()
.toggle()
fadeIn()淡入
fadeOut()淡出
fadeToggle//透明度
slideDown()
slideUp()//
animate({},time,function(){
complete
})
finish()
stop()
hide().show().slide()...鏈?zhǔn)秸{(diào)用