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

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一样    
});

效果:

经验分享 程序员 微信小程序 职场和发展