zoukankan      html  css  js  c++  java
  • jQuery节点操作

    1、创建节点

      工厂函数$()用于获取或创建节点

      • $(selector):通过选这群获取节点
      • $(element):把DAM节点转化成jQuery节点
      • $(html):使用HTML字符串创建jQuery节点 
    var inputVal=$("#val").val();
    //创建节点
    var myLi=$("<li>"+inputVal+"</li>");

    2、插入节点

      

     3、插入同辈节点

      元素外部插入同辈节点

    4、替换节点、复制节点

      replaceWith()和replaceAll()用于替换节点

      clone()用于复制节点($(A).clone(true).appendTo(B);

    //替换节点
    $("li:eq(1)").replaceWith($("li:eq(4)").clone(true));
    //替换所有的节点
    myLi.replaceAll($("li"));

    注意:close()有个副作用就是会复制id,要么避免对有id的元素克隆,要么使用class代替id的作用

    5、删除节点

      jQuery提供了三种删除节点的方法

      • remove():删除整个节点
      • detach():删除整个节点,保留元素的绑定事件、附加的数据
      • empty():清空节点内容
    //HTML代码
    <p>
        Hello, <span>Person</span>
        <a href="#">and person</a>
    </p>
    // jQuery代码
    $("p"). empty();
    //结果
    <p></p>

    6、属性操作

      attr()获取或设置匹配元素的属性值

    // 获取元素的某属性的值
    $(selector).attr("属性名");
    //设置元素的属性值
    $(selector).attr("属性名","值"  );  // 设置一个属性值
    $(selector).attr( { "属性1" : "值1"  ,  "属性2" : "值2" } );  // 设置多个属性值
    
    //设置元素的属性值
    $("#val").attr({"type":"file","name":"pic"});

      removeAttr()匹配的元素中删除一个属性

    $(selector).removeAttr("属性名称");

    7、遍历子元素

      children()方法可以用来获取元素的所有子元素

    $("body").children();(获取<body>元素的子元素,但不考虑后代元素及文本节点)

    8、遍历同辈元素

      jQuery可以获取紧邻其后、紧邻其前和位于钙元素前与后的所有同辈元素

     jQuery遍历    ——each()

      以每一个匹配的元素作为上下文来执行一个函数

     $("img").each(function(i){ 
             this.src = "test" + i + ".jpg";
     });

    查找方法   ——  find()

      搜索所有与指定表达式匹配的元素

    $(“p”).find(“span”);    // 在所有p元素的后代节点中查找span元素

    9、CSS—DOM操作

      除css()外,还有获取和设置元素高度、宽度、相对位置等的样式操作方法

  • 相关阅读:
    Git_学习_01_ 常用 Git 命令清单
    Git_错误_03_ Git提交时显示用户 unknown
    Java微信小程序开发_00_资源帖
    Git_错误_02_error: src refspec master does not match any
    Java企业微信开发_08_素材管理之下载微信临时素材到本地服务器
    Java企业微信开发_07_JSSDK多图上传
    Java企业微信开发_07_总结一下企业微信的配置
    Java_数据交换_dom4j_01_解析xml
    Git_学习_00_资源帖
    小结:线段树 & 主席树 & 树状数组
  • 原文地址:https://www.cnblogs.com/2839888494xw/p/13208066.html
Copyright © 2011-2022 走看看