j

最新推荐文章于 2021-10-13 21:42:23 发布

wq199904

最新推荐文章于 2021-10-13 21:42:23 发布

阅读量73

点赞数

分类专栏： js

本文链接：https://blog.csdn.net/wq199904/article/details/102828183

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

对DOM节点进行操作

4.2.2对元素值操作

方法	说明
val()	用于获取第一个匹配元素的当前值，返回值可能是一个字符串，也可能是也个数组
val(val)	用于设置所有元素的值
val(arrval)	用于check select 和radio 等元素设置值，参数为字符串

例

<body>
  <select name="like" size="3" multiple="multiple" id="like">
   <option>列表项1</option>
   <option selected="selected">列表项2</option>
   <option selected="selected">列表项3</option>
  </select>
  <script type="text/jscript">
   $(document).ready(function(){
    $("select").val(['列表项1','列表项2']);
    alert($("select").val());
   });
  </script>

4.3.1创建节点
1.创建元素节点
使用工厂函数

$(html)

首先，创建两个

元素

var $p_1=$ ("<p></p>")
var $p_2=$ ("<p></p>")

创建文本节点

  <div></div>
  <script type="text/javascript">
   $(document).ready(function(){
    var $p_1=$("<p id='b'>明日图书</p>");   //就近原则  ""有   ''
    var $p_2=$("<p>编程词典</p>");
    
    $div =$("div");
    $div.append($p_1);
    $p_2.appendTo($div);
    $("#b").after("<p>a</p>");  //after 方法  在每个匹配内容的元素之后插入内容/
    
    
   });
   
  </script>

4.3.3插入节点
1.在元素内部插入的方法就是象一个元素中加子元素和内容。

方法	说明
append(content)	为所有匹配的元素内部追加内容
appendTo(content)	将所有匹配元素添加到另一个元素的集合中
prepend(content)	为所有匹配的元素的内部前置内容
prependTo(content)	将所有匹配的元素前置到另一个元素的元素集合中

例

  <script type="text/javascript">
   $(document).ready(function(){
    var $p_1=$("<p id='b'>明日图书</p>");   //就近原则  ""有   ''
    var $p_2=$("<p>编程词典</p>");
    
    $div =$("div");
    $div.append($p_1);
    $p_2.appendTo($div);
    $("#b").after("<p>a</p>");  //after 方法  在每个匹配内容的元素之后插入内容/
    
    
   });
   
  </script>

2 、在元素外部插入
在元素外部插入就是将要添加的内容添加到元素之前或元素之后。

方法	说明
after()content	在每个匹配的元素之后插入内容
insertAfter(content)	将所有匹配的元素到另一个指定的元素的元素集合中
before(content)	在每个匹配的元素之前插入内容
insertBefore(content)	把所有匹配的元素插入到另一个指定元素的元素集合的前面

4.3.4删除、复制和替换节点
删除节点
提供了三种方法，分别是remove() detach()和empty()。
remove()方法
remove()方法用于从DOM中删除所有匹配的元素，传入的参数用于根据jQuery表达式来筛选元素。
例

 <body>
  <div>
   <p title="a">明日科技</p>
   <p title="b">明日图书</p>
  </div>
  <script type="text/javascript">
   $(document).ready(function (){
    $("div p").remove("p[ title !=a ]");
   });
   
  </script>

detach()方法用于从DOM中删除所有匹配的元素

该方法不会把匹配的元素从jQuery对象中删除，所以仍然可以使用这些匹配元素。

与remove()方法不同的是：所有绑定的事件或附加的数据都会保留下来

$("div p").click(function(){
      alert($(this).text());
     });
     var $p_2=$("div p:eq(1)").detach();  //删除元素
     $p_2.appendTo("div");

复制节点
clone()方法复制节点有两种形式，一种是不带参数，用于克隆匹配的DOM元素并且选中这些克隆的副本；另一种是带一个布尔型的参数，当参数为true时，表示克隆匹配的元素以及其所有的事件处理并且选中这些克隆的副本，当参数为false时，表示不复制元素的事件处理。、
例

 <div>
   <p title="明日科技">明日科技</p>
   <p title="明日图书">明日图书</p>
  </div>
  <script>
   $(document).ready(function(){
    $("div p:eq(1)").bind("click",function(){ //为按钮绑定单击事件
     $(this).clone().insertAfter(this);  //复制自己但不复制事件处理
    });
   });
  </script>

替换节点
两种替换节点的方法：replaceAll(selector) 和replaceWith(content)
replaceAll(selector)方法用于使用匹配的元素替换掉所有的selector匹配到的元素；replaceWith(content)方法用于将所有的匹配的元素替换成指定的HTML或DOM元素。这两种方法的功能相同，只是二者的表现形式不同
例

div1
  <div id="div1"></div>
  div2
  <div id="div2"></div>
  <script type="text/javascript">
   $(document).ready(function(){
    //替换id为div1的<div>元素
    $("#div1").replaceWith("<div>replaceWith()方法的替换结果</div>");
    //替换id为div2的<div>元素
    $("<div>replaceAll()方法的替换结果</div>").replaceAll("#div2");
   });   
  </script>

遍历节点
可以直接使用each()方法来遍历元素

each(callback)

callback是一个函数，该函数可以接受一个形参index，这个形参是遍历元素的序号，序号从0开始。
例

<img height="60" src="../images/01.jpg" width="80" />
  <img height="60" src="../images/02.jpg" width="80" />
  <img height="60" src="../images/03.jpg" width="80" />
  <img height="60" src="../images/04.jpg" width="80" />
  <img height="60" src="../images/05.jpg" width="80" />
  <script>
   $(document).ready(function(){
    $("img").each(function(index){
     $(this).attr("title","第"+(index+1)+"张照片");
    });
   });
  </script>

wq199904

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
j

对DOM节点进行操作4.2.2对元素值操作方法说明val()用于获取第一个匹配元素的当前值，返回值可能是一个字符串，也可能是也个数组val(val)用于设置所有元素的值val(arrval)用于check select 和radio 等元素设置值，参数为字符串例<body> <select name="like" size="...
复制链接

扫一扫