jQuery

##jQuery 能做什么？

jQuery将JavaScript的代码进行了封装，处理了兼容性问题，提供API进行调用,让我们实现功能时不用再为兼容性而困扰，少写了许多代码。
jQuery是一个JavaScript函数库，可以方便地：

• 选择dom元素
• dom操作
• 事件处理
• 特效处理
• ajax
• 链式操作

jQuery 对象和 DOM 原生对象有什么区别？如何转化？

####区别：

DOM对象 ：W3C标准用于操作文档的API。具体点来说就是指 HTML 文本中的所有被标签标记的东西 ，在js里可以用 getElementById 等传统的方法获得的对象，拥有原生对象的属性和方法。
jQuery对象：将DOM原生对象进行封装后得到的类数组对象

####注意：

jQuery对象只能用jQuery对象的方法
DOM对象只能使用DOM对象的方法

####转化：

jquery提供了两种方法将一个jquery对象转换成一个DOM对象，[index]和get(index)。
使用$(DOM对象)就可以将DOM对象转化为jQuery对象

##jQuery中如何绑定事件？bind、unbind、delegate、live、on、off都有什么作用？推荐使用哪种？使用on绑定事件使用事件代理的写法？

//bind用于绑定事件，古老写法，不推荐
$(selector).bind(event,[data],function)

//unbind用于解绑事件，古老写法，不推荐
$(selector).unbind(event,[function])

//delegate用于事件代理，古老写法，不推荐
$(selector).delegate(childSelector,event,[data],function)

//live() 方法为被选元素附加一个或多个事件处理程序，并规定当这些事件发生时运行的函数。不推荐使用
$(selector).live(event,[data],function)

.on( events [,selector ] [,data ], handler(eventObject) )
增加事件处理函数

1. events：事件类型和可选的命名空间，或仅仅是命名空间，比如”click”, “keydown.myPlugin”, 或者 “.myPlugin”，一个或多个
2. selector：选择器，用于过滤出被选中的元素中能触发事件的后代元素。
3. data：传递给事件处理函数的event.data
   handler(eventObject)：事件被触发时的执行函数。若该函数只是要执行return false，该参数位置可以直接简写成 false

// 普通事件绑定，最简单的用法
$('div').on('click', function(e){
    console.log(this); //点击的元素
    console.log(e); // 事件，e.target 事件的对象
});
// 事件委托或者事件代理，想让div 下面所有的span绑定事件，可以把事件绑定到div上
$('div').on('click', 'span', function(e){
    console.log(this);
    console.log(e);
});

// 可以在绑定的时候给事件处理程序传递一些参数
$('div').on('click', {name: 'Byron', age: 24}, function(e){
    console.log(e.data);
});

命名空间的作用：解绑事件时做一个区分

#click.hello事件解绑，但是click事件不受影响

$('.box>ul').on('click',3,function(e){
   console.log(e.data)
 })
 $('.box>ul').on('click.hello','li',function(){
   console.log(this)
   var str = $(this).text()
   $('#wrap').text(str)
 })
 $('.box>ul').off('click.hello')

.off( events [, selector ] [, handler ] )
移除一个事件处理函数

jQuery 如何展示/隐藏元素？

• .hide([duration ] [,easing ] [,complete ])
  隐藏元素，没有参数的时候等同于直接设置display:none属性
• .show( [duration ] [, easing ] [, complete ] )
  用于显示元素，用法和hide类似
• .toggle( [duration ] [, easing ] [, complete ] )

toggle是切换的意思，用来切换元素的隐藏、显示，类似于toggleClass
事件处理套件也有一个名为.toggle()方法。哪一个被调用取决于传递的参数的设置

1. duration：动画持续多久
2. easing：表示过渡使用哪种缓动函数，jQuery自身提供”linear” 和 “swing”
3. complete：在动画完成时执行的函数,先完成动画，后执行函数

jQuery 动画如何使用？

渐变

• .fadeIn( [duration ] [, easing ] [, complete ] )
  通过淡入的方式显示匹配元素
• .fadeOut( [duration ] [, easing ] [, complete ] )
  通过淡出的方式隐藏匹配元素
• .fadeTo( duration, opacity [, easing ] [, complete ] )
  调整匹配元素的透明度，方法通过匹配元素的不透明度做动画效果
• .fadeToggle( [duration ] [, easing ] [, complete ] )

滑动

• .slideDown( [duration ] [, easing ] [, complete ] )
  用滑动动画显示一个匹配元素
• .slideUp( [duration ] [, easing ] [, complete ] )
  用滑动动画隐藏一个匹配元素
• .slideToggle( [duration ] [, easing ] [, complete ] )
  用滑动动画显示或隐藏一个匹配元素

####自定义动画

• .animate( properties [, duration ] [, easing ] [, complete ] )
  properties是一个CSS属性和值的对象,动画将根据这组对象移动。

如何设置和获取元素内部 HTML 内容？如何设置和获取元素内部文本？

• html([string])
  读写两用的方法，用于获取/修改元素的innerHTML

• $('div').html() //没有参数，获取元素的innerHTML

• $('div').html('123') //有参数，参数内容即为修改后的元素innerHTML
• text()读写两用的方法，和html方法类似，用于获取/修改元素的innerText值

如何设置和获取表单用户输入或者选择的内容？如何设置和获取元素属性？

• .val([value])
  
  读写双用的方法，用来处理input的value，设置和获取表单用户输入或者选择的内容,当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值

$('input').val() //没有参数的时候返回input的value值
$('input').val('newValue'); //当传递了一个参数的时候，将参数值设为input的value值
$('input')[0].value = "hello" 用原生DOM的方式设置值

• .attr(attributeName)
  
  获取元素的属性。

<input type="text" value="hello">
   <script>
       console.log($('input').attr("type")) //text
   </script>

• .removeAttr(attributeName)
  
  移除特定元素的某个属性。

为匹配的元素集合中的每个元素中移除一个属性

Examples

dom
dom
slidup