美文网首页
JavaWeb(第六周)

JavaWeb(第六周)

作者: mwj610 | 来源:发表于2019-04-07 21:28 被阅读0次

一、javascript的简介

是基于对象和事件驱动的语言,应用与客户端。

  • 基于对象:提供了好多对象,可以直接拿过来用
  • 事件驱动:html做网站静态效果,JavaScript动态效果
  • 客户端:专门指的是浏览器

JavaScript的特点:
(1)交互性:信息的动态交互
(2)安全性:JavaScript不能访问本地磁盘的文件
(3)跨平台性:只有能够支持JavaScript的浏览器,都可以运行


JavaScript的组成:
(1)ECMAScript
-ECMA:欧洲计算机协会
(2)BOM
-broswer object model:浏览器对象模型
(3)DOM
-document object model:文档对象模型

二、JavaScript和html的结合方式(两种)

1.使用一个标签<script type="text/javascript"> js代码 </script>

<script type="text/javascript">
    alert("aaaa");
</script>

2.使用script标签,引入一个外部的js文件;创建一个js文件,写js代码

<script type="text/javascript" src="day02-1.js">    </script> 

三、JavaScript的原始类型和声明变量

定义变量 都使用关键字 var
JavaScript的原始类型(五个)
-string:字符串

var str = " abc";

-number:数字类型

var m = 123;

-boolean

var flag = true;

-null

var date = new Date();

获取对象的引用,null表示对象引用为空,所有对象的引用也是Object
-undifined
定义一个变量,没有赋值

var aa;

typeof( );查看当前变量的数据类型

     var str = "abc";
     //alert(str);
     alert(typeof (str));  //String

四、JavaScript的语句

1.if语句

     var a = 5;
     if(a==5){
         alert("5");
     }
     else {
         alert("6");
     }        //5

2.switch语句

    var b = 6;
    switch (b) {
        case 3:
            alert("3");
            break;
        case 6:
            alert("6");
            break;
        default:
            alert("other"); 
    }

3.while循环

      var i = 5;
      while (i>1){
          alert(i);
          i--;
      }  // 5  4  3  2

4.for循环

        for(var mm = 0;mm<=5;mm++){
            alert(mm);
        }  // 0 1 2 3 4 5 

五、JavaScript的运算符

1.在JavaScript里面不区分整数和小数
2.如果相加的时候做的是字符串连接;
如果相减的时候,执行减法运算。
3.提示NaN:表示不是一个数字
字符串的相减:

    var a = 123;
    alert(a-3);  //120

boolean类型也可以操作:
如果设置成true,相当于这个值是1;如果设置成false,相当于这个值是0.
4. == 和 === 的区别:
==:比较的只是值。
===:比较的是类型。
5.直接向页面输出的语句(可以把内容显示在页面上)
document.write("aaa");
document.write("<hr/ >");

六、JavaScript的数组

定义方式:
1.var arr = [1,2,3];
2.使用内置对象Array对象

var arr1 = new Array(5);

3.使用内置对象Array对象

var arr2 = new Array(3,4,5);//定义一个数组,数组里面的元素是3,4,5。


数组的属性:
length:获取数组的长度
数组可以存放不同数据类型的数据

七、JavaScript的函数

定义函数方法:
1.使用关键字function

function 方法名(参数列表){
方法体;
返回值(可以可无)
}

无返回值:

     function test1(a,b) {
         var c = a+b;
         alert(c);
     }
     test1(9,32)  //41

有返回值:

     function test2(a,b,c) {
         var d = a+b+c;
         return d;
     }
     alert(test2(9,8,6)); //23

2.匿名函数
var test = function(参数列表){
方法体和返回值;
}

   var test3  = function (a,v) {
         alert(a+v);
     }
     test3(3,5);  //8

3.动态函数

var test4 = new Function("参数列表","方法体和返回值");

    var test4 = new Function("a,b","alert(a+b)");
    test4(6,4);//10

八、JavaScript的全局变量和局部变量

全局变量:在script标签里面定义一个变量,这个变量在页面中JavaScript部分都可以使用。
在方法外部使用,在方法内部使用,在另外一个script标签使用。
局部变量:在方法内部定义一个变量,只能在方法内部使用

九、Script标签的位置

建议把Script标签放在</body>后面

十、JavaScript的重载

=====================================================================================================================================================================================================================

一、JavaScript的String对象

1.创建String对象
var str = "abc";
2.方法和属性
属性 length:字符串的长度

   var str = "abcdef";
    document.write(str.length);//6

方法:
-bold() :加粗
-fontcolor():设置字符串颜色
-fontsize():设置字体的大小
-link():将字符串显示成超链接
sub() sup():下标和上标


-concat():连接字符串

    var s3 = "asd";
    var s4 = "231";
    document.write("<hr/>");
    document.write(s3.concat(s4));  //asd231

-charAt():返回指定位置的字符串

    var s5 = "awoidjao1321";
    document.write(s5.charAt(4));  //d     字符位置不存在,返回空字符串

-indexOf():返回字符串位置

    var s6 = "amiaowenjie";
    document.write(s6.indexOf("e")); //6   字符不存在,返回-1

-split():把字符串切分成数组

    var s7 = "a0n0m0nn0h";
    var arr = s7.split("0");
    document.write(arr.length);//5

-replace():替换字符串;传递两个参数:原始字符和要替换成的字符

    var s8 = "miaowen";
    document.write(s8.replace("o","23")); //mia23wen

-substr()和-substring()

    var s9 = "function";
    document.write(s9.substr(2,4));//ncti  从第五位开始,向后截取五个字符
    document.write("<br/>")
    document.write(s9.substring(2,4));//nc   从第几位开始到第几位结束  [3,5)

二、JavaScript的Array对象

属性:length:查看数组的长度


方法:
-concat():数组的连接

    var arr1 = [1,2,3];
    var arr2 = [5,7,8];
    document.write(arr1.concat(arr2)); //1,2,3,5,7,8

-join():根据指定的字符分割数组

    var arr3 = new Array(3);
    arr3[0] = "a";
    arr3[1] = "b";
    arr3[2] = "c";
    document.write(arr3.join("*")); //a*b*c

-push():向数组末尾添加元素,返回数组新的长度
如果添加的是一个数组,这个时候把一个数组当做一个整体字符串加进去

    var arr4 = new Array(3);
    arr4[0] = "maio";
    arr4[1] = "wen";
    arr4[2] = "jie";
    document.write(arr4);
    document.write("<hr/>");
    document.write(arr4.push("abcd123")); //4

-pop(): 删除最后一个元素,返回删除的那个元素

    var arr = ["zhangsan","lisi","wanghwu","zhaoliu"];
    document.write(arr.pop()); //zhaoliu
    document.write("<hr/>");
    document.write(arr);//zhangsan,lisi,wanghwu

-revese():颠倒数组中的元素顺序

    var arr = ["zhangsan","lisi","wanghwu","zhaoliu","liuqi"];
    document.write(arr);//zhangsan,lisi,wanghwu,zhaoliu,liuqi
    document.write("<hr/>");
    document.write(arr.reverse());//liuqi,zhaoliu,wanghwu,lisi,zhangsan

三、JavaScript的Date对象

获取当前时间:
var date = new Date();

    var date = new Date();
    document.write(date);//Tue Apr 02 2019 17:09:40 GMT+0800 (中国标准时间)
    document.write("<hr/>");
    document.write(date.toLocaleString());//2019/4/2 下午5:12:16

getFullYear():获取当前年的方法:

 var date = new Date();
 document.write(date.getFullYear());//2019

getMonth():获取当前月的方法:

    var date1 = date.getMonth()+1;//只能获取0~11的月份,所以要+1
    document.write(date1);  //4

getDay():获取当前的星期的方法:

    var date = new Date();
    document.write(date.getDay());  // 2   返回值是0~6,所以为0时是星期日

getgetDate():获取当前的日:

    var date = new Date();
    document.write(date.getDate());  //2

getHours():获取当前的小时:

    var date = new Date();
    document.write(date.getHours());   //17

getMinutes():获取当前的分钟:

    var date = new Date();
    document.write(date.getMinutes());  //52

getSeconds():获取当前的秒:

    var date = new Date();
    document.write(date.getSeconds());   /13

getTime():获取毫秒数:
应用场景:使用毫秒数处理缓存的结果(不有缓存)

    var date = new Date();
    document.write(date.getTime());  //1554199046428

四、JavaScript的Math对象

里面都是静态的方法,使用可以直接使用Math.方法();
ceil(x):向上舍入
floor(x):向下舍入
round(x):四舍五入
random():得到随机数 0~1之间的随机数

   document.write(Math.floor(Math.random()*10)); //将随机数乘以10然后向下舍入可得到0~9的随机数

其他方法:

image.png

五、JavaScript的全局函数

由于不属于任何一个对象,直接写名称使用
eval( ):执行JavaScript代码(如果字符串是一个JavaScript代码,使用方法直接执行)

      var str = "alert('abc')";
      eval(str);   //abc

encodeURI():对字符进行编码 //%E6%B5%8B%E8%AF%95%E4%B8%AD%E6%96%87123
decodeURI():对字符进行解码 //测试中文123
isNaN():判断当前字符串是否是数字
如果是数字返回false;如果不是数字返回true

      var m = "124";
      alert(isNaN(m));  //false

parseInt():类型转换

      var m1 = "123";
      document.write(parseInt(m1)+1);   //124

六、JavaScript的函数的重载

JavaScript不存在重载,但是可以通过其他方式模拟重载(面试题目)
调用最后一个方法;
把传递的参数保存到arguments数组里面;

七、JavaScript的BOM对象

BOM:浏览器对象模型(BrowserObjectModel)
BOM中的对象:
1.navigator:获取客户机的信息(浏览器的信息)
-navigator.appName

     document.write(navigator.appName);  //Netscape

2.screen:获取屏幕信息

3.location:请求url地址
-href:获取请求的url地址;设置url地址。

4.history:请求url的历史记录
history.back(); 到访问的上一个页面
history.forward(); 到访问的下一个页面

5.window

窗口对象;
顶层对象(所有的bom对象都是在window里面操作的)
方法:
-alert:页面弹出一个框,显示内容
-confirm():确认框

confirm("删除内容");

-prompt():输入的对话框

     prompt("please input :","0");    //prompt("输入框显示的内容","输入框里面的默认值");

-open():打开一个新的窗口
open("打开新窗口的地址url"," ","窗口特征:比如宽度和高度");

   window.open("day02-1.html"," ",'width=200,height=200');

-close():关闭窗口(浏览器兼容性差)


做定时器:

setInterval("JavaScript代码",毫秒数) 1秒=1000毫秒

    window.setInterval("alert('123')",3000);  //每3秒执行一次alert

setTimeout("JavaScript代码",毫秒数) :在毫秒数之后执行,只会执行一次

   window.setTimeout("alert('miao')",3000);//4秒只会执行alert,只会执行一次

clearInterval():清除setInsetInterval设置的定时器
clearTimeout():清除setTimeout设置的定时器

清除演示
<body>
   <input type="button" value="interval" onclick="clear1();"/>
   <br/>
   <input type="button" value="timeout" onclick="clear2();"/>
  <script type="text/javascript">
      var id1 = setInterval("alert('WEN')",4000);
      var id2 = setTimeout("alert('miao')",3000);

      function clear1() {
          clearInterval(id1);
      }
      function clear2() {
          clearTimeout(id2);
      }
  </script>
</body>

八、JavaScript的dom对象

文档对象模型(Document Object Model)
文档:超文本文档(超文本标记文档)html、xml
对象:提供了属性和方法
模型:使用属性和方法来操作超文本标记型文档
可以使用JavaScript里面的dom提供的对象,使用这些对象的属性和方法,对标记型文档进行操作;
想要对标记型文档进行操作,首先需要对标记型文档里面的所有内容封装成对象


DHTML:是很多技术的简称
html:封装数据
css:使用属性和属性值设置样式
dom:操作html文档
JavaScript:专门指的是JavaScript的语法语句

九、document对象

表示整个的文档
常用方法:
write()方法:
(1)向页面输出变量(值)
(2)向页面输出html代码

              document.write("abc");
              document.write("<hr/>");

getElementById():通过id得到元素(标签)

<body>
   <input type="text" value="mmm" name="nameid" id="a"/>
          <script type="text/javascript">
        var v = document.getElementById("a");  //传递的参数是标签里面的ID的值
        alert(v.value);  //mmm     标签对象.属性名称
  </script>
</body>

getElementsByName():通过标签的name属性值得到标签,返回的是一个集合(数组)

<body>
   <input type="text" value="mmm" name="name1"/><br/>
   <input type="text" value="qqqq" name="name1"/><br/>
   <input type="text" value="kkk" name="name1"/><br/>
   <input type="text" value="zzzz" name="name1"/><br/>
          <script type="text/javascript">
              var v = document.getElementsByName("name1");  //传递的值是标签里面name的值
              for(var i = 0;i<v.length;i++){  //通过遍历数组,得到每个标签里面具体的值
                  var v1 = v[i];   //每次循环得到v对象,赋值到v1里面
                  alert(v1.value);  //得到每个input标签里面的value值
              }
  </script>
</body>

getElementsByTagName():通过标签名称得到元素

<body>
   <input type="text" value="mmm" name="name1"/><br/>
   <input type="text" value="OOOO" name="name1"/><br/>
   <input type="text" value="kkk" name="name1"/><br/>
   <input type="text" value="zzzz" name="name1"/><br/>
   <script type="text/javascript">
       var v = document.getElementsByTagName("input");  //传递的参数是标签名称
       for(var i = 0;i<v.length;i++){
           var v1 = v[i];
           alert(v1.value);
       }
   </script>
</body>

如果只有一个标签,不需要遍历,可以直接通过数组的下标获取到值

<body>
<input type="text" value="mmm" name="name1"/><br/>
<script type="text/javascript">
    var v = document.getElementsByTagName("input")[0];  //通过数组下标获取值
    alert(v.value);
</script>
</body>

十、案例:window弹窗案例

widnow页面

<body>
    编号:<input type="text" id="numid"/><br/>
    姓名:<input type="text" id="nameid"/><br/>
    <input type="button" value="选择" onclick="open1()"/>

<script type="text/javascript">
     function open1() {
         window.open("user.html","","width=250,height=150");
     }
</script>
</body>

弹窗页面

<body>
<table border="1" bordercolor="blue" >
    <tr>
          <td>操作</td>
          <td>编号</td>
          <td>姓名</td>
    </tr>
    <tr>
        <td><input type="button" value="选择" onclick="s1('100','猴子');"/></td>
        <td>100</td>
        <td>猴子</td>
    </tr>
    <tr>
        <td><input type="button" value="选择" onclick="s1('101','老鼠');"/></td>
        <td>101</td>
        <td>老鼠</td>
    </tr>
    <tr>
        <td><input type="button" value="选择" onclick="s1('102','蛇');"/></td>
        <td>102</td>
        <td>蛇</td>
    </tr>
</table>
<script type="text/javascript">
    //需要把num1和name1赋值到window窗口
    //跨页面操作  opener :得到创建这个窗口的窗口  得到window页面
     function s1(num1,name1) {
         var pwin = window.opener;  //得到window页面
         pwin.document.getElementById("numid").value = num1;
         pwin.document.getElementById("nameid").value = name1;
         window.close(); //关闭窗口
     }
</script>
</body>

opener:属性;获取创建当前窗口的窗口

=====================================================================================================================================================================================================================

案例一:在末尾添加节点

第一步:获取ul标签
第二步:创建li标签

document.createElement("标签名称")

第三步:创建文本

document.createTextNode("文本内容")

第四步:把文本添加到li下面,使用appendChild( )方法
第五步:把li添加到ul末尾,使用appendChild( )方法

<body>
    <ul id="ulid">
        <li>111</li>
        <li>222</li>
        <li>333</li>
        <li>444</li>
    </ul>
    <input type="button" value="add" onclick="add1();">
    
   <script type="text/javascript">
         function add1() {
             var ul1 = document.getElementById("ulid");  //获取到ul标签
             var li1 = document.createElement("li");   //创建标签
             var tex1 = document.createTextNode("5555");  //创建文本
             li1.appendChild(tex1);//把文本添加到li下面
             ul1.appendChild(li1);//把li添加到ul末尾
         }
   </script>
</body>

案例二:动态显示时间

    <script type="text/javascript">
        function getD1() {
            var date = new Date();//得到当前时间
            var d1 = date.toLocaleString();//得到当前时间
            var div1 = document.getElementById("times");//获取div
            div1.innerHTML = d1;//获取div
        }
        setInterval("getD1()", 1000);//使用定时器实现每秒写一次时间
    </script>

案例三:全选练习

使用复选框上面一个属性判断是否选中:
checked=true 选中; checked=false 没选中

        <body>
       <input type="checkbox" id="boxid" onclick="selAllNo();"/>全选/全不选
       <br/>
       <input type="checkbox" name="love" />篮球<br/>
       <input type="checkbox" name="love"/>排球<br/>
       <input type="checkbox" name="love"/>羽毛球<br/>
       <input type="checkbox" name="love"/>乒乓球<br/>
       <input type="button" value="全选" onclick="selAll();"/>
       <input type="button" value="全不选" onclick="selNo();"/>
       <input type="button" value="反选" onclick="selOther();"/>
    <script type="text/javascript">
        function selAllNo() {
            var box1 = document.getElementById("boxid");
            if(box1.checked == true){
                selAll();
            }
            else {
                selNo();
            }
        }
        function selOther() {
            var loves = document.getElementsByName("love");//获取要操作的复选框
            for (var i = 0;i<loves.length;i++) {//遍历数组
                var love1 = loves[i];//得到每一个复选框
                if(love1.checked == true){  //判断当前复选框是什么状态
                    love1.checked = false;
                }
                else {
                    love1.checked = true;
                }
            }
        }
        function selAll() {
            var loves = document.getElementsByName("love");//获取要操作的复选框
            for(var i =0;i<loves.length;i++){//遍历数组
                var love1 = loves[i];//得到每一个复选框
                love1.checked = true;
            }
        }
        function selNo() {
            var loves = document.getElementsByName("love");
            for(var i = 0;i<loves.length;i++){
                var love1 = loves[i];
                love1.checked = false;
            }
        }
    </script>
        </body>

案例四:动态生成表格

/*
1.得到输入的行和列的值。
2.生成表格:循环行;在行里面循环单元格。
3.显示到页面上:把表格的代码设置到div里面,使用innerHTML属性。
*/
<body>
     行:<input type="text" id="h"/>
     列:<input type="text" id="l"/><br/>
     <input type="button" value="生成" onclick="add2();"/>
     <div id="divv">

     </div>
  <script type="text/javascript">
          function add2(){
              var h = document.getElementById("h").value;
              var l = document.getElementById("l").value;
              var tab = "<table border='1' bordercolor='blue'>";
              for(var i =1;i<=h;i++){
                  tab += "<tr>";
                  for(var j =1;j<=l;j++){
                      tab += "<td>aaaaaa</td>"
                  }
                  tab += "</tr>";
              }
              tab += "</table>";
              var divv = document.getElementById("divv");
              divv.innerHTML = tab;
          }
  </script>
</body>

二、元素对象(element对象)

1.要操作element对象,首先必须要获取到element,使用document里面相应方法获取

  1. 方法:getAttribute():获取属性里面的值
                  alert(input1.getAttribute("value"));

setAttribute():设置属性的值

                  input1.setAttribute("class","haha");  //("属性","值")

removeAttribute():删除属性的值

                  input1.removeAttribute("name");  //不能删除value

getElementsByTagName():获取标签下面的字标签

var lis = ul11.getElementsByTagName("li");

三、Node对象属性

(1)

nodeName
nodeType
nodeValue
使用dom解析html时候,需要html里面的标签,属性和文本都封装成对象
标签节点对应的值:
nodeType:1
nodeName:大写标签名称 比如SPAN
nodeValue:null
属性节点对应的值:
nodeType:2
nodeName:属性名称
nodeValue:属性的值
文本节点对应的值:
nodeType:3
nodeName:#text
nodeValue:文本内容

        <body>
        <span id="spanid">哈哈呵呵</span>
    <script type="text/javascript">
        var span1 = document.getElementById("spanid");
        alert(span1.nodeType);  //1
        alert(span1.nodeName);  //SPAN
        alert(span1.nodeValue); //null
        var id1 = span1.getAttributeNode("id");
        alert(id1.nodeType);  //2
        alert(id1.nodeName);  //id
        alert(id1.nodeValue); //spanid
        var text1 = span1.firstChild;
        alert(text1.nodeType);  //3
        alert(text1.nodeName);  //#text
        alert(text1.nodeValue); //内容
    </script>
        </body>

(2)

        <ul>
            <li>qqq</li>
            <li>www</li>
        </ul>

父节点:
ul是li的父节点
parentNode:

        <body>
        <ul id="ulid">
            <li id="li1">qqq</li>
            <li id="li2">www</li>
            <li id="li3">yyy</li>
            <li id="li4">test111</li>
        </ul>
    <script type="text/javascript">
        var li1 = document.getElementById("li1");
        var ul1 = li1.parentNode;
        alert(ul1.id);
    </script>
        </body>

子节点:
li是ul的父节点
childNodes:得到所有子节点,但是兼容性很差
firstChild:获取第一个子节点

        var ul1 = document.getElementById("ulid");
        var li1 = ul1.firstChild;
        alert(li1.id);

lastChild:获取最后一个子节点

        var ul1 = document.getElementById("ulid");
        var li4 = ul1.lastChild;
        alert(li4.id);

同辈节点:
li之间关系是同辈节点
nextSibling:返回一个给定节点的下一个兄弟节点。
previousSibling:返回一个给定节点的上一个兄弟节点。

        var li3 = document.getElementById("li3");
        alert(li3.nextSibling.id);
        alert(li3.previousSibling.id);

四、操作dom树

appendChild();添加子节点到末尾,

类似于剪切,粘贴的效果

<head>
    <meta charset="UTF-8">
    <title>Title1</title>
    <style type="text/css">
        #div1{
            width: 200px;
            height: 150px;
            border: 2px solid red;
        }
        #div2 {
            width: 250px;
            height: 150px;
            border: 5px dashed green;
        }

    </style>
</head>
        <body>
        <div id="div1">
           <ul id="ulid11">
               <li>tom</li>
               <li>mary</li>
               <li>jack</li>
           </ul>
        </div>
        <div id="div2"></div>
          <input type="button" value="add1" onclick="add11();"/>
    <script type="text/javascript">
         function add11() {
             var div2 = document.getElementById("div2");//得到div2
             var ul11 = document.getElementById("ulid11");//获取ul
             div2.appendChild(ul11);//把ul添加到div2里面
         }
    </script>

        </body>

insertBefore(newNode,oldNode):

在某个节点之前插入一个新的节点

        <body>
        <ul id="ulid21">
            <li id="li11">老鼠</li>
            <li id="li12">猫</li>
            <li id="li13">兔子</li>
            <li id="li14">大象</li>
        </ul>
        <input type="button" value="insert" onclick="insert1();"/>

    <script type="text/javascript">
        function insert1() {
            var li13 = document.getElementById("li13");//获取li13标签
            var li15 = document.createElement("li");//创建li
            var text15 = document.createTextNode("熊猫");//创建文本
            li15.appendChild(text15);//把文本添加到li下面
            var ul21 = document.getElementById("ulid21");//获取到ul
            ul21.insertBefore(li15,li13);//在<li>兔子</li>之前添加<li>熊猫</li>
        }
    </script>
        </body>

newNode:要插入的节点
oldNode:在谁之前插入

插入一个节点,节点不存在,需要创建

1.创建标签
2.创建文本
3.把文本添加到标签下面


removeChild(): 删除节点

通过父节点删除,不能自己删自己

        <body>
        <ul id="ulid31">
            <li id="li21">老鼠</li>
            <li id="li22">猫</li>
            <li id="li23">兔子</li>
            <li id="li24">大象</li>
        </ul>
        <input type="button" value="remove" onclick="remove1();"/>
    <script type="text/javascript">
          function remove1() {
              var li24 = document.getElementById("li24"); //获取li标签
              var ulid31 = document.getElementById("ulid31");//获取父节点
              ulid31.removeChild(li24);//删除
          }
    </script>
        </body>

replaceChild(newNode,oldNode):替换节点

newNode:替换成的节点
oldNode:被替换的节点
不能自己替换自己,通过父节点替换

        <body>
        <ul id="ulid31">
            <li id="li21">老鼠</li>
            <li id="li22">猫</li>
            <li id="li23">兔子</li>
            <li id="li24">大象</li>
        </ul>
        <input type="button" value="replace" onclick="replace1();"/>
    <script type="text/javascript">
         function replace1() {
             var li24 = document.getElementById("li24");//获取li
             var li25 = document.createElement("li");//创建li标签
             var text1 = document.createTextNode("小狗");//创建文本
             li25.appendChild(text1);//将文本添加到li
             var ulid31 = document.getElementById("ulid31");//获取父节点
             ulid31.replaceChild(li25,li24);//通过父节点替换
         }
    </script>
        </body>

cloneNode(boolean):复制节点

        <body>
        <ul id="ulid31">
            <li id="li21">老鼠</li>
            <li id="li22">猫</li>
            <li id="li23">兔子</li>
            <li id="li24">大象</li>
        </ul>
        <div id="divv">

        </div>
        <input type="button" value="copy" onclick="copy();"/>

        <script type="text/javascript">
            function copy() {
        var ulid31 = document.getElementById("ulid31");//获取ul
        var ulcopy = ulid31.cloneNode(true);//复制ul,放到剪切板里面
        var divv = document.getElementById("divv");//获取div
        divv.appendChild(ulcopy);//把副本放到div里面去
        }
    </script>
        </body>

五、innerHTML属性

1.获取文本内容

        var span1 = document.getElementById("sid");
        alert(span1.innerHTML);

2.向标签里面设置内容(可以是html代码)

        var div11 = document.getElementById("div11");
        div11.innerHTML = "<h1>AAAAA</h1>";

向div里面添加一个表格:

 div11.innerHTML = "<h1>AAAAA</h1>";
        var tab = "<table border='1'><tr><td>aaaa</td></tr><tr><td>bbbb</td></tr>
        <tr><td>cccc</td></tr></table>";

=====================================================================================================================================================================================================================

相关文章

  • JavaWeb(第六周)

    一、javascript的简介 是基于对象和事件驱动的语言,应用与客户端。 基于对象:提供了好多对象,可以直接拿过...

  • 第一周 工作计划总结

    第一周 工作计划总结 时间:2018年10月14日 一、当前状态 初步了解JavaWeb初步了解JavaWeb温习...

  • 目录【JavaWeb教程】

    JavaWeb-001-JavaWeb简介 JavaWeb-002-JavaWeb开发的目录结构 JavaWeb-...

  • JavaWeb博客文章目录

    转载 ginb 一、JavaWeb基础 JavaWeb学习笔记一: XML解析 JavaWeb学习笔记二 Ht...

  • java基础参考资料

    JavaWeb学习总结(一)——JavaWeb开发入门 JavaWeb学习总结(二)——Tomcat服务器学习和使...

  • JavaWeb(第七周)

    day5 一、表单提交方式 1.使用submit提交 2.使用button提交表单 3.使用超链接提交 4.onc...

  • JAVAWeb(第二周)

    js的String对象 创建String对象 var str="abc"; 方法和属性 ***属性: lengt...

  • JavaWeb(第九周)

    day10 一、response和request 服务器处理请求的流程 服务器每次收到请求时,都会为这个请求开辟一...

  • 浅谈JavaWeb中高并发业务处理

    文章地址:浅谈JavaWeb高并发业务处理 浅谈JavaWeb中高并发业务处理 在JavaWeb应用中高并发的业务...

  • JavaWeb小项目之综合搜索工具(二):爬虫篇

    JavaWeb小项目之综合搜索工具(一):前端篇JavaWeb小项目之综合搜索工具(二):爬虫篇JavaWeb小项...

网友评论

      本文标题:JavaWeb(第六周)

      本文链接:https://www.haomeiwen.com/subject/wxkmbqtx.html