<!DOCTYPE html>

<html>

  <head>

    <title>test3.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function(){

            //插入子节点：append,appendTo,prepend,prependTo

            var newNode = $("<li>千与千寻</li>");

            //$("ul").append(newNode);

            //newNode.appendTo($("ul"));

            //$("ul").prepend(newNode);

            //newNode.prependTo($("ul"));

            //插入同辈节点：after,insertAfter,before,insertBefore

            //$("ul").after(newNode);

            //$(newNode).insertAfter($("ul"));

            //$("ul").before($(newNode));

            //$(newNode).insertBefore($("ul"));

            //替换节点：replaceWith,replaceAll

            //$("ul li:eq(1)").replaceWith($(newNode));

            //$("ul li:eq(1)").replaceWith($(newNode));

            //$("ul li").replaceWith($(newNode));

            //复制节点：clone

            //$("ul li:eq(1)").clone(true).appendTo("ul");            

            //删除节点：remove(删除的是引用),detach,empty

            /* $("ul li:eq(1)").click(function(){

                var $li = ("ul li:eq(1)").remove();

                $li.appendTo("ul");

            }); */

            //$("ul li:eq(1)").detach();

            //$("ul li:eq(1)").empty();

            //获取与设置节点属性attr(),removeAttr()

            //$("img").attr({width:"100px",heigth:"100px"});

            alert($("img").removeAttr("name"));

        });

    </script>

  </head>

  <body>

    <p>热门动画</p>

    <ul>

        <li>海贼王</li>

        <li>死神</li>

        <li>柯南</li>

    </ul>

    <img src="../images/6.jpg" name="this is a picture" >

  </body>

</html>
<!DOCTYPE html>

<html>

  <head>

    <title>test4.html</title>

    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">

    <meta http-equiv="description" content="this is my page">

    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <script type="text/javascript">

        $(function(){

            //获得所有元素的子元素

            //$("body").css({background:"red"});

            //遍历所有子元素：next([expr]),prev([expr]),slibings([expr])

            //下一个同辈元素

            //$("#div3").next().css({background:"red"});

            //前一个同辈元素

            //$("#div4").prev().css({background:"red"});

            //前面和后面的同辈元素

            //$("#div4").slibings().css({background:"red"});

            //遍历前辈元素：parent(父辈元素),parents(祖先元素)

            //$("#div4").parent().css({background:"red"});

            //$("#div4").parents().css({background:"red"});

        });

    </script>

  </head>

  <body>

      <div id="div1" style="width:550px;height:550px;border:1px solid">

          <div id="div2"   style="width:304px;height:304px;border:1px solid">

              <div id="div3" style="width:100px;height:100px;border:1px solid"></div>

              <div id="div4" style="width:100px;height:100px;border:1px solid"></div>

              <div id="div5" style="width:100px;height:100px;border:1px solid"></div>

          </div>

          <br>

          <div style="width:200px;height:200px;border:1px solid">

              <div style="width:100px;height:100px;border:1px solid"></div>

          </div>

      </div>

  </body>

</html>

使用jQuery操作DOM（ppt练习）的更多相关文章

  1. jQuery操作Dom、jQuery事件机制、jQuery补充部分

    jQuery操作Dom: 修改属性: //使用attr()方法 //attr(name, value) //name:要修改的属性的属性名 //value:对应的值 //attr方法,如果当前标签有要 ...

  2. web进阶之jQuery操作DOM元素&&MySQL记录操作&&PHP面向对象学习笔记

    hi 保持学习数量和质量 1.jQuery操作DOM元素 ----使用attr()方法控制元素的属性 attr()方法的作用是设置或者返回元素的属性,其中attr(属性名)格式是获取元素属性名的值,a ...

  3. Hybrid App开发之jQuery操作DOM

    前言: 前面学习了JQuery的选择器,今天开始学习新的知识,JQuery操作DOM元素. 元素属性的访问与设置 attr(name) 获取元素属性 attr(name,value) 单个属性设置 a ...

  4. jQuery框架-2.jQuery操作DOM节点与jQuery.ajax方法

    一.jQuery操作DOM 内部插入操作: append(content|fn):向每个匹配的元素内部追加内容. prepend(content):向每个匹配的元素内部前置内容. 外部插入操作: af ...

  5. 第四章 使用jQuery操作DOM

    第四章 使用jQuery操作DOM 一.DOM操作 在jQuery中的DOM操作主要可分为样式操作.文本和value属性值操作.节点操作: 节点操作又包含属性操作.节点遍历和CSS-DOM操作. 其中 ...

  6. 原生JS和jQuery操作DOM的区别小结

    一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq ...

  7. jQuery权威指南（第2版） 学习一 jQuery操作DOM

    jQuery操作DOM 获取元素的属性 attr(name) 获取元素属性的语法格式如下: attr(name) 其中,参数 name 表示属性的名称. 例子: <img alt="& ...

  8. *jquery操作DOM总结 (原创：最全、最系统、实例展示)

    jquery操作DOM包括八个方面: 一:jquery对DOM节点的基本操作:二:jquery对DOM节点的CSS样式操作:三:jquery遍历DOM节点:四:jquery创建DOM节点:五:jque ...

  9. jQuery操作dom事件

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  10. Unit01： jQuery概述 、 jQuery选择器 、 jQuery操作DOM

    Unit01: jQuery概述 . jQuery选择器 . jQuery操作DOM 使用jQuery放大字体: <!DOCTYPE html> <html> <head ...

随机推荐

  1. Prepare and Deploy Windows Server 2016 Active Directory Federation Services

    https://docs.microsoft.com/en-us/windows/security/identity-protection/hello-for-business/hello-key-t ...

  2. remove computer from join with powershell

    Removes the local computer from its domain. Remove-Computer [-UnjoinDomainCredential] <PSCredenti ...

  3. ES6学习笔记（二）——数组的扩展

    扩展运算符 ... 将数组转化成用逗号分隔的参数序列 * 扩展运算符背后调用的是遍历器接口(Symbol.iterator),如果一个对象没有部署这个接口,就无法转换. 应用 1. 合并数组 2. 将 ...

  4. io缓冲为何可以提高效率

    问题 据我了解,运用FileInputStream读写一段数据是一个字节一个字节的读取,如果有10个字节大小的文件,就要调用10次系统调用,每次将读取的数据赋值给变量,然后程序使用变量. 缓冲区可以看 ...

  5. 经典DFS问题 oilland 连通块

    #include "iostream" #include "cstdio" using namespace std; ][]={{,},{,-},{,},{-, ...

  6. Gradle体验/第一篇：下装、安装、配置、体验

    http://jingyan.baidu.com/article/4d58d541167bc69dd4e9c009.html

  7. Python学习笔记 - day5 - 文件操作

    Python文件操作 读写文件是最常见的IO操作,在磁盘上读写文件的功能都是由操作系统提供的,操作系统不允许普通的程序直接操作磁盘(大部分程序都需要间接的通过操作系统来完成对硬件的操作),所以,读写文 ...

  8. POJ1080（LCS变形）

    Human Gene Functions Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Oth ...

  9. iOS 动画整理

    序列帧动画 曾经项目里的一段源码: 1234567891011121314 UIImageView * activityImageView = [[UIImageView alloc] init];N ...

  10. JavaScript秘密花园

    译文地址 bonsaiden.github.io/JavaScript-Garden/zh/#intro.authors 之前被人问到JS一些概念性的东西,感觉很模糊,可能层次比较浅,偏理论的东西实践 ...