进阶14——jQuery

1.jQuery 能做什么？

• 选择元素：语法同CSS选择器
• 元素DOM操作：创建、添加、删除元素，元素属性操作、CSS操作，
• 事件操作
• 动画效果
• Ajax
• 工具方法
• 改变结果集

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

Jquery获得是jquery元素，是对DOM元素进行了一次封装，只能使用jquery的方法进行操作，不能使用原生JS
原生对象只能使用原生JS的方法进行操作；
将jquery对象通过加下标，转化为原生对象：

image.png

将原生对象，进行$包裹转化为jquery对象：

image.png

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

推荐使用.on,.off

• .on

.on( events [, selector ] [, data ], handler(eventObject) )

.on()方法事件处理程序到当前选定的jQuery对象中的元素。在jQuery 1.7中，.on()方法 提供绑定事件处理的所有功能。 要删除的.on()绑定的事件，使用.off()。要绑定一个事件，并且只运行一次，然后删除自己， 使用.one()

• .off

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

off() 方法移除用.on()绑定的事件处理程序。可以通过提供组合的事件名，名字空间，选择器或处理函数来移除绑定在元素上指定的事件处理函数。当有多个过滤参数时，只有与这些参数完全匹配的事件处理函数才会被移除。

• .bind

.bind( eventType [, eventData ], handler(eventObject) )
为一个元素绑定一个事件处理程序。

.bind()方法用于直接附加一个事件处理程序到元素上。处理程序附加到jQuery对象中当前选中的元素，所以，在.bind()绑定事件的时候，这些元素必须已经存在。在jQuery 3.0中，bind()已被标记为弃用，使用.on方法绑定

• .unbind

.unbind( eventType [, handler ] )
从元素上删除一个以前附加事件处理程序

在jQuery 3.0中，.unbind已被标记为弃用。从jQuery 1.7开始，它已经被.off方法取代。用.bind()方法绑定的事件处理程序可以使用.unbind()移除，在最简单的情况下，不带参数的.unbind() 将移除元素上所有绑定的处理程序：

-.delegate

.delegate( selector, eventType, handler(eventObject) )
为所有匹配选择器（selector参数）的元素绑定一个或多个事件处理函数，基于一个指定的根元素的子集，匹配的元素包括那些目前已经匹配到的元素，也包括那些今后可能匹配到的元素

在jQuery 3.0中，已被标记为弃用。从jQuery 1.7开始，它已经被.on取代
要移除delegate绑定的时间，使用undelegate

• .live

.live( events, data, handler(eventObject) )
附加一个事件处理器到匹配目前选择器的所有元素，现在和未来

从jQuery1.7开始，.live已经过时了，应使用.on来替换，如果在旧版本上使用，应优先使用.delegate来代替.live
使用.live有以下缺点和问题：

1. 使用.live之前，jquery会先获取与指定的选择器匹配的元素，对于大型文档浪费时间
2. 不支持链式写法
3. 由于所有的.live事件被添加到document上，所以事件被处理之前，可能会通过最长最慢的那条路径之后才能被触发。
4. 在移动 iOS (iPhone, iPad 和 iPod Touch) 上，对于大多数元素而言，click 事件不会冒泡到文档 body 上，并且如果不满足如下情况之一，就不能和 .live() 方法一起使用：
   • 使用原生的可被点击的元素，例如, a 或 button，因为这两个元素可以冒泡到 document。
   • 在 document.body 内的元素使用 .on() 或 .delegate() 进行绑定，因为移动 iOS 只有在 body 内才能进行冒泡。
   • 需要 click 冒泡到元素上才能应用的 CSS 样式 cursor:pointer (或者是父元素包含 document.documentElement)。但是依需注意的是，这样会禁止元素上的复制/粘贴功能，并且当点击元素时，会导致该元素被高亮显示。
5. 在事件处理中调用 event.stopPropagation() 来阻止事件处理被添加到 document 之后的节点中，是效率很低的。因为事件已经被传播到 document 上。
6. .live() 方法与其它事件方法的相互影响是会令人感到惊讶的。例如，$(document).unbind("click") 会移除所有通过 .live() 添加的 click 事件!
7. 使用on绑定事件使用事件代理的写法

.on( events [, selector ] [, data ] )

当提供selector参数时，事件处理程序是指为委派 事件（注：通常也有很多人叫它代理事件）。事件不会在直接绑定的元素上触发，但当selector参数选择器匹配到后代（内部元素）的时候，事件处理函数才会被触发。jQuery 会从 event target 开始向上层元素(例如，由最内层元素到最外层元素)开始冒泡，并且在传播路径上所有绑定了相同事件的元素若满足匹配的选择器，那么这些元素上的事件也会被触发

委托事件有一个优势，他们能在后代元素添加到文档后，可以处理这些事件。 在确保所选择的元素已经存在的情况下，进行事件绑定时，您可以使用委派的事件，以避免频繁的绑定事件及解除绑定事件。
除了可以给未创建的后代元素绑定事件外（即上面提到的优势），代理事件的另一个好处就是，当需要监视很多元素的时候，代理事件的开销更小。

    
11
    
22
    
33
    
44


$('.box').on('click','li',function () {
    console.log($(this).html()
})  

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

• 隐藏元素可以使用.hide

.hide([duration ] [,easing ] [,complete ])
duration：设置动画运行时间，默认400
easing：设置缓冲动画效果，jquery提供liner和swing，其他可使用插件
complete：设置在动画完成时，执行的函数

如不带参数，等同于CSS中display：none；

• 展示元素可以用.show，用法与hide类似

.show( [duration ] [, easing ] [, complete ] )

特点：能记住原来显示的时候是block还是inline-block,隐藏了再显示的时候能恢复

• 也可以使用toggle

.toggle( [duration ] [, easing ] [, complete ] )
duration:动画持续时间
easing:过渡使用的缓动函数
complete:动画完成时执行的函数

通过改变CSS的display属性，匹配的元素将被立即显示或隐藏，没有动画。如果元素是最初显示，它会被隐藏，如果隐藏的，它会显示出来。display属性将被储存并且需要的时候可以恢复。如果一个元素的display值为inline，然后是隐藏和显示，这个元素将再次显示inline。

5.jQuery的动画如何使用？

• 基本动画
  基本动画一般通过元素的事件来触发动画效果，如按钮的点击等

$("button:first").click(function() {
  $("p:first").fadeToggle("slow", "linear");
});

• 动画队列
  对于绑定多个动画效果，可以用如下方法简化，实现动画的队列执行

$box.hide(1000, function(){
   $box.show(1000, function(){
     $box.fadeOut('slow',function(){
       $box.fadeIn('slow',function(){
         $box.slideUp(function(){
           $box.slideDown(function(){
             console.log('动画执行完毕')
           })
         })
       })
     })
   })
})
//等价于
$box.hide(1000)
    .show(1000)
    .fadeOut()
    .fadeIn()
    .slideUp()
    .slideDown(function(){
      console.log('真的完毕了')
})

• 自定义动画
  也可以通过animate来自定义动画效果

.animate( properties [, duration ] [, easing ] [, complete ] )
properties:一个CSS属性和值的对象,动画将根据这组对象移动
其他同上

举例：

  Click here



点击时，同时对透明度，左偏移值和高度应用动画：
$('#clickme').click(function() {
  $('#book').animate({
    opacity: 0.25,
    left: '+=50',
    height: 'toggle'
  }, 5000, function() {
    // Animation complete.
  });
});

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

• .html([string])
  读写两用的方法，获取/修改元素的innerHtml，当传递参数为空，获取元素的innerHtml

$('div').html()

$('div').html('123')

• .text([string])
  使用方法同.html()，操作对象是元素的innerText

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

• .val([value])
  读写双用的方法，用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值

$('input').val()

$('input').val('newValue');

• .attr(attributeName)
  获取元素特定属性的值

var title = $( "em" ).attr( "title" );

• .attr(attributeName,value) / .attr(attributesJson) / .attr( attributeName, function(index, attr) )

$( "#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";
});

8.使用jquery实现菜单效果

菜单

9.jquery实现tab

tab

10.jquery实现加载更多

加载更多

11.jquery实现tab左右滑动切换

tab左右滑动切换