<!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. nginx,docker反向代理

    1. [root@javanginx ~]# cat /etc/nginx/nginx.conf user root root;worker_processes 4;error_log /var/lo ...

  2. 7月23号day15总结

    数据清洗完成之后开始编写前端,通过spring框架将清洗后数据库中的数据显示在页面中. 框架的搭建和js的使用都在学习阶段,

  3. java md5加密 不依赖base64包

    /** * MD5 加密 */ private String getMD5Str(String str) { MessageDigest messageDigest = null; try { mes ...

  4. background-color和background-image问题

    今天撸码的时候发现需要background-color和background-image 一起用,才开始考虑两个可不可以一起用  查阅多方资料才知道可以写成background:color url() ...

  5. .NET的PE文件结构篇（转）

    一.开篇 开篇我要讲述一个关于PE文件结构的文章,这篇文章动手能力比较强,希望大家能够动手进行操作,这边文章篇幅有可能会长一些,为了方便大家阅读我可以将其分为几个部分进行讲解,主要分为以下几个部分: ...

  6. HDU2066一个人的旅行---（多起点多终点最短路径）

    http://acm.hdu.edu.cn/showproblem.php?pid=2066 一个人的旅行 Time Limit: 1000/1000 MS (Java/Others)    Memo ...

  7. C++11 自动释放锁（转）

    原文转自 https://blog.csdn.net/lmb1612977696/article/details/77712170 c++11加入了很多新的特性,值得我们去探索. 先看一个例子:普通的 ...

  8. 一.Select 函数详细介绍【转】

    转自:http://www.cnblogs.com/hjslovewcl/archive/2011/03/16/2314330.html Select在Socket编程中还是比较重要的,可是对于初学S ...

  9. Google Breakpad 之一，跨平台crash 处理上报系统简介

    Google Breakpad 之一,跨平台crash 处理上报系统简介 http://blog.csdn.net/wpc320/article/details/8290501 Google Brea ...

  10. Python Requests 小技巧总结

    关于 Python Requests ,在使用中,总结了一些小技巧把,分享下. 1:保持请求之间的Cookies,我们可以这样做. import requests self.session = req ...