获取或改变内容：html()/text()/val()/attr()

最新推荐文章于 2023-02-09 09:55:42 发布

原创最新推荐文章于 2023-02-09 09:55:42 发布 · 544 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery里获取内容

最常用的jQuery 专栏收录该内容

4 篇文章

订阅专栏

本文介绍如何使用jQuery的html(), attr()和val()方法来改变或读取网页元素的内容和属性。通过实例展示了如何通过按钮点击事件，修改页面上p标签的内容，获取或设置表单字段的值，以及读取和修改表单属性。

html()
1.改变当前页面标签的内容：
$(".btn1").click(function(){
$(“p”).html(“Hello world!”); //点击按钮改变当前页面p标签的内容
});

2.如果该方法未设置参数，则返回被选元素的当前内容
$(".btn1").click(function(){
$(“p”).html(" "); //点击按钮显示p标签的内容
});

$(document).ready(function(){
$("#btn1").click(function(){
alert(“Text: " + $(”#test").text()); //点击button,显示（#test）的原文本
});
$("#btn2").click(function(){
alert(“HTML: " + $(”#test").html()); //点击button,显示（#test）的网页结构
});
});
在这里插入图片描述

类似用法：.attr()、val() - 设置或返回表单字段的值
1.attr()
获取表单属性里的内容
$(document).ready(function(){
$KaTeX parse error: Expected '}', got 'EOF' at end of input: \dotsn(){ alert($ ("#w3s").attr(“href”));或者.attr(“href”,“http://www.w3school.com.cn/jquery”); 或者"href" :“http://www.w3school.com.cn/jquery”, “title” : “jQuery Tutorial”
//点击按钮显示表单("#w3s")的href里的内容；
//点击按钮把("#w3s")的value改变成http://www.w3school.com.cn/jquery；
//点击按钮把("#w3s")的value改变成http://www.w3school.com.cn/jquery，title改变成" jQuery Tutorial" ；
});
});

2.val()
替代以前表单的value值
$(document).ready(function(){
$("#btn1").click(function(){
$("#test1").text(“Hello world!”);
});
$("#btn2").click(function(){
$("#test2").html(“Hello world!”);
});
$("#btn3").click(function(){
$("#test3").val(“Dolly Duck”); //用Dolly Duck来替代表单test3里的value值
});
});