jquery语法标准

jQuery基本语法记录。

多库共存

jQuery 函数 可以使用 $jQuery 两个变量来调用。

1
noConflict()

作用:释放 jQuery$ 的使用,使用户有能力将 $ 改变为其他代替字符。

用法1

jQuery文件引入在下,其他库文件在上时

1
2
3
4
5
var jq = $.noConflict();
jq(function(){
some jq code here...
});

用法2:jQuery文件引入在上,其他库文件在下时

1
2
3
4
5
6
7
8
var jq = jQuery.noConflict();

jq(function(){

some jq code here...

});

jQuery选择器

基本选择器 语法
id选择器 $("#box").action()
类选择器 $(".hwq").action()
标签选择器 $("li").action()
并集选择器 $("#box,.hwq,li").action()
交集选择器 $("li.hwq").action()

上面的功能跟css选择器的用法一模一样。

层级选择器 描述
子代选择器 $("#box > p").action()
选择的 #box 的直接子代 p,不包括孙子元素 p
后代选择器 $("#box p").action()
选择的是 #box 的所有后代 p ,包括所有的孙子元素 p
过滤选择器
:eq() 语法:$("li:eq(index)").action()
index:表示索引值
作用:表示选择索引为 index 的那个 li 标签元素
:odd 语法:$("li:odd").action()
作用:选择索引值为 奇数li标签元素
:even 语法:$("li:even").action()
作用:选择索引值为 偶数li标签元素

注:当获取的元素对象是一个伪数组时,给这个维数组添加 action() 操作时,JQuery 会进行隐式迭代,即 JQ 会自动遍历这个维数组里的 dom 对象,并给每一个 dom 对象进行 action() 操作。

筛选方法

查找

方法 描述
children("selector") 语法:$("li").chlidren("ul").action()
参数:selector 表示选择器
作用:找 li 的直接子元素(不包括孙子元素),并且这个子元素的标签类型是 ul
find("selector") 语法:$("#box").find("li").action()
参数:selector 表示选择器
作用:找 #box 的所有后代元素(包括孙子元素),并且这个后代元素标签类型是 li
siblings("selector") 语法:$("li").siblings(".prev").action()
参数:selector 表示选择器
作用:找 li 的所有兄弟元素,并且这个 li 带有 .prev 类名
next("selector") 语法:$("span").next(".sel").action()
参数:selector 表示选择器
作用:找到每个 span 的之后紧邻的一个兄弟元素,并且这个兄弟元素带 .sel 类名。通常不用加这个类名限定。
prev("selecto") 语法:$("span").prev(".sel").action()
参数:selector 表示选择器
作用:找到每个 span 紧邻的前一个同辈元素中类名为sel的元素。
nextAll("selector") 语法:$("span").nextAll(".sel").action()
作用:找 span 标签之后的所有含有 .sel 类名的兄弟元素
prevAll("selector") 语法:$("span").prevAll(".sel").action()
作用:找 span 标签之前的所有含有 .sel 类名的兄弟元素
parent("selector") 语法:$("li").parent(".selector").action()
作用:查找 li 的父元素且类名为 .selector

过滤

方法 描述
eq(index) 语法:$("li").eq(index).action()
参数:
index 一个正整数时,指示元素基于 0 的位置,这个元素的位置是从0 算起。
-index 一个负整数时,指示元素的位置,从集合中的最后一个元素开始倒数。(1算起)
作用:获取第 n 个元素

效果

在所有效果操作中,除非设置了 speed 参数,否则不能设置callback参数。

v1.4.3 及以上版本才有 Easing 参数。

show() 显示元素

​显示已隐藏的元素,对于设置了 display:none 或 使用了 hide() 方法的元素都有效。

在设置速度的情况下,元素从隐藏到完全可见的过程中,会将 display 设置为 bolck 并逐渐地改变其高度、宽度、外边距、内边距和透明度。

语法:$(selector).show( speed, easing , callback)

参数:

speed 设置完成显示效果的时间,比如 “slow”, “fast”, “normal” 或毫秒数

easing 字符串类型,显示效果的动画曲线,默认是 “swing”,可用参数 “linear”。v1.4.3 及以上版本才有此参数。

callback 回调函数,显示效果完成后执行的动作,除非设置了 speed 否则不能使用该参数。

hide()隐藏元素

​隐藏已显示的元素,对于设置了 display:block 或 使用了 show() 方法的元素都有效。

在设置速度的情况下,元素从可见到完全隐藏的过程中,会将 display 设置为 none 并逐渐地改变其高度、宽度、外边距、内边距和透明度。

语法:$(selector).hide( speed, easing , callback)

参数:

speed 数字类型,设置完成隐藏效果的时间,毫秒数

easing 字符串类型,隐藏效果的动画曲线

callback 回调函数,隐藏效果完成后执行的动作

toggle()显示隐藏切换

toggle 方法 会隐藏显示的元素,显示隐藏的元素。

语法:$(selector).toggle(speed, easing , callback)

参数:

speed 数字类型,设置完成效果的时间,毫秒数

easing 字符串类型,效果的动画曲线

callback 回调函数,效果完成后执行的动作

fadeIn()淡入显示

fadeIn方法会对元素的 opacity 属性和 display 属性进行渐变设置,即首先将 display 设置为 block,然后逐渐将 opacity 设置为 1

语法:$(selector).fadeIn(speed , easing , callback )

参数:

speed 数字类型,效果完成的时间,毫秒数

easing 字符串类型,效果的动画曲线

callback 回调函数,效果完成后的动作

fadeOut()淡出隐藏

fadeOut 方法会对元素的 opacity 属性和 display 属性进行渐变设置,即首先将 display 设置为 none,然后逐渐将 opacity 设置为0

语法:$(selector).fadeOut(speed , easing , callback )

参数:

speed 数字类型,效果完成的时间,毫秒数

easing 字符串类型,效果的动画曲线

callback 回调函数,效果完成后的动作

fadeToggle()淡入淡出切换

对已显示的元素进行淡出隐藏,已隐藏的元素进行淡入显示。

语法:$(selector).fadeToggle(speed , easing , callback )

参数:

speed 数字类型,效果完成的时间,毫秒数

​easing 字符串类型,效果的动画曲线

​callback 回调函数,效果完成后的动作

fadeTo()渐变元素的不透明度

语法:$(selector).fadeTo(speed, opacity , callback )

参数:

speed (必需)效果过渡的时间,单位为毫秒数

​opacity (必需)渐变至的不透明度(0-1)

​callback (可选)回调函数,渐变效果结束后执行的动作

slideDown()下拉显示

将已隐藏的元素以下拉的方式显示,会将 display:none 的元素属性 display 设置为 block

语法:$(selector).slideDown(speed , easing , callback )

参数:

speed 数字类型,效果完成的时间,毫秒数

​easing 字符串类型。效果的动画曲线

​callback 回调函数,效果完成后执行的动作

slideUp()上拉隐藏

将已显示的元素以上拉的方式隐藏,会将 display:block 的元素属性 display 设置为 none

语法:$(selector).slideUp(speed , easing , callback )

参数:

speed 数字类型,效果完成的时间,毫秒数

​easing 字符串类型。效果的动画曲线

​callback 回调函数,效果完成后执行的动作

slideToggle() 上拉下拉切换

将已隐藏的元素以下拉的方式显示,已显示的元素以上拉的方式隐藏。

语法:$(selector).slideToggle(speed , easing , callback )

参数:

speed 数字类型,效果完成的时间,毫秒数

​easing 字符串类型。效果的动画曲线

​callback 回调函数,效果完成后执行的动作

自定义动画

animate

我们可以利用 jqueryanimate 函数制作自定义动画。给同个元素设置的多个 animate 动画会被 push 进叫做 fx 的标准动画队列中。

语法:$(selector).animate( {params}, speed , easing , callback )

参数:

{params} : 对象类型,定义元素结束位置的样式状态

speed : 数字类型,设置元素过渡的时间,单位为毫秒数

easing : 动画曲线,支持 easing.js 插件

callback : 回调函数,定义动画结束后执行的操作(代码块)

注:

(1)默认的:元素是静态定位,需要手动设置元素定位为:relative /absolute /fixed 才会有移动效果

(2)animate() 可以使用队列功能,即你可以对同个元素使用多个animate() 定义不同的状态,她会逐步的执行它们。

(3)当使用 animate() 时,必须使用 Camel 标记法书写所有的属性名,比如,必须使用 paddingLeft 而不是 padding-left,使用 marginRight 而不是 margin-right,等等。

(4)也可以对css属性定义相对值(该值相对于元素的当前值)。

需要在值的前面加上 += 或 -= ,使用相对值时,必须加上单位px,以字符串的形式设置。

(5)可以把属性的动画值设置为 “show”、”hide” 或 “toggle”。

(6)设置属性值时,如果带上px单位,使用引号包裹,不想带px 直接写数字即可。

例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
$(".btn").click(function(){

var box = $(".box");

box.animate( {left:"+=200px"} , 1000);

box.animate( {top: "+=200px" } , 1000);

box.animate( {fontSize:"20px"} , 1000);

box.animate( {left:"+=200px"} , 1000);

box.animate({top : 100 }, 1000 );


});

stop()停止动画或效果

停止当前正在运行的动画。

语法:$(selector).stop( stopAll , gotoend )

参数:

stopAll 布尔类型,是否停止被选元素的所有加入队列的动画。默认值为 false 即表示不清除动画队列中的动画,true 表示清除。

gotoend 布尔类型,规定是否允许在清除动画队列中的动画后完成当前的动画。该参数只能在设置了 stopAll 参数时使用。默认值为 false,即表示不完成,true 表示要完成。

delay()延迟动画

设置一个时间来推迟队列后动画的执行。

语法:$(selector).delay( duration , queuename ).fadeIn(200)

参数:

duration 延迟时间

queuename 队列名,默认是Fx(动画队列)

finish()

.finish()在一个元素上被调用,立即停止当前正在运行的动画和所有排队的动画(如果有的话),并且他们的CSS属性设置为它们的目标值(所有动画的目标值)。所有排队的动画将被删除。

.finish()方法和 .stop(true, true) 很相似,.stop(true, true) 将清除队列,并且当前的动画跳转到其最终值。但是,不同的是,.finish() 会导致所有排队的动画的 CSS 属性跳转到他们的最终值。

语法:$(selector).finish( queue )

参数: queue 停止动画队列的名称

控制队列

queue()

queue() 方法返回被匹配元素上排队动画的个数,或操作在匹配元素上执行的函数队列。

当通过 .queue() 添加函数时,我们应当确保最终调用了 .dequeue(),这样下一个排队的函数才能执行。

语法1:$(selector).queue( queuename )

参数: queue 队列名,字符串值,包含序列的名称。默认是 fx,标准的效果序列。

返回值: 数组类型,存储了动画队列中函数。

例:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
$("#show").click(function () {

var n = $("div").queue("fx"); // 返回值类型为数组

$("span").text("Queue length is: " + n.length);

});

function runIt() {

$("div").show("slow");

$("div").animate({left:'+=200'},2000);

$("div").slideToggle(1000);

$("div").slideToggle("fast");

$("div").animate({left:'-=200'},1500);

$("div").hide("slow");

$("div").show(1200);

$("div").slideUp("normal", runIt);

}

runIt();

语法2:$(selector).queue( fn )

参数: fn 向匹配元素的标准动画队列最后添加的函数,该函数中可以设置一些其他的动画效果。

例:

1
2
3
4
5
6
7
8
9
10
11
12
$("div").animate({left:'-=200'},500);

$("div").queue(function () {

$(this).removeClass("newcolor");

$(this).dequeue();

});

$("div").slideUp();

dequeue()

dequeue()的定义是”删除队列中最顶部的函数,并且执行它”。这样函数队列中的下一个函数才能继续执行。

语法:$(selector).dequeue( queuename )

参数: queuename (可选)队列名,默认为fx,即标准动画队列。

例:使用 dequeue() 终止一个自定义的队列函数

1
2
3
4
5
6
7
8
$("div").queue(function () {

$(this).toggleClass("red");

$(this).dequeue();

});

queue和dequeue配合使用

当需要对不同的元素做连续动画或效果时,除了使用回调地狱这样的冗余嵌套外。我们还可以使用操作元素的动画队列来实现连续的动画和效果。

例:当我们需要在 A元素出现后(可以添加一系列其他动画),B元素再出现以及做些其他动画效果。这时我们没有必要写冗余的回调函数,直接操作A元素的标准动画队列 fx 即可。

即给A元素的动画队列的尾部添加一个操作B元素的动画函数,就可以实现不同元素之间的连续动画或效果。

如果是通过触发事件的方式来开始动画,不想同一系列动画重复执行,可以在 queue 中定义的动画函数里不加 dequeue(),这样动画就只会触发一次。或者你可以写dequeue(),只要对动画做节流处理即可。

代码如下:

1
2
3
4
5
6
7
8
9
10
<body>

<div class="A"></div>

<div class="B"></div>

<button>显示</button>

</body>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
 $(function(){

// 在有dequeue的情况下,重复触发click会向 A 的动画队列中加入很多待执行动画

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

$(".A").show(300);

$(".A").animate({left : 200 });

$(".A").queue(function(){//向.A元素的动画队列的最后添加一个动画:让.A显示



$(".B").show(800);//在队列函数中,我们可以控制其他的元素进行动画,并且有连续帧的效果

$(".B").animate({left:100},1000);

console.log("B");



//显示.A的动画函数完成后dequeue,让之后的动画队列中的函数继续执行



$(".A").dequeue(); // 不加此句,动画就不会重复触发


});

console.log("A");

$("A").animate({ left : 0},800);

});

});



clearqueue()

当调用 .clearQueue() 方法时,序列中未被执行的所有函数都会被从序列中删除。如果不使用参数,则 .clearQueue()fx(标准效果序列)中删除剩余的函数。在这种方式中,它类似于 .stop(true)。不过,.stop() 方法只用于动画,而 .clearQueue() 也可用于删除通过 .queue() 方法添加到通用 jQuery 序列的任何函数。

语法:$(selector).clearqueue(ueuename)

参数: ueuename 队列名,默认为 fx,即标准动画队列。

例:清空队列

1
$("div").clearQueue();

next()

我们还可以使用v1.4以上版本提供的 next()方法让队列中函数继续执行下去。

例:

1
2
3
4
5
6
7
8
9
10
$('div').slideUp('slow').queue(function(next){

$('#object').css({"background":"red"});

next();

});

$("div").show();

自定义函数队列

语法1:$(selector).queue( queuename , callback(next) )

参数:

queuename string类型,队列名

callback(next) 回调函数,函数体内定义你需要的功能,这么定义的队列,队列里就只有一个函数,如果需要多个函数,可以用函数数组作为第二个参数。

1
2
3
4
5
6
7
8
9
10
$("div").queue("custom", function(next) {

$('div').css({'background':'red'});

next();

})

.dequeue("custom"); //this is the key

语法2:$(selector).queue( queuename , fnArray)

参数:

queuename 函数队列名。

fnArray 函数数组,数组中的每个元素是一个函数,作为自定义的函数队列中的每个成员。

例:要两个div依次向左移动

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
var FUNC=[  

function() {$("#block1").animate({left:"+=100"},aniCB);}, //每次执行完一个函数后执行回调函数aniCB,即执行一次dequeue() 使得队列能继续下去

function() {$("#block2").animate({left:"+=100"},aniCB);},

function() {$("#block1").animate({left:"+=100"},aniCB);},

function() {$("#block2").animate({left:"+=100"},aniCB);},

function() {$("#block1").animate({left:"+=100"},aniCB);},

function(){alert("动画结束")}

];



var aniCB=function() { // 定义回调函数,调用一次即触发一次dequeue()方法

$(document).dequeue("myAnimation");

}



$(document).queue("myAnimation",FUNC); //自定义一个函数队列



aniCB(); //开始执行队列中的第一个函数

1,首先建议建立了一个函数数组,里边是一些列需要依次执行的动画

2,然后定义一个函数,用dequeue方法用来执行队列中的下一个函数

3,接着把这个函数数组放到document上的myAnimation的队列中(可以选择任何元素,我只是为了方便而把这个队列放在document上)

4,最后我开始执行队列中的第一个函数

这样做的好处在于函数数组是线性展开,增减起来非常方便。

而且,当不要要继续进行接下来动画的时候(比如用户点了某个按钮),只需要清空那个队列即可。而要增加更多则只需要加入队列即。

1
2
3
4
5
6
7
8
//清空队列  

$(document).queue("myAnimation",[]);

//加一个新的函数放在最后

$(document).queue("myAnimation",function(){alert("动画真的结束了!")});

jQuery基本操作

css操作

css()方法可以设置单个样式或者设置多个样式。

设置单个样式:

语法:

1
$(selector).css(name,value)

参数:

name:string类型,表示css属性名。属性名的写法支持原本的css属性名写法和驼峰命名法。如font-sizefontSize 都可以。

value: string类型,表示css属性值。

例:

1
$("li").css("color","red");

设置多个样式:

利用对象传参即可

语法:$(selector).css(obj)

例:

1
2
3
4
5
$("li").css({
background: "red",
fontSize: "20px"
});

获取css样式值:

语法:$(“el”).css(name)

参数: name 样式名

返回值: 样式名为 name 的样式值,当获取到的对象是一个维数组时,返回的则是第一个对象的样式值。

class操作

1.添加类名

语法:$(selector).addClass(name)

参数: name 要添加的类名

例:

1
$("li").addclass("on");  //不需要加.

2.删除类名

语法:$(selector).removeClass(name)

参数: name 要删除的类名,不传参时,会将当前 selector 元素的所有类型全部删除。

3.切换类名

语法:$(selector).toggleClass(name)

参数: name 要切换的类名

作用:

selector 元素有 name 类名时,toggleClass() 会删除 name 类名,反之会添加 name 类名。

4.判断类

语法:$(selector).hasClass(name)

参数: name 要判断的类名

返回值: boolean 类型,有 name 类名则放回 true,反之返回 false

text和html方法

1.text()

作用: 设置或返回所选元素的文本内容。

注:在获取元素的内容时,只会获取元素的纯文本,不包含标签元素。在设置元素内容时,如果含有标签元素,会把标签元素当纯文本输出。即 text(...) 在遇到标签时,会转义。

例:

1
$("#test1").text("<h1>Hello world!</h1>");

页面展示内容为:

1
<h1>Hello world!</h1>

2.html()

作用:设置或返回所选元素的内容(包括 HTML 标记)。

注:在获取元素的内容时,标签和纯文本都会获取到。设置内容时,含有标签元素时,该标签元素会在文档中生效。

例:

1
2
3
$("#test2").html("<b>Hello world!</b>");

//会将<b>标签渲染出来

设置或获取属性attr()

attr() 方法用于设置/改变/获取属性值。使用方法和 css() 方法的格式一模一样。

jq 底层是通过 getAttributesetAttribute 实现的。可以设置自定义属性(特有属性)。

1.设置一个属性:

语法:$(selector).attr(name,value)

参数:name 参数名

value 值

例:

1
$("#w3s").attr("href","http://www.w3school.com.cn/jquery");

2.设置多个属性:

语法:$(selector).attr(obj)

参数:obj 包含多个属性和值的对象

例:

1
2
3
4
5
$("img").attr({
src : "1.jpg",
alt : "图破了"
});

3.获取属性值

语法:$(selecor).attr(name)

参数: name (string类型 ) 属性名。

返回值: name的属性值。

删除属性removeAttr()

删除指定元素上的属性。

语法:$(selector).removeAttr( name )

参数: name 属性名。

设置或获取属性prop()

获取或设置 dom 属性,jq 底层是通过获取或设置 dom 属性的值来实现的。

如:checked = false/true,不可以设置自定义属性(特有属性)。

语法:$(selector).prop(name,value)

参数:

name 属性名
value 属性值

例:利用 jq 控制复选框的选中状态时,使用 prop() 方法。

1
$("#check").prop("checked",false);  // 设置不选中

获取或设置表单值val()

可以获取和设置表单元素的 value 值。

语法:$(selector).val()

1.获取value值:

1
var val = $("input").val();

2.设置value值:

1
$("input").val("提交");

jQuery DOM操作

append() 添加最后一个子元素

给指定元素添加最后一个子元素,当操作的元素是页面中已经存在的 dom 元素时,会有剪切效果,即被操作元素节点会从原来的位置消失。

语法:append( jqobj | htmlstr )

参数: 可以是 jq 对象或者 html 字符串。

例:

方法1:

1
2
3
4
var span = $("<span>我是新添加的span</span>");

$("li").append(span);

方法2:

1
$("li").append("<span>我是新添加的span</span>");

注: $( A ).append( B ) 与 $( B ).appendTo( A ) 操作等价。

prepend() 添加最前一个子元素

给指定元素添加最前一个子元素(即添加第一个子元素),当操作的元素是页面中已经存在的 dom 元素时,会有剪切效果,即被操作元素节点会从原来的位置消失。

语法:prepend( jqobj | htmlstr)

参数: 可以是 jq 对象或者 html 字符串。

注: $( A ).prepend( B )$( B ).prependTo( A ) 操作等价。

before() 添加前一个兄弟元素

给指定元素添加前一个兄弟元素,当操作的元素是页面中已经存在的 dom 元素时,会有剪切效果,即被操作元素节点会从原来的位置消失。

语法:brefore( jqobj | htmlstr)

参数: 可以是jq对象或者html字符串。

after() 添加后一个兄弟元素

给指定元素添加后一个兄弟元素,当操作的元素是页面中已经存在的 dom 元素时,会有剪切效果,即被操作元素节点会从原来的位置消失。

语法:after( jqobj | htmlstr)

参数: 可以是jq对象或者html字符串。

empty() 清空元素的内容

清空操作元素的所有后代节点(不包括该操作元素本身)。empty() 方法会防止内存泄露。

其在清空后代节点时,会把后代节点上绑定的事件同时清除掉,这不同于 html() 方法。

语法:$(selector).empty()

例:

1
2
3
4
5
6
7
8
9

<div>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>

1
2
3
4
5
6
7
8
9

$("div").empty();

/*
完成清空操作后的dom结构为:

<div></div> // div 元素节点本身不会被删除

*/

remove() 删除元素

删除操作节点本身及其所有后代节点。

语法:$(selector).remove()

例:

1
2
3
4
5
6
7
8
9
10
11

<body>
<div>
<ul>
<li>...</li>
<li>...</li>
<li>...</li>
</ul>
</div>
</body>

1
2
3
4
5
6
7
8
9

$("div").remove();

/*
完成删除操作后的dom结构为:

<body></body> // div 元素节点本身也会被删除

*/

clone()克隆元素

clone() 方法默认不传参数就是深度复制,而原生 js 的 cloneNode(true) 需要传参数 true 才是深度复制。

语法:$(selector).clone(bool)

参数:

boollean 类型,false(默认)深度复制,不复制元素上的方法,true 深度复制,并且复制元素上的方法。

例:

1
2
3
4
var p = ("p").clone();  // 先克隆

$("#box").append(p); //后添加到id 为box 的元素中

jQuery尺寸操作

获取/设置内容的宽度width()

width()方法会返回元素内容(content)的宽度,返回的是一个数值类型。可以设置宽度值。

语法:$(selector).width(val)

参数: val 要设置的值

返回值: number类型,content 的宽度值。

innerWidth()

获取元素的 padding + content 的宽度,返回的是一个数字类型。不能设置。

语法:$(“selector”).innerWidth()

返回值: number类型,padding + content 的宽度值

获取/设置内容的高度height()

height() 方法会返回元素内容(content)的高度,返回的是一个数值类型。可以设置高度值。

语法:$(“selector”).height(val)

参数: val 要设置的高度值

返回值: number类型,content 的高度值。

innerHeight()

获取元素的 padding + content 的高度,返回的是一个数字类型。不能设置。

语法:$(“selector”).innerHeight()

返回值: number类型,padding + content 的高度值。

outerWidth()/outerHeight()

可以获取 border + padding + content 或者 margin + border + padding + content 的宽度或高度值。不能设置。

语法:$(“selector”).outerWidth(bool)

参数:

bool(boolean类型)false(默认)表示获取 border + padding + content 的宽度值,true 表示获取 margin + border + padding + content 的宽度值。

返回值: number 类型值

注:outerHeight()outerWidth() 用法相同。

jQuery 位置操作

offset()

获取或设置元素相对于 documenttopleft 整型值。这不同于原生 js 中的 offsetTopoffsetLeft

注:如果被操作元素没有设置定位属性,jq 会补上 relative,所以即使没有给元素设置定位属性,该元素同样可以进行偏移。

1.获取

语法:$(“selector”).offset()

返回值: object 对象类型,{top, left}。包含 topleft 值。

2.设置

语法:$(selector).offset(obj)

参数:

obj(对象类型),{top:value, left:value}

position()

获取相对于有定位父元素的 topleft 值。只能获取不能进行设置操作。

注:不计算 margin 的值。

语法:$(el).position()

返回值: 带有 topleft 属性的对象 {top, left}

scrollTop()

获取或设置页面垂直方向卷去的距离。

1.获取

语法:$(selector).scrollTop()

返回值: 页面垂直方向卷去距离的整型值。

2.设置

语法:$(seletor).scrollTop(val)

参数:

val (string/number类型),卷去的距离量

scrollLeft()

获取或设置页面水平方向卷去的距离。

1.获取

语法:$(selector).scrollLeft()

返回值: 页面水平方向卷去距离的整型值。

2.设置

语法:$(seletor).scrollLeft(val)

参数: val(string/number类型),卷去的距离量

数据缓存

data() 在某元素上存储数据

data() 函数可以在 dom 元素上存储任意类型的数据。

语法:$(selector).data(‘dataname’ , value )

参数:

dataname : string 类型,向元素上添加的数据名
​value : boolean|number|string|object|array 类型,数据的值

data() 获取在元素上存储的数据

语法:$(selector).data(“dataname”)

参数: dataname 数据名

返回值: 通过 data() 方法存储的数据值

data() 获取自定义属性值

通过 data-name 标准格式自定义的属性,也可以是使用 data() 方法来获取其属性值。

注:HTML5 后,在设置自定属性时,在属性名前加上 data- 前缀。该dom元素上的所有自定属性以键值对的形式存入dataset对象中。

语法:$(selector).data(“name”)

参数: name data- 后面的属性名,注意在获取属性值时不要加 data-

返回值: 自定义属性的值

removeData() 从某元素删除数据

removeData() 函数可以从 dom 元素上删除由 data() 函数存储的数据。

语法:$(selector).removeData(‘dataname’)

参数: dataname : 数据名