jQuery介绍

1. 为什么要用jQuery?
   全世界仍有大部分网站正在适用API,尽管它只是提供了一个友好的$('选择器')

• DOM API(难用,存在兼容性问题,功能太少不能与时俱进)
• jQuery(API友好,兼容性好,功能强大与时俱进)

2. 什么时候该用jQuery?

• DOM操作较多(事件监听)
• 简单的Ajax
• 需要兼容多款浏览器

3. 什么时候不用jQuery?

• 页面交互极为简单
• 页面对流量有苛刻的要求
• 上级强制,团队已经有了jQuery的替代品

4. jQuery能做什么?

• 选择网页元素
• 改变结果集
• 元素的操作：取值和赋值
• 元素的操作：移动
• 元素的操作：复制、删除和创建
• 工具方法
• 事件操作
• 特殊效果
• AJAX
• http://devdocs.io/jquery/

5. jQuery的两种API

$.noConflict()
$.each()
$('ul').addClass()
$('p').text('hi')

jQuery选择器

选择器

1. 规则类似与css的选择器

• 分为基本选择器(如页面所有元素,id选择器,类选择器,标签选择器)
• 组合/层次选择器(如后代,相邻,子元素等)
• 基本过滤选择器(如所有a元素中的第一个,最后一个,index为奇数,正在执行动画等)
• 内容过滤器(如内容中包含value值的元素,内容为空,子元素中有F的元素)
• 可视化选择器(所有被隐藏/可见的E)
• 属性过滤选择器(含有属性attr的E,属性attr=value的E等)
• 子元素选择器(如E的第n个子节点,E的index为奇数的子节点,所有E的第一个子节点)
• 表单元素选择器(特定类型的input,被选中的checkbox或者radio)

2. .eq(index) .get([index])
   对于一个特定结果集，我们想获取到指定index的jQuery对象，可以使用eq方法
   $('div').eq(3); // 获取结果集中的第四个jQuery对象
   我们可以通过类数组下标的获取方式或者get方法获取指定index的DOM对象，也就是我们说的jQuery对象转DOM对象
   $('div')[2];
$('div').eq(2);
get()不写参数把所有对象转为DOM对象返回
3. 兄弟元素获取
   .next([selector]), .prev([selector])
   next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。prev正好相反，获取元素之前的同辈元素
   $('.test').next();
$('.test').prev('li');
   .nextAll([selector]), .prevAll([selector])
   nextAll获得每个匹配元素集合中每个元素所有后面的同辈元素，选择性筛选的选择器，prevAll与之相反，获取元素前面的同辈元素
   .siblings([selectors])
   获得匹配元素集合中每个元素的兄弟元素,可以提供一个可选的选择器
   $('li.third-item').siblings()
   4.父子元素获取
   .parent([selector])
   取得匹配元素集合中，每个元素的父元素，可以提供一个可选的选择器
   $('li.item-a').parent()
   .parents([selector])
   获得集合中每个匹配元素的祖先元素，可以提供一个可选的选择器作为参数
   $('li.item-a').parents('div')
   .children([selector])
   获得匹配元素集合中每个元素的子元素，选择器选择性筛选
   $('ul.level-2').children()
   .find([selector])
   查找符合选择器的后代元素
   $('ul').find('li.current');
4. 筛选当前结果集
   .first()
   获取当前结果集中的第一个对象
   .last()
   获取当前结果集的最后一个对象
   .filter(selector), .filter(function(index))
   筛选当前结果集中符合条件的对象，参数可以是一个选择器或者一个函数
   $('li').filter(':even')
$('li').filter(function(index) { return index % 3 == 2; })
   .not(selector), .not(function(index))
   从匹配的元素集合中移除指定的元素，和filter相反
   .is(selector), is(function(index)), is(dom/jqObj)
   判断当前匹配的元素集合中的元素，是否为一个选择器，DOM元素，或者jQuery对象，如果这些元素至少一个匹配给定的参数，那么返回true

    if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }

.has(selector), .has(dom)
筛选匹配元素集合中的那些有相匹配的选择器或DOM元素的后代元素
$('li').has('span')

使用jQuery实现Tab切换效果

预览Tab切换

$('.mei-tab .tab').on('click',function(){
  $(this).addClass('active')
         .siblings()
         .removeClass('active')  

   $(this).parents('.mei-tab')
       .find('.panel')
       .eq($(this).index())
       .addClass('active')
       .siblings()
       .removeClass('active')
})

---

jQueryDOM操作

创建元素

只需要把DOM字符串传入$方法即可返回一个jQuery对象

var obj = $('<div class="test"><p><span>Done</span></p></div>')

添加元素

• .append(content[,content]) / .append(function(index,html))
  Insert content, specified by the parameter, to the end of each element in the set of matched elements.

1. 可以一次添加多个内容，内容可以是DOM对象、HTML string、 jQuery对象

2. 如果参数是function，function可以返回DOM对象、HTML string、 jQuery对象，参数是集合中的元素位置与原来的html值

$( ".inner" ).append( "<p>Test</p>" );
$( "body" ).append( $newdiv1, [ newdiv2, existingdiv1 ] );
$( "p" ).append( "<strong>Hello</strong>" );
$( "p" ).append( $( "strong" ) );
$( "p" ).append( document.createTextNode( "Hello" ) );

• .appendTo(target)
  把对象插入到目标元素尾部，目标元素可以是selector, DOM对象, HTML string, 元素集合, jQuery对象;
• .prepend(content[,content]) / .prepend(function(index,html))
  向对象头部追加内容，用法和append类似，内容添加到最开始
• .prependTo(target)
  把对象插入到目标元素头部，用法和prepend类似
• .before([content][,content]) / .before(function)
  在对象前面(不是头部，而是外面，和对象并列同级)插入内容，参数和append类似
• .insertBefore(target)
  把对象插入到target之前（同样不是头部，是同级
• .after([content][,content]) / .after(function（index）)
  和before相反，在对象后面(不是尾部，而是外面，和对象并列同级)插入内容，参数和append类似
• .insertAfter(target)
  和insertBefore相反，把对象插入到target之后（同样不是尾部，是同级

删除元素

• .remove([selector])
  删除被选元素（及其子元素）
  $("#div1").remove();
  我们也可以添加一个可选的选择器参数来过滤匹配的元素
  $('div').remove('.test');
• .empty()
  清空被选择元素内所有子元素
  $('body').empty();

包裹元素

• wrap(wrappingElement) / .wrap(function(index))
  为每个对象包裹一层HTML结构，可以是selector, element, HTML string, jQuery object

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
包裹元素

$( ".inner" ).wrap( "<div class='new'></div>" );
看看结果

<div class="container">
  <div class="new">
    <div class="inner">Hello</div>
  </div>
  <div class="new">
    <div class="inner">Goodbye</div>
  </div>
</div>

• .wrapAll(wrappingElement)
  把所有匹配对象包裹在同一个HTML结构中

<div class="container">
  <div class="inner">Hello</div>
  <div class="inner">Goodbye</div>
</div>
包裹元素

$( ".inner" ).wrapAll( "<div class='new' />");
看看结果

    <div class="container">
      <div class="new">
        <div class="inner">Hello</div>
        <div class="inner">Goodbye</div>
      </div>
    </div>

• text()
  和html方法类似，操作的是DOM的innerText值

jQuery属性&CSS

• 属性相关
  .val([value])
  这是一个读写双用的方法，用来处理input的value，当方法没有参数的时候返回input的value值，当传递了一个参数的时候，方法修改input的value值为参数值
  $('input').val()
$('input').val('newValue');
• .attr()
  .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";});
//这里用id选择符举例是不是function永远最多迭代一次？
用类选择符是不是更好些？

• .removeAttr()
  为匹配的元素集合中的每个元素中移除一个属性（attribute）
  .removeAttr() 方法使用原生的 JavaScript removeAttribute() 函数,但是它的优点是可以直接在一个 jQuery 对象上调用该方法，并且它解决了跨浏览器的属性名不同的问题。
  $('div').removeAttr('id');
• .prop()/.removeProp()
  这两个方法是用来操作元素的property的，property和attibute是非常相似的概念

CSS相关

• .css(propertyName) / .css(propertyNames)
  获取元素style特定property的值

var color = $( this ).css( "background-color" );
var styleProps = $( this ).css([
  "width",
  "height",
  "color",
  "background-color"
]);

• .css(propertyName,value) / .css( propertyName, function(index, value) ) / .css( propertiesJson )
  设置元素style特定property的值

$( "div.example" ).css( "width", function( index ) {
  return index * 50;
});

$( this ).css( "width", "+=200" );

$( this ).css( "background-color", "yellow" );

$( this ).css({
  "background-color": "yellow",
  "font-weight": "bolder"
});

• .addClass(className) / .removeClass(className)
  .addClass(className) / .addClass(function(index,currentClass))
  为元素添加class，不是覆盖原class，是追加，也不会检查重复

$( "p" ).addClass( "myClass yourClass" );
$( "ul li" ).addClass(function( index ) {
  return "item-" + index;
});

• removeClass([className]) / ,removeClass(function(index,class))
  移除元素单个/多个/所有class

$( "p" ).removeClass( "myClass yourClass" );
$( "li:last" ).removeClass(function() {
  return $( this ).prev().attr( "class" );
});

• .hasClass(className)
  检查元素是否包含某个class，返回true/false

$( "#mydiv" ).hasClass( "foo" )

• .toggleClass(className)
  toggle是切换的意思，方法用于切换，switch是个bool类型值，这个看例子就明白

<div class="tumble">Some text.</div>
第一次执行

$( "div.tumble" ).toggleClass( "bounce" )

<div class="tumble bounce">Some text.</div>
第二次执行

$( "div.tumble" ).toggleClass( "bounce" )

<div class="tumble">Some text.</div>

jQuery对象和原生DOM对象有什么区别?如何转换?

• 原生Dom转jQuery对象(对于一个Dom对象,只需要用$()把Dom对象给包装起来,就可以获得一个jQuery对象了,方式为$(Dom对象).)

<script>
var box = document.getElementById('box');
var $box = $(box);
</script>

• jQuery对象转原生Dom(jQuery对象是一个数组对象,可以通过[index]的方法得到相应的Dom对象)

<script>
var $box = $('#box');  //这里$box是为了区别自己是jQuery对象
var box1 = $box[0];
var box = $box.get(0)
</script>

• Dom对象才能使用Dom方法,jQuery对象不能适用Dom中的方法,但jQuery对象提供了一套更加完善的工具用于操作Dom

---

jQuery常用函数

• .each( function(index, Element) )
  遍历一个jQuery对象，为每个匹配元素执行一个函数

$( "li" ).each(function( index ) {
  console.log( index + ":" + $(this).text() );
});

• jQuery.extend([deep,] target [, object1 ] [, objectN ] )

1. 当我们提供两个或多个对象给$.extend()，对象的所有属性都添加到目标对象（target参数）。
2. 如果只有一个参数提供给$.extend()，这意味着目标参数被省略。在这种情况下，jQuery对象本身被默认为目标对象。这样，我们可以在jQuery的命名空间下添加新的功能。这对于插件开发者希望向 jQuery 中添加新函数时是很有用的

目标对象（第一个参数）将被修改，并且将通过$.extend()返回。然而，如果我们想保留原对象，我们可以通过传递一个空对象作为目标对象：

var object = $.extend({}, object1, object2);
在默认情况下，通过$.extend()合并操作不是递归的;

如果第一个对象的属性本身是一个对象或数组，那么它将完全用第二个对象相同的key重写一个属性。这些值不会被合并。如果将 true作为该函数的第一个参数，那么会在对象上进行递归的合并。

var object1 = {
  apple: 0,
  banana: { weight: 52, price: 100 },
  cherry: 97
};
var object2 = {
  banana: { price: 200 },
  durian: 100
};

// Merge object2 into object1
$.extend( object1, object2 );

• .clone( [withDataAndEvents ] )
  .clone()方法深度复制所有匹配的元素集合，包括所有匹配元素、匹配元素的下级元素、文字节点

通常我们将页面上一个元素插入到DOM里另一个地方，它会被从老地方移走，类似剪切的效果
$('.hello').appendTo('.goodbye');

<div class="container">
  <div class="goodbye">
    Goodbye
    <div class="hello">Hello</div>
  </div>
</div>

但是我们如果需要的是复制而不是剪切，我们可以像下面这样写代码：
$('.hello').clone().appendTo('.goodbye');

• .index() / .index(selector)/ .index(element)
  从给定集合中查找特定元素index

1. 没参数返回第一个元素index
2. 如果参数是DOM对象或者jQuery对象，则返回参数在集合中的index
3. 如果参数是选择器，返回第一个匹配元素index，没有找到返回-1

看个例子
var listItem = $( "#bar" );
alert( "Index: " + $( "li" ).index( listItem ) );

• .ready( handler )
  当DOM准备就绪时，指定一个函数来执行。

虽然JavaScript提供了load事件，当页面呈现时用来执行这个事件，直到所有的东西，如图像已被完全接收前，此事件不会被触发。

在大多数情况下，只要DOM结构已完全加载时，脚本就可以运行。传递处理函数给.ready()方法，能保证DOM准备好后就执行这个函数，因此，这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。

如果执行的代码需要在元素被加载之后才能使用时，（例如，取得图片的大小需要在图片被加载完后才能知道），就需要将这样的代码放到 load 事件中。
下面两种语法全部是等价的：
$(document).ready(handler)
$(handler)
我们经常这么使用

$(function(){
    console.log('ready');
});

window.onload和$(document).ready有什么区别?document.onDOMContentLoaded呢?

• 加载
  • window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行
  • $(document).ready()是DOM结构绘制完毕后就执行,不必等到加载完毕.
• 执行次数
  • window.onload只能执行一次
  • $(document).ready()可以写多个,执行顺序是按照编写的顺序进行执行.
• document.onDOMContentLoaded在页面触发[DOMContentLoaded]事件时候触发.
  此外,文档被加载和解析,并且DOM被完全构造,但链接的资源(例如图像,样式表和子帧)可能尚未被加载

实现一种效果:点击icon后会却换播放和暂停两种状态

代码
核心代码

 <span class="play-pause"><i class="iconfont icon-pause "></i></span>
  <script>
    $('.play-pause').on('click', function(){
      var $iconfont =$(this).find('.iconfont') 
      $iconfont.toggleClass('icon-pause').toggleClass('icon-play')
    })
  </script>

jQuery事件

• .on( events [,selector ] [,data ], handler(eventObject) )
  看起来参数及其复杂，我们看一下各个参数的意思

1. events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
2. selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件
3. data：当一个事件被触发时，要传递给事件处理函数的event.data
4. handler(eventObject)：事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false
   看几个例子:

<div class="box">
  <ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
  </ul>
</div>
<input id="ipt" type="text"> <button id="btn">添加</button>
<div id="wrap">
</div>

<script>
$('.box li').on('click', function(){
    console.log(1)
  var str = $(this).text()
  $('#wrap').text(str)
})

//等同于
$('.box>ul>li').click(function(){
    console.log(2)
  var str = $(this).text()
  $('#wrap').text(str)
})

//也可以这样写
$('.box li').on('click.hello', function(){
    console.log(3)
  var str = $(this).text()
  $('#wrap').text(str)
})
//命名空间没什么特别的作用，只不过在解绑事件时便于区分绑定的事件
$('.box li').off('click.hello')

//可是用如下方法新增的元素是没绑定事件的
$('#btn').on('click', function(){
  var value = $('#ipt').val()
  $('.box>ul').append('<li>'+value+'</li>')
})

//我们可以用事件代理
$('.box ul').on('click', 'li', function(){
  var str = $(this).text()
  $('#wrap').text(str)
})

//上面代码相当于原生 js 的
document.querySelector('.box ul').addEventListener('click', function(e){
    if(e.target.tagName.toLowerCase() === 'li'){
        //do something
    }
})

//绑定事件的时候我们也可以给事件附带些数据，只不过这种用法很少见
$('.box').on('click', {name: 'hunger'}, function(e){
    console.log(e.data)
})

直接绑定和事件代理分别如何使用呢?

使用 .on() 方法，这个方法能够直接绑定和代理事件。根据我们要实现的需求，我们需要使用代理事件来解决问题，也就是说我们把事件的绑定交给父级元素。

<div class="box" id="set" title="season">
<p class="set-c">春</p>
<p class="set-x">夏</p>
<p class="set-q">秋</p>
<p class="set-d">冬</p>
</div>
<div class="clone"> </div>

       <!-- 绑定事件 -->
       <script>
            $('p').click(function(){
                var str = $(this).text()
                $('.clone').text(str)  
            })
        </script>

         <!-- 代理事件 -->
       <script>
            $('.box').on('click.hello', 'p', function(){
                var str = $(this).text()
                $('.clone').text(str)
            })
        </script> 

image.png

jQuery动画

• 动画相关api和动画队列
  效果预览
• 关于动画队列
  以下多次实现回调是为了能依次执行,并且最终输出log
  如果不回调或者实现动画队列的话,会先输出log然后动画进入动画队列依次执行

$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('真的完毕了')
    })

• 自定义动画
  效果预览
  上面几个简单的动画不能满足需求的时候，jquery提供了自定义动画行为的方法
  • .animate( properties [, duration ] [, easing ] [, complete ] )
  • .clearQueue
    清除动画队列中未执行的动画
  • .finish
    停止当前动画，并清除动画队列中所有未完成的动画,最终展示动画队列最后一帧的最终状态
  • .stop( [clearQueue ] [, jumpToEnd ] )
    停止当前正在运行的动画
    clearQueue(default: false)
    jumpToEnd(default: false)

jQueryAjax

• $.ajax
• $.get
• $.getJSON

 <script>
    $.ajax({
    url: 'http:://xx.com.php',
    type: 'GET', //method: 'POST',1.9之前使用“type”
    data: {
    username: 'shanghang',
    password: '123456',
    },
    dataType: 'json'
    }).done(function(result){
    console.log(result);
    }).fail(function(jqXHR,textStatus){
    console.log(taxeStatus);
    });
    //$.get直接获取
  $.get(url).done(function(ret){
  console.log(ret)
})
    //使用一个HTTP GET请求从服务器加载JSON编码的数
//据，这是一个Ajax函数的缩写，这相当于:
$.ajax({
  dataType: "json",
  url: url,
  data: data,
  success: success
});
    </script>

jQueryJsonp

    $.ajax({
        type:'get',
        url:'http://test.com/bookservice.php',
        dataType:'jsonp',
    }).done(function(ret){
        console.log(ret)
})