<!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>