<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> <script src="js/jquery-1.11.0.js" type="text/javascript" charset="utf-8"></script> </head> <body> <h1 class="abc">abc</h1> <h1 class="light">light</h1> <h1 id="light2">light</h1> <form action="#" method="get"> <input type="text" name="uesrname" id="" value="帥氣" /> <input type="submit" value="提交"/> </form> <img src="img/pointer.png"/> <button>更換圖片</button> <script type="text/javascript"> //選擇器，選中多少內容時候，如果是要獲取某個屬性內容，它只會返回第一個的屬性內容 var h1=$('h1.abc') console.log(h1) /*attr獲取屬性值*/ //獲取對象的屬性值，$('選擇器').attr('屬性') var hh=$('h1').attr('class') console.log(hh) //jq比較智能.可以獲取多個屬性值,而原生js只能獲取第一個值 // var cla=h1.attr('class') // console.log(cla) //設置對象的屬性值，$('選擇器').attr('屬性','你要設置的屬性值') $('h1.abc').attr('class','tt') $('button').click(function(){ $('img').attr('src','img/turntable-bg.jpg') }) console.log($('input').attr('value')) //獲取input輸入框value值的方式，$('選擇器').val() // 簡化版 console.log($('input').val()) //設置input輸入框value值，$('選擇器')。val('內容') console.log($('input').val('周傑倫')) console.log($('input').val()) </script> </body> </html>