console.log($==jQuery);//truejQuery就是$等价的

页面加载

$(document).ready(function(){});//相当于原生window.onload（DOMContentLoaded）

比o7 g N = v 7 qnload先执行

$(fun8 w d q f ?ction(){})//简写

只需要文档结构加载完毕后执行,onload是文档和资源媒体加载完成。

DOM节点对象转换

jq的DOM节点与原生DOM节点互转

//jq转原生

console.log($(this));//返回jq对象

//init数组对象通过下标获取到的就是原生的DOM

console.log($(‘#box’)[0]);

console.ld 5 W u r /og($(‘#box’).get(0));

$(‘#_ C , C # 0 ,box’).get(0).innerHTML=’哈哈’;

让出$的使用权限

jQuery.noConflict();

console.log($);//undef# v P 8 M ` qind

//闭包将jQuery传到闭K , U A e %包中的$在闭包函数中又S N j # ^ | W可以使] k G 6 A [ o # +用$来进行jq的操作

;(function($){

$(function(X N 6 U){

console.log($(‘#box’));

})

})(jQuery)

//给$起个名字

va? F ( Zrjq=jQuery.noConflict(true);

console.log(jq(‘#box’));

基本选择器

$(‘#box’)//id选择

$(‘.aa’)//类名选择

$(‘li’)//标签选择

层级选择器

$(‘ulli’)//后代li

$(‘ul>li’)//子代的li

$(‘#li1+li’)//#li1的下一个兄弟li

$(‘#li1~li’)//#li1的所有的弟弟li

基本过滤选择器

$(‘li:first’)//获取第一个元素

$(‘li:last’)//获取最后一个元素

$(‘li:not(#li1)’)//排除

$# – , : % T e(‘li:od~ f g c i 6 Ed’)//选择索引奇数—显示的偶数行

$(‘li:even’)//选择索引偶数—显示奇数行

$(‘li:eq(3)’)//等于索引

$(‘li:gt(3)’)//大于p 1 s S & r索引

$(‘li:lt(3)’)//小于索引

//选取索引为n的li

//$(‘li:eq(‘+n+’)’)

$(‘li’).eq(n)

属性过滤选择器

$(‘li[name]’)//带有name属性的li

$(‘li[name=lucy]’)^ ? M q Y e 9//name属性值为lucy的li

$(‘li[name!=joy]’)//name属性不为joy的li

$(‘li[name*=o]’)/` y l !/name属性值包含o的li

$(‘li[name^=j]’)//name属性的值以j开头的

$(‘li[name$=y]’)//name属性的值以y结尾的

表单选择器n 7 z { H ~

$(‘input’)//标签input

$(‘:inpud L w ; Gt’)//不论标签名只要% b Q j [ ] ) O是表单元素都选取

$(‘:text’)

$(‘:password’)

$(‘:radio’)

$(‘:checkbox’)

$(‘:file’)

$(‘:submit’)

$K l , Z ^ 1 Z B(‘:button’)

DOM节点遍历

遍历节点

$(‘ul’).children()//ul下的所有子节点

$(‘ul’).childX ? O Aren(‘p’)//ul下的p子节点

$(‘ul’).find(‘p’)//ul下的所P Q y有后代p

$(‘#box’).next()//box的下一个兄弟

$(‘#box’).nextAll()//box的下边的所有兄弟

$(‘#box’).prev()//box上一个

$(‘#box’).prevAll()//上边所有的兄弟

//box的所有的兄弟节点（之前的和之后的全算$ e | t p E |）

$(‘#box’).siblings()

$(‘#box’).siblings(‘p’)

遍历父节点

$(‘#box’).parent()//真正的父节点

$(‘#box’).parents()//所有的祖先节点

$(‘#box’).parents(‘R 7 ] 9 | Ldiv’)//S x & Z C j # W ;所有祖先中的div

遍历节点-过滤

$(‘#box’).find(‘li’)//find获取后代元素

$(‘li’).filter(‘.aa’)//filteH O _ hr过滤找到满足条件的元素

$(‘li’W o m).not(‘.aw w B B N x \a’)//not排除满足条件的元素选择其他元素

属性操作

$(‘#box’).attr(‘title’)//获取

$(‘#box’).attr(‘tit9 P 6 r K &le’,Z 4 ] w f 6 5 K‘xixi’);//设置

//批量设置

$(‘#box’).attr({

titA ~ : a 0 z A Dle:’heihei’,

sex:’female’

})

$(‘#box’).removeAttr(‘sex’);//删除属性

属性值为true和false的属性操作

$(‘:checkbX 6 = 9 x } ? uox’).attr(‘checked’);//获取–>checked

$(‘:checkbf * Dox’).prop(‘checked’);//获取–>true

$(‘:checkbox’).prop(‘checked’,true);//设置

class操作

$(‘#box’).ap K ) t N B qddClass(‘red’);//添加类red

$(‘#^ \ f ^ , e _ x bbh d o T I m H # |ox’).removeClass(‘red’);/g R l d 8 o 2 – E/删除red

判断该元素box上是否有red

$(‘#box’).hasR f k ) L ;Cl: t 4 Z 2ass(‘red’)//Boolea# . & } : /n

$(‘#boq h f % Uxi 7 I e‘).is(‘.red’)//Boolean

切换类名toggleClass

$(‘R 0 j *#boxE L a . 6 V m‘).toggleClass(‘red’);

css操作

//获取样式

$(‘#box’).css(‘width’)

//设置

$(‘#box’).css(‘background’,’red’);

//批量设置

$(‘#diva X ? z # r ,1′).css({

width:’200px’,

fontSize:’18px’//font-size去-变驼峰

})

html文本与值的操作

innerHTML—>html()

innerText—>text(@ # c _ O ])

表单value—>val()

$(‘#s1’).html()//获取识别标签

$(‘#Q v z ? E 8 ps1′).text()//获取只识别文本

//设置

$(‘#box’).html(‘<i>过年好！</i>’);//会识别标签

$(‘#box’).text(‘<i>过年好！</i>’);//不会识别

//表单的value

$(‘:text’).val()

$(‘:text’).val(‘ddddd’);

Node操作

创建元素

$(‘<li></li>’)

添加节点

在元素尾部添加

新元素.appendTo(目标元素)

$(‘<li>国庆节</li>’).appendTo($(‘#list’));9 N C B c W ^ / j

目标.a5 \ lppend(新元素)

在元素头部添加

新元素.prependTo(目标元素)

目标.prepend(新元素s N Y H l a l #)

$(‘#list’).prepe: w X O ond($(‘<li>元旦节</li>’))

在目标元素之前插Q B V d y n入

新元素.insertBrfore(目标元素)

$(‘<l8 d \ y @ &i>情人节</li>’).insertBefore($(‘#listli’).eq(2));

目标元素.befory u ae(新元素)

在目标元素之后插入

新元素.insertAfter(目标元素)

目标元素.after(新元素)

$(‘#listli’).eq(3).after($(‘<li>妇女节</li>’));

删除节点

remove():将节点删除，返回被删除的节点，不会保留节点上的事件

dR % { %etach():将节点删除，返回被删除的节点，会保留节点上的事件

empty():全部清空

克隆节点

clone（）复制节点及内容，但不保留节点上的事件

clone（true）复制节点及内容，保留节点上的事件

替换节点

新节点.replaceAll(要被替换的节点)

要被替换的节点.replaceWith(新节点)

$(‘#listli’).eq(2).replaceWith($(‘<li>女神节</li>’));

数据串联

serialize()

<inputtype=”text”name=’a’vaH c f A g u g Blue=’1’/>

<inputtype=”text”name=’b’valo j % y Mue=’2’/>

<inputtype=9 i _ V \ T U“t. P m [ ; B 1 ? sext”name=’c’value=’3’/>

$(“input”).serialize()//a=1&L – [amp;b=2&c=3

$(“input”).serializeArray()//[{{name:”a”,value:”1″}},{…},{…}]

add和slice

$(“div”).add(? R ` ]“span”).add(/ n $ v“ulli”).css(“backgroundColor”,’red’)

//等同@ p 8 ` [ U =于

$(“div,span,ulli”).css(# s K z u #“bac| R nkgroundColor”,’r5 / Med’)//与add一样

$(“ulli”).slice(1,4).css(“backgroundColor”,’red’);//获取从1到4的li元素

元素的宽高

原生的元素的宽高分别那几e 2 F ` U种如何获取

内容宽高—-widthheight

可视宽高—clientWidth/clientHeight

占位宽高—C 6 Vof9 S _fsetWidth/offsetHeight

$(“#div1: $ 3 ]“).css(“width”)//”100px”字符串

jq的M 5 U元素宽高操作

内容宽高width()height()方法

可视宽高innerWid5 $ [ # I Nth（）innerHeight（）

占位宽高outerWidth()outerHeight()

整个宽高outerWidth（true）outerHeight（true）

jq获取可视区及F K 4 V 1 Y K V 4文档的宽高

可视区宽高$(S 4 Y F ^ 5 fwindow).width()/.height()

文档的宽高$(document).width()/heQ i z / 3 S J Wightf T ; & u ( R j()

元素的位置

$(‘#sub’= _ = g 0 f ; c ]).offset()返回一个对象到文档的left和top值

$(‘#sub’).position()返回一个对象到有定位属性的父级元素的left和top值

滚动条卷走的宽高操作

$(document).scrollTop()//不传参获取，Y = W ? o ~ #传参设置

event对象

jq中的事件对象不需要N _ & U R 2 0 [兼容了直接传参ev就: $ L可以了

ev.clientX/ev.clientY, Z d事件触发的位置到浏览器可视区的上左边的距离Y ; h G p 6 %

ev.currentTary E jget：当前事件触发T 6 c ; 4 &的元素

ev.delgateTarget：当前事件绑定的元素

ev.offsetX/ev.offsetY:事件触发的位置到元素的上左边的距离

ev.originalEvent:元素事件对象

ev.pageX/ev.pageYz g ! *:事件触发的位置到文档的上左边的距离

ev.scrU X P r leenX/ev.screenY:事件触; [ Q ] [ _发* G f的位置到屏幕的上左边的距离

ev.which类似于keyCode可以获取鼠标的键值左键是1右键是3滚轮是2

阻止默认事件ev.preventDefault(Z v q m W { 0 8)

阻止冒泡ev.stopPropagation()

阻止默认事件+冒泡returnfalse

事件绑定on()

//基本事件

$3 s 6 Q(‘#box’).on(‘click’,function(){})

//一次绑% $ V ) C v定多个事件对应一个处理函数

$(‘#box’).on(‘clickmouseentermouseleave’,function(){})

//绑定多个事件对应多个处理函数对象形式

$(‘#box’).on({

‘cli4 b } f e t h s 6ck’:function(){},

‘dS 3 o S 2 hblclick’D { m # | q 5 n 3:function(D F J){}

})

//自定义事件

$(‘#box’).on(‘hahaha’,function(){}o L _ M S B \ q)

//trigger触发事件

$(‘#box’).trigger(‘hahaha’);

//事件委托

$(‘#list’).on(‘click’,’li’,f+ u Cunction(ev){

console.log($(ev.target).html());

})

//事件的取消绑定

$(‘button:eq(0)’).on(‘click’,function(){

console.lor t 3 S ! ~ G * 1g(1111);

})

$(‘buttp V 3oL H ] R h g ; un:eq(1)’).o u Ron(‘click’,function(){

$(‘button:eq(0)’).offm F S ? r D();

//$(‘button:eq(0)’).off(‘mouseenter’);

//传参取消事件类型

})

//一个事件上绑定多个函数执行—事件的命名空间

$(‘button:eq(0)’).on({

‘click.a’:function(){

cg 1 Q + – D ? ~onsole.log(111);

},

‘click.b’:function(){

console.log(222);

}

})

$(‘buN ` : X Otton:eq(1)’).on(‘click’,function(){

$(‘button:eq(0)’).off(‘click.a’);

})

//只执行一次的y U 3 k ~ [ j o事件

$(‘buttoQ \ ` Pn’).eq(0).one(‘click’,function(){

console.log(‘一次就够了’);

})

//模拟执行一次事件

$(‘button’).eq(0).on(‘click’,function(){

console.log(‘一次就够了’);

$(this).off();

})

合成事件

mouseenter和mouseleave

$(‘#box’).hover(f3 [ / W ) h r t eunction(){

//鼠标移入执D k m I行函数

},functio[ t ? [ On(){

/q n \/鼠标移出4 6 U # 8 d @ L %执行函数

})

//可以遍历数组，对象，jq元素

$.each(o. M i abj,function(key,value){

console.log(key+’:’+value);

})

还可以$(‘选择器’).each()//遍历元素工具\ [ ) * v T * 0级别

varnewArr=$.map(arr,function(item){

returnitem*item*item;

})有返回值

$.type()输出当前数据类型typeof

$.trim()删除字符串前后的空格

$.inArrayk z 8 a `()indexOf()

$.proxy()功能类似于bind$.proxy()

$.noConflict()给, = o 3 A i w i ($起个别名

$.parseJSON()JSON.parse()

$.makeArray()将伪y i Q e A H ^ [ L数组转成数组。Array.from()

基本动画

显示隐藏

show（

duration动画执行时间-毫秒，

easing运动效果（只有两种swinb F .g慢快慢，linear匀速，

complate运动执行完成S f L P ; ,后的回调）

）

隐藏hide（）

显示隐藏的切换toggle（）

$(‘) \ U ^ 0 8 ]#box’).sho/ $ d F 4 !w(1000,function(){

alert(‘执行完毕’);

})

淡入淡出

淡入fadeIn（）淡出fadeOut（）透明度变化到fadeTo（）淡入淡出切换fadeToggle: V # N { X（）

$(‘butto` & $ 4 Z ; un’).eq(0).on(‘click’,function(){

$6 E | a(* v g h Q‘#box’).fadeIn(1000);

})

$(‘button’).eq(@ : V K v J x A C2).on(‘click’,function(){

$(‘#box’).fadeV Z 5 ` GTo(1000,j 1 o V 1.5);

})

下拉显示

下拉显示slideDown（）上拉隐藏slideUp（）切换slideToggle（）

$(‘button’).eq(2).on(‘click’,function(){

$(‘#box’).slideTj T % 8 G joggle(1000);

})

animate

animate({属性1：目标值1，属` ~ d r i性2：8 , 7 } r [ (目标值2.。。},duration动画持续时间，easing动画效果，

callback回调)

//累加

$(‘by M : w q g Zutton’).click(fune d C \ oction(){

$(‘#box’).aq O `nimate({width:’{ 0 + c+=O } \ m , x / 8 Q50′},200)

})

//链式运动

$(‘button’).Z 9 2click(function(){

$(‘#] \ 3box’).animate({width:500},1000)

.an6 d Q : H U / kimate({height:300},500)

.& + v ( Fanimate({o– [ . $ D J 4 –pd 3 f q _ + K w ^acity:.5X [ L E 1 =},500)

})

动画队列

q~ Z # D w ) Rueue(function(next){})

将s N ! J U r 7其他的操作加入到j t V 7 k T ) Z t动画队列中按顺序来完成

$(‘#box’).animate({wD r 6 / R . @ p Midth:500},1000)

.queue(function(next){

$Z | m B z f 4 3(this).css({background:’blue’});

next();//继续执行后续的动画队列中的操作

})

.animate({height:300},500);

判断是否处于动画状态

$(元素).is\ R s Z L + x(‘:animated’):有动画在执行返回true没有返回false

$(‘#box’).hover(function(){

if(!$(this).is(‘:J W ganimated’)){A 5 x L P 4 z Q –

$(this).animate({height:300},400);

}

}( X P w G $ l,funa O R u y L 9ction(){

$(this).animate({height:50},400);

})

延迟动画

$(‘#box’).animate({width:500},1000), 4 E . 4 ! T N

.delay(2000)

.animate({height:300},500);

停止动画

stop（clearQueue清除动画队列，gotoEnd达到动画最终状态）停止动画

finish（）完成动画—所有动画队列的效果达到最终状态（2.x以上版本支持）

//stop停止动画的几种组合

$(‘button’).eq(1).* O |click(function(){

//参数皆为false不清除动画队列不达到最终状态

$(‘#box’).stop(false,false);//默认

//参数皆为true清除动画队Z Y S d +列达到最终状| | J = % ` m E态

$(‘#box’).stop(true,true);

//truefalse清除动画队列不达到最终状态

$(‘#box’).stop(true,false);

//falsetrue不清除动画队列达到最终状态

$(‘#box’).stop(false,true);

})

//finish

$(‘button’).eq(2) . ? 1 ~ K I $).click(function(){

$(‘#box’).finish();

})

$.aU , 1 y e u } ?jax({

url,

cache,//在get下是否启用缓P w [ H存

type,//get/post

da4 ] p P j x a d \ta,//上传数据

timeout,//相应超时时间% – 5 /

datatype,//预期返回的数据类型默认text

success,//成功回调

error,

conplate})

跨域

dataTW q – , c \ype设置为jso# ] R A + i rnp

$.ajax({

url:’https://www.baidu.com/sV c S L ~ugrec’,//?prod=pc&wd=aa&cb=fn

type:’get’,

data:{prod:’pc’,wd:’cc’9 ) F : 9},

dataType:’jsonp’,z n Z t N

success:h m * n m u b 6function(res){

console.log(res);

}

})

l\ / d 5 Y [ :oad方法

将+ ; ourl传入以后，将下载到数据直接Q ~ Q \ 8 | b T填充到被选中元素的innerHTML中

$(“| ) + [ Gdiv”).load(“2.5 F , & ^ .txt#p1k . 7 w“,function(data,statuE J = a \ GsText,xhr){

da; s z T _ Jta下载到的数据

statusT# _ lext下载的状态success

xhrajax对象

})

获取

$.cookie(name)

设置

$.cookie(name,v4 – 4 b Nalue)设置name和value

$.coot ~ ] O } Ekie(name,value{

raw:true//value不9 3 : | P )进行编码

//默认falsevalue要进行编码的

})

删除

$.cookie(* z t h d j aname,null);删除cookie

实例

$.coo# v 7 Ikie(“V ( M 3变种人”,”X教授”,{

expires:7,

raw:true

})

;(function($){

//类级别插L B z g Q件—>将方法拷贝到jq的原型下

$.\ w l | S | & $extend({

‘trimLg ` P ` N b 9 ? Weft’:function(str){

returnstr.repl9 y [ace(/^\s+/,”);

}

})

//对象级别插件拷贝到$.fn的原型下

$.fn.extend({

‘changeBg’:function(select,color){

this.# ? f V ( 5 H * Bchildren(select).css({background:color});

returnthis;

}

})

})(jQuery)

varstr=’aaa’;

console.log($.trimLeft(str));

$(‘ul’).changeBg(‘:odd’,’pink’);

基本使用和jq完全一样但是用到的模块要单独引入

$(fS ) F 3 Z q % {unction(){

$(‘#box’).( | Bon(‘tap’,function(){

console.logJ Q z(‘手指点击’);

})

})

zepto和jq的区别

隐藏的元素的U 4 H 9 w . T q获取宽高

jq可以获取隐藏元素的width（）l D 3 U h R Q q/height（）

zep[ ` h ( K 4to中获取隐藏元素的width（）/height（）都为0

$(‘#box’).width();/z q c/隐藏的元素在zepto中获取宽高为0

offset()的区别

jq中返回一个对象包含元素到文档上左# d O \ C I =边的距离

zepto中返回一个对象包含元素到文档上左边的距离和元素的宽高

$G b } n D 1 M t |(‘#sub’).offset();S ` H//元素到文档的O , N K g上左边的距离

$(‘#sub’).offset();//zepto中元h W g n B 2 ; &素到文档的上左边的距离和元素的宽高

元素的宽高的获取区别

jq获取元素的宽有4种方法

zepto中只有一个width（）和height（）方法获取的是占位宽

$(‘#boG ~ :x’).width();//占位宽内容宽+padding+border

innerWidth();//没有

outerWidth();//没有

outerWidth(true);/M U t/没有

touch模块

tap所有的触碰

singleTap手指单击

doubleTap手指双击

swipeswipeLeftswipeDownswipeRightswipeUp手指滑动

longTap手指长按