<!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. 搭建jfinal+maven框架

    1.创建一个maven web项目. 2.添加引用包         <dependency>             <groupId>com.jfinal</grou ...

  2. java深入解析

    具体内容安排如下: Java Collections Framework概览 对Java Collections Framework,以及Java语言特性做出基本介绍. Java ArrayList源 ...

  3. 汕头市队赛 SRM16

    T3 C-2 SRM 16 描述 给一个数列,给出两种数字, 询问在多少个非空区间中这两种数字出现次数相同. 输入格式 第一行:一个数字n,q,n表示数列长度,q表示q组询问 第二行n个数字表示数列A ...

  4. 转：js中javascript:void(0) 真正含义

    from:http://www.jb51.net/article/71532.htm 在Javascript中void是一个操作符,该操作符指定要计算一个表达式但是不返回值. 我想使用过ajax的都常 ...

  5. LARGE_INTEGER类型

    最近在研究Windows驱动程序开发,遇到这样一个语句: devExt->PortBase  = (PUCHAR)(ULONG_PTR) portBasePA.QuadPart; 在源代码环境中 ...

  6. ZigBee PHY层

    1. 介绍 ZigBee PHY层,即IEEE 802.15.4 PHY层,这里主要介绍了802.15.4-2003版本 PHY主要实现了如下功能 - 启动和关闭RF收发器 - 信道能量检测(Chan ...

  7. OpenWRT介绍

    1. 介绍 OpenWRT是一款第三方路由器固件, 其特别在于开放性, 如它的文件系统可写, 用户可在路由器上安装需要的第三方软件.通过刷入OpenWRT, 我们可以完成如下事情 - DLNA共享 - ...

  8. python 复习 4-1 函数、参数、返回值、递归

    函数 完成特定功能的一个语句组,这个语句组可以作为一个单位使用,并且给它组语句取一个名子,即函数名 可以通过函数名在程序不同地方多次执行,即函数调用 预定义函数(可以直接使用) 自定义函数(自编写的) ...

  9. [ MongoDB ] 分片集群及测试

    分片 在Mongodb里面存在另一种集群,就是分片技术,可以满足MongoDB数据量大量增长的需求. 当MongoDB存储海量的数据时,一台机器可能不足以存储数据,也可能不足以提供可接受的读写吞吐量. ...

  10. hadoop3.1伪分布式部署

    1.环境准备 系统版本:CentOS7.5 主机名:node01 hadoop3.1 的下载地址: http://mirror.bit.edu.cn/apache/hadoop/common/hado ...