zoukankan      html  css  js  c++  java
  • js操作对象

    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>Dom的分类</title>
    
    
        <!--
          xml  dom :针对于 xml文件的操作
          html dom :处理html页面   document.forms[0]
          css  dom :操作css   element.style.属性名
    
          dom core:核心!只要是支持dom编程语言都可以使用!
         javaSc对ript(jQuery)对上面的dom操作都提供了支持!
         jQueryjavaScript中的dom操作 进行了封装!
        -->
    </head>
    <body>
    
    </body>
    </html>
    Dom的分类
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>节点的操作</title>
    </head>
    <body>
    
      <ul>
      <li>大家辛苦了</li>
      <li>不交作业了</li>
      <li>就是不交</li>
      <li>气死你</li>
      <li>伤害了谁?</li>
      </ul>
    
    <button type="button" id="addLi">新增子节点</button>
    <button type="button" id="addUl">新增同辈节点</button>
    <button type="button" id="updateLi">替换下标为2节点</button>
    
    
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
    
        $(function(){
            $("#addLi").click(function(){
                //创建一个节点li
                var $newLi=$("<li>新增的作业</li>");
                //把新增的节点放置到 ul的最后  $("ul").append($newLi);  $newLi.appendTo($("ul"));
                //把新增的节点放置到 ul的最前面
                  $("ul").prepend($newLi);  //等同于 $newLi.prependTo($("ul"));
            })
    
            $("#addUl").click(function(){
                //创建一个节点ul
                var $newUl=$("<ul><li>新增1</li><li>新增2</li></ul>")
                //把新增的ul放置在我们ul之后 $("ul").after($newUl); $newUl.insertAfter($("ul"));
                //把新增的ul放置在我们ul之前 $("ul").before($newUl);
                $newUl.insertBefore($("ul"));
            })
            /**
             * 获取li下标值是2的元素  替换
             *  $(节点1).replaceWith($(替换节点))
             *  等同于
             *  $(替换节点).replaceAll($(节点1))
             */
    
            $("#updateLi").click(function(){
               //创建替换的节点
                var  $updateLi=$("<li style='color: red'>我是替换节点</li>");
                //获取下标是2的元素$("li:eq(2)").replaceWith($updateLi);
                //替换所有元素
                $("li:eq(0)").replaceAll($("li:eq(4)"));
            })
    
            //验证 clone
            $("li:eq(2)").mouseover(function(){
                $(this).css({"background":"red"});
            })
    
            //向ul中clone 节点3
            $("li:eq(2)").clone().appendTo("ul");
           // $("li:eq(2)").clone(true).appendTo("ul");  会绑定事件,样式
    
    
    
        })
    
    
    
    </script>
    
    </body>
    </html>
    节点的操作
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>删除节点</title>
        <!--
          empty(), remove(), detach()三者的区别
    
          empty():只能清空节点的内容和子元素!节点本身不会被删除!
          remove():
                 01.删除整个节点,包含自身和子元素!
                 02.删除了节点所对应的事件
          detach():
                 01.删除整个节点,包含自身和子元素!
                 02.不会删除节点所对应的事件
        -->
    
    </head>
    <body>
    <div id="main">
        main
        <div id="first">first
           <div>里面的子元素</div>
        </div>
    </div>
    
    
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
    
    $(function(){
       var $first=$("#first");
    
        $first.click(function(){
            alert("first");
        })
        // $first.empty();
        // $first.remove();
          $first.detach();
          $first.prependTo("body");
    
    })
    
    
    </script>
    </body>
    </html>
    删除节点
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>attr属性</title>
        <!--
         attr():
           01.如果只有一个参数 ,就是获取对应属性的值
           02.如果有两个参数 ,就是设置对应属性的值
         -->
    </head>
    <body>
      <img src="../images/cat.jpg">
    
    
      <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
      <script type="text/javascript">
    
          $(function(){
                $("img").click(function(){
                    //获取元素指定的属性值
                   var $src= $(this).attr("src");
                    alert($src);
                    //增加鼠标悬停时的提示文字
                    $(this).attr({"title":"这是一只可爱的小猫咪","width":"200px"});
                    //清除对应的属性值
                    $(this).removeAttr("src");
                })
    
          })
    
    
      </script>
    </body>
    </html>
    attr属性
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title>获取同辈和父辈元素</title>
    </head>
    <body>
    body
    <div id="main">
        main
        <div id="first1">
            first1
            <div id="second1">
                second1
                <div id="third1">
                    third1
                </div>
            </div>
        </div>
        <div id="first2">
            first2
            <div id="second2">
                second2
            </div>
        </div>
        <div id="first3">
            first3
            <div id="second3">
                second3
            </div>
        </div>
    </div>
    
    <script type="text/javascript" src="../js/jquery-1.8.3.js"></script>
    <script type="text/javascript">
    
        $(function(){
             //获取main的子元素个数
            alert("main的子元素个数"+$("#main").children().length);
    
         //设置first1之后的兄弟节点的样式
          //  $("#first1").next().css({"color":"red"});
         //设置first2之前的兄弟节点的样式
            //$("#first2").prev().css({"color":"red"});
          //所有同辈元素  之前和之后
            //$("#first2").siblings().css({"color":"red"});
    
            //设置first1的父级元素
           // $("#first1").parent().parent().css({"color":"red"});
            //设置third1的祖先元素
            $("#third1").parents().css({"color":"pink"});
        })
     </script>
    </body>
    </html>
    获取同辈和父辈元素
  • 相关阅读:
    Docker容器启动时初始化Mysql数据库
    使用Buildpacks高效构建Docker镜像
    Mybatis 强大的结果集映射器resultMap
    Java 集合排序策略接口 Comparator
    Spring MVC 函数式编程进阶
    换一种方式编写 Spring MVC 接口
    【asp.net core 系列】6 实战之 一个项目的完整结构
    【asp.net core 系列】5 布局页和静态资源
    【asp.net core 系列】4. 更高更强的路由
    【Java Spring Cloud 实战之路】- 使用Nacos和网关中心的创建
  • 原文地址:https://www.cnblogs.com/wwlw/p/7773712.html
Copyright © 2011-2022 走看看