<!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. ElasticSearch(十)Elasticsearch检索出的数据列表按字段匹配的优先顺序及搜索单词拼音一部分搜不到数据

    检索出的数据列表按字段匹配的优先顺序 一.举例 比如,发布一篇文章,文章包括基本的字段包括标题.发布时间.点击率.关键字.内容.当在页面中输入“教育”搜索关键词,会检索出指定字段包括“教育”的所有数据 ...

  2. python实现简单算法

    #选择n^2def selectSort(li): for i in range(len(li)-1): minLoc = i for j in range(i+1,len(li)): if li[j ...

  3. HTML5中自定义属性（data-*）

    在HTML元素上直接添加以‘data-’开头的属性,例如 <div data-mydata='this is my data'></div> 操作它的方式有classList ...

  4. android TextView描边

    前言 上一篇已经讲了如何实现textView中粗字体效果,里面主要重写了onDraw方法. 这一边讲一个进阶功能,实现textView的描边效果. 上效果图. 上代码: public class St ...

  5. npm 是node.js下带的一个包管理工具

    npm 是node.js下带的一个包管理工具          npm install -g webpack webpack是一个打包工具 gulp是一个基于流的构建工具,相对其他构件工具来说,更简洁 ...

  6. 将pip源设置为国内源的方法

    需要将pip源设置为国内源,阿里源.豆瓣源.网易源等 - windows (1)打开文件资源管理器(文件夹地址栏中) (2)地址栏上面输入 %appdata% (3)在这里面新建一个文件夹 pip ( ...

  7. Unity3d外包公司|UE4外包公司：谷歌首款Daydream VR设备上手

    这款售价仅为79美元(约合人民币525元)的产品内含“够用”的手柄和一台头戴设备,只要你有一台支持月日,10月5日,dream平台的手机(未来将成为安卓平台的标配),就能体验VR的乐趣. 即使该产品最 ...

  8. Pycharm快捷键设置（鼠标滚动控制字体大小）

    一.pycharm字体放大的设置 File —> setting —> Keymap —>在搜寻框中输入:increase —> Increase Font Size(双击) ...

  9. MinTTY终端模拟器要点

    1.MinTTY是一个Cygwin和MSYS的虚拟终端: 2.支持复制和粘贴操作,支持鼠标操作和右键快捷菜单: 3.支持文本.文件.文件夹的拖放: 4.支持中文,支持UTF-8字符集,支持IME(In ...

  10. 第一章 Java语言概述1

    1.人机交互有两种方法:一种是图形化界面,一种是命令行方式 2.如何打开命令行:开始-在运行命令行中输入cmd 3.常用的DOS命令: dir(directory):列出当前目录下文件及文件夹 md( ...