JQuery对HTML进行操作

最新推荐文章于 2023-07-29 13:03:01 发布
最新推荐文章于 2023-07-29 13:03:01 发布
阅读量949 收藏 1
点赞数
CC 4.0 BY-SA版权
分类专栏： jQuery
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/ncut_LJD/article/details/50930482
本文详细介绍了使用jQuery进行DOM操作的方法，包括获取和设置元素内容、添加和删除HTML元素、操作CSS类以及设置样式属性等内容。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

所学内容请参考W3School  JQuery HTML

1.获取和设置

1.text()

text() 相当于JavaScript中的innerText

text()用来读取元素的纯文本内容，包括其后代元素;.text()方法不能使用在表单元素上

获取在html()中举例子 设置在val()举例子

2.html()

 .html()是用来读取元素的HTML内容（包括其Html标签）,.html()方法使用在多个元素上时，只读取第一个元素

3.val()

.val()是用来读取表单元素的"value"值,.val()只能使用在表单元素上


4.text() html() val() 三者区别

  1. .val()方法和.html()相同，如果其应用在多个元素上时，只能读取第一个表单元素的"value"值，但是.text()和他们不一样，如果.text()应用在多个元素上时，将会读取所有选中元素的文本内容。

    2 .html(),.text(),.val()都可以使用回调函数的返回值来动态的改变多个元素的内容。


5.attr()

jQuery attr() 方法用于获取属性值。

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert($("#w3s").attr("href"));
  });
});
</script>
</head>

<body>
<p><a href="../default.htm" id="w3s">W3School.com.cn</a></p>
<button>显示 href 值</button>
</body>

</html>

jQuery attr() 方法也用于设置/改变属性值。

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#w3s").attr("href","../jquery");
  });
});
</script>
</head>

<body>
<p><a href="../default.htm" id="w3s">W3School.com.cn</a></p>
<button>改变 href 值</button>
<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p>
</body>
</html>

attr() 方法也允许您同时设置多个属性。

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#w3s").attr({
      "href" : "../jquery/default.htm",
      "title" : "W3School jQuery 教程"
    });
  });
});
</script>
</head>

<body>
<p><a href="../default.htm" id="w3s">W3School.com.cn</a></p>
<button>改变 href 和 title 值</button>
<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值和已经设置的 title 值。</p>
</body>
</html>

attr的回调函数 

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#w3s").attr("href", function(i,origValue){
      return origValue + "/jquery"; 
    });
  }); 
});
</script>
</head>

<body>
<p><a href="../default.htm" id="w3s">w3school.com.cn</a></p>
<button>改变 href 值</button>
<p>请把鼠标指针移动到链接上，或者点击该链接，来查看已经改变的 href 值。</p>
</body>
</html>


2.添加新的 HTML 内容


1.在指定元素里面添加


append() - 在被选元素的结尾插入内容 

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").append(" <b>Appended text</b>.");
  });

  $("#btn2").click(function(){
    $("ol").append("<li>Appended item</li>");
  });
});
</script>
</head>

<body>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>
<button id="btn1">追加文本</button>
<button id="btn2">追加列表项</button>
</body>
</html>


prepend() - 在被选元素的开头插入内容

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("p").prepend("<b>Prepended text</b>. ");
  });
  $("#btn2").click(function(){
    $("ol").prepend("<li>Prepended item</li>");
  });
});
</script>
</head>
<body>

<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<ol>
<li>List item 1</li>
<li>List item 2</li>
<li>List item 3</li>
</ol>

<button id="btn1">添加文本</button>
<button id="btn2">添加列表项</button>

</body>
</html>


2.在指定元素外面添加


after() - 在被选元素之后插入内容

before() - 在被选元素之前插入内容 

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    $("img").before("<b>Before</b>");
  });

  $("#btn2").click(function(){
    $("img").after("<i>After</i>");
  });
});
</script>
</head>

<body>
<img src="../i/eg_w3school.gif" alt="W3School Logo" />
<br><br>
<button id="btn1">在图片前面添加文本</button>
<button id="btn2">在图片后面添加文本</button>
</body>
</html>

3.删除已有的 HTML 元素

1.remove() 方法删除被选元素及其子元素。

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").remove();
  });
});
</script>
</head>

<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>

<br>
<button>删除 div 元素</button>

</body>
</html>


2.empty() 方法删除被选元素的子元素。

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("#div1").empty();
  });
});
</script>
</head>

<body>

<div id="div1" style="height:100px;width:300px;border:1px solid black;background-color:yellow;">
This is some text in the div.
<p>This is a paragraph in the div.</p>
<p>This is another paragraph in the div.</p>
</div>

<br>
<button>清空 div 元素</button>

</body>
</html>


3.过滤被删除的元素

jQuery remove() 方法也可接受一个参数，允许您对被删元素进行过滤。

$(selector).remove("selector里面对应的.class 或者 #id")

例如

$("p").remove(".italic")


<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("p").remove(".italic");
  });
});
</script>
</head>

<body>

<p>This is a paragraph in the div.</p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<p class="italic"><i>This is another paragraph in the div.</i></p>
<button>删除 class="italic" 的所有 p 元素</button>

</body>
</html>

4.获取并设置 CSS 类

addClass()

addClass() -向被选元素添加一个或多个类

导入多个类addClass("classname1 classname2 classname3");   用空格给分开

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").addClass("blue");
    $("div").addClass("important");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<div>这是非常重要的文本！</div>
<br>
<button>向元素添加类</button>

</body>
</html>


removeClass()

removeClass()- 从被选元素删除一个或多个类 

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").removeClass("blue");
  });
});
</script>
<style type="text/css">
.important
{
font-weight:bold;
font-size:xx-large;
}
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1 class="blue">标题 1</h1>
<h2 class="blue">标题 2</h2>
<p class="blue">这是一个段落。</p>
<p>这是另一个段落。</p>
<br>
<button>从元素上删除类</button>
</body>
</html>


toggleClass()

toggleClass() - 对被选元素进行添加/删除类的切换操作 

<!DOCTYPE html>
<html>
<head>
<script src="../jquery/jquery-1.11.1.min.js">
</script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    $("h1,h2,p").toggleClass("blue");
  });
});
</script>
<style type="text/css">
.blue
{
color:blue;
}
</style>
</head>
<body>

<h1>标题 1</h1>
<h2>标题 2</h2>
<p>这是一个段落。</p>
<p>这是另一个段落。</p>
<button>切换 CSS 类</button>
</body>
</html>


css()

css() - 设置或返回样式属性

jQuery - css() 方法

$("p").css("background-color");

$("p").css("background-color","yellow");

$("p").css({"background-color":"yellow","font-size":"200%"});


5.获取样式表的尺寸

首先我们要知道css盒子模型的概念

css盒子模型

内容所占据的空间
width()
height()

(width/height)

内边框以内的部分
innerWidth()
innerHeight()
<width+padding*2/height+padding*2>
外边框以内的部分
outerWidth()
outerHeight()

<width+padding*2+border*2/height+padding*2+border*2>






jquery处理Html文档
GuessHat的博客
07-21 303
jquery处理Html文档 1.向元素中添加内容 append()方法 向每个匹配的元素内部追加内容，添加位置是在匹配元素内部最后，如果想添加在元素的最前面，使用prepend()方法 <p>I would like to say: </p> $("p").append("<b>Hello</b>"); 结果： appendTo()方法 把所有匹配的元素追加到另一个指定的元素元素集合中，原来的元素会被清除。 将第一个p标签内的b标签添加到第二个p标
jQuery中对节点进行操作的相关介绍
12-10
jQuery中使用$(html字符串)来动态创建Dom节点，并且返回一个jQuery对象，可以调用append等方法将创建的节点添加到Dom中。 例如：  var link = $(“百度”);  $(“div:first”).append(link); 添加节点元素的方法：...
w3school学习6-jQuery HTML 操作
张利龙的优快云博客
10-06 886
jQuery 包含很多供改变和操作 HTML 的强大函数。 改变 HTML 内容 语法 $(selector).html(content) html() 函数改变所匹配的 HTML 元素的内容（innerHTML）。 实例 $("p").html(
JQuery：JQuery设置HTML
dienangpiao2051的博客
09-19 204
JQuery:设置HTML1、Query - 设置内容和属性设置内容 - text()、html() 以及 val()我们将使用前一章中的三个相同的方法来设置内容： 　　text() - 设置或返回所选元素的文本内容 　　html() - 设置或返回所选元素的内容（包括 HTML 标记） 　　val() - 设置或返回表单字段的值下面的例子演示如何通过 text()、html() 以及 ...
jQuery操作Html记录
看山 看水 看世界
12-10 495
做web开发前端通常都会使用jQuery这个js库的，通过jQuery来对html元素进行操作是一件很方便的事情，但是不可能将这些操作的方式都记住的包括鄙人，所以一直就想整理一下在日常开发中使用jQuery操作html的文章 免责声明：以下内容均来自于互联网收集整理，如有疑问就有疑问吧! _，对了本篇文章将持续更新 ##jQuery对html元素属性操作 jQuery对元素设置属性主要有2个方法p...
jQuery HTML操作
博客标题不能为空我也没办法
02-18 681
这一节主要是jQuery对html文件的一些操作，当初学html的时候就涉及过这一部分的知识，当然是用jsp来实现的，个人感觉这种对html文件的操作实在是意义不大，这类操作是对文档直接操作，尤其是那种添加或者删除某一段文档的效果，既然要修改，当初设计网页的时候直接改好了再放上去不就好了么，实在是有些鸡肋。 jQuery一个很强大的功能就是对DOM的操作，最常用的有三个： ①text() 设置或者返回所选元素的文本内容，如果只需要返回所选元素的文本内容，不需要填写任何参数，使用这个方法，返回的一定是文本内容
jquery对dom的操作常用方法整理
12-13
Jquery对dom的操作也是很总要的。 1.三个简单实用的用于 DOM 操作的 jQuery 方法： · text() – 设置或返回所选元素的文本内容 · html() – 设置或返回所选元素的内容（包括 HTML 标记） · val() – 设置或返回...
jQuery操作文件夹
09-15
然而，通过一些间接方式，我们可以利用jQuery和其他相关技术实现对文件和文件夹的操作。以下是一些相关的知识点： 1. **Ajax请求**：jQuery的Ajax功能可以用于在后台与服务器通信。通过创建XMLHttpRequest对象，...
使用jQuery操作HTML的table表格的实例解析
10-22
综上所述，通过本实例解析，我们不仅学到了如何使用jQuery对HTML的table表格进行常规操作，还掌握了一些实用的小技巧，如通过jQuery来动态地根据条件修改表格样式，获取表格行数等。这些知识点对于前端开发者来说...
jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作示例
10-15
主要介绍了jQuery+Ajax+js实现请求json格式数据并渲染到html页面操作,结合实例形式分析了jQuery+Ajax请求json格式数据并渲染到html页面相关步骤与操作技巧,需要的朋友可以参考下
jQuery操作HTML元素
农夫阿才
12-23 1384
上一篇写了jQuery的选择器和过滤器，已经能够选中元素了。接下来要做的是，操作元素，为了便于记忆，我按照查询、增加、删除、修改四种操作来写，下面进入正题。 一、查询元素操作 解释一下：其实jQuery的选择器就属于查询操作，这里的查询操作指的是遍历。我们获取到的 jQuery 对象是个集合，里面可能包含很多个dom对象，往往需要将它们遍历，进而再操作。 1.each(回调函数) &amp;amp;lt;ht...
jQuery html() DOM操作记录
purple_lumpy的博客
04-08 368
jQuery 的 html() 函数，简直了...举一个完整的小例子，要把一个div 复制到另一个div 里。使用代码：var htmlV = $('#layerContent').html();获得id 为layerContent的子元素的html代码。再使用代码： $('#endend').html(htmlV);在id 为endend 的div 中加入htmlV代码。...
jquery中的html()及.text()和.val()的区别
sina_panda
04-23 832
读取、修改元素的html结构或者元素的文本内容是常见的DOM操作，jQuery针对这样的处理提供了2个便捷的方法.html()与.text() .html()方法  获取集合中第一个匹配元素的HTML内容 或 设置每一个匹配元素的html内容，具体有3种用法： .html() 不传入值，就是获取集合中第一个匹配元素的HTML内容.html( htmlString )  设置每一个
jQuery--内容操作（html()、text()、val()）详解
吴声子夜歌的博客
10-01 2193
样式操作 在jQuery中，提供了html()和text()方法用于操作页面元素的内容，val()方法用于操作表单元素的值。以上方法的使用方式基本相同，当方法没有提供参数时，表示获取匹配元素的内容或值；当方法携带参数时，表示对匹配元素的内容或值进行修改。 1. html()方法： html()方法用于获取第一个匹配元素的HTML，内容或修改匹配元素的HTML内容，方方法仅对XHTML文档有效，不能...
jQuery 文档操作 - html() 方法与text()方法
二月的羊
12-19 1296
一、html()         1、用法：html() 方法返回或设置被选元素的内容 (inner HTML)。         2、语法               a、$(selector).html()                     说明：当使用该方法返回一个值时，它会返回第一个匹配元素的内容。                     注意：是第一个匹配元素的内容。
jQuery比较常用的关于HTML的设置
qq_39043762的博客
05-18 173
jQuery HTML（详细内容请自行查看w3school） 1.获取设置内容和属性 用于DOM操作的jQuery方法： text() 设置或则返回所选元素的文本内容 html() 设置或返回所选元素的内容（包括HTML 标记） val（）设置或者返回表单字段的值 attr() 用于获取属性值 2. 添加元素 append() 在被选中元素的结尾插入元素 prepend() 在被...
JQuery获取html元素文本内容的text方法与html方法
iteye_11985的博客
04-07 1205
备忘一下，在前端开发的时候使用JQuery很常用的是获取某元素内部的值。JQuery为这个操作提供了便捷的方法，html()和text()。 两个方法的差别JQuery文档都有。之前我一直认为获取单一元素内部的文本，两个方法作用是一样的。比如获取哈哈哈哈内部的文本，调用两个方法没有什么区别。 假如获取哈哈哈哈嘿嘿嘿时，两个方法才能体现出区别，但是似乎一直没想到什么场景会用到text()方法...
012-jQuery HTML-设置内容和属性
weixin_43404791的博客
01-25 595
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>jQuery HTML-设置内容和属性</title> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script> </head> <!-- jQuery-设
Jquery操作html常用函数
成长的点滴
07-29 1272
设置元素的属性值：$("#element").prop("propertyName", "newValue");15. wrapInner() 将元素的内容包裹在指定的 HTML 结构中：$("#element").wrapInner("<div class='wrapper'></div>");设置元素的属性值：$("#element").attr("attributeName", "newValue");获取元素的属性值：$("#element").attr("attributeName");
仿Windows文件夹操作的jQuery代码实现
实现这样的操作通常需要对HTML、CSS以及JavaScript（尤其是jQuery）有深入的理解和应用。具体到代码实现方面，开发者需要： 1. 使用HTML构建文件夹和文件的基本结构。 2. 利用CSS设计合理的布局和视觉效果，使其...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值