你的位置:首页 > Java教程

[Java教程]javaweb之javascript结合(三)


1、案例一:在末尾添加节点  第一步:获取到ul标签  第二步:创建li标签    document.createElement("标签名称")方法  第三步:创建文本    document.createTextNode("文本内容");    第四步:把文本添加到li下面    使用 appendChild方法  第五步:把里添加到ul末尾    使用 appendChild方法2、元素对象(element对象)  ** 要操作element对象,首先必须要获取到element,    - 使用document里面相应的方法获取    ** 方法    *** 获取属性里面的值      getAttribute("属性名称")      - var input1 = document.getElementById("inputid");      //alert(input1.value);      alert(input1.getAttribute("value"));        *** 设置属性的值      input1.setAttribute("class","haha");        *** 删除属性      input1.removeAttribute("name");      ** 不能删除value    *** 想要获取标签下面的子标签    ** 使用属性 childNodes,但是这个属性兼容性很差    ** 获得标签下面子标签的唯一有效办法,使用getElementsByTagName方法      - var ul11 = document.getElementById("ulid1");      //获取ul下面的子标签      //var lis = ul11.childNodes;      //alert(lis.length);      var lis = ul11.getElementsByTagName("li");      alert(lis.length);3、Node对象属性一  * nodeName   * nodeType  * nodeValue  * 使用dom解析html时候,需要html里面的标签,属性和文本都封装成对象  * 标签节点对应的值    nodeType: 1    nodeName: 大写标签名称 比如SPAN    nodeValue: null  * 属性节点对应的值    nodeType: 2    nodeName: 属性名称    nodeValue: 属性的值  * 文本节点对应的值    nodeType: 3    nodeName: #text    nodeValue: 文本内容4、Node对象的属性二  <ul>    <li>qqqqq</li>    <li>wwww</li>  </ul>  * 父节点    - ul是li的父节点    - parentNode    - //得到li1    var li1 = document.getElementById("li1");    //得到ul    var ul1 = li1.parentNode;    alert(ul1.id);  * 子节点    - li是ul的子节点    - childNodes:得到所有子节点,但是兼容性很差    - firstChild:获取第一个子节点      - //获取ul的第一个子节点 id=li1      //得到ul      var ul1 = document.getElementById("ulid");      //第一个子节点      var li1 = ul1.firstChild;      alert(li1.id);    - lastChild:获取最后一个子节点      //得到最后一个子节点      var li4 = ul1.lastChild;      alert(li4.id);  * 同辈节点    - li直接关系是同辈节点    - nextSibling: 返回一个给定节点的下一个兄弟节点。    previousSibling:返回一个给定节点的上一个兄弟节点。    - //获取li的id是li3的上一个和下一个兄弟节点    var li3 = document.getElementById("li3");    //alert(li3.nextSibling.id);    alert(li3.previousSibling.id);5、操作dom树  ** appendChild方法    - 添加子节点到末尾    - 特点:类似于剪切黏贴的效果    ** insertBefore(newNode,oldNode)方法    - 在某个节点之前插入一个新的节点    - 两个参数      * 要插入的节点      * 在谁之前插入    - 插入一个节点,节点不存在,创建      1、创建标签      2、创建文本      3、把文本添加到标签下面    - 代码    /*      1、获取到li13标签      2、创建li      3、创建文本      4、把文本添加到li下面      5、获取到ul      6、把li添加到ul下面(在<li>貂蝉</li>之前添加 <li>董小宛</li>)        */    //获取li3 标签    var li13 = document.getElementById("li13");    //创建li    var li15 = document.createElement("li");    //创建文本    var text15 = document.createTextNode("董小宛");    //把文本添加到li下面 appendChild    li15.appendChild(text15);    //获取到ul    var ul21 = document.getElementById("ulid21");    //在<li>貂蝉</li>之前添加 <li>董小宛</li>     //insertBefore(newNode,oldNode)    ul21.insertBefore(li15,li13);      *** 不存在 没有insertAfter()方法  ** removeChild方法:删除节点    - 通过父节点删除,不能自己删除自己    - /*      1、获取到li24标签      2、获取父节点ul标签      3、执行删除(通过父节点删除)    */    //获取li标签    var li24 = document.getElementById("li24");    //获取父节点    //两种方式 1、通过id获取 ; 2、通过属性 parentNode获取    var ul31 = document.getElementById("ulid31");    //删除(通过父节点)    ul31.removeChild(li24);    ** replaceChild(newNode,oldNode)方法: 替换节点    - 不能自己替换自己,通过父节点替换    - 两个参数    ** 第一个参数:新的节点(替换成的节点)    ** 第二个参数:旧的节点(被替换的节点)    - 代码    /*      1、获取到li34      2、创建标签li      3、创建文本      4、把文本添加到li下面      5、获取ul标签(父节点)      6、执行替换操作 (replaceChild(newNode,oldNode))    */    //获取li34    var li34 = document.getElementById("li34");    //创建li    var li35 = document.createElement("li");    //创建文本    var text35 = document.createTextNode("张无忌");    //把文本添加到li下面    li35.appendChild(text35);    //获取ul    var ul41 = document.getElementById("ulid41");    //替换节点    ul41.replaceChild(li35,li34);    ** cloneNode(boolean): 复制节点    - //把ul列表复制到另外一个div里面    /*      1、获取到ul      2、执行复制方法 cloneNode方法复制 true      3、把复制之后的内容放到div里面去        ** 获取到div        ** appendChild方法    */    //获取ul    var ul41 = document.getElementById("ulid41");    //复制ul,放到类似剪切板里面    var ulcopy = ul41.cloneNode(true)    //获取到div    var divv = document.getElementById("divv");    //把副本放到div里面去    divv.appendChild(ulcopy);  ** 操作dom总结    * 获取节点使用方法      getElementById():通过节点的id属性,查找对应节点。      getElementsByName():通过节点的name属性,查找对应节点。      getElementsByTagName():通过节点名称,查找对应节点    * 插入节点的方法      insertBefore方法:在某个节点之前插入      appendChild方法:在末尾添加,剪切黏贴    * 删除节点方法      removeChild方法:通过父节点删除    * 替换节点方法      replaceChild方法:通过父节点替换    6、innerHTML属性  * 这个属性不是dom的组成部分,但是大多数浏览器都支持的属性  第一个作用:获取文本内容    *** //获取span标签    var span1 = document.getElementById("sid");    alert(span1.innerHTML);  第二个作用:向标签里面设置内容(可以是html代码)    *** //向div里面设置内容 <h1>AAAAA</h1>    //获取到div    var div11 = document.getElementById("div11");    //设置内容    div11.innerHTML = "<h1>AAAAA</h1>";    ** 练习 : 向div里面添加一个表格    - //向div里面添加一个表格    //var tab = "<table border='1'><tr><td>aaaaaa</td></tr><tr><td>bbbbbb</td></tr><tr><td>cccccc</td></tr></table>";        var tab = "<table>";    tab += "</table>";    //相当于 var tab = "<table></table>";    div11.innerHTML = tab;7、案例二:动态显示时间  * 得到当前的时间     var date = new Date(); //得到不是常规的格式    var d1 = date.toLocaleString(); //格式化  * 需要让页面每一秒获取时间    setInterval方法 定时器  * 显示到页面上    每一秒向div里面写一次时间    * 使用innerHTML属性  * 代码  function getD1() {    //当前时间    var date = new Date();    //格式化    var d1 = date.toLocaleString();    //获取div    var div1 = document.getElementById("times");    div1.innerHTML = d1;  }  //使用定时器实现每一秒写一次时间  setInterval("getD1();",1000);                      8、案例三:全选练习  ** 使用复选框上面一个属性判断是否选中    - checked属性    - checked=true:选中    - checked=false:不选中  * 创建一个页面    ** 复选框和按钮      - 四个复选框表示爱好      - 还有一个复选框操作 全选和选不选,也有一个事件    ** 三个按钮,分别有事件      - 全选              - 全不选      - 反选  * 全选操作    步骤:    /*      1、获取要操作的复选框         - 使用getElementsByName()      2、返回是数组,        - 属性 checked判断复选框是否选中          *** checked = true; //表示选中          *** checked = false;//表示不选中        - 遍历数组,得到的是每一个checkbox          * 把每一个checkbox属性checked=true              */  * 全不选操作    步骤    /*      1、获取到要操作的复选框      2、返回的是数组,遍历数组      3、得到每一个复选框      4、设置复选框的属性 checked=false    */  * 反选操作    步骤    /*      1、获取到要操作的复选框      2、返回数组,遍历数组      3、得到每一个复选框      4、判断当前的复选框是选中还是不选中        - if(love1.checked == true) {}      5、如果选中,属性checked设置成false,否则,设置成true    */  * 使用复选框实现全选和全不选    步骤    /*      1、得到上面那个复选框        - 通过id获取到      2、判断这个复选框是否是选中        - if条件,checked==true      3、如果是选中,下面是全选      4、如果不是选中,下面是全不选    */9、案例四:下拉列表左右选择  * 下拉选择框    <select>      <option>111</option>      <option>111</option>    </select>  * 创建一个页面    ** 两个下拉选择框      - 设置属性 multiple属性    ** 四个按钮,有事件    * 选中添加到右边    步骤    /*      1、获取select1里面的option        - getElementsByTagName()返回是数组        - 遍历数组,得到每一个option      2、判断option是否被选中        - 属性 selected,判断是否被选中          ** selected= true: 选中          ** selected= false:没有选择      3、如果是选中,把选择的添加到右边去      4、得到select2      4、添加选择的部分        - appendChild方法    */    * 全部添加到右边    步骤    /*      1、获取第一个select下面的option对象      2、返回数组,遍历数组      3、得到每一个option对象      4、得到select2      5、添加到select2下面        - appendChild方法    */    * 选中添加到左边    步骤    /*      1、获取select2里面的option对象      2、返回是数组,遍历数组      3、得到每一个option对象      4、判断option是否被选中        - if条件 属性 selected == true:选择      5、获取select1      6、添加到select1里面        - 使用appendChild方法    */  * 全部添加到左边    步骤    /*      1、获取select2里面的option对象      2、返回是数组,遍历数组      3、得到每一个option对象      4、获取到select1      5、添加到select1里面        - 使用appendChild方法    */10、案例五:省市联动  * 创建一个页面,有两个下拉选择框  * 在第一个下拉框里面有一个事件 :改变事件 onchange事件    - 方法add1(this.value);表示当前改变的option里面的value值  * 创建一个二维数组,存储数据    * 每个数组中第一个元素是国家名称,后面的元素是国家里面的城市    *    /*    1、遍历二维数组    2、得到也是一个数组(国家对应关系)    3、拿到数组中的第一个值和传递过来的值做比较    4、如果相同,获取到第一个值后面的元素    5、得到city的select    6、添加过去(使用)appendChild方法      - 创建option(三步)  */  /*    由于每次都要向city里面添加option    第二次添加,会追加。    * 每次添加之前,判断一下city里面是否有option,如果有,删除  */11、案例六:动态生成表格  *创建一个页面:两个输入框和一个按钮  *代码和步骤  /*    1、得到输入的行和列的值    2、生成表格      ** 循环行      ** 在行里面循环单元格    3、显示到页面上      - 把表格的代码设置到div里面      - 使用innerHTML属性  */  //获取输入的行和列  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>aaaaaaa</td>"    }    tab += "</tr>";  }  tab += "</table>";  //alert(tab);  //得到div标签  var divv = document.getElementById("divv");  //把table的代码设置到div里面去  divv.innerHTML = tab;}