• 找到HTML元素
• 改變HTML中的內(nèi)容
• 根據(jù)用戶操作做出反饋，比如按下按鈕
• 動畫效果
• ajax

找到HTML元素

$('h1')
$('h1').text()
$('h1').text('where to')

如果想要加載完頁面再加載jquery則可以這樣：

$(document).ready(function(){<code>});

用jquery:
1.到j(luò)query.com下載jquery
2.在HTML文件中加載'<script src='jquery.min.js'></script>'

在DOM中定位元素：

利用選擇器

<h1>where do you want to go</h1>
<h2>travel</h2>
<p>plan your next adventure</p>
<ul id='destinations'>
  <li>Rome</li>
  <li>paris</li>
  <li class='promo'>rio</li>
</ul>

$('li').text('ro')
$('p')
$('#destinations')
$('.promo')

<ul id='destination'>
  <li>rome</li>
  <li>
    <ul id='frame'>
      <li>paris</li>
    </ul>
  </li>
  <li class='promo'>rio</li>
</ul>

直屬子元素：子選擇器$('#destination>li')
選擇多個(gè)元素：$('.promo,#frame')
ul下的第一個(gè)：偽選擇器：$('#destination li:first')
ul下的最后一個(gè)：$('#destination li:last')
ul下的奇數(shù)個(gè)/偶數(shù)個(gè)：$('destination li:odd'),$('#destination li:even')

元素遍歷

如果找到destination下的所有l(wèi)i則不想用子元素：$('#destinations').find('li')
如果找到ul下的第一個(gè)子元素，不用偽元素選擇器：$('li').last()
如何找到中間元素$('li').first().next()方法鏈
往上遍歷（從子元素到父元素）$('li').first().parent()
往下遍歷（從父元素到子元素）$('destination').children('li')直屬子元素，如果是find則是所有l(wèi)i。

改變HTML中的內(nèi)容（DOM遍歷）

創(chuàng)建和添加新節(jié)點(diǎn)

<li class='vacation'></li>
<h2></h2>
<button></button>

var price=$('<p>From $399.99</p>')
第一種方法：將新節(jié)點(diǎn)添加到DOM中去：
有before/after/prepend/append。
此處應(yīng)該用$('vacation').append(price)
第二種方法： 將新節(jié)點(diǎn)添加到DOM中去：
.appendTo(<element>)
.prependTo(<element>)
.insertAfter(<element>)
insertBefore(<element>)
此處應(yīng)該用price.appendTo($('.vacation'))

刪除button

$('button').remove()

事件（對用戶操作做出反饋）

• $(this)

$('button').on('click',function(){})

如果有多種度假方案，添加按鈕就全部添加，移除就全部移除，這顯然不是我們想要的，這時(shí)就用到了this。this的使用要用$(this)則$(this).remove()

• 查找類的父節(jié)點(diǎn)
  closest()查找這個(gè)類的直接父節(jié)點(diǎn)。
  parent()查找這個(gè)類的所有父節(jié)點(diǎn)。
• 自定義屬性
  data-xxx可以添加到任何節(jié)點(diǎn)上。
  .data(<name>)讀取屬性。
  .data(<name>,<value>)設(shè)置屬性。
• 事件委托

<li class='vacation onsale' data-price='399.99'>
  <h3>vacation</h3>
  <button>Get Price</button>
  <ul class='comments'>
    <li>Amazing</li>
    <li>want to go!</li>
  </ul>
</li>

$('.vacation').first().data('price')獲得價(jià)格
如果點(diǎn)擊按鈕就會調(diào)用函數(shù)，則如果頁面上其他地方也有button，則就會出錯(cuò)，所以只想讓vacation里的button生效。
$('.vacation button').on('click',function(){})
也可以這樣：$('.vacation').on('click','button',function(){})讓事件在vacation上發(fā)生，但是實(shí)際起作用的是button。

• filter和addClass/removeClass

<ul>
  <li class='vacation onsale'>
    <ul class='comments'>
      <li></li>
      <li></li>
    </ul>
  </li>
  <li class='vacation'></li>
  <li class='vacation'></li>
</ul>

filter
$('.vacation onsale')/遍歷：$('.vacation').filter('.onsale')
.addClass和.removeClass
$('.vacation').filter('.onsale').addClass('high lighted')

• toggleClass()
  $(this).toggleClass('high highed')如果有這個(gè)類就添加，如果沒有就移除
• .slideDown滑動顯示；.slideUp()用來隱藏；.slideToggle()兩種狀態(tài)輪流
• 鍵盤事件
  keyperss/keydown/keyup
• 表單事件
  blur/select/change/focus/submit
• val
  可以設(shè)置input值，也可以直接獲取
  .val(<new vlaue>)/.val()
• 淡入淡出效果
  .fadeIn()/.fadeOut()/.fadeToggle()/
• 阻止默認(rèn)行為
  event.preventDefault()
• 把字符串轉(zhuǎn)換成數(shù)字，要在字符串前面用“+”號+(this).val()
• 改變CSS樣式
  設(shè)置css
  $(this).css('background-color','1px solid red')
  .css('border-color','1px solid blue')//繁瑣
  $(this).css({'background-color':'#23565','border-color':'1px solid red'}) 如果覺這樣也是繁瑣，可以把樣式寫在css中，然后添加類(addClass)
  $(this).find('price').css('display','block')可以用$(this).find('price').show()替代，還有$(this).find('price').hide()

動畫

$(this).css('top':'-10px')//繁瑣
$(this).animate({'top':'-10px'})
hasClass:$(this).hasClass('highlighted')//一般用于if中是否包含highlighted這個(gè)類。
$(this).animate({'top':'-10px'},400/'fast'/'low') //動畫速度
在js中用了動畫樣式，如果只在css中用動畫樣式怎么做？
.vacation{
transition: top 0.2s;
}

JQuery常用方法（函數(shù)）

• .each(function(index,Element))
  html:

<div class='box'>
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
  </ul>
</div>

jquery:

$('.box>ul>li').each(function(index,node){
  var str=$(node).text
  $(node).text(str+str)
})//目的是把1.2.3.4變成11.22.33.44,node是原生js對象，代表元素li。index代表元素li的下標(biāo)。

使用each時(shí)也可以用this，對應(yīng)原生dom對象，對應(yīng)node。

$('.box>ul>li').each(function(index,node){
  var str=$(this).text()
  $(this).text(str+str)
})

• map(function(index,element))

var arr=$('.box>ul>li').map(function(){
  return $(this).text()//this對應(yīng)原生dom對象
})
console.log(arr)

• .extend()擴(kuò)展對象

var obj1={a:1}
var obj2={b:2,d:5}
var obj3={b:3,d:5}

1.$.extend(obj1,obj2)//obj1==={a:1,b:2,c:3}把obj2的擴(kuò)展到obj1上，obj1有的就覆蓋，沒有就新增。
2.$.extend(obj1,obj2,obj3)//{a:1,b:3,c:3,d:5}把obj2,obj3擴(kuò)展到obj1上。
3.如果不想修改obj1則var obj4={}
$.extend(obj4,obj1,obj2,obj3)//{a:1,b:3,c:3,d:5}
也可以var obj5=$.extend({},obj1,obj2,obj3)

• .clone深復(fù)制
  $('.hello').clone()
• index()獲取兄弟元素中的排行
  $('.active').index()

<div class='ct'>
  <div class='c1'>c1</div>
  <div class='c2'>--</div>//想知道--在c2中的排行則`$('.ct').index('.c2')`
</div>

• .ready
  $(document).ready(function(){})//當(dāng)dom結(jié)構(gòu)完全加載后再加載
• .eq()

jquery ajax

$.ajax({
  url:'/hello',
  method:'get',
  dataType:'json',
  data{
    a:1,
    b:2
}
  success:function(ret){
    console.log(ret)
}
  error:function(){}
})//老的寫法

$.ajax({
  url:'/hello',
  method:'post',
  dataType:'json',
  data{
    a:1,
    b:2
}
}).done(function(ret){}).error(function(){})//常用的寫法

$.get('/hello',{name:'ruoyu',age:28})
  .done(function(ret){
    console.log(ret)
}).fail(function(){
  console.log('error')
})//只是簡單的獲取數(shù)據(jù)可以這樣寫

$.post('/comment',{comment:'饑人谷'})
  .done(function(ret){
    console.log(ret)
})//也是簡寫

jquery jsonp跨域

$.ajax({
  type:'get',
  url:'/head',
  dataType:'jsonp',
  jsonpCallback:'cb',//設(shè)置一個(gè)回調(diào)函數(shù)，名字隨便取，和后臺的發(fā)送的方法一致。
  success:function(){}
})