jQuery的屬性操作（attr,prop,html,text,val,addClass）
阿新 • • 發佈：2018-12-11
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <script type="text/javascript" src="jquery-1.11.1.min.js"></script> </head> <body> <img src="imgs/01.jpg" alt=""/> <img src="imgs/02.jpg" alt=""/> <ul> <li>Hello111</li> <li>Hello222</li> <li>Hello333</li> </ul> <p>this is p1</p> <p>this is p2</p> <select id="single"> <option>Single111</option> <option>Single222</option> <option>Single333</option> <option>Single444</option> </select> <p>this is p3</p> <select id="multiple" multiple="multiple"> <option selected="selected">Multiple111</option> <option>Multiple222</option> <option selected="selected">Multiple333</option> </select> <p>this is p4</p> <input type="checkbox" value="check1" checked/> check111 <input type="checkbox" value="check2"/> check222 <br/> <input type="radio" value="radio1"/> radio111 <input type="radio" value="radio2"/> radio222 <br> <input type="text" value="this is text1" class="items"> <input type="text" value="this is text2" class="items"> <input type="text" value="this is text3"> </body> </html> <script> $(function () { /** * 獲取img標籤的個數 * / // var size = $("img").size(); // alert(size); // var len = $("img").length; // alert(len); /** * 將jquery物件通過get函式轉化為DOM * / // var s1 = $("img").get(1).src; // alert(s1); /** * 為所有影象設定src屬性 */ //$("img").attr("src", "imgs/01.jpg"); /** * 返回文件中所有影象的src屬性值。 */ // alert($("img").attr("src")); /** *為所有影象設定src和alt屬性。 */ //$("img").attr({ src: "imgs/01.jpg", alt: "Test Image" }); /** *把src屬性的值設定為title屬性的值。 */ //$("img").attr("title", function() { return this.src }); /** * 將文件中影象的src屬性刪除 */ // $("img").removeAttr("src"); /** * 為匹配的元素加上 'selected' 類 */ // $("p").addClass("selected1 selected2"); /** * 給li加上不同的class */ // $('ul li').addClass(function() { // return 'item-' + $(this).index(); // }); /** * 從匹配的元素中刪除 'selected1' 類 */ // $("p").removeClass("selected1"); /** *刪除匹配元素的所有類 */ // $("p").removeClass(); //alert($('p').html()); /** * 設定所有 p 元素的內容 */ // $("p").html("Hello <b>world</b>!"); /** * 使用函式來設定所有匹配元素的內容。 */ // $("p").html(function(n){ // return "這個 p 元素的 index 是：" + n; // }); /** * 返回p元素的文字內容。 */ //alert($('p:first').text()); /** * 設定所有 p 元素的文字內容 */ //$("p").text("Hello world!Hello world!Hello world!"); /** * 使用函式來設定所有匹配元素的文字內容。 */ // $("p").text(function (n) { // return "這個 p 元素的 index 是：" + n; // }); /** * 獲取文字框中的值 */ //alert($("input:last").val()); /** * 設定文字框的值 */ //$("input").val("hello world!"); /** * 回撥函式設定文字框的值 */ // $('input:text.items').val(function() { // alert(this.value+","+this.className); // return this.value + ',' + this.className; // }); /** * 設定初始值 */ //$("#single").val("Single333"); //$("input").val(["check2", "radio1"]); /** * 返回屬性的值 */ // var val = $("input[type='checkbox']").prop("checked"); //alert(val) /** * 設定屬性的值 */ //$("input[type='checkbox']").prop("checked", true); /** * 使用函式設定屬性和值： */ // $("input[type='checkbox']").prop("checked", function( i, val ) { // alert(i+","+val); // return !val; // }); }) </script>