## 設置和獲取HTML以及文本值 html()，text()和val()方法都可以用來操作元素，并獲取到相應的值 ~~~JavaScript //用于讀取和設置元素中的HTML內容 var jobj = $("#fruit").html(); var str = "<li title='芒果'>芒果</li>"; str += "<li title='芒果'>芒果</li>"; $("#fruit").html(str); //用于讀取和設置元素中的文本內容 var jqobj = $("#fruit").text(); $("#fruit").text(str); //val()可以用來獲取和設置元素的值 var g = $("input[type=text]").val(); console.log(g); //注意val()返回第一個匹配到的元素的值 var all = $("input").val(); console.log(all); //設置 input框的值 $("input[type=text]").val("(@//#)"); //獲取復選框選中的值 function getCheckBoxValue() { var arr = []; //用于遍歷jQuery數組 $("input[name='abc']:checked").each(function() { arr.push($(this).val()); }); console.log(arr); } //獲取單選按鈕的值 function getRadioValue() { //:checked選取所有被選中的元素（復選框或單選按鈕） console.log($("input[type='radio']:checked").val()); } //獲取下拉框的選中的值 function getSelectValue() { //盡量使用這樣的形式獲取下拉框選中的值 console.log($("#skt option:selected").val()); } ~~~ ## jQuery的節點遍歷 jQuery的遍歷其實是以某個節點作為參照，找到父節點，子節點以及兄弟節點的過程 ### jQuery父節點 ~~~JavaScript //parent()返回所有選中的元素的直接父元素 console.log($("a").parent()); //parents()返回所有選中的元素的所有祖先元素，知道html根元素 //可以使用參數來過濾祖先元素，這里表示獲取祖先元素是div的元素 console.log($("#abq").parents("div")) //closest傳入參數，如果我匹配元素本身符合參數條件，返回本身。否則逐級尋找符合條件的祖先元素并返回 console.log($("#lastSpan").closest("div")); ~~~ ### jQuery子節點 ~~~JavaScript //children()：返回所有匹配元素的直接子元素，可以傳入參數來過濾 console.log($("#first").children()); console.log($("#first").children("p")); console.log($("#first").children("#lastDiv")); //find():返回匹配元素的后代元素，會一直尋找下去，知道找到最后一個后代。必須傳入參數。 僅做介紹 console.log($("#first").find("p")); ~~~ ### jQuery同級節點 ~~~JavaScript //siblings():返回匹配元素的所有同級元素 console.log($("#flast").siblings()); //next():返回匹配元素后面緊跟的同級元素 console.log($("#fnext").next()); //nextAll():返回匹配元素后面緊跟的所有同級元素 console.log($("#fnext").nextAll()); //prev():返回匹配元素之前緊靠的同級元素 console.log($("#lastDiv").prev()); //prevAll():返回匹配元素之前的所有同級元素 console.log($("#lastDiv").prevAll()); ~~~