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;
}
javaweb之javascript结合(三)的更多相关文章
- 学习javascript数据结构(三)——集合
前言 总括: 本文讲解了数据结构中的[集合]概念,并使用javascript实现了集合. 原文博客地址:学习javascript数据结构(三)--集合 知乎专栏&&简书专题:前端进击者 ...
- JavaScript的三种工业化调试方法
JavaScript的三种工业化玩法 软件工程中任何的语言如果想要写出健壮的代码都需要锋利的工具,当然JavaScript也不例外,很多朋友刚入门的时候往往因为工具选的不对而事半功倍,JavaScri ...
- 初探JavaScript(三)——JS带我"碰壁"带我飞
已经写了两篇关于小白的JavaScript之行,不可否认,每一种语言都有其精华与糟粕之处,来不及细细体味其精华奥妙,也没法对其评头论足,只能先了解,后深入.到目前为止已经看完<JavaScrip ...
- 前端笔记知识点整合之JavaScript(三)关于条件判断语句、循环语句那点事
一.条件分支语句 条件分支语句,也叫作条件判断语句,就是根据某种条件执行某些语句,不执行某些语句. JS中有三种语法是可以表示条件分支的 1.1 if……else…… 条件分支的主力语法,这个主力 ...
- Emscripten教程之连接C++和JavaScript(三)
本文是Emscripten-WebAssembly专栏系列文章之一,更多文章请查看专栏.也可以去作者的博客阅读文章.欢迎加入Wasm和emscripten技术交流群,群聊号码:939206522. E ...
- JavaScript中有三个可以对字符串编码的函数,分别是: escape(),encodeURI(),encodeURIComponent()
JavaScript中有三个可以对字符串编码的函数,分别是: escape,encodeURI,encodeURIComponent,相应3个解码函数:unescape,decodeURI,decod ...
- 【转】SVG与HTML、JavaScript的三种调用方式
原文:https://www.cnblogs.com/guohu/p/5085045.html SVG与HTML.JavaScript的三种调用方式 一.在HTMl中访问SVG的DOM 1 2 3 4 ...
- JS---课程介绍 + JavaScript分三个部分
Web API---课程介绍 DOM: 概念-----能够说出来--理解 作用----记住了----后来理解 回顾JS分几个部分---知道 DOM树---能够说出 ...
- 从ES6重新认识JavaScript设计模式(三): 建造者模式
1 什么是建造者模式? 建造者模式(Builder)是将一个复杂对象的构建层与其表示层相互分离,同样的构建过程可采用不同的表示. 建造者模式的特点是分步构建一个复杂的对象,可以用不同组合或顺序建造出不 ...
- JavaScript 里三个点 ...,可不是省略号啊···
摘要:Three dots ( - ) in JavaScript. 本文分享自华为云社区<JavaScript 里三个点 ... 的用法>,作者: Jerry Wang . Rest P ...
随机推荐
- 几个css的小知识点(一)
1.对于不能确定宽度的div让它水平居中. <div class='father'> <div class='son'>居中</div> </div> ...
- ORA-24010 SMG-3000
参考:http://t.askmaclean.com/thread-528-1-1.html 运行脚本的时候一定要清楚脚本做了什么操作,注意看清脚本的报错. conn / as sysdba@?/rd ...
- C#中日期时间的简单操作
(1).比较2个DateTime的大小 DateTime dt1 = Convert.ToDateTime("2010/11/25 20:53:43"); DateTime dt2 ...
- 大坑!常被忽视又不得不注意的小细节——%I64,%lld与cout(转载)
原地址:http://blog.csdn.net/thunders01/article/details/38879553 刚刚被坑完,OI一年了才知道%I64和%lld有区别(做题会不会太少),lon ...
- Codeforces Round #329 div2
Problem_A(593A): 题意: 给n个单词, 每个单词由小写字母组成, 且长度<=1000. 组成一篇文章的要求是: 所有单词所用字母 <= 2 即最多只能有两个不同的字母. 求 ...
- 在Eclipse中添加添加一些有助于开发的插件
Eclipse不像MyEclipse那样高度的继承了很多插件,Eclipse需要使用什么插件可以自己进行添加,添加tomcatPlugin插件,成功之后你的Eclipse中就会多了几个图标. 参照文章 ...
- Cannot generate SSPI context---MS SQL ERROR
http://www.cnblogs.com/newr2006/archive/2011/08/25/2153253.html Additional error information from SQ ...
- IDEA如何打包可运行jar的一个问题。
转自http://bglmmz.iteye.com/blog/2058785 背景: 有时候,我们会用IDEA来开发一些小工具,需要打成可运行的JAR包:或者某些项目不是WEB应用,纯粹是后台应用,发 ...
- ArcGIS Engine Style文件操作
对于一个GISer来说,地图,符号这些都应该有着比别人更深刻的理解和认识,作为平台软件都会提供一套自己的符号库,符号库里面根据类别和种类进行区分,因为点,线,面的自然存在和固有属性是不肯能让你用面状符 ...
- LoadLibraryEx及发回hmodule的一些细节
LoadLibraryEx可以配合 DONT_RESOLVE_DLL_REFERENCES LOAD_LIBRARY_AS_DATAFILE LOAD_LIBRARY_AS_DATAFILE_EXCL ...