设置内容 - text()、html() 以及 val()
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>jQuery 设置</title> <style> p{ cursor: pointer; } div{ cursor: pointer; } input{ cursor: pointer; } </style> </head> <body> <p>一个p标签</p> <div>一个div盒子</div> <br> <input type="text" name="" id="" value="1"> 点击文本框时将改变的值 <br> <a href="#" title="这是第一个页面">点击跳转第二个页面</a> <script src="../jquery-3.6.0.js"></script> <script> $(document).ready(function(){ $('p').click(function(){ $('p').text('变成了一个p'); }); $('div').click(function(){ $('div').html('<b>变成了一个加粗的div</b>') }); $('input').click(function(){ $('input').val('值变成了2'); }); }); </script> </body> </html>
设置内容 - text()、html()：
效果如图：
区别在于html（）可以添加标签而text（）只能更换文本
设置val()
如图：
设置attr（）属性
可以设置多个属性值
// html <a href="#" title="这是第一个页面">点击跳转第二个页面</a> // jQuery // 设置属性 attr() $('a').click(function(){ // $('a').attr('href','https://hao.360.com'); //设置单个属性 $('a').attr({ //设置多个属性 "href":"index.html", "title":"这是第二个网页" }); });
效果如图：
