## 设置和获取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()); ~~~