JQuery

1.JQuery能做什么？

JQuery是一个功能强大的JavaScript库，其快速而简洁的特性极大地简化了JS编程。JQuery的用途如下：

HTML元素的获取；
HTML元素的操作：取值和赋值、移动、复制、删除和创建等；
CSS操作；
事件的操作；
特殊效果，如JavaScript 动画；
HTML DOM遍历与修改；
工具方法；
AJAX;
Utilities。

2.JQuery对象和原生DOM对象有什么区别？怎样互相转换？

使用JQuery时一定要注意JQuery和原生DOM的区别，JQuery对象的方法和DOM方法不能混用，jQuery对象只能使用jQuery对象的API，对于原生对象只能使用原生对象的 API。
如何转化？

DOM对象转化为js对象只需将其写在$()内：
$(document.querySelector('div'))
js对象转为DOM对象只需加一个下标：
$('div')[0]
若只想取值而不想转为DOM对象，用.eq()方法：
$('div').eq(index)

3.如何获取和设置元素内部的html内容？如何获取和设置元素内部的文本？

用.html()方法获元素内部的html内容。若传递一个string作为参数，则修改元素内容。
用.text()方法获取元素内部的文本内容。若传递一个string作为参数，则修改元素文本内容。
进行赋值操作时，如果结果是多个，会给每个结果都赋值；
进行获取操作时，如果结果是多个，.html()会返回集合中的第一个值；.text()会将集合中所有值组成一个字符串返回。

<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参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素；
live附加一个事件处理器到匹配目前选择器的所有元素，现在和未来，从而简化了在页面上动态添加的内容上事件处理的使用；
使用on方法实现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>

事件代理

若不用事件代理方法，则后续新生成的元素无法绑定事件。

5.使用JQuery实现如下效果：

tab切换

JS代码

6.JQuery动画如何使用？

JQuery动画方法通常有一下4个参数：

duration：动画持续的时长；
easing：表示过渡使用哪种缓动函数，jQuery自身提供"linear" 和 "swing"；
complete：在完成动画时执行的函数；
opacity：不透明度。
基础用法：
.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 ] ):调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果;
.fadeToggle( [duration ] [, easing ] [, complete ] ):通过匹配的元素的不透明度动画，来显示或隐藏它们，方法执行匹配元素的不透明度动画。当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。
滑动：
.slideDown( [duration ] [, easing ] [, complete ] ):用下滑动画显示一个匹配元素；
.slideUp( [duration ] [, easing ] [, complete ] ):用上滑动画隐藏一个匹配元素;
.slideToggle( [duration ] [, easing ] [, complete ] ):用滑动动画进行显隐切换。
自定义动画：
.animate( properties [, duration ] [, easing ] [, complete ] )
properties:是一个CSS属性和值的对象,动画将根据这组对象移动。
.clearQueue用于清楚动画队列未执行的动画；
.stop( [clearQueue ] [, jumpToEnd ] ):停止当前动画；
.finish:停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态。

7.jQuery 如何展示/隐藏元素？

1.通过改变css样式的方式：

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

2.通过添加和删除class来实现：

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

3.通过JQuery动画来实现：

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

其中toggle方法用于在show/hide间切换。