jQuery

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对象

隐式循环

跨平台（处理了兼容性）

选择器

元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。

选择器	选取	实例
*	所有元素	$("*")
#id	id="lastname" 的元素	$("#lastname")
.class	class="intro" 的所有元素	$(".intro")
.class,.class	class 为 "intro" 或 "demo" 的所有元素	$(".intro,.demo")
element	所有 元素	$("p")
el1,el2,el3	所有 、 和 元素	$("h1,div,p")
:first	第一个 元素	$("p:first")
:last	最后一个 元素	$("p:last")
:even	所有偶数
$("tr:even")
:odd	所有奇数
$("tr:odd")
:first-child	属于其父元素的第一个子元素的所有 元素	$("p:first-child")
:first-of-type	属于其父元素的第一个 元素的所有 元素	$("p:first-of-type")
:last-child	属于其父元素的最后一个子元素的所有 元素	$("p:last-child")
:last-of-type	属于其父元素的最后一个 元素的所有 元素	$("p:last-of-type")
:nth-child(n)	属于其父元素的第二个子元素的所有 元素	$("p:nth-child(2)")
:nth-last-child(n)	属于其父元素的第二个子元素的所有 元素，从最后一个子元素开始计数	$("p:nth-last-child(2)")
:nth-of-type(n)	属于其父元素的第二个 元素的所有 元素	$("p:nth-of-type(2)")
:nth-last-of-type(n)	属于其父元素的第二个 元素的所有 元素，从最后一个子元素开始计数	$("p:nth-last-of-type(2)")
:only-child	属于其父元素的唯一子元素的所有 元素	$("p:only-child")
:only-of-type	属于其父元素的特定类型的唯一子元素的所有 元素	$("p:only-of-type")
parent > child	元素的直接子元素的所有 元素	$("div > p")
parent descendant	元素的后代的所有 元素	$("div p")
element + next	每个 元素相邻的下一个 元素	$("div + p")
element ~ siblings	元素同级的所有 元素	$("div ~ p")
:eq(index)	列表中的第四个元素（index 值从 0 开始）	$("ul li:eq(3)")
:gt(no)	列举 index 大于 3 的元素	$("ul li:gt(3)")
:lt(no)	列举 index 小于 3 的元素	$("ul li:lt(3)")
:not(selector)	所有不为空的输入元素	$("input:not(:empty)")
:header	所有标题元素 , ...	$(":header")
:animated	所有动画元素	$(":animated")
:focus	当前具有焦点的元素	$(":focus")
:contains(text)	所有包含文本 "Hello" 的元素	$(":contains('Hello')")
:has(selector)	所有包含有 元素在其内的 元素	$("div:has(p)")
:empty	所有空元素	$(":empty")
:parent	匹配含有子元素或者文本的元素。	$(":parent")
:hidden	所有隐藏的 元素	$("p:hidden")
:visible	所有可见的表格	$("table:visible")
:root	文档的根元素	$(":root")
:lang(language)	所有带有以 "de" 开头的 lang 属性值的 元素	$("p:lang(de)")
[attribute]	所有带有 href 属性的元素	$("[href]")
[attribute=value]	所有带有 href 属性且值等于 "default.htm" 的元素	$("[href='default.htm']")
[attribute!=value]	所有带有 href 属性且值不等于 "default.htm" 的元素	$("[href!='default.htm']")
[attribute$=value]	所有带有 href 属性且值以 ".jpg" 结尾的元素	$("[href$='.jpg']")
[attribute|=value]	所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为开头的字符串	$("[title|='Tomorrow']")
[attribute^=value]	所有带有 title 属性且值以 "Tom" 开头的元素	$("[title^='Tom']")
[attribute~=value]	所有带有 title 属性且值包含单词 "hello" 的元素	$("[title~='hello']")
[attribute*=value]	所有带有 title 属性且值包含字符串 "hello" 的元素	$("[title*='hello']")
[name=value][name2=value2]	带有 id 属性，并且 name 属性以 man 结尾的输入框	$( "input[id][name$='man']" )
:input	所有 input 元素	$(":input")
:text	所有带有 type="text" 的 input 元素	$(":text")
:password	所有带有 type="password" 的 input 元素	$(":password")
:radio	所有带有 type="radio" 的 input 元素	$(":radio")
:checkbox	所有带有 type="checkbox" 的 input 元素	$(":checkbox")
:submit	所有带有 type="submit" 的 input 元素	$(":submit")
:reset	所有带有 type="reset" 的 input 元素	$(":reset")
:button	所有带有 type="button" 的 input 元素	$(":button")
:image	所有带有 type="image" 的 input 元素	$(":image")
:file	所有带有 type="file" 的 input 元素	$(":file")
:enabled	所有启用的元素	$(":enabled")
:disabled	所有禁用的元素	$(":disabled")
:selected	所有选定的下拉列表元素	$(":selected")
:checked	所有选中的复选框选项	$(":checked")
.selector	在jQuery 1.7中已经不被赞成使用。返回传给jQuery()的原始选择器	$(selector).selector
:target	选择器将选中ID和URI中一个格式化的标识符相匹配的 元素	$( "p:target" )

核心

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 );

参数

参数	描述
inFunction	必需。规定 mouseover 事件发生时运行的函数。
outFunction	可选。规定 mouseout 事件发生时运行的函数。

实例

//当鼠标指针悬停在上面时，改变 
 元素的背景颜色：
$("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)

参数

参数	描述
function	必需。规定 focusin 事件发生时要运行的函数。

实例

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

focusOut();

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

定义和用法

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

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

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

语法

$(selector).focusout(function)

参数

参数	描述
function	可选。规定 focusout 事件发生时要运行的函数。

实例

//当 
 元素或其任意子元素失去焦点时，设置 
 元素的背景颜色：
$("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));
    }
});