jQuery简介

what is jQuery

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.

​ jQuery是一个快速，小巧，功能丰富的JavaScript库。它使HTML文档遍历和操作，事件处理，动画和Ajax等东西变得简单易用，可以在众多浏览器中使用。通过多功能性和可扩展性的结合，jQuery改变了数百万人编写JavaScript的方式。

理念

write less，do more

特点

链式调用 每次返回的是一个jquery对象

隐式循环

跨平台（处理了兼容性）

选择器

核心

jQuery([sel,[context]])

课堂

选择器

prent>child

ancestor descendant

prev+next

prev~siling

eq();

属性

attr(); 设置行内非标准属性

prop(); 设置行内标准属性

addClass(); 增加类名

removeClass(); 移除类名

html(); 如果传值了就用传的值，如果没有就用第一个元素的值

方法

如果将一个dom对象转化为一个jquery对象 $(dom对象);

如果将一个jquery对象转化为一个dom对象 $().get();

outerWidth(); 包括外面的border值

outerWidth(true); 包括外面的margin值

scrollTop();

scrollLeft();

offset(); 距离body的距离

position(); 距离父元素的距离，不考虑margin

文档操作

包裹

wrap();

unwrap();

wrapAll();

wrapInner();

替换

replaceWith(); 用

replaceAll();

删除

empty();

remove();

detach();

克隆

clone(true); 相当于两个true，拷贝本身和子元素

clone（true，false）； 只拷贝当前元素的事件，不拷贝子元素

clone(); 只拷贝元素

$(document).ready(function(){});

$(function(){});

当文档结构加载完成以后可以执行

window.onload=function(){};

是需要文档结构及资源加载完成以后才能执行

on();

$(selector).on(event,childSelector,function)
                事件  委派元素    运行函数    

off();

命名空间

$('div').on('click.fun1',function(){
    alert(1);
});
$('div').on('click.fun2',function(){
    alert(2);
});
$('div').off();     //div上面的事件全部删除
$('div').off('click.fun1'); // 事件后面的.aa就是给匿名函数命名

data

$('div').on('click',{aa:'bb'},function(e){
    console.log(e.data.aa);     //返回'bb'
});

one();

trigger();

会触发冒泡，会触发每一个元素身上的事件

triggerHandler();

不会触发冒泡，不会触发元素身上的默认事件，只会触发第一个元素身上的事件

delegate() ; 给元素添加事件委派

undelegate() ; 删除元素身上的事件委派；

hover();

hover() 方法规定当鼠标指针悬停在被选元素上时要运行的两个函数。

定义和用法

jQuery 1.7 版本前该方法触发 mouseenter 和 mouseleave 事件。

jQuery 1.8 版本后该方法触发 mouseover 和 mouseout 事件。

语法

$(selector).hover(inFunction,outFunction)

调用:

$( selector ).hover( handlerIn, handlerOut )

等同以下方式：

$( selector ).mouseover( handlerIn ).mouseout( handlerOut );

注意：如果只规定了一个函数，则它将会在 mouseover 和 mouseout 事件上运行。

调用:

$(selector).hover(handlerInOut)

等同于：

$( selector ).on( "mouseover mouseout", handlerInOut );

参数

实例

//当鼠标指针悬停在上面时，改变 <p> 元素的背景颜色：
$("p").hover(function(){
    $("p").css("background-color","yellow");
},function(){
    $("p").css("background-color","pink");
});

focusin();

当元素（或在其内的任意元素）获得焦点时发生 focusin 事件。

定义与用法

当在元素或在其内的任意元素上发生 focus 事件时，focusin() 方法添加要运行的函数。

与 focus() 方法不同的是，focusin() 方法在任意子元素获得焦点时也会触发。

提示：当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。

提示：该方法通常与 focusout() 方法一起使用。

语法

$(selector).focusin(function)

参数

实例

//当 <div> 元素或其任意子元素获得焦点时，设置 <div> 元素的背景颜色：
$("div").focusin(function(){
$(this).css("background-color","#FFFFCC");
});

focusOut();

当元素（或在其内的任意元素）失去焦点时发生 focusout 事件。

定义和用法

当在元素或在其内的任意元素上发生 focusout 事件时，focusout() 方法添加要运行的函数。

与 blur() 方法不同的是，focusout() 方法在任意子元素失去焦点时也会触发。

提示：该方法通常与 focusin() 方法一起使用。

语法

$(selector).focusout(function)

参数

实例

//当 <div> 元素或其任意子元素失去焦点时，设置 <div> 元素的背景颜色：
$("div").focusout(function(){    $(this).css("background-color","#FFFFFF");});

对列（fx）的特点

先进先出

入队

出对

stop(); 停止当前动画，继续队列的后续动画

stop(true); 清空队列，立即停止动画

stop(true,fales); 清空队列，立即停止当前动画

stop(true,true); 清空队列，立即完成当前动画

//第二个参数代表是否完成当前动画

栈的特点

先进后出

事件对象

preventDefault()；直接用，不需要处理兼容性

stopPropagation();直接用，不需要处理兼容性

e.type();返回触发的事件类型

延迟对象

def.then();

$.ajax({url:jsdkjfkjsdf}).then(function(data){
    console.log(data);
    console.log('获取正确');
},function(){
    console.log('获取错误')
})

def.done();

$.ajax({url:jsdkjfkjsdf}).done(function(){})

工具

$.each(arr，fn);

$.grep(arr,fn(value,index));

$.unique(arr);

jquery处理冲突

(function(){

})(jQuery)

let ms=jQuery.noConflict();
ms('div')；

queue()；插队操作

dequeue()；出队操作

插队完了以后记得添加出队操作

$('div').queue(function(){
    $('div').css();
    $('div').dequeue();
})

let arr=[
    function(){
        console.log(1);
        $('div').dequeue('ms');
    },
  function(){
      console.log(2);
      $('div').dequeue('ms');
  },
  function(){
      console.log(3)
  }
];
$('div').queue('ms',arr);
$('div').dequeue('ms');

animate()

var obj={value:0}
$(obj).animate({value:2345},{
    duration:2000,
    step:function(val){
        $('p').html(Math.trunc(val));
    }
});