jQuery相关API总结

JQ操作DOM属性节点相关方法（包含类的操作）

属性节点就是指dom元素的属性

一般如果是标签自身自带的属性，我们用prop方法来获取；如果是自定义的属性，我们用attr方法来获取。

1、attr

作用：获取或者设置属性节点的值

如果传递1个参数，代表获取属性节点的值

如果传递2个参数，代表设置属性节点的值

注意点：

如果是获取：无论找到多少个元素，都只会返回第一个元素指定的属性节点的值

console.log($("span").attr("class"))

如果是设置：找到多少个元素就会设置多少个元素

$("span").attr("class","box")

2、romoveAttr

作用：删除属性节点

注意点：

①会删除所有找到元素指定的属性节点

②属性节点的名称可以用空格隔开，同时删除多个属性节点

$("span").removeAttr("class name")

JQ操作dom对象指定属性的方法（还能查找或者修改属性节点）

1、prop方法

作用：获取或者设置dom对象属性的值

如果传递1个参数，代表获取属性的值

如果传递2个参数，代表设置属性的值

注意点：

①prop方法不仅能操作属性，还能操作属性节点（前提是该值是本来就存在的dom元素属性节点）

② 例子：

$("input").prop("checked") // true 或者 false

$("input").attr("checked") // checked 或者 undefined

2、removeProp方法

作用：删除属性

操作dom的类：

1、addClass

作用：添加一个类

如果需要添加多个，多个类名之间添加空格

$("div").addClass("class1 class2")

2、removeClass

作用：删除一个类

如果需要删除多个，多个类名之间添加空格

$("div").removeClass("class1 class2")

3、toggleClass

作用：切换类（有就删除，没有就添加）

$("div").toggleClass("class1 class2")

JQ操作元素html文本或者text文本的方法

1、html

作用：给指定的标签内加入HTML代码，与原生JS的innerHTML一样

给div插入html代码

$("div").html("

我是段落

获取div中的html代码

$("div").html()

2、text

作用：给指定的标签内加入指定文本内容，与原生JS的innerText一样

给div插入文本内容

$("div").text("

我是段落

获取div中的文本内容

$("div").text()

3、val

作用：获取标签中value属性的值

$("input").val("请输入内容")

JQ获取或操作dom尺寸及位置的方法

操作div尺寸的方法：

width、height方法

获取

$(".content").width()

直接获取到元素通过CSS设置的width宽度值（不包括边框宽度，标准模型下的width值）

设置

$(".content").width("100px")

等同于在CSS中设置width："100px"

位置：

offset方法：

作用：获取或者设置，元素距离窗口的偏移位

获取定位

$(".content").offset().left

获取该元素距离窗口偏移量中的左边偏移数值

设置定位

$(".content").offset({left：10})

设置该元素距离窗口最左边只有10px距离

position方法：

作用：获取元素距离定位（子绝父相中对于父相中的偏移数值）元素的偏移位

$(".content").position().left

注意点：position方法只能获取不能设置，如果想设置可以直接使用css方法设置

scrolltop方法：

作用：获取或者设置元素当前滚动位置距离元素顶部的偏移位

获取滚动偏移

$(".scroll").scrollTop()

设置滚动偏移

$(".scroll").scrollTop(300)

获取或者设置HTML当前页面的滚动偏移位

获取

$("html").scrollTop()+$("body").scrollTop()

设置

$("html,body").scrollTop(300)

上面写法兼容新老浏览器版本

JQ操作标签style样式相关方法

CSS方法设置的样式，都是通过内嵌的形式设置到对应标签中的

1、逐个设置

$("div").css("width","100px")

2、链式设置

$("div").css("width","100px").css("width","200px")

注意：链式操作不建议大于3步

3、批量设置

$("div").css(

{

width:"200px",

height:"100px",

background:"red"

})

JQ查询和筛选DOM相关方法

筛选

eq(index|-index)

作用：获取第 index 或者 -index（集合倒数）个元素，返回对应单个元素（该元素为JQ对象），元素初始位置为0，最后一个为 -1

例子：

$("p").eq(1)

slice(start, [end])

作用：获取一个集合（数组）中 start 到 end（如果不写end，默认到最后）的元素集合（数组），返回数组

例子：

$("p").slice(0, 1)

hasClass(class)

作用：检查当前的元素是否含有某个特定的 class，如果有，则返回true。

例子：

$("p").hasClass("protected")

查找

find(e|o|e)

作用：在当前元素的所有后代中搜索，所有与指定表达式匹配的元素，返回数组

例子：

$("p").find(".abc")

parents([expr])

作用：同find相反，当前元素的祖先中搜索，所有与指定表达式匹配的元素，返回数组

例子：

$("p").parents(".abc")

next([expr])

作用：从当前元素同辈的下一个相邻元素中寻找，符合匹配条件的元素，返回数组

例子：

匹配p标签中下一个同辈元素的类名包含selected的元素

$("p").next(".selected")

结果：

prev([expr])

作用：同next相反，从当前元素同辈的上一个相邻元素中寻找，符合匹配条件的元素，返回数组

例子：

$("p").prev(".selected")

siblings([expr])

作用：从当前元素的同辈元素中寻找除了自身以外，符合匹配规则的其他元素，返回数组

例子：

$("p").siblings(".selected")

JQ中AJAX及JSONP使用方法

在jQuery里面，想要使用ajax及jsonp，需要使用如下方法：

格式：

$.ajax(

{

name:value,

。。。

}

)

常用的key：

url:'/index.html' //表示发送请求的url，如果为空则默认当前页面当前url

type:"GET" //表示本次请求使用的请求方法，默认是GET

data:{a:'1',b:'2'} //表示本次request请求的body部分需要传递的数据，如果传入对象则自动解析成a=1&b=2

success:()=>{} //表示请求成功后运行的回调函数

error:()=>{} //表示请求失败后运行的回调函数

contentType:"json" //表示request请求里面的content-type字段的内容

dataType:"JSONP" //表示预计服务器响应的内容，当value的是JSONP的时候，则自动将ajax请求变成JSONP的get请求

async:true //表示是否为异步请求，默认为true

cache:true //表示是否缓存被请求的页面

complete:()=>{} //表示请求完成后运行的回调函数（在success和error之后，无论有或者无）

contentType:"text/javascript" //表示request的body内容

用例：

发送POST请求

$.ajax({

//提交数据的类型 POST GET

type:"POST",

//提交的网址

url:"testLogin.aspx",

//提交的数据

data:{Name:"sanmao",Password:"sanmaoword"},

//返回数据的格式

datatype: "html",//"xml", "html", "script", "json", "jsonp", "text".

//在请求之前调用的函数

beforeSend:function(){$("#msg").html("logining");},

//成功返回之后调用的函数

success:function(data){

$("#msg").html(decodeURI(data));

} ,

//调用执行后调用的函数

complete: function(XMLHttpRequest, textStatus){

alert(XMLHttpRequest.responseText);

alert(textStatus);

//HideLoading();

//调用出错执行的函数

error: function(){

//请求出错处理

}

});

JQ事件绑定以及事件委托绑定

on替代bind方法

on可以替代bind方法，使用方法和bind一致

// 绑定单个事件

$(":button").on("click",function(){

alert("on");

});

// 传递数据

$(":button").on("click",{name:"tom"},function(e){

alert(e.data.name);

});

// 绑定多个事件

$(":button").on("mouseover mouseout",function(e){

alert("移入移出");

});

// 使用对象绑定多个事件

$(":button").on({

mouseover:function(){

alert("移入");

mouseout:function(){

alert("移出");

}

});

// 阻止冒泡和默认行为

$(":submit").on("click",function(e){

e.preventDefault();

e.stopPropagation();

alert("取消默认行为和冒泡");

});

off替代unbind方法

off可以替代unbind方法，使用方法不变

例子：

function test(){

alert("test");

}

$(":button").on("click.on",test);//根据函数解除绑定

$(":button").off("click");// 根据事件解除绑定

$(":button").off("click.on");// 根据命名空间解除绑定

事件委托

实际上是给祖先绑定一个事件。子元素通过冒泡将事传递到祖先元素，祖先元素再判断点击的是不是button，如果是，就执行相同的事件。因此，当有很多个相同的按钮需要绑定相同的事件时，可以用事件委托将事件委托给祖先节点，有祖先节点判断子节点是否执行某事件。如果不适用事假委托，那个每一个节点都需要绑定一个事件。

使用方法是：

祖先节点.on(“事件”,”子元素选择器”,”绑定的函数”);

on的第二个参数需要写成所有相同元素通用的写法，不能写成:button:eq(0)这样的选择不具有通用性，祖先节点在判断的时候会无法达到预期的效果。

例子：

$("div:eq(0)").on("click",":button",function(){

$(this).clone(true).appendTo("div:eq(0)");

});

// 换成document也可：

$(document).on("click",":button",function(){

$(this).clone(true).appendTo("div:eq(0)");

});

取消委托

off函数还可以取消委托,取消委托必须由祖先节点调用调用方法是：

祖先节点.off(“事件”,”子元素”);

$("div:eq(0)").off('click','.button');

one()

绑定元素执行完毕后自动移除事件，可以方法仅触发一次的事件。

例子：

$(":button").one("click",function(){

alert("one");

});

用到的方法

clone()

生成被选元素的副本，包含子节点、文本和属性。

$(selector).clone(includeEvents)

- includeEvents 规定是否复制元素的所有事件处理。true/false,默认是false

appendTo()

在被选元素的结尾（仍然在内部）插入指定内容。

$("button").click(function(){

$("sss").appendTo("p");

});

JQ事件自动触发

trigger方法：

例子：

$(".son").trigger("click")

特点：

①、如果使用trigger自动触发事件，会触发事件冒泡（父元素会被点击）

②、会触发默认行为（比如点击a标签，默认行为就是跳转到a的url地址，点击button提交表单就会自动提交表单数据）

triggerHandler方法：

例子：

$(".son").trigger("click")

特点：

①、如果利用triggerHandler自动触发事件，不会触发事件冒泡（父元素不会被点击）

②、不会触发默认行为

注意：

a标签比较特殊，使用trigger无法自动触发a标签的默认行为，但是可以在a标签里嵌套其他标签，使用trigger触发事件冒泡则可以实现触发a标签的默认行为。

JQ的遍历的方法（支持伪数组）

1、利用jquery的each静态方法遍历数组

使用方法：

$.each(Array,function( index, value){})

Array:

可以是真数组，也可以是伪数组，都可以进行遍历

传入回调函数的参数：

第一个参数：遍历到的索引

第二个参数：遍历到的元素

另一种使用jq实例方法调用each方法（遍历Jq对象$('.list_music .list_number')，只需要传入回调函数）：

$('.list_music .list_number').each(function(a,b){

console.log(a,b)

})

注意点：

使用each方法最后返回传递进去的数组，无法在回调函数中对该数组进行操作。

2、利用jquery的map静态方法遍历数组

使用方法：

$.map(Array,function( value, index ){})

Array:

可以是真数组，也可以是伪数组，都可以进行遍历

传入回调函数的参数：

第一个参数：遍历到的索引

第二个参数：遍历到的元素

另一种使用jq实例方法调用map方法（遍历Jq对象$('.list_music .list_number')，只需要传入回调函数）：

$('.list_music .list_number').map(function(a,b){

console.log(a,b)

})

注意点：

使用map方法最后返回空数组，如果在回调函数中使用return可以对返回的数组进行操作。

JQ的显示效果（动画效果）

显示（相当于给元素 display:inline-block 的过程中，增加动画效果）：

格式：

show([ speed , [easing] , [fn] ])

speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒

easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）

fn：动画执行完后会执行该回调函数

例子：

$('div').show(1000,function(){})

隐藏（相当于给元素display:none的过程中，增加动画效果）

格式：

hide([speed,[easing],[fn]])

speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒

easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）

fn：动画执行完后会执行该回调函数

例子：

$('div').hide(1000,function(){})

切换（如果元素本来是显示的，则执行hide，本来是隐藏的，则执行show）

格式：

toggle([speed,[easing],[fn]])

speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒

easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）

fn：动画执行完后会执行该回调函数

展开（相当于给元素 display:inline-block 的过程中，增加动画效果，与显示不同的是动画特效不同，动画效果是通过从上到下增加高度展开对应标签内容）：

格式：

slideDown([ speed , [easing] , [fn] ])

speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒

easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）

fn：动画执行完后会执行该回调函数

例子：

$('div').slideDown(1000,function(){})

收起（相当于给元素display:none 的过程中，增加动画效果，与隐藏不同的是动画特效不同，动画效果是通过从下到上减小高度收起对应标签内容）:

格式：

slideUp([ speed , [easing] , [fn] ])

speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒

easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）

fn：动画执行完后会执行该回调函数

例子：

$('div').slideUp(1000,function(){})

停止动画（停止正在执行的动画，并将动画队列清空）

格式：

stop([clearQueue],[jumpToEnd])

clearQueue:如果设置成true，则清空队列。可以立即结束动画。

jumpToEnd:如果设置成true，则完成队列。可以立即完成动画。

例子：

$('div').stop()

延时动画（延迟链式变成中间的动画时间）

例子:

$('div').animate([width:500],1000).delay(2000).animate([height:500],1000)

上面意思：先执行宽度变为500的动画效果，再执行延时动画2秒，最后执行高度500的动画效果

淡入（相当于给元素 display:inline-block 的过程中，增加动画效果，与显示和展开不同的是动画特效不同，动画效果是逐渐减小透明度动态的显示元素）：

格式：

fadeIn([ speed , [easing] , [fn] ])

speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒

easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）

fn：动画执行完后会执行该回调函数

例子：

$('div').fadeIn(1000,function(){})

淡出（相当于给元素display:none 的过程中，增加动画效果，与隐藏不同的是动画特效不同，动画效果是通过从下到上减小高度收起对应标签内容）:

格式：

fadeOut([ speed , [easing] , [fn] ])

speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒

easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）

fn：动画执行完后会执行该回调函数

例子：

$('div').fadeOut(1000,function(){})

淡入淡出切换（如果元素本来是显示的，则执行淡出，本来是隐藏的，则执行淡入）

格式：

fadeToggle([ speed , [easing] , [fn] ])

speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒

easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）

fn：动画执行完后会执行该回调函数

例子：

$('div').fadeToggle(1000,function(){})

淡入到（相当如淡入，唯一不同是淡入到可以设置元素最终显示的透明度）

格式：

fadeTo([ [ speed ] , opacity , [ easing ] , [ fn ]] )

speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒

opacity：元素最终显示的透明度，1是不透明，0是完全透明

easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）

fn：动画执行完后会执行该回调函数

例子：

$('div').fadeTo(1000, 0.5, function(){})

自定义（CSS改变任何属性都能增加动画效果）

格式：

animate( params ,[ speed ],[ easing ],[ fn ])

params：元素变化的CSS指令，用一个{}（对象包裹起来）

speed：执行完动画的时长，毫秒为单位 1000毫秒 = 1秒

easing：指定动画过程的速度，默认是 swing（匀速直线），可以选 linear（变速运动）

fn：动画执行完后会执行该回调函数

例子：

$('div').animate( { marginLeft:500 }, 1000, function(){})

自定义动画的累加属性

使用方法：

$('div').animate({ width:"+=100" },1000)

上面意思为：每次执行该方法都会在原来元素的宽度上累加100像素

自定义动画的关键字属性

使用方法：

$('div').animate({ width:"hide" },1000)

上面意思为：执行该方法后会让元素达到隐藏的效果，动画则是从左到右逐渐减少宽度，最终元素隐藏

$('div').animate({ width:"toggle" },1000)

上面意思为：执行该方法后会让元素原本有宽度，变到没有宽度，元素原本没有宽度，变到有宽度。

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 206,126评论 6赞 481
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 88,254评论 2赞 382
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 152,445评论 0赞 341
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 55,185评论 1赞 278
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 64,178评论 5赞 371
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 48,970评论 1赞 284
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 38,276评论 3赞 399
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 36,927评论 0赞 259
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 43,400评论 1赞 300
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 35,883评论 2赞 323
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 37,997评论 1赞 333
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 33,646评论 4赞 322
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 39,213评论 3赞 307
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 30,204评论 0赞 19
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 31,423评论 1赞 260
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 45,423评论 2赞 352
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 42,722评论 2赞 345

jQuery相关API总结

JQ操作DOM属性节点相关方法（包含类的操作）

JQ操作元素html文本或者text文本的方法

JQ获取或操作dom尺寸及位置的方法

JQ操作标签style样式相关方法

JQ查询和筛选DOM相关方法

JQ中AJAX及JSONP使用方法

JQ事件绑定以及事件委托绑定

on替代bind方法

off替代unbind方法

事件委托

one()

JQ事件自动触发

JQ的遍历的方法（支持伪数组）

JQ的显示效果（动画效果）

推荐阅读更多精彩内容