博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
jQuery(3)
阅读量:6457 次
发布时间:2019-06-23

本文共 2288 字,大约阅读时间需要 7 分钟。

元素属性操作

在jQuery中,可以对元素的属性执行获取、设置、删除的操作,通过attr()方法可以对元素属性执行获取和设置操作,removeAttr()方法可以删除某一指定的属性。

1.获取元素的属性

语法:attr(name)

参数name表示属性的名称

2.设置元素的属性

单个属性设置语法:attr(key,value)

多个属性设置语法:attr({key0:value0,key1:value1})

3.删除元素的属性

语法:removeAttr(name)

我们将通过下面示例讲解上述语法:

示例如下:

(1)描述

使用attr()方法设置、获取、删除a标记中href属性。

(2)代码实现

...省略代码

attr()方法设置元素属性

点我就变
改变后的地址:

元素内容操作

在jQuery中,操作元素内容的方法包括html()和text()。详细如下:

语法格式 参数说明 功能描述
html() 无参数 用于获取元素的html内容
html(val) val参数为元素的html内容 用于设置元素的html内容
text() 无参数 用于获取设置元素的文本内容
text(val) val参数为元素的文本内容 用于设置设置元素的文本内容

提示:html()方法仅支持XHTML的文档,不能用于XML文档,而text()既支持HTML文档,也支持XML文档

操作元素的样式

通过addClass()和css()可以方便地操作元素中的样式,前者括号中的参数为增加元素的样式名称,后者直接将样式的属性内容写在括号中。

示例如下:

(1)描述

使用css()和addClass()方法,改变div元素的背景色,再用removeClass()移除一个元素的样式。

(2)代码实现

...省略代码### css()方法设置元素样式
我穿了一件红色外衣
我穿了一件红色外衣

向元素中追加内容

如果在页面中增加某个元素,只需要找到元素的上级节点,然后通过append()向指定的元素中追加内容或者通过appendTo()把内容追加到指定元素内。

如果是在元素前后插入内容,使用before()和after()方法可以在元素的前后插入内容,它们分别表示在整个元素的前面和后面插入指定的元素或内容

append()语法形式:$(html).append(content)

appendTo()语法形式:$(content).appendTo(html)

before()的语法形式:$(html).before(content)

after()的语法形式:$(html).after(content)

参数html用于找到需要追加内容的元素字符串,参数content是追加的内容,可以是字符、HTML元素标记还可以是一个返回字符串内容的函数。

示例如下:

(1)描述

向p标记中或前或后分别追加内容。

(2)代码实现

...省略代码    

append()追加内容:

appendTo()追加内容:

before()追加到前面

after()追加到后面

复制元素

想要复制元素,调用clone()方法可以生成一个被选元素的副本,即复制了一个被选元素,包含它的节点、文本和属性

语法形式:$(content).clone()

参数content可以HTML内容、HTML元素标记。

示例如下:

...省略代码
abc
123

元素替换

在jQuery中想要替换元素或元素中的内容,replaceWith()和replaceAll()方法都可以但它们调用时,内容和被替换元素所在的位置不同

replaceWith()语法形式:$(selector).replaceWith(content)

replaceAll()语法形式:$(content).replaceAll(selector)

参数selector为被替换的元素,content为替换的内容。

包裹元素

在jQuery中使用wrap()和wrapInner()方法包裹元素和内容,但前者用于包裹元素本身,后者则用于包裹元素中的内容。

wrap()语法形式:$(selector).wrap(wrapper)

wrapInner()语法形式:$(selector).wrapInner(wrapper)

参数selector为被包裹的元素,wrapper参数为包裹元素的格式。

遍历元素

在DOM元素操作中,有时需要对同一标记的全部元素进行统一操作。在jQuery中,使用each()方法可以实现元素的遍历。

语法形式:$(selector).each(callback)

参数callback是一个function函数,该函数还可以接收一个行参index,这个形参为遍历元素的序号,序号从0开始;如果需要访问元素中的属性,可以借助形参index,配合this关键字来实现元素属性的设置或获取。

删除元素

在DOM元素操作中,jQuery为删除元素提供了两种方法:remove()和empty()。remove()-删除被选元素(及其子元素),empty()-从被选元素中删除子元素

转载于:https://www.cnblogs.com/hlna/p/5669764.html

你可能感兴趣的文章
String字符串的截取
查看>>
DynamoDB Local for Desktop Development
查看>>
laravel 使用QQ邮箱发送邮件
查看>>
用javascript验证哥德巴赫猜想
查看>>
Shell编程-环境变量配置文件
查看>>
[Unity3d]DrawCall优化手记
查看>>
SQL Serever学习7——数据表2
查看>>
(转)Mac 下设置android NDK的环境
查看>>
Struts2和Spring MVC的区别
查看>>
理解Javascript参数中的arguments对象
查看>>
p2:千行代码入门python
查看>>
bzoj1106[POI2007]立方体大作战tet*
查看>>
spring boot configuration annotation processor not found in classpath问题解决
查看>>
【转】正则基础之——神奇的转义
查看>>
团队项目测试报告与用户反馈
查看>>
对软件工程课程的期望
查看>>
Mysql中文字符串提取datetime
查看>>
CentOS访问Windows共享文件夹的方法
查看>>
IOS 与ANDROID框架及应用开发模式对比一
查看>>
由中序遍历和后序遍历求前序遍历
查看>>