jQuery—选择器使用和更改元素属性和文本内容

何迟

于 2018-08-21 10:59:29 发布

阅读量6.3k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery

本文链接：https://blog.youkuaiyun.com/qq_42036616/article/details/81903830

jQuery 专栏收录该内容

11 篇文章

订阅专栏

本文介绍了一个简单的HTML页面，该页面使用jQuery库来修改页面上的链接地址和文本内容。通过点击按钮，可以将所有链接的地址更改为B站，并分别更新两个段落中链接的文字显示为“B站”和“你值得拥有”。此示例展示了如何利用jQuery的$(document).ready()函数、选择器和.attr()及.text()方法实现这一功能。

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

HTML代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>测试</title>
    <script src="jquery-3.3.1.js"></script>
    <script src="text2.js"></script>
    <!--注意：引入自己的JS文件必须要在库文件下面引入，因为自己的JS文件要执行必须调用其库函数-->
</head>
<body>
       <p><a href="http://www.baidu.com" id="a1">谷歌据说要回来</a></p>
       <p><a href="http://www.baidu.com" class="a2">百度慌了</a></p>
       <button>改变</button>
</body>
</html>

JS代码：

$(document).ready(function () {
   $("button").click(function () {
       $("a").attr('href',"http://www.bilibili.com");
       $("#a1").text("B站");
       $(".a2").text("你值得拥有");
       
   }) 
   //attr()方法后面修改属性，前面一个参数用单引号里面指定元素，逗号隔开，再用双引号指定更改的内容
   //text()方法后面更改标签显示的内容
    
   //上面通过标签名，id选择器，class选择器跟CSS一样    
});

效果：