abstrakt:<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .box{color: red;} .box1{font-size: 50px;} </style&g
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title></title> </head> <style> .box{color: red;} .box1{font-size: 50px;} </style> <body> <p>php中文網(wǎng)</p> <input type="text" id="input" value="111"/> <input type="text" id="input1" value="請輸入"/> <button class="btn">點擊變色</button> </body> <script type="text/javascript" src="../js/jquery-1.11.1.min.js" ></script> <script> $(document).ready(function(){ //樣式操作 //addClass()被選中的元素添加一個類(樣式) 多個類之間用空格分開 不用點號 $("p").addClass("box box1") //removeClass()移除一個或多個類 $("p").removeClass("box") //attr()設(shè)置或返回被選中元素的屬性值 alert($("#input").attr("type")+$("input").attr("value")) //$("屬性值","屬性名")設(shè)置元素的屬性值 $("#input").attr("type","password") //removeAttr()移除某個屬性 $("#input").removeAttr("value") //hasclass()檢查被選中的元素是否包含指定class 返回值true或者false alert($("input").hasClass("btn")) alert($("button").hasClass("btn")) //toggleClass()對選中元素進行添加和刪除類的切換操作 可切換 $("button").click(function(){ $("p,input").toggleClass("box box1") }) //內(nèi)容操作 //text()設(shè)置或返回元素的文本內(nèi)容 alert($("p").text()) //設(shè)置元素的文本內(nèi)容 $("p").text("我愛php中文網(wǎng)") //html()設(shè)置或返回元素的文本內(nèi)容 與text()不同在于可以輸出帶html標簽的文本內(nèi)容 $("p").html("<i>php中文網(wǎng)</i>") //val()設(shè)置或返回被選中元素的值 alert($("#input1").val()) }) </script> </html>
總結(jié):使用選擇器找到要操作的元素,然后通過jquery方法操作此元素,改變該元素的樣式以及內(nèi)容,其中html()方法可以返回帶標簽的文本內(nèi)容,hasClass()方法返回值為true或者false