jquery语法标准

发表于 2016-05-22 更新于 2023-03-22 分类于 jquery 阅读次数：

jQuery基本语法记录。

多库共存

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

1	noConflict()

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

用法1

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

var jq = $.noConflict();
jq(function(){
	some jq code here...
});

用法2：jQuery文件引入在上，其他库文件在下时

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

我们可以利用 jquery 的 animate 函数制作自定义动画。给同个元素设置的多个 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 直接写数字即可。

例：

$(".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，标准的效果序列。

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

例：

$("#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 向匹配元素的标准动画队列最后添加的函数，该函数中可以设置一些其他的动画效果。

例：

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

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

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

  $(this).dequeue();

});

$("div").slideUp();

dequeue()

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

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

参数： queuename （可选）队列名，默认为fx，即标准动画队列。

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

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

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

  $(this).dequeue();

});

queue和dequeue配合使用

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

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

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

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

代码如下：

<body>

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

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

<button>显示</button>

</body>

 $(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()方法让队列中函数继续执行下去。

例：

$('div').slideUp('slow').queue(function(next){

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

    next();

});

$("div").show();

自定义函数队列

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

参数：

queuename string类型，队列名

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

$("div").queue("custom", function(next) {

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

    next();

})

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

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

参数：

queuename 函数队列名。

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

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

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，最后我开始执行队列中的第一个函数

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

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

//清空队列  

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

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

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

jQuery基本操作

css操作

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

设置单个样式：

语法：

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

参数：

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

value： string类型，表示css属性值。

例：

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

设置多个样式：

利用对象传参即可

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

例：

$("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 底层是通过 getAttribute 和 setAttribute 实现的。可以设置自定义属性（特有属性）。

1.设置一个属性：

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

参数：name 参数名

value 值

例:

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

2.设置多个属性：

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

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

例：

$("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：

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

例：


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


$("div").empty();

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

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

*/

remove() 删除元素

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

语法：$(selector).remove()

例：


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


$("div").remove();

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

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

*/

clone()克隆元素

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

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

参数：

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

例：

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

获取或设置元素相对于 document 的 top 和 left 整型值。这不同于原生 js 中的 offsetTop 和 offsetLeft。

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

1.获取

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

返回值： object 对象类型，{top, left}。包含 top 和 left 值。

2.设置

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

参数：

obj（对象类型），{top:value, left:value}

position()

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

注：不计算 margin 的值。

语法：$(el).position()

返回值： 带有 top 和 left 属性的对象 {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 : 数据名