Jquery基础教程之DOM操作

2020-05-23 06:24:09易采站长站整理

      $(“p”).text();该示例获得元素p的text文本内容。

      $(“p”).text(“重新设置的文本内容”);该示例设置元素p的text文本为”重新设置的文本内容”;

      PS:该方法对html和XML文档都适用。

      val()方法获得或设置某个元素的值,如果元素值是多选则以数组形式返回,方法如下:$(selector).val();例:文本元素


<input type="text" id="userName" value="请输入用户名" />

      $(“#userName”).val();获得input元素的值。

      $(“#userName”).val(‘响马’);设置input元素的值为’响马’。

      val()方法的不仅能操作input,最重要的一个用途用于select【下拉列表框】、checkbox【多选框】、radio【单选框】。

例:在下拉框下的多选赋值应用


<select id="fruits" multiple="multiple"><option>苹果</option><option>香蕉</option><option>西瓜</option></select>

      $(“#fruits”).val([‘苹果’,’香蕉’]);该示例使select中苹果和香蕉两项被选中。

      4、遍历节点操作children()、next()、prev()、siblings()和closest()

      children()方法用于取得匹配元素的子元素集合,只匹配子元素不考虑任何后代元素。方法如下:


$(selector).children();

例:      


 $("$("body").children().length;

该示例获得body元素的子元素个数;

      next()方法用于匹配元素的下一个兄弟节点,方法如下:


$(selector).next();

例:      


$("p").next().html();

该示例获得p元素的下一个兄弟节点的html内容。

      prev()方法用于匹配元素的上一个兄弟节点,方法如下:


$(selector).prev();

例:       


$("ul").prev().text();

该示例获得ul元素的上一个兄弟节点的文本内容。

      siblings方法()用于匹配目标元素的所有兄弟元素,方法如下:


$(selector).siblings();

例:

       $(“p”).slibings();示例获得p元素的所有兄弟节点元素。

      closest()方法()用来取得最近的匹配元素,首先检查当前元素是否匹配如果匹配则直接返回,否则继续向上查找父元素中符合条件的元素返回,如果没有匹配的元素则返回空JQuery对象。