jQuery操作DOM对象
jQuery操作DOM对象
1、使用attr()方法控制元素的属性
attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,attr(属性名,属性值)格式则是设置元素属性名的值。
举例:
<body>
<h3>attr()方法设置元素属性</h3>
<a href="http://127.0.0.1" id="a1">点我就变</a>
<div>我改变后的地址是:<span id="tip"></span></div>
<script type="text/javascript">
$("#a1").attr("href","www.imooc.com");
var $url = $("#a1").attr("href");
$("#tip").html($url);
</script>
</body>
首先改变href的值,再写到span内。
2、操作元素的内容
使用html()和text()方法操作元素的内容,当两个方法的参数为空时,表示获取该元素的内容,而如果方法中包含参数,则表示将参数值设置为元素内容。
举例:
<body>
<h3>html()和text()方法设置元素内容</h3>
<div id="html"></div>
<div id="text"></div>
<script type="text/javascript">
var $content = "<b>唉,我又变胖了!</b>";
$("#html").html($content);
$("#text").text($content);
</script>
</body>
3、操作元素的样式
通过addClass()和css()方法可以方便地操作元素中的样式,前者括号中的参数为增加元素的样式名称,后者直接将样式的属性内容写在括号中。
增加多个样式名称时,要用空格隔开
使用css():$("#content").css({"background-color":"red","color": "white"});
4、移除属性和样式
使用removeAttr(name)和removeClass(class)分别可以实现移除元素的属性和样式的功能,前者方法中参数表示移除属性名,后者方法中参数则表示移除的样式名
使用removeAttr()方法移除元素的“href”属性后,再次显示元素的“href”属性值时,则为空值,<a>元素中的文字也丢失可点击的效果
removeClass(class)用法:
.blue
{
background-color: Blue;
}
.white
{
color: White;
}
<script type="text/javascript">
$("#content").removeClass("blue white");
</script>
6、使用append()方法向元素内追加内容
append(content)方法的功能是向指定的元素中追加内容,被追加的content参数,可以是字符、HTML元素标记,还可以是一个返回字符串内容的函数
<script type="text/javascript">
function rethtml() {
var $html = "<div id='test' title='hi'>我是调用函数创建的</div>"
return $html;
}
$("body").append(rethtml());
</script>
7、使用appendTo()方法向被选元素内插入内容
appendTo()方法也可以向指定的元素内插入内容,它的使用格式是:
$(content).appendTo(selector)
参数content表示需要插入的内容,参数selector表示被选的元素,即把content内容插入selector元素内,默认是在尾部。
8、使用before()和after()在元素前后插入内容
使用before()和after()方法可以在元素的前后插入内容,它们分别表示在整个元素的前面和后面插入指定的元素或内容,调用格式分别为:
$(selector).before(content)和$(selector).after(content)
其中参数content表示插入的内容,该内容可以是元素或HTML字符串。
Before()里面就是放在前面的元素。
使用before()方法将HTML格式的内容插入到原有<span>元素内容之前,而并不仅是它的内部文本。
9、使用clone()方法复制元素
调用clone()方法可以生成一个被选元素的副本,即复制了一个被选元素,包含它的节点、文本和属性,它的调用格式为:
$(selector).clone()
其中参数selector可以是一个元素或HTML内容。
使用clone()方法复制页面中的一个<span>元素,并将复制后的元素追加到页面的后面
使用clone()方法复制元素时,不仅复制了该元素的文本和节点,还将它的“title”属性也一起复制过来了。
10、替换内容
replaceWith()和replaceAll()方法都可以用于替换元素或元素中的内容,但它们调用时,内容和被替换元素所在的位置不同,分别为如下所示:
$(selector).replaceWith(content)和$(content).replaceAll(selector)
参数selector为被替换的元素,content为替换的内容。
11、使用wrap()和wrapInner()方法包裹元素和内容
wrap()和wrapInner()方法都可以进行元素的包裹,但前者用于包裹元素本身,后者则用于包裹元素中的内容,它们的调用格式分别为:
$(selector).wrap(wrapper)和$(selector).wrapInner(wrapper)
参数selector为被包裹的元素,wrapper参数为包裹元素的格式。
使用wrapInner():
<body>
<h3>使用wrapInner()方法包裹元素</h3>
<span class="red" title='hi'>我的身体有点歪</span>
<script type="text/javascript">
$(".red").wrapInner("<i></i>");
</script>
</body>
12、使用each()方法遍历元素
使用each()方法可以遍历指定的元素集合,在遍历时,通过回调函数返回遍历元素的序列号,它的调用格式为:
$(selector).each(function(index))
参数function为遍历时的回调函数,index为遍历元素的序列号,它从0开始。
13、使用remove()和empty()方法删除元素
remove()方法删除所选元素本身和子元素,该方法可以通过添加过滤参数指定需要删除的某些元素,而empty()方法则只删除所选元素的子元素。
使用empty()
<script type="text/javascript">
$("span").empty();
</script>
转载于:https://www.cnblogs.com/this-xiaoming/p/5354069.html
jQuery操作DOM对象相关推荐
- 原生JS和jQuery操作DOM的区别小结
一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...
- jQuery操作Dom、jQuery事件机制、jQuery补充部分
jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...
- jQuery 操作DOM总结,DOM Core操作,HTML-DOM操作和CSS-DOM操作
jQuery创建元素节点或文本节点或属性节点.jQuery插入节点.jQuery删除节点.jQuery复制节点.jQuery替换节点.jQuery包裹节点.jQuery属性操作.jQuery样式操作. ...
- JavaScript操作DOM对象 Day05
JavaScript操作DOM对象 0 核心 浏览器网页就是一个Dom树形结构! 获取Dom节点:得到Dom节点 更新:更新Dom节点 添加:添加一个新的节点 删除:删除一个Dom节点 要操作一个Do ...
- jQuery操作Dom元素、jQuery遍历、JavaScript遍历
目录 jQuery操作Dom元素 jQuery遍历几种方式 JavaScript遍历 jQuery操作Dom元素 jQuery的主要用法为"选择某个dom元素,再对其进行某种操作" ...
- 原生JS操作DOM对象
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
- JavaScript基础——第三章,JavaScript操作DOM对象
JavaScript操作DOM对象 DOM:Document Object Model (文档对象模型) 节点和节点的关系 访问节点 使用getElement系列方法访问指定节点 根据层次关系访问节点 ...
- jQuery 操作 DOM
为什么80%的码农都做不了架构师?>>> 操作 DOM 使用jquery 选择器得到节点的 jquery对象.使用 jquery对象可以操作dom! 修改Text和Html ...
- JavaScript交互式网页设计 • 【第7章 jQuery操作 DOM】
全部章节 >>>> 本章目录 7.1 DOM 对象和 jQuery 对象 7.1.1 DOM 对象 7.1.2 jQuery 对象 7.1.3 jQuery 对象和 DOM ...
最新文章
- 文本比较算法Ⅴ——回顾贴,对前面几篇文章的回顾与质疑
- ubuntu9.10中更改启动顺序(grub2的配置)
- Nginx的正向代理与反向代理
- 【pyqt5】——信号与槽
- VScode 格式化代码快捷键、修改快捷键
- 记录一次 Win10 通过 VirtualBox安装CentOS7 的辛酸史
- ppsspp模拟java按键_ppsspp 手柄按键映射 北通 BTP
- 利用OpenCV实现——目标跟踪方法(一)
- std::string std::wstring 删除最后元素 得到最后元素
- java_opts 与catalina_opts区别_CATALINA_OPTS和 JAVA_OPTS区别
- 新买的电脑是win11系统,找不到DirectX工具?教你如何操作打开
- AES-128 加解密算法实现
- python中util是哪个包_使用Python的package机制如何简化utils包设计详解
- 通过高德api获取经纬度
- 在web网页中打开word文档
- 『Python核心技术与实战』pandas.DataFrame()函数介绍
- element-ui 去掉谷歌浏览器el-input组件或input自动填充账号密码
- 大数据需要学习哪些技术?
- Git commit 换行符问题
- 全国省(23个)、直辖市(4个)、自治区(5个)、特别行政区(2个)
热门文章
- python html解析对比_python htmlparse页面解析示例
- python如何查看类信息_关于如何查看本地python类库详细信息的方法
- java se面试题_Java SE 8面试问答(第1部分)
- ejb 2.1 jboss_带有Eclipse IDE,EJB Project和JBoss 6.0 AS的JMS 1.1生产者和使用者示例
- java 合并两个列表_如何在Java中合并两个列表?
- Java LinkedHashMap类
- Akka与设备组一起工作《twelve》译
- C++数字与字符串的相互转换
- C++ 11使用thread类多线程编程
- C++开发技术的应用有哪些?