<!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. 【BZOJ2049】【SDOI2008】洞穴勘测 [LCT]

    洞穴勘测 Time Limit: 10 Sec  Memory Limit: 259 MB[Submit][Status][Discuss] Description 辉辉热衷于洞穴勘测.某天,他按照地 ...

  2. bzoj4900 [CTSC2017]密钥

    传送门:http://www.lydsy.com/JudgeOnline/problem.php?id=4900 [题解] 恭喜bzoj达到40页 考场由于傻逼基数排序写挂了而gg. 竟然忘了考试前一 ...

  3. bzoj 1706: [usaco2007 Nov]relays 奶牛接力跑——倍增floyd

    Description FJ的N(2 <= N <= 1,000,000)头奶牛选择了接力跑作为她们的日常锻炼项目.至于进行接力跑的地点 自然是在牧场中现有的T(2 <= T < ...

  4. bzoj 1002 找规律（基尔霍夫矩阵）

    网上说的是什么基尔霍夫矩阵,没学过这个,打个表找下规律,发现 w[i]=3*w[i-1]-w[i-2]+2; 然后写个高精直接递推就行了 //By BLADEVIL var n :longint; a ...

  5. HDU2594（简单KMP）

    Simpsons’ Hidden Talents Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 32768/32768 K (Java ...

  6. 关于easyui checkbox 的一些操作处理

    1.easyui在每一行加checkbox { field: 'id', title: '编号', checkbox: true } 2.easyui分页时记住前面已选的checkbox 设置easy ...

  7. [ python ] 使用sys模块实现进度条

    在写网络IO传输的时候, 有时候需要进度条来显示当前传输进度,使用 sys 模块就可以实现: sys.stdout.write() 这个函数在在控制台输出字符串不会带任何结尾,这就意味着这个输出还没有 ...

  8. 各种编码UNICODE、UTF-8、ANSI、ASCII、GB2312、GBK详解

    来自:http://blog.csdn.net/lvxiangan/article/details/8151670 ------------------------------------------ ...

  9. k8s的DamonSet使用

    Deployment 部署的副本 Pod 会分布在各个 Node 上,每个 Node 都可能运行好几个副本.DaemonSet 的不同之处在于:每个 Node 上最多只能运行一个副本. 1.Daemo ...

  10. php使用memcached详解

    一.memcached 简介 在很多场合,我们都会听到 memcached 这个名字,但很多同学只是听过,并没有用过或实际了解过,只知道它是一个很不错的东东.这里简单介绍一下,memcached 是高 ...