1. 首页
  2. 文章中心
  3. JavaScript

jQuery 操作DOM

66 阅读 0 评论
我是靠谱客的博主 顺利白昼，最近开发中收集的这篇文章主要介绍jQuery 操作DOM，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

上一篇jQuery笔记中介绍了选择器，会了选择器之后咱就可以操作DOM了，jQuery操作DOM也是很简单的。

 

 

 1 获取

我们一般常用的获取是：

  • text()：获取/修改DOM元素中的文本内容。
  • html()：获取/修改DOM元素中的所有内容，包括HTML的标记。
  • val()：获取/修改表单字段的值。
  • attr()：获取/修改DOM元素的属性。
<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p id="p">段落中有<b>B标签</b></p>
<p>表单字段：<input id="input" type="text" value="ohoho~~"></p>
<a href="https://www.cnblogs.com" id="a">链接</a>
<br />
<button id="btn1">显示text</button>
<button id="btn2">显示html</button>
<button id="btn3">显示val</button>
<button id="btn4">显示attr</button>
</body>
{{--js--}}
<script>
$(document).ready(function() {
$("#btn1").click(function (){
alert("Text：" + $("#p").text());
});
$("#btn2").click(function () {
alert("HTML：" + $("#p").html());
});
$("#btn3").click(function () {
alert("Val：" + $("#input").val());
});
$("#btn4").click(function () {
alert("Attr：" + $("#a").attr("href"));
});
})
</script>
</html>

 

 

 2 设置

 2.1 普通更改

<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p id="p">段落中有<b>B标签</b></p>
<p>表单字段：<input id="input" type="text" value="ohoho~~"></p>
<a href="https://www.cnblogs.com" id="a">链接</a>
<br />
<button id="btn1">更改text</button>
<button id="btn2">更改html</button>
<button id="btn3">更改val</button>
<button id="btn4">更改attr</button>
</body>
{{--js--}}
<script>
$(document).ready(function() {
$("#btn1").click(function (){
$("#p").text("新的文本内容");
});
$("#btn2").click(function () {
$("#p").html("新的文本内容 并包含<b>b标签</b>");
});
$("#btn3").click(function () {
$("#input").val("我们正在学jQuery");
});
$("#btn4").click(function () {
$("#a").attr("href", "https://www.baidu.com");
});
})
</script>
</html>

 2.2 添加回调

text()等方法可以接受回调函数，这个回调函数接受两个参数：第一个参数是当前元素的下标，第二个参数是修改之前的值。

<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p id="p">段落中有<b>B标签</b></p>
<p>表单字段：<input id="input" type="text" value="ohoho~~"></p>
<a href="https://www.cnblogs.com" id="a">链接</a>
<br />
<button id="btn1">更改text</button>
<button id="btn2">更改html</button>
<button id="btn3">更改val</button>
<button id="btn4">更改attr</button>
</body>
{{--js--}}
<script>
$(document).ready(function() {
$("#btn1").click(function (){
$("#p").text(function (i, oldValue) {
return "这个标签的下标：" + i + "。 " + "旧的文本：" + oldValue;
});
});
$("#btn2").click(function () {
$("#p").html(function (i, oldValue) {
return "这个标签的下标：" + i + "。 " + "旧的HTML：" + oldValue;
});
});
$("#btn3").click(function () {
$("#input").val(function (i, oldValue) {
return i + "新的值：jQuery" + "旧的值：" + oldValue
});
});
$("#btn4").click(function () {
$("#a").attr("href", function (i, oldValue) {
return oldValue + "/sun-kang/";
});
});
})
</script>
</html>

 2.3 attr属性设置多个值


$("#btn4").click(function () {
$("#a").attr({
"href" : "https://www.baidu.com",
"target" : "_blank"
});
});

 

 

 3 插入元素

添加新内容的四个 jQuery 方法：

  • append() - 在被选元素的结尾插入内容
  • prepend() - 在被选元素的开头插入内容
  • after() - 在被选元素之后插入内容
  • before() - 在被选元素之前插入内容

 3.1 append和prepend

<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p id="p">一些段落</p>
<ul id="test">
<li>jQuery</li>
</ul>
<button id="btn1">点击添加文本</button>
<button id="btn2">点击列表项目</button>
</body>
{{--js--}}
<script>
$(document).ready(function() {
$("#btn1").click(function () {
$("#p").prepend("<p> 添加一些文本 </p>");
});
$("#btn2").click(function () {
var li = $("<li></li>").text("另一个新的列表项");
$("#test").append("<li>新的列表项 </li>", li);
});
});
</script>
</html>

 3.2 after和before

其实它和append和prepend是不同的，after和before呢是在元素的结束符的后面添加、而append和prepend实在元素的结束符里面添加。还是不明白的可以写一下以下代码，然后看HTML的源代码来看：

<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<ul id="test">
<li>jQuery</li>
</ul>
<button id="btn1">after</button>
<button id="btn2">append</button>
</body>
{{--js--}}
<script>
$(document).ready(function() {
$("#btn1").click(function () {
var li = $("<li></li>").text("另一个after");
$("#test").after("<li>after </li>", li);
});
$("#btn2").click(function () {
var li = $("<li></li>").text("另一个append");
$("#test").append("<li>append </li>", li);
});
});
</script>
</html>

 

 

 4 删除

jQuery提供两种删除方法：

  • empty()：清空一个元素的子元素，但是不删除元素。
  • remove()：删除一个元素以及其子元素，可给定选择器过滤。

 4.1 remove

<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<p id="p">一些段落<b>包含一个B标签</b></p>
<p class="paragraph">一些段落</p>
<p class="paragraph1">另一些段落</p>
<p class="paragraph">第三个段落</p>
<button id="btn1">点击删除文本</button>
<button id="btn2">点击删除文本(过滤)</button>
</body>
{{--js--}}
<script>
$(document).ready(function() {
$("#btn1").click(function () {
$("#p").remove();
});
$("#btn2").click(function () {
// 首先取到所有p标签 然后只删除class为paragraph的。

$("p").remove(".paragraph");
});
});
</script>
</html>

 4.2 empty

<!DOCTYPE html>
<html>
<head>
<title>learn javascript</title>
<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
</head>
<body>
<div class="demo">
<h1>一些内容</h1>
<p>一些内容</p>
</div>
<button id="btn1">点击清空div</button>
</body>
{{--js--}}
<script>
$(document).ready(function() {
$("#btn1").click(function () {
$(".demo").empty();
});
});
</script>
</html>

 

转载于:https://www.cnblogs.com/sun-kang/p/7542211.html

最后

以上就是顺利白昼为你收集整理的jQuery 操作DOM的全部内容，希望文章能够帮你解决jQuery 操作DOM所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。

本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
点赞(44)

相关文章

第一章 初识jQuery
第一章 初识jQuery
jquery3.0移除了.load()方法
jquery3.0移除了.load()方法
jQuery基础3
jQuery基础3
jQuery筛选和文档处理1.筛选
jQuery筛选和文档处理1.筛选
jQuery 操作DOM
jQuery 操作DOM
jQuery 3
jQuery 3
高并发下为什么需要限流?
高并发下为什么需要限流?
服务限流
服务限流

评论列表共有 0 条评论

立即
投稿
返回
顶部