<!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>

获取同辈和父辈元素

js操作对象的更多相关文章

  1. js 操作对象的引用和操作实际对象的区分

    JavaScript高级程序设计-第3版-中 有这么一段话: 在操作对象时,实际上是在操作对象的引用而不是实际的对象.为此,引用类型的值是按引用访问的①. ① 这种说法不严密,当复制保存着对象的某个变 ...

  2. js 操作对象 记录

    js 对象记录一下: let obj_1 = { name : 'james', age : '22', sex: '1' } for ( i in obj_1 ) { console.log(i) ...

  3. JS 操作对象 事件 样式

    1.获取标记对象 css 1 - class 2 - id 3 - 标记选择器 js 1 - class 2 - id 3 - 标记 4 - name + document.getElementByI ...

  4. js操作对象属性用点和用中括号有什么不同

    书读百遍其义自见 学习<JavaScript设计模式>一书时,学习工厂模式这一章节,发现了对象后使用中括号的情况,如下: var Factory=function(type,content ...

  5. js操作对象属性值为字符串

    今天在项目开发中遇到一个没遇到过的问题,这个问题是需要对比两个对象a和b,a是一个只有一个属性的对象,b是一个含有多个属性对象,如果b中包含和a一模一样的属性名和值,则把这个一样的属性和值从b中删除了 ...

  6. js 操作对象的小技巧

    来源:https://www.w3cplus.com/javascript/javascript-tips.html 1.使用...运算符合并对象或数组中的对象 同样使用ES的...运算符可以替代人工 ...

  7. javascript、js操作json方法总结(json字符创转换json对象)

    相信前端的同学们对json并不陌生,接触过很多.但是很少人知道json的全称是什么,哈哈,我也是查资 料知道的.(JSON JavaScript Object Notation是一种轻量级的数据交换格 ...

  8. JS操作DOM对象——JS基础知识（四）

    一.JavaScript的三个重要组成部分 (1)ECMAScript(欧洲计算机制造商协会) 制定JS的规范 (2)DOM(文档对象模型)重点学习对象 处理网页内容的方法和接口 (3)BOM(浏览器 ...

  9. 认识JQuery，JQuery的优势、语法、多库冲突、JS原生对象和JQuery对象之间相互转换和DOM操作，常用的方法

    (一)认识JQuery  JQuery是一个JavaScript库,它通过封装原生的JavaScript函数得到一套定义好的方法    JQuery的主旨:以更少的代码,实现更多的功能 (二)JQue ...

随机推荐

  1. nginx 1.14.2 配置文件优化精选

    user nobody; worker_processes ; worker_rlimit_nofile ; events { use epoll; worker_connections ; } ht ...

  2. anaconda中安装mmdetection

    1.新建conda环境(有则跳过)     conda create -n py36 python=3.6 && source activate py36 2.安装pytorch    ...

  3. Python模块1

    序列化模块: 将原本的字典.列表等内容转换成一个字符串的过程就叫做序列化. 序列化的目的 1.以某种存储形式使自定义对象持久化: 2.将对象从一个地方传递到另一个地方. 3.使程序更具维护性. jso ...

  4. 编译openwrt时报错:g++: internal compiler error: Killed (program cc1plus)

    答: 这是内存不足导致的,增大内存或者减少运行的线程即可

  5. 【做题】ZJOI2017仙人掌——组合计数

    原文链接 https://www.cnblogs.com/cly-none/p/ZJOI2017cactus.html 给出一个\(n\)个点\(m\)条边的无向连通图,求有多少种加边方案,使得加完后 ...

  6. Hive 导入 parquet 格式数据（未完，待续）

    Hive 导入 parquet 格式数据 Parquet 格式文件,查看Schema Parquet 之mapreduce Hive 导入 parquet 格式数据

  7. HDU 3567 Eight II（八数码 II）

    HDU 3567 Eight II(八数码 II) /65536 K (Java/Others)   Problem Description - 题目描述 Eight-puzzle, which is ...

  8. 7、Dockerfile详解

    参考: https://www.imooc.com/article/details/id/25229 https://www.cnblogs.com/panwenbin-logs/p/8007348. ...

  9. vue中import引入模块路径中@符号是什么意思

    在编写vue文件中引入模块 import model from "@/common/model"; 这里路径前面的“@”符号表示什么意思? resolve: { // 自动补全的扩 ...

  10. vs code 格式化vue代码

    1.安装 vetur 2.文件-首选项-设置 增加 "vetur.format.defaultFormatter.html": "js-beautify-html&quo ...