书签 分享 收藏 举报 版权申诉 / 23
立即下载 加入VIP,免费下载
当前位置： 首页 > 人文社科 > 法律资料 > jQuery操作DOM.docx

类型jQuery操作DOM.docx

  • 文档编号：30611112
  • 上传时间：2023-08-18
  • 格式：DOCX
  • 页数：23
  • 大小：148.71KB

1.2、设置元素的属性

在页面中，attr（）方法不仅可以获取元素的属性值，还可以设置元素的属性，其设置属性语法格式如下所示：

attr（key,value）

其中，参数key表示属性的名称，value表示属性的值。

如果要设置多个属性，也可以通过attr（）方法实现，其语法格式如下所示：

attr（{key0:

value0,key1:

value1}）

另外，attr（）方法还可以绑定一个function（）函数，通过该函数返回的值作为元素的属性值，其语法格式如下所示：

attr（key,function（index））

其中，参数index为当前元素的索引号，整个函数返回一个字符串作为元素的属性值。

1.3、删除元素的属性

jQuery中通过attr（）方法设置元素的属性后，使用removeAttr（）方法可以将元素的属性删除，其使用的语法格式为：

removeAttr（name）

其中，参数name为元素属性的名称。

例如，可以通过如下的代码删除标记中的src属性：

$（"img"）.removeAttr（"src"）;

2、 元素内容操作

在jQuery中，操作元素内容的方法包括html（）和text（）。

前者与JavaScript中的innerHTML属性类似，即获取或设置元素的HTML内容；后者类似于JavaScript中的innerHTML属性，即获取或设置元素的文本内容。

二者的格式与区别如下表所示。

html（）和text（）方法的区别

语法格式

参数说明

功能描述

html（）

无参数

用于获取元素的HTML内容

html（val）

val参数为元素的HTML内容

用于设置元素的HTML内容

text（）

无参数

用于获取元素的文本内容

text（val）

val参数为元素的文本内容

用户设置元素的文本内容

说明：

html（）方法仅支持XHTML的文档，不能用于XML文档，而text（）则既支持HTML文档，也支持XML文档。

示例 设置或获取元素的内容

#========================================================================

#FileName:

demo7.html

#Author:

lowkey

#Email:

361789273@

#HomePage:

#LastChange:

2012-04-1012:

47:

45

#========================================================================

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

"http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

设置或获取元素的内容

body{font-size:

15px;text-align:

center;}

div{border:

solid1px#666;padding:

5px;width:

220px;margin:

5px;}

$（function（）{

varstrHTML=$（"#divShow"）.html（）;//获取HTML内容

varstrText=$（"#divShow"）.text（）;//获取文本内容

$（"#divHTML"）.html（strHTML）;//设置HTML内容

$（"#divText"）.text（strText）;//设置文本内容

}）

WriteLessDoMore

3、 获取或设置元素值

在jQuery中，如果要获取元素的值，是通过val（）方法实现的，其语法格式如下所示：

val（val）

其中，如果不带参数val，则是获取某元素的值；反之，则是将参数val的值赋给某元素，即设置元素的值。

该方法常用于获取或设置对象的值。

另外，通过val（）方法还可以获取select标记中的多个选项值，其语法格式如下所示：

val（）.join（","）

示例 设置或获取元素的值

#========================================================================

#FileName:

demo8.html

#Author:

lowkey

#Email:

361789273@

#HomePage:

#LastChange:

2012-04-1013:

08:

01

#========================================================================

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

"http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

设置或获取元素的值

$（function（）{

$（"select"）.change（function（）{

varstrSel=$（"select"）.val（）.join（","）;

$（"#p1"）.html（strSel）;

}）

$（"input"）.change（function（）{

varstrTxt=$（"input"）.val（）;

$（"#p2"）.text（strTxt）;

}）

$（"input"）.focus（function（）{

$（"input"）.val（""）;

}）

}）

body{font-size:

12px;text-align:

center;}

div{padding:

3px;margin:

3px;width:

120px;float:

left;}

#s1{height:

96px;width:

85px;}

.txt{border:

#6661pxsolid;padding:

3px;}

Item1

Item2

Item3

Item4

Item5

Item6

页面效果如下：

注意：

在val（val）方法中，如果有参数，其参数还可以是数组的形式，即val（array），其作用是设置元素被选中。

因此$（":

radio"）.val（["radio2","radio3"]）此句代码的意思为：

ID号为radio2和radio3的单选框被选中。

4、 元素样式操作

在页面中，元素样式的操作包括：

直接设置样式、增加CSS类别、类别切换、删除类别几部分。

4.1、直接设置元素样式值

在jQuery中，可以通过css（）方法为某个指定的元素设置样式值，其语法格式如下所示：

css（name,value）

其中，name为样式名称，value为样式的值。

4.2、增加CSS类别

通过addClass（）方法增加元素类别的名称，其语法格式如下：

addClass（class）

其中，参数class为类别的名称，也可以增加多个类别的名称，只需要用空格将其隔开即可，其语法格式为：

addClass（class0class1...）

注意：

使用addClass（）方法仅是追加样式类别，即它还保存原有的类别。

4.3、类别切换

通过toggleClass（）方法切换不同的元素类别，其语法格式如下：

toggleClass（class）

其中，参数class为类别名称，其功能是当元素中含有名称为class的CSS类别时，删除该类别，否则增加一个该名称的CSS类别。

4.4、删除类别

与增加CSS类别的addClass（）方法相对应，removeClass（）方法则用于删除类别，其语法格式如下：

removeClass（class）

其中，参数class为类别名称，该名称是可选项，当选该名称时，则删除名称是class的类别，有多个类别时用空格隔开。

如果不选名称，则删除元素中的所有类别。

如果要删除p标记是cls0的类别，可以使用如下的代码：

$（"p"）.removeClass（"cls0"）;

注意：

toggleClass（）方法可以实现类别间的切换，而css（）或addClass（）方法仅是增加新的元素样式，并不能实现类别的切换功能。

二、创建节点元素

我们知道，整个页面是一个DOM模型，页面中的各元素通过模型的节点相互关联形成树状，因此，如果要在页面中增加某个元素，只需要找到元素的上级节点，通过函数$（html）完成元素的创建后，增加到该节点中。

函数$（）用于动态创建页面元素，其语法格式如下：

$（html）

其中，参数html表示用于动态创建DOM元素的HTML标记字符串，即如果要在页面中动态创建一个div标记，并设置其内容和属性，可以加入如下代码：

var$div=$（"WriteLessDoMore

"）;

$（"body"）.append（$div）;

执行上述代码后，将在页面文档body中创建一个div标记，其内容为“WriteLessDoMore”，属性title的值为“jQuery理念”。

三、插入节点

在页面中动态创建元素需要执行节点的插入或追加操作。

而在jQuery中，有多种方法可以实现该功能，append（）方法仅是其中之一，按照插入元素的顺序来分，可以分为内部和外部两种插入方法。

下面将分别对这些方法进行详细介绍。

3.1、内部插入节点方法

内部插入节点的方法如下表所示：

内部插入节点

语法格式

参数说明

功能描述

append（content）

content表示追加到目标中的内容

向所选择的元素内部插入内容

append（function（index,html））

通过function函数返回追加到目标中的内容

想所选择的元素内部插入function函数所返回的内容

appendTo（content）

content表示被追加的内容

把所选择的元素追加到另一个指定的元素集合中

prepend（content）

content表示插入目标元素内部前面的内容

向每个所选择的元素内部前置内容

prepend（function（index,html））

通过function函数返回插入目标元素内部前面的内容

向所选择的元素内部前置function函数所返回的内容

prependTo（content）

content表示用于选择元素的jQuery表达式

将所选择的元素前置到另一个指定的元素集合中

3.2、外部插入节点方法

外部插入节点

语法格式

参数说明

功能描述

after（content）

content表示插入目标元素外部后面的内容

向所选择的元素外部后面插入内容

after（function）

通过function函数返回插入目标外部后面的内容

向所选择的元素外部后面插入function函数所返回的内容

before（content）

content表示插入目标元素外部前面的内容

向所选择的元素外部前面插入内容

before（function）

通过function函数返回插入目标外部前面的内容

向所选择的元素外部前面插入function函数所返回的内容

insertAfter（content）

content表示插入目标元素外部后面的内容

将所选择的元素插入另一个指定的元素外部后面

insertBefore（content）

content表示插入目标元素外部前面的内容

将所选择的元素插入另一个指定的元素外部前面

四、复制节点

在页面中，有时需要将某个元素节点复制到另外一个节点后，如购物网站中购物车的设计。

在传统的javaScript中，需要编写较为复杂的代码，而在jQuery中，可以通过方法clone（）轻松实现，该方法的语法格式为：

clone（）

其功能为复制匹配的DOM元素并且选中复制成功的元素，该方法仅是复制元素本身，被复制后的新元素不具有任何元素行为。

如果需要在复制时将该元素的全部行为也进行复制，可以通过方法clone（true）实现，其格式为：

clone（true）;

其中的参数设置为true就可以复制元素的所有事件处理。

示例 复制元素节点

#========================================================================

#FileName:

demo9.html

#Author:

lowkey

#Email:

361789273@

#HomePage:

#LastChange:

2012-04-1013:

56:

12

#========================================================================

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

"http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

复制元素节点

img{border:

solid1px#ccc;padding:

3px;margin:

5px;width:

200px;height:

200px;}

$（function（）{

$（"img"）.click（function（）{

$（this）.clone（true）.appendTo（"span"）;

}）

}）

页面效果如下所示：

注意：

由于本示例中使用的是clone（true）方法，因此，当单击被复制的新图片时，由于它具有原图片的事务处理，因此，将在该图片的右侧出现一副通过其复制的新图片；如果使用clone（）方法，那么只有单击原图片才可以复制新的图片元素，新复制的图片元素不具有任何功能。

五、替换节点

在jQuery中，如果要替换元素中的节点，可以使用replaceWith（）和replaceAll（）这两种方法，其语法格式分别如下：

replaceWith（content）

该方法的功能是将所有选择的元素替换成指定的HTML或DOM元素，其中参数content为被所选择元素替换的内容。

replaceAll（selector）

该方法的功能是将所有选择的元素替换成指定selector的元素，其中参数selector为需要被替换的元素。

示例 替换元素节点

#========================================================================

#FileName:

demo10.html

#Author:

lowkey

#Email:

361789273@

#HomePage:

#LastChange:

2012-04-1014:

27:

24

#========================================================================

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN"

"http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

替换元素节点

举报
举报 版权申诉
版权申诉 word格式文档无特别注明外均可编辑修改；预览文档经过压缩，下载后原文更清晰！ 立即下载
配套讲稿：

如PPT文件的首页显示word图标，表示该PPT已包含配套word讲稿。双击word图标可打开word文档。

特殊限制：

部分文档作品中含有的国旗、国徽等图片，仅作为作品整体效果示例展示，禁止商用。设计者仅对作品中独创性部分享有著作权。

关 键  词：
jQuery 操作 DOM
提示  冰豆网所有资源均是用户自行上传分享，仅供网友学习交流，未经上传用户书面授权，请勿作他用。
关于本文
本文标题：jQuery操作DOM.docx
链接地址：https://www.bdocx.com/doc/30611112.html
相关搜索
jQuery 操作 DOM

热门标签

关于我们 - 网站声明 - 网站地图 - 资源地图 - 友情链接 - 网站客服 - 联系我们

copyright@ 2008-2022 冰点文档网站版权所有

经营许可证编号:鄂ICP备2022015515号-1

收起
在线客服
意见反馈
返回顶部
展开
QQ交谈
返回顶部