JQuery - 簡書

1.JQuery能做什么寓娩？

JQuery是一個(gè)功能強(qiáng)大的JavaScript庫，其快速而簡潔的特性極大地簡化了JS編程。JQuery的用途如下：

HTML元素的獲扔⑷凇；
HTML元素的操作：取值和賦值歇式、移動(dòng)驶悟、復(fù)制、刪除和創(chuàng)建等材失；
CSS操作痕鳍；
事件的操作；
特殊效果龙巨，如JavaScript 動(dòng)畫笼呆；
HTML DOM遍歷與修改；
工具方法旨别；
AJAX;
Utilities诗赌。

2.JQuery對(duì)象和原生DOM對(duì)象有什么區(qū)別？怎樣互相轉(zhuǎn)換秸弛？

使用JQuery時(shí)一定要注意JQuery和原生DOM的區(qū)別境肾，JQuery對(duì)象的方法和DOM方法不能混用，jQuery對(duì)象只能使用jQuery對(duì)象的API胆屿，對(duì)于原生對(duì)象只能使用原生對(duì)象的 API奥喻。
如何轉(zhuǎn)化？

DOM對(duì)象轉(zhuǎn)化為js對(duì)象只需將其寫在$()內(nèi)：
$(document.querySelector('div'))
js對(duì)象轉(zhuǎn)為DOM對(duì)象只需加一個(gè)下標(biāo)：
$('div')[0]
若只想取值而不想轉(zhuǎn)為DOM對(duì)象非迹，用.eq()方法：
$('div').eq(index)

3.如何獲取和設(shè)置元素內(nèi)部的html內(nèi)容环鲤？如何獲取和設(shè)置元素內(nèi)部的文本？

用.html()方法獲元素內(nèi)部的html內(nèi)容憎兽。若傳遞一個(gè)string作為參數(shù)冷离，則修改元素內(nèi)容。
用.text()方法獲取元素內(nèi)部的文本內(nèi)容纯命。若傳遞一個(gè)string作為參數(shù)西剥，則修改元素文本內(nèi)容。
進(jìn)行賦值操作時(shí)亿汞，如果結(jié)果是多個(gè)瞭空，會(huì)給每個(gè)結(jié)果都賦值；
進(jìn)行獲取操作時(shí)，如果結(jié)果是多個(gè)咆畏，.html()會(huì)返回集合中的第一個(gè)值南捂；.text()會(huì)將集合中所有值組成一個(gè)字符串返回。

<body>
<div class="box1">box1</div>
  <div class="box2">box2</div>
  <div class="box2">box2</div>
</body>

<script>
$('.box2').html()   //"box2"
$('.box2').html('2box')  //init(2)[div.box2,div.box2 .....]
$('.box2').text()   //"box2box2"
$('.box2').text('2box')   //init(2)[div.box2,div.box2 .....]
</script>

4.JQuery中如何綁定事件旧找？bind溺健、unbind、delegate钮蛛、live鞭缭、on、off都有什么用魏颓？推薦使用哪種岭辣？使用on綁定事件使用事件代理的寫法？

JQuery中推薦用.on()和.off()來綁定和解綁事件琼开。
.on( events [,selector ] [,data ], handler(eventObject) )
.off( events [, selector ] [, handler ] )
bind的用法和on一樣易结，但其是JQuery1.7版本之前的用法，不建議使用柜候。
unbind是舊版本的解綁事件方法搞动；
delegate為所有匹配選擇器（selector參數(shù)）的元素綁定一個(gè)或多個(gè)事件處理函數(shù)，基于一個(gè)指定的根元素的子集渣刷，匹配的元素包括那些目前已經(jīng)匹配到的元素鹦肿，也包括那些今后可能匹配到的元素；
live附加一個(gè)事件處理器到匹配目前選擇器的所有元素辅柴，現(xiàn)在和未來箩溃，從而簡化了在頁面上動(dòng)態(tài)添加的內(nèi)容上事件處理的使用；
使用on方法實(shí)現(xiàn)live方法的效果需使用事件代理：

<body>
  <div class="box">
    <ul>
      <li>1</li>
      <li>2</li>
      <li>3</li>
    </ul>
  </div>
<input id="ipt" type="text"> 
<button id="btn">添加</button>
  <div id="wrap"></div>
  <script>
  $('#btn').on('click', function(){
  var value = $('#ipt').val();
  $('.box>ul').append("<li class='a'>"+value+'</li>');
});
  
  $('.box>ul').on('click', 'li', function(){
      //var str = $(this).text()
      //原生寫法var str = this.innerText
      $('#wrap').text(str)
    })
  </script>
</body>

事件代理

若不用事件代理方法碌嘀，則后續(xù)新生成的元素?zé)o法綁定事件涣旨。

5.使用JQuery實(shí)現(xiàn)如下效果：

tab切換

JS代碼

6.JQuery動(dòng)畫如何使用？

JQuery動(dòng)畫方法通常有一下4個(gè)參數(shù)：

duration：動(dòng)畫持續(xù)的時(shí)長股冗；
easing：表示過渡使用哪種緩動(dòng)函數(shù)霹陡，jQuery自身提供"linear" 和 "swing"；
complete：在完成動(dòng)畫時(shí)執(zhí)行的函數(shù)止状；
opacity：不透明度烹棉。
基礎(chǔ)用法：
.hide([duration ] [,easing ] [,complete ]):用于隱藏元素；
.show( [duration ] [, easing ] [, complete ] )：用于顯示元素怯疤；
.toggle( [duration ] [, easing ] [, complete ] ):用于顯隱切換浆洗。
漸變式展示：
.fadeIn( [duration ] [, easing ] [, complete ] ):淡入顯示；
.fadeOut( [duration ] [, easing ] [, complete ] ):淡出隱藏集峦；
.fadeTo( duration, opacity [, easing ] [, complete ] ):調(diào)整匹配元素的透明度伏社，方法通過匹配元素的不透明度做動(dòng)畫效果;
.fadeToggle( [duration ] [, easing ] [, complete ] ):通過匹配的元素的不透明度動(dòng)畫抠刺，來顯示或隱藏它們，方法執(zhí)行匹配元素的不透明度動(dòng)畫洛口。當(dāng)被可見元素調(diào)用時(shí)矫付，元素不透明度一旦達(dá)到0凯沪，display樣式屬性設(shè)置為none 第焰，所以元素不再影響頁面的布局。
滑動(dòng)：
.slideDown( [duration ] [, easing ] [, complete ] ):用下滑動(dòng)畫顯示一個(gè)匹配元素妨马；
.slideUp( [duration ] [, easing ] [, complete ] ):用上滑動(dòng)畫隱藏一個(gè)匹配元素;
.slideToggle( [duration ] [, easing ] [, complete ] ):用滑動(dòng)動(dòng)畫進(jìn)行顯隱切換挺举。
自定義動(dòng)畫：
.animate( properties [, duration ] [, easing ] [, complete ] )
properties:是一個(gè)CSS屬性和值的對(duì)象,動(dòng)畫將根據(jù)這組對(duì)象移動(dòng)。
.clearQueue用于清楚動(dòng)畫隊(duì)列未執(zhí)行的動(dòng)畫烘跺；
.stop( [clearQueue ] [, jumpToEnd ] ):停止當(dāng)前動(dòng)畫湘纵；
.finish:停止當(dāng)前動(dòng)畫，并清除動(dòng)畫隊(duì)列中所有未完成的動(dòng)畫,最終展示動(dòng)畫隊(duì)列最后一幀的最終狀態(tài)滤淳。

7.jQuery 如何展示/隱藏元素梧喷？

1.通過改變css樣式的方式：

$('.display').css('display','block')
$('.display').css('display','none')

2.通過添加和刪除class來實(shí)現(xiàn)：

.display {
display:none;
}
$('div').addClass('display')
$('div').removeClass('display')

3.通過JQuery動(dòng)畫來實(shí)現(xiàn)：

$('.display').show()
$('.display').hide()
$('.display').toggle()

其中toggle方法用于在show/hide間切換。