jQuery操作基本操作一學習筆記
阿新 • • 發佈：2018-07-01
AD javascrip doc 設置 asi 不同 led 輸入 學習筆記 基本選擇
分別表示獲取標簽內部的html文本內容和設置html文本內容。類似innerHTML
$(“#elementID”).text()
$(“#elementID”).text(“新值”)
分別表示獲取標簽內部的純文本內容和設置純文本內容。
$(“#elementID”).attr(“name”)
$(“#elementID”).attr(“name”,”itcast”)
attr為獲取對應屬性的值或設置對應屬性的值。如果遇上具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 則使用prop()
用法 描述
$(“#elementID”) #表示根據id查找；查找id為elementID的元素；建議的用法。所以一般推薦給標簽設置ID。
類似：
document.getElementById("elementID") 但兩者之間返回類型不同
$(“.className”) .表示根據class樣式名稱查找；查找樣式名稱為className的所有標簽
$(“input”) 查找所有input標簽
基本取/設值
用法 描述
$(“#elementID”).val()
$(“#elementID”).val(“新值”)
分別表示取值和設置值
$(“#elementID”).html()
分別表示獲取標簽內部的html文本內容和設置html文本內容。類似innerHTML
$(“#elementID”).text()
$(“#elementID”).text(“新值”)
分別表示獲取標簽內部的純文本內容和設置純文本內容。
$(“#elementID”).attr(“name”)
$(“#elementID”).attr(“name”,”itcast”)
attr為獲取對應屬性的值或設置對應屬性的值。如果遇上具有 true 和 false 兩個屬性的屬性，如 checked, selected 或者 disabled 則使用prop()
<meta charset="UTF-8"> <title>01_basic.html</title> <!--<script type="text/javascript" th:src=@{"js/jquery-3.3.1.js}"></script>--> <script src="../../static/js/jquery-3.3.1.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#btn1").click(function(){ alert($("#div1").html()); }); $("#btn2").click(function(){ alert($(".divClass").text()); }); $("#btn3").click(function(){ alert($("#div1").attr("title")); }); $("#btn4").click(function(){ alert($("input").length); }); $("#btn5").click(function(){ $("#div1").html("div內容修改！！"); }); $("#btn6").click(function(){ alert("div的內容："+$("#div1").text() + "，span的內容:" + $("span").text()) }); }); </script> <style> .divClass{ text-align: center; width: 100%; } </style> </head> <body> <div id="div1" class="divClass" title="div 的 title屬性值"> <p>div 的內容</p> </div> <br><br> <input type="text" value="輸入框1"><br> <input type="text" value="輸入框2"><br><br> <span>這是span的信息</span><br> <input type="button" value="1#獲取div裏面的Html內容" id="btn1"> <br><br> <input type="button" value="2.獲取div裏面的純文本內容" id="btn2"> <br><br> <input type="button" value="3#獲取div裏面的title屬性的值" id="btn3"> <br><br> <input type="button" value="4獲取input的個數" id="btn4"> <br><br> <input type="button" value="5改變div裏面的值" id="btn5"> <br><br> <input type="button" value="同時獲取div和span" id="btn6"> <br><br>
jQuery操作基本操作一學習筆記