<!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. Python-Jenkins API使用

    一.概述 最近在工作中需要用到在后台代码中触发Jenkins任务的构建,于是想到Jenkins是否有一些已经封装好的API类库提供,用于处理跟Jenkins相关的操作.下面就简单介绍下我的发现. 二. ...

  2. 使用jQuery发送POST，Ajax请求返回JSON格式数据

    问题: 使用jQuery POST提交数据到PHP文件, PHP返回的json_encode后的数组数据,但jQuery接收到的数据不能解析为JSON对象,而是字符串{"code" ...

  3. java.lang.NumberFormatException: For input string: "26.0"

    数据类型转化的时候的错误: 程序中要转的字符串不是一个数字,所以在format成数字的时候就出错了.    字符串不符合数字预定格式.

  4. [洛谷P1541] 乌龟棋

    洛谷题目链接:乌龟棋 题目背景 小明过生日的时候,爸爸送给他一副乌龟棋当作礼物. 题目描述 乌龟棋的棋盘是一行N个格子,每个格子上一个分数(非负整数).棋盘第1格是唯一的起点,第N格是终点,游戏要求玩 ...

  5. POJ 3617 Best Cow Line （模拟）

    题目链接 Description FJ is about to take his N (1 ≤ N ≤ 2,000) cows to the annual"Farmer of the Yea ...

  6. jQuery鼠标悬停文字渐隐渐现动画效果

    jQuery鼠标悬停文字渐隐渐现动画效果 当时是做项目的时候用到的所以图片有些大,九张,真正要做图片不需要这么大 css样式 <style> *{ margin: 0; padding: ...

  7. Git-回滚操作

    git revert是用一次新的commit来回滚之前的commit,git reset是直接删除指定的commit git log 查询回滚版本唯一commit标识代码 git reset --ha ...

  8. 无法解析的DNS服务地址

    如果DNS服务器地址设置不当,可能会导致网速慢.出现弹窗广告.网址打不开.打开不是自己想要的网站等一系列问题. 请参考: DNS的作用是什么,怎样设置DNS? https://jingyan.baid ...

  9. 在css中设置图片的背景图，怎么设置图片纵向拉伸

    css中设置背景图拉伸填充,在css2.1之前这个背景的长宽值是不能被修改的. 实际的结果是只能重复显示,可以使用repeat,repeat-x,repeat-y,no-repeat这些属性来控制背景 ...

  10. DRF最高封装的子类视图

    # 转载请留言联系 子类视图: 视图 作用 方法 父类 ListAPIView 查询多条数据 get GenericAPIView ListModelMixin CreateAPIView 新增一条数 ...