jQuery属性和动画操作

最新推荐文章于 2022-05-06 07:52:57 发布

不会UI的前端攻城狮

最新推荐文章于 2022-05-06 07:52:57 发布

阅读量401

点赞数

分类专栏： jquery 文章标签： html vscode 前端 jquery

本文链接：https://blog.csdn.net/weixin_58361149/article/details/121440060

版权

jquery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

jQuery属性和动画操作

jQuery属性操作

元素固有属性prop()

语法

获取属性语法
```
  prop('属性')
```
2.设置属性语法
```
 prop("属性","属性值")
```
注意：prop()除了普通属性操作，更适合操作表单属性：disabled / checked / selected

元素自定义属性attr() (也可以获取H5自定义属性)

语法

1.获取属性操作

 attr('属性值')//类似原生getAttribute()

2.设置属性操作

 attr("属性","属性值")//类似原生setAttribute()

数据缓存date()

可以在指定的元素上存取数据，不会修改DOM元素结构

语法

1.附加数据法

 date("name","value")//向被选元素附加数据

2.获取数据语法

 date("name")//向被选元素获取数据

注意：可以同时读取H5自定义属性-------date-index，得到的是数字型

jQuery文本属性值

属性	对应
html()	innnerHTML
text()	innerText
val()	value

jQuery内容文本值

属性	对应
html()	innerHTML
text()	innerText
val()	value

语法

1.普通元素内容html()(相当于原生innerHTML)

 html()//获取元素的内容

 html("内容")//设置元素的内容

2.普通元素文本内容 text() (相当于原生innerText)

 text()//获取元素的文本内容

 text("文本内容")//设置元素的文本内容

3.表单的值val() （相当于原生value）

 val()//获取表单的值

 val("内容")//设置表单的值

注意：

html()可以识别标签 text（）不能识别标签

jQuery元素操作

遍历元素

语法1：

 $("div").each(function(index,domEle){xxx})

1.each方法遍历匹配的每一个元素，主要用DOM标签，each处理每一个

2.里面的回调函数有两个参数：index是每个元素的索引；domEle是每个DOM元素对象，不是jQuery对象

3.所以要想使用jQuery方法，需要给这个DOM元素转换为jQuery对象$(domEle)

注意：遍历jQuery每一项，回调函数中为DOM对象，要想使用jQuery方法需要转换$(domEle)

语法2：

 $.each(object.function(index,element){xxx})

1.$.each()方法用于遍历任何对象，主要用于数据处理，比如数组、对象

2.里面的函数有两个参数：index是每个元素的索引号 elment遍历内容

注意：遍历jQuery每一项，回调函数中为DOM对象，要想使用jQuery方法需要转换

创建、添加、删除

语法：

1.创建

 $("<li></li>");

2.外部添加

 element.after("内容")//把内容放到目标元素后边

 element.before("内容")//把内容放到目标元素前边

内部添加元素，生成之后，他们是父子关系

外部添加元素，生成之后，他们是兄弟关系

3.删除元素

 element.remove()//删除匹配的元素（自杀式，包括自身）

 elment.empty()//删除匹配的元素集合中的所有子节点

 elment.html("")//清空匹配的元素内容

remove 删除元素本身

empty（）和html("")作用等价，都可以删除元素里面的内容，只不过html还可以设置内容

jQuery尺寸、位置操作

jQuery尺寸操作

语法	用法
width()/height()	取消匹配元素宽度和高度值只有width/height
innerWidth()/innerHeight()	取消匹配元素宽度和高度值包含padding
outerWidth/outerHeight	取消匹配元素宽度和高度值包含padding、border
outerWidth(ture)/outerHeight(ture)	取消匹配元素宽度和高度值包含padding、border、margin

以上参数为空，则是获取对应值，返回的是数字型

如果参数为数字，则是修改相应值

参数可以不写单位

jQuery位置操作

jQuery的位置操作主要有三个： offset()、position()、scrollTop()/scrollLeft()

语法：

1.offset()设置或获取元素偏移