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