黑马程序员技术交流社区
标题: 【厦门JavaEE就业1期-每日总结】JavaScript高级 [打印本页]
作者: 厦门校区 时间: 2018-5-18 18:24
标题: 【厦门JavaEE就业1期-每日总结】JavaScript高级
同学们，以下是今日任务，以案例为主。今日重点是掌握JS常用的BOM和DOM对象，掌握常用的事件，要求每位同学可以完成以下案例，然后以口语化的方式在评论区提交你的每日总结，谈谈你对今日重点知识的理解!
- 使用JS完成表单的校验
- 使用JS完成表格的隔行换色
- 使用JS完成复选框的全选效果
- 使用JS完成省市联动效果
作者: 许大炮 时间: 2018-5-18 19:52
许剑鸿 webDay04
javascript高级:重点掌握DOM(Document Object Model)及js中常用的事件及内置函数与全局函数(掌握eval)
通过完成4个案列掌握知识点
1 完成注册页面校验(文字提醒):document.getElementByID().innerHTML="HTML代码"(JS的输出)onfocus(获得焦点触发事件)
2 后台表格隔行换色:onload(页面加载触发事件) document.getElementById()
3 后台表格数据全选全不选按钮:onclick(鼠标单击触发事件) document.getElementsByName()
4 省市二级联动:onchange(下拉列表选择触发事件) JS数组的定义应用 document.creatElement(创建元素)document.creatTextNode(创建文本)
appendChild(在最后添加一个节点)
通过今日所学使注册页面更加完善完整
↓↓↓↓
作者: rkko 时间: 2018-5-18 21:24
本帖最后由 rkko 于 2018-5-19 08:41 编辑
杜石苇
HTMLday4总结
今日主要学习了BOM和DOM对象的结合使用
DOM（document Object Model）文档对象模型编程。
重点
增
(创建元素,创建节点)
删
(删除元素,删除节点)
改(
修改标签对象属性
常用的需要修改的属性：
innerHTML属性：修改标签体内容 <span>xxxxxx</span> <div></div> <select></select>
innerHTML : 设置的标签内的html
innerText: 设置标签内容的文本
value属性： 修改value属性值。 input type="text"
src属性： 修改图片的src属性。 <img src=""/>
checked属性：修改单选或多项的默认值。 <input type="radio/checked" checked=""/>
)
查(查询标签对象通过document对象获取，document代表一个html页面)
DOM的4个对象
1. Document:每个载入浏览器的 HTML 文档都会成为 Document 对象。
2. Element:所有的标签都是Element元素
创建元素节点：document.createElement() ;
向元素添加新的子节点，作为最后一个子节点 element.appendChild() (重点)
3. Attribute：标签里面的属性 value 同样可以删除或者改变
4. Event :对象代表事件的状态，比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。
事件通常与函数结合使用，函数不会在事件发生前被执行！
Text：标签中间夹着的内容为text文本 创建文本节点：document.createTextNode()
Node:document、element、attribute、text统称为节点node.(如document.createTextNode() 创建文本节点,同理创建元素节点document.createElement() ,
创建属性节点 document.createAttribute('title');)
常用的事件点击相关的：
单击： onclick
双击： ondblclick
焦点相关的：
聚焦： onfocus
失去焦点： onblur
选项相关的：
改变选项： onchange
鼠标相关的：
鼠标经过： onmouseover
鼠标移除： onmouseout
页面加载相关的：
页面加载： onload
还有一些可以查查api
使用JS完成表单的校验
使用JS完成表格的隔行换色
使用JS完成复选框的全选效果
使用JS完成省市联动效果
一 .表单的校验
使用事件(聚焦事件onfocus和离焦事件onblur),之前使用onsubmit也需要！
使用<span></span>
向页面指定位置写入内容：innerHTML属性(该属性的值存在覆盖现象)
步骤
第一步：确定事件(给出提示信息使用聚焦事件，给出校验结果信息使用离焦事件)并为其绑定函数
第二步：聚焦事件绑定的函数中(获取span给出提示信息)
第三步：离焦事件绑定的函数中(获取用户输入的内容进行判断)
第四步：如果失败，在span位置给出错误提示信息，如果成功，让span内容为空。
二 .隔行换色
确定事件(页面加载事件onload)
获取元素：获取表格(var tab1=document.getElementById("table中设置的ID")),最终是为了获取表格中tabale 里面的行数(长度)。
tab1里面的行数(rows.length)
JS的遍历(for循环)
获取奇数行和偶数行(对遍历中角标对2取余)
设置背景颜色(.style.backgroundColor)
三 .复选框的全选效果
第一步：确定事件(onclick)并为其绑定一个函数(如tips)
第二步：设置函数(获取编号前面的复选框，获取其状态 )
第三步：判断编号前面复选框的状态(如果为选中，获取下面所有的复选框(都设置成同一个名字 用var dis=document.getElementByname("test")获取这个对象数组 )，用遍历的方式并将其状态置为选中checked=true)
第四步：判断编号前面复选框的状态(如果为未选中，获取下面所有的复选框，并将其状态置为未选中,同上方法);
四 省市联动效果.
第一步：确定事件(onchange)并为其绑定一个函数
第二步：创建一个二维数组用于存储省份和城市
第三步：获取用户选择的省份
第四步：遍历二维数组中的省份
第五步：将遍历的省份与用户选择的省份比较
第六步：如果相同，遍历该省份下所有的城市
第七步：创建城市文本节点
第八步：创建option元素节点
第九步：将城市文本节点添加到option元素节点中去
第十步：获取第二个下拉列表，并将option元素节点添加进去
第十一步：每次操作前清空第二个下拉列表的option内容。
今日感想,JS脚本不会报错 有时候少了个引号或者逗号写错 还是大小写写错都不好找,最好写一点运行试试看,用用alert()弹出看看哪里不能执行 就知道哪里有问题
今日用到的单词
onfocus：聚焦
onblur：离焦
onmouseover:鼠标移入
onmouseout:鼠标移出
attribute：属性
node：节点
document:文档
element：元素
textNode：文本节点
append：追加
作者: 六道的骸6 时间: 2018-5-18 21:46
张裕
今天主要学了JS的一些方法
JS的输出方法 通过ID获取元素对象 调用 innerHTML方法输出数据
document.getElementByid("").innerHTML="输出的内容"
document.write("")
JS的一些主要事件(通过事件来触发函数)
onfocus: 获取焦点
onblur: 失去焦点
onsubmit:提交的时候
onload:页面加载
onclick:点击
onchange:下拉列表的改变事件
DOM对象(DOM概述:Document Object Moder 文档对象模型)
DOM概述:Document Object Moder 文档对象模型
html文档 被加载到内存中形成树状结构(整个的树结构称为document)
所有的标签对象可以称为Element对象
标签的属性称为 Attribute 例如(href)
标签内的文本称为 Text
所有的对象可以统称为Node(类似java的Object)
使用方法太多可查询API
省市联动
获取市元素对象 通过onchange事件的value返回值来判断是哪个省 在通过二维数组获取元素 创建option属性 创建文本字节写入option属性中 在添加到市对象中
作者: seilye 时间: 2018-5-18 21:47
叶身辉:
今天学习了JS中DOM,主要作用是将HTML文档加载到内存形成一个树形结构从而可以操作树形结构来改变HTML文档,学习了JS的输出innerHTML的方法和DOM中的创建元素和文档也可以输出.
还学习了JS中的常用的事件JS中常用的事件
常用事件:
onfocus:获得焦点时触发该事件
onblur:失去焦点触发该事件
onsubmit:表单提交的时候触发
onload : 页面加载事件
onclick: 点击事件
onchange : 下拉列表改变事件
ondblclick: 双击某个元素的事件
键盘操作事件:
onkeydown : 某个键盘的键被按下
onkeyup : 某个键盘的键被松开
onkeypress : 某个键盘的键被按下或按住
鼠标操作事件：
onmousemove : 鼠标被移动
onmouseout ;鼠标从某元素移开
onmouseover : 鼠标被移到某元素之上
onmousedown : 某个鼠标按键被按下
onmouseup : 某个鼠标按键被松开
DOM的常用的增删改查方法:
获得元素
document.getElementById(); -- 通过ID获得元素
document.getElementsByName(); -- 通过name属性获得元素
document.getElementsByTagName(); -- 通过标签名获得元素
创建元素
document.createElement(); -- 创建元素
document.createTextNode(); -- 创建文本
添加节点
element.appendChild(); -- 在最后添加一个节点
element.insertBefore(); -- 在某个元素之前插入
删除节点
element.removeChild(); -- 删除元素
以及练习了4个案例,需要了解的知识点有:
<tbody>用于对 HTML 表格中的主体内容进行分组,
tBodies[] 代表<tbody>的其中一块
rows,代表行
Checked代表点击确认
style,Style 对象代表一个单独的样式声明。
backgroundColor,设置背景颜色
checkbox,代表一个 HTML 表单中的 一个选择框。
<table>表格
checked 属性设置或返回 checkbox 是否应被选中。
Options[]<option>下拉框的选项标签
onchange是下拉框
作者: 13163997058 时间: 2018-5-18 21:47
王刘锁
先来记录一下今天的重中之重:DOM文档对象模型 作用是把HTML文档加载进内存然后把HTML形成一个树状的结构
形式更直观方便查找和操作 然后用一些编程语言如JS来对HTML元素进行增删改查的操作 在这个树状的结构中最
底层的根节点(root)HTML中的每个内容都是节点比如元素节点属性节点 文本节点等
DOM常用方法:document对象是window对象的一部分 所以在调用方法时可以省略window
document.getElementById() 通过元素的id属性获取元素对象
.getElementsByname() 通过name属性获取所有的该name属性的元素对象
.getElementByTagName() 通过标签属性获取元素对象
下面是一些创建元素的方法
document.createElement("元素名") 创建一个新的元素
.createTextNode("文本内容") 根据文本内容创建一个文本对象
添加节点的方法:
(元素名)element.appendChild() 在该元素上添加一个节点 括号内可以是元素对象 文档对象...
.insertBefore() 在该元素前面添加节点 .removeChild() 删除该元素上的某个节点
接下来是数组的定义方式:new Array() new Array(数组长度) new Array(元素1,元素2,...)
下面是上课的时候记的一些个人觉得比较难记的内容:
innerHTML是属性 document.getElementById("id").innerHTML="HTML代码标签" 可以向HTML标签元素中写标签代
码也可以写内容
write是方法 document.write("")写内容到文档页面
onfouce 获得焦点 onblur 失去焦点 onsubmit 提交 onchange 下拉列表该表事件
onload 页面加载 onclick 点击 oondblclick 双击
作者: 铁木啊童臂 时间: 2018-5-18 21:47
汪志阳:
今天主要还是学习JS,首先是js的输出document.getElementByld("").innerHTML="";
后面输出的内容可以说HTML的代码,包括标签.
然后是主要的事件:焦点触发事件onfocus,对应的失去焦点的事件onblur,表单中的提交事件onsubmit
页面加载事件onload,点击事件onclick,下拉列表事件onchange.
接下来是DOM,dom是文档对象模型,是将一个HTML的文档加载到内存形成一个树形结构,
从而操作树形结构就可以改变HTML的样子.节点node>document>element>test>attribute
下面是一些重要点的案例的随堂笔记:
隔行换色表格案例:
获得表格控制权-行数-遍历行数-判断
tab1.row[i].style.backgroundcolor
首行不换色:表格中的tbody和 thead标签
thead包围头,td换位th(默认加粗居中)tbody包围身体部分
获得tbody中的所有行:tab1.tbodyies[0].rows.length;
(一个表格中可以有多个tbody),遍历表格并判断
省市联动案例:
onchange事件,获得所选择的省份的信息
省:每个省创建value值,通过value获得省(this.value)
根据省份获得对应数组中市,创建二维数组
var arr=new Array(省个数)
arr[0]=new arr();
遍历外循环省,获得第一个数组索引
在第二数组创建元素:var x;
创建文本节点:y=(值为内层循环的值arr[i][j])
y添加到x;x添加到省对象内
然后就是一些案例中运用到的DOM常用方法:
document.getElementById()通过ID获得元素
document.getElementsByName()name属性获得元素
document.createElement()创建元素
document.createTextNode()创建文本
element.appendChild()在最后添加一个节点
作者: LittleSky 时间: 2018-5-18 21:48
常小天
今天学习了javaScript中的DOM部分。DOM的功能是当HTML文档加载到内存形成树状结构，通过操作树形结构来改变HTML的样子。一开始学习的时候我疑惑的问题是：DOM的作用是对HTML进行增删改查的操作，那为什么要单独搞出来一个DOM进行操作而不直接修改HTML文档呢？随着学习的进一步深入，很快就发现DOM的真正价值在于它对HTML的操作是一种动态的操作，它不同于直接修改HTML文档的地方就在于直接修改是一种写死的东西，而DOM进行的操作是通过对网页页面的动作进行响应进而修改HTML文档内容的。理解到这儿，也就能比较顺利的理解和记忆DOM的开发步骤了。既然它是通过对页面动作进行响应，再通过设定好的动作进行修改文档，那必然少不了外界动作和内部响应两个步骤，这就与上节课程的内容联系起来了，创建触发事件，调用函数，获取对象，通过对象调用方法修改文档。实际上今天的内容在逻辑上并不比昨天多出什么来，只是新掌握一些触发事件和DOM对象的方法，新学的内容中重点一个是输出方法：
document.getElementById(“”).innerHTML=”HTML的代码”；
一个是创建和添加元素：
document.createElement()；
document.createTextNode()；
还有一些获得对象的方法最近用的也是很频繁，这里也就不多赘述了。此外还有一个今天接触较多的内容是获取对象为数组的情况：获取列表对象再获取它的行数；获取下拉列表对象再获取它的内容；通过名称获取同名对象的情况。注意区分这几个的获取方式，前两个是通过获取对象的子节点来获取到一个数组，而后者是通过名称获取由多个同名元素组成的数组。
作者: Yanmo_ 时间: 2018-5-18 21:48
颜琳琳
今天学习了Js的输出的两种方式,主要的方式是document.getElementById(“”).innerHTML=”HTML的代码”;document.write(“”)该方式了解即可.接着学习了Js中常用的事件:1. onclick:单击事件, 2. ondblclick:双击事件, 3. onchange:下拉列表事件, 4. onfocus:获取焦点事件, 5. onblur:失去焦点事件, 6.onsubmit: 表单提交时触发, 7.onload:页面加载事件,这几个常用事件需记住;
键盘操作事件:1. onkeydown:键盘的某个键被按下, 2.onkeyup:键盘某个键被松开,3.onkeypress:键盘某个键被按下或者按住;
鼠标操作事件:1. onmousedown:鼠标被按下, 2.onmouseup:鼠标被松开, 3. onmousemove: 鼠标被移动, 4.onmoverout:鼠标被移开,5. onmoverover:鼠标被移动到某个位置上面
JS开发步骤:1. 创建HTML页面, 2.有触发事件, 3.用事件触发函数, 4.在文本框中添加内容
DOM指的是文档对象模型,其中常用的方法有:
1.获取方法:
1.document.getElenmentById(“”):通过ID获取元素
2.document.getElenmentByName(“”):通过name属性获取元素(获取的是集合对象)
3.document.getElenmentByTagName(“”):获取标签元素
2.创建方法:
1.document.createElenment(“”):创建元素
2.document.createTextNode(“”):创建文档
3.添加节点:
1.Elenment.appendChild(); 在最后一行添加节点
2.elenment.insertBefore(): 在某个元素之前插入
4.删除节点:
1.document.removeChild():删除元素(删除的是其子元素)
最后学了JS的内置对象和全局对象:
内置对象和java差不多:
1.数组创建: var arr=new Array(); var arr=new Array(数组长度); var arr=new Array(元素1,元素2,....);(该元素可为任意类型)
2.boolean: tostring():将逻辑转为字符串并返回结果
3.Date: 主要方法 getTime() 返回1970年1月1 日至今的毫秒值
4.String对象: 创建: var str=new String(“”); var str=””;(方法和java中的一样)
5.Math对象:常用方法: Math.PI 获取pi值, Math.random():获取0-1之间随机数, Math.round:获取四舍五入的值
全局对象:
主要的方法:
parseInt():解析一个字符串并返回int类型
ParseFloat():解析一个字符串并返回float类型
解码:(了解即可)
decodeURL():解码某个编码的URL
decodeURLComponent():解码某个编码的URL组件
编码:
encodeURL():把字符串编码成URL
encodeULIComponent():把字符串编码成URL组件
eval函数:将一段内容当成是JS的代码执行
作者: 渣.. 时间: 2018-5-18 21:49
柯威龙
今天学习了js的DOM,DOM跟BOM不一样 DOM是一种文档对象的模型.只知道是将文档加载到内存形成
一个树状结构.首先学了js的输出有两种方式一种是doocument.getElementBYid.innerHTML
等于HTML的代码,另外一种的话比较不常用 是覆盖加载后页面的内容.感觉今天主要是学习了很多
的DOM方法以及对象.DOM的方法只要是有获取,创建,添加,删除,也就是增删改查.获取的话有
三种 一种是通过id获取元素.一种是通过name获取元素.还有是通过标签名.获取单词我记得
document.getElementById()这是通过id获取 byname是通过name获取的.创建元素的话也有两种
方法 创建文本与创建元素.添加节点也是两种方法,一种是在最后添加一个节点 一种是在某个元素
插入节点.添加节点这个知识点还没搞明白是什么意思.删除就只有一种删除元素.另外还有很多事件
事件都以on开头,例如:onsubmit这是表单提交时候触发的.onclick这是点击事件 onload这是页面
加载事件.还有很多事件,单词没有记住.还有两种键盘操作事件和鼠标操作事件.最最主要的是步骤
对开发步骤的理解是比如你被人割了一刀.(创建html文档),自己处理伤口的话很麻烦,
那我们就去医院(触发函数)到了医院以后有专门的医护人员帮你包扎处理伤口(运行函数,在html区域写入提示内容)
这是我对今天jsDOM的总结.
作者: 李志勇 时间: 2018-5-18 21:49
李志勇:
javascript
主要js常用事件:
onload 页面加载事件
onclick 单击事件
ondblclick 双击事件
onsubmit 表单提交事件
onfocus 获得聚焦事件
onblur 失去聚焦事件
onkeydown 某个键盘的健被按下
onkeyup 某个键盘的键被松开
onkeypress 某个键盘的键被按下或按住
onmouseout 鼠标从某元素移开
onmousemove 鼠标被移动
onmouseover 鼠标被移动某个元素之上
onmousedown 某个鼠标键被按下
onmouseup 某个鼠标键被松开
Dom 文档对象模型
学习一些方法 用来操作HTML树形结构的增删改查
通过今天的学习进一步的改进了以前案例 也更灵活更精确的做判断
作者: q55w66 时间: 2018-5-18 21:49
王清松
今日主菜：DOM
个人理解：类似于Java的反射，在程序运行时，动态地获取程序的属性和值，并对其进行修改
今日配菜：扩充事件和方法容量
onsubmit 提交事件
onclick 点击事件
ondblclick 点击事件 dbl(double 双倍)
其他见W3S文档
<head>
</head>
<body>
<thead></thead>
<tbody></tbody>
</body>
如果把<html></html>比喻成人.那么
<head></head>相当于人的头部
<body></body>相当于人的身体
而
<thead></thead>
<tbody></tbody>
相当于又把身体分为上半身和下半身
<thead></thead>上半身（有加粗和居中效果）
<tbody></tbody>下半身
树状结构
节点
{
标签（元素） 前面带<符号，与<相邻
{
创建
document.createElement(标签名)
添加子节点
（元素对象）.appendChild(结点)
添加属性
（元素对象）.setAttributeNode(属性对象)
}
属性 被<>包围的，但是不能与<相邻
{
创建
document.createAttribute(属性名)
设置属性值一
（属性对象）.nodeValue="(属性值)"
设置属性值二(有则覆盖，无则创建，即也可以用于创建元素对象并赋值)
（元素对象）.setAttribute("属性名称","属性值")
}
文本
{
创建
document.createTextNode("（文本内容）")
}
}
作者: 厦门黑马王子 时间: 2018-5-18 21:50
郑雪平
今天主要学习了四个方面的知识点,1.使用JS进行表单提示信息的输入和校验;2.如何进行隔行换色;3.如何完成复选框的全选和不全选;4.如何进行下拉数据的省市联动.
JAVA语言哪里代码写错它会给于提示,让你一目了然,JS不会,所以有时只是出现一个小问题你也要查找老半天. 像下面是省市联动的一段代码中有两个options,一个没注意给写成大写的O了,这样就不行! function changeCity(value){
var city=document.getElementById("city");
for(var i=city.Options.length-1;i>0;i--){
city.options[i]=null;
}
类似的小问题还有,比如下面是全选和全不选中的一段代码,代码中标记红色的那个括号,如果少了那个括号即使点击了最上方的小方框,下面一整排的方框也不会被勾选上.而这种错误往往是很难被察觉发现的,需要反复看好几遍才有可能查找出来.
<thead>
<tr>
<th><input type="checkbox" name="selectAll" id="selectAll" onclick="checkAll()" /></th>
<th>分类的ID</th>
<th>分类的名称</th>
<th>分类的描述</th>
<th>操作</th>
</tr>
作者: lnongge 时间: 2018-5-18 21:52
16weisong
今天主要学了js常见事件,js的DOM,和4个案例使用JS完成表单的校验,使用JS完成表格的隔行换色,使用JS完成复选框的全选效果使用JS完成省市联动效果.案例不难能敲出来即可,DOM比较重要,通过DOM我们可以对HTML中的任意元素,在任何位置进行增删查改,且在后面的学习xmL也会用到DOM.DOM(着重掌握,不会多查查API即可)
作者: 小故事 时间: 2018-5-18 21:54
谢洪彬:
javaScript高级之BOM:
BOM :文档对象模型
定义: 将一个HTML文件加载到内存,形成一个树型结构(可以进行增删该查)
Js输出分为两种: (输出通常来说就是往HTML页面上写东西)
innerHTML
white
事件可以去查API
Js的常用事件
onfocus : 获得焦点
onblur : 失去焦点
onsubmit:提交的时候
onchange: 下拉列表事件
ondblclick: 双击事件
键盘操作事件:
鼠标操作事件:
表格标签:
Thead :头 使用<th> 加粗 ,居中
Tbody :体
Js中树形概述
整个文档也称document
Bode :节点
Element:所有标签(元素)
Test:所有文档
创建节点
Document.createElenment() --创建元素
Document.createTextNode() --创建文档
添加节点:
Element.apppendChild -- 默认在最后添加节点
Element.insertBefore -在某个位置插入
删除节点:
Element.removeChild --删除某个节点
全局对象,就是拿到其中的方法在调用
全局函数:
解码
编码
Eval函数:将一段内容当成js文件来执行
当出现BUG是一般很难查找,这是我们可以利用一个alert()弹窗进行边注释变运行,这样可以很快的找到问题所出现的位置.
作者: 5119 时间: 2018-5-18 21:54
游荣辉
今天还是学习js 只是今天的重点是DOM,
js的输出可以拿个对象.innerHTML= 就可以写一些想输出的语句,还可以加上HTML的标签
还新学了几个事件:
onfocus 获得焦点事件
onblur 失去焦点事件
onload 页面加载事件
onsubmit 表单提交事件
onchange 下拉列表事件
还有些键盘和鼠标的事件我就不一一写出来了,可以去查查api
写这个有一个开发的步骤
【步骤一】创建一个html文档
【步骤二】在要去校验的文本框上添加事件.
【步骤三】触发函数
【步骤四】在函数中输入你想要的效果
DOM 就是文档对象模型,什么是文档对象模型? 就是将HTML加载到内存中形成一个树状的样子,然后操作,
还有DOM的一下常用的方法
获取的方法 doucument.getElementByld("放id名") 这是常用的
创建的方法 document.createElement("放创建的元素") 这个是创建元素
document.createTextNode("放元素里的属性") 这个是创建文本
这两个基本是一起使用的
添加节点的方法 element.appendChild();
删除节点的方法 element.removeChild(); 没学我也不知道怎么用T.T
作者: 偏离X 时间: 2018-5-18 21:56
郭明杰
JS有两种输出方式:第一种 getElementById("").innerHTML="里面写HTML代码"
第二种writer("") 第二种方法会覆盖加载后页面的内容,所以不常用
[JS的事件](比较常用的)
*onfocus :获得焦点
*onblur : 失去焦点
*onsubmit: 提交的时候
*onload: 页面加载的时候
*onchange:下拉列表改变事件
*ondblclick:双击某个元素的事件
键盘操作事件
*onkeydowm:键盘某个键被按下
*onkeyup: 某个键被松开
*onkeypress:键盘敲击
[使用JS获得表格的行数]
*先通过ID获得控制的表格元素 *var tab1=document.getElementById("tab1");
再获取表格的行数:*var len=tab1.rows.length;
[表格的thead跟tbody] <thead>定义表格标题 <tbody>定义表格
DOM全名 文档操作模型 (Document Object Model)
*decodeURI():解码
*decodeURIComponent()
*encodeURI():编码
*encodeURIComponent()
JS有很多内置对象 方法,用法大致与JAVA相同
****补充
createElement()创建元素
createTextNode()创建文本元素
作者: sts 时间: 2018-5-18 21:57
没人?占个楼先
作者: 2902 时间: 2018-5-18 21:58
张清才 5-18 js
一般步骤;1.确定事件; 通过事件触发函数;在<script>标签内编写函数,
在函数主体上的代码实现我们想要的效果.
Dom 文档对象模型,dom常见的方法有获得元素(通过id;名字;标签获得)
获得后我们可以操作元素; 创建元素document.createElement();添加元素;
和删除元素,删除要通过上一级的元素对下一级的元素进行删除;
常见的事件有:
onfocus:获得焦点时触发该事件 onblur:失去焦点触发该事件
onsubmit:表单提交的时候触发 onload : 页面加载事件
onclick: 点击事件 onchange : 下拉列表改变事件
ondblclick: 双击某个元素的事件 onmousemove : 鼠标被移动
onmouseout ;鼠标从某元素移开 onmouseover : 鼠标被移到某元素之上
onmousedown : 某个鼠标按键被按下 onmouseup : 某个鼠标按键被松开
onkeydown : 某个键盘的键被按下 onkeyup : 某个键盘的键被松开
onkeypress : 某个键盘的键被按下或按住
作者: 厦门陈强 时间: 2018-5-18 21:58
陈强
高级JS的一天,其实今天的案例都是在之前做的案例上增加一些新的功能;
1,表单中获得焦点和失去焦点的校验中,使用到onfocus 和 onblur ,这里需要注意传入两个参数,一个是ID,一个是content的内容,最后在函数中通过innerHTML写入即可
2,表单隔行换色案例中,使用到的是onload ,这里需要注意的是,给背景色赋值时,因为背景色是在style中的,所以赋值语句中千万别少了style
3,复选框的全选与全不选案例,逻辑相对就简单了,只要根据一个主框的checked值来对副框的值进行设定即可
4,省市联动案例中,相对其他案例会比较复杂一点,这里用到了一个onchange,就是下拉列表改变的时间,
该案例复杂的原因是因为根据省的value值设置完市的内容后,还需要在重新选择省份时,对市下拉框中的信息进行清空,避免重复添加.然后在对市的下拉框中添加信息时,需要注意先添加<option>标签,再将数组中的内容添加到标签中,最后才是将<option>标签添加到市所对应的<select>中.
作者: it小白001 时间: 2018-5-18 21:59
第4天总结:
js输出,js常用事件,一些dom常用的方法
一,Js输出:
输出有两种方法innerHTML,和write()方法
基本使用innerHTML
首先要确定往哪里输出,然后用document.getElementById()获取要输出的元素对象,调用方法就行了
二:Js常用事件
同样首先要确定什么条件触发然后用对应的事件,
onfocus:获得焦点时触发该事件
onblur:失去焦点触发该事件
onsubmit:表单提交的时候触发
onload : 页面加载事件
onclick: 点击事件
onchange : 下拉列表改变事件
ondblclick: 双击某个元素的事件
三:dom一些常用方法
element.removeChild(); -- 删除元素
element.insertBefore(); -- 在某个元素之前插入
element.appendChild(); -- 在最后添加一个节点
document.createTextNode(); -- 创建文本
document.createElement(); -- 创建元素
document.getElementsByTagName(); -- 通过标签名获得元素
document.getElementsByName(); -- 通过name属性获得元素
document.getElementById(); -- 通过ID获得元素
作者: 376091692 时间: 2018-5-18 22:00
凌辉:
今天学习了js的输出innerHTML,用于获取元素内容
学习了很多js常用时间,今天主要用了onfocus:获得焦点时触发该事件,
onblur:失去焦点触发该事件,onsubmit:表单提交的时候触发,
onload : 页面加载事件,onclick: 点击事件,onchange : 下拉列表改变事件
还学习了DOM,DOM是文档对象模型
将一个HTML的文档加载到内存形成一个树形结构,
从而操作树形结构就可以改变HTML的样子
DOM主要用法可以获得元素,创建元素,添加节点,删除节点
作者: Eclipse启动 时间: 2018-5-18 22:01
郑阳阳
今天学习了DOM,是JS中重要的部分.
DOM是文档对象模型,当中常用的方法有:
获取元素document.getElementById()通过id获取元素
document.getElementsByName() 通过name获得元素
document.getElementsByTagName()通过标签名获得元素
创建元素document.createElement()创建元素;document.createTextNode()创建文本.
添加元素element.appendChild()在element后添加一个节点;element.insertBefore()在某个元素之前添加
删除元素element.removeChild()删除元素.
也就是增删改查.
S中的常用事件:
onfocus获得焦点触发 (注册校验案例)
onblur失去焦点触发 (注册校验案例)
onsubmi表单提交触发 (注册校验案例)
onload页面加载触发 (隔行变色案例)
onclick单击触发 (复选框案例)
onchange下拉列表改变触发(省市二级联动案例)
ondblclick双击触发,还有键盘操作事件和鼠标操作事件.
JS的输出:
innerHTML="HTML的代码";(属性)
write()(方法,不常用)
JS的内置对象:
1.Array数组
new Array();
new Array(长度);
new Array(元素1,元素2...);
2.Boolean布尔
new Boolean(value) 构造函数;
Boolean(value) 转换函数;
3.Date处理日期 new Date()
4.Math执行数学任务 通过把Math作为对象使用
5.Number 原始数值
new Number(value);
Number(value);
6.String 处理文本
new String(s);
String(s);
JS全局函数:
今天需要掌握的 eval()可计算某个字符串,并执行其中的的JavaScript代码
decodeURI和decodeURIComponent都是对URI进行解码
encodeURI和encodeURIComponent把字符串编码为URI
作者: w849027724 时间: 2018-5-18 22:01
吴利君
今天学习了js的一些很实用的知识，我们可以通过今天学习的几个案例进行总结。
首先是今天的第一个案例，表单的校验，这个案例很经典，有很多一些基础的项目都会使用这个，比如后面用户的注册，创建新的文件资料都需要用到非空的验证，或者有特殊含义的东西，比如电话号码，邮政编码等等，这些都是不能随便填的，所以我们可以使用今天的案例，通过doucment对象来获取我们需要的数据，然后通过正则获取其他的规则进行对比，然后来限制。不过后面的JQuery有提供很多这种规则，很多时候直接使用就可以，但是那些规则有的是不全的，你需要自己重新定义。
我个人觉得第一个案例需要注意的知识就是三个事件的使用方式，onsubmit,onfocus,onblar，我们可以通过这些事件结合一下css样式可以做出很多不同的特效出来，比如使用onfocus和onblar结合css样式可以做出移近变色放大缩小等特性，如果使用HTML5的动画，淡入淡出等效果，当然，如果使用后面的鼠标监听事件效果会更好。
然后就是js的隔行变色，这个案例实现其实并不难，主要的知识点事可以通过table.rows来获取这个表格的所有的行，然后就可以直接对这些行进行赋值，当然这种事选择全部的，我们可以单独选择table的头部或者身体然后进行属性设置，代码为tab1.tBodies和tab1.tHead，只有这个关键点知道了后面的都是java的常规操作了！
第三个案例是复选框，这个案例也很经典，有很多地方可以使用，比如问卷调查等等，这里的主要知识是checkbox的checked这个属性，每当我们选中的时候，这个属性的值就会变成true，这就很关键了！我们可以通过这个属性来完成全选，单选，或者多选，单选很简单，多选也是很简单，多选只有设置一个开关，然后点击这个开关，我们就把某个容器里面所有的checkbox标签选中然后进行赋值为false，或者true，这样就可以实现。如果是多选的话，我们可以和多选一样，全选所有的checkbox标签然后进行便利循环，把所有checked为true或者为false的checkbox挑出来，然后把数值传递给后台，这样就完成了多选的功能。
第四个案例是省级联动，这个也是很实用的案例，不过网上有很多这种插件，而且自己写的话，全国数据太多，所以不推荐自己写省级的，一些小的多选可以使用，这种大工作量的直接使用现成的岂不快哉？当然，写这段案例，我觉得主要的知识是二维数组的定义，虽然java里面使用的很熟练了，但是js里面还是得多练练，两者差不多，不过js是弱类的脚本语言，所以写的会随便一点，其次是元素的创建和文本的创建以及节点的插入，这个很好用，比如我们可以对我们的容器进行多个内容插入却，只需要一个for循环，多爽啊！还有就是有的时候如果使用ajax从后台获取多个数据，比如数据字典，也可以使用这个方法进行遍历输出。
总之，今天学习的东西内容不多，但是很适合练手，多敲敲会加深对js获取数据的流程的理解，也理解js设计模式，对后面学习JQuery有很大帮助。
最后，js代码敲一行测一下永远是对的！不然js出错真的太难找，使用alert一直调，难受。
作者: Nevermo 时间: 2018-5-18 22:01
许煜 每日总结
HTML解决问题基本遵循以下四个步骤:
1建立HTML文档
2设置触发事件
3 调用相应函数
4 通过函数实现对HTMl的对象和属性进行修改
(今天四个案例全部遵循以上四句话)
案例1:在文本框后面实现对输入内容的提示及判定
知识点:
触发事件:onfocus:获得焦点(单击文本框 文本框出现光标的时候触发) onblur失去焦点(光标离开文本框的时候触发)
<span>和div相比span不会自动换行,默认在同一行</span>
输出流 element.innerHTML=”HTML代码” (属性)
document.write( ) --document类的write方法
案例2:斑马色表格
知识点
<thead>表头主标签<th> 表头子标签 </th> </thead>
<tbody>表单标签<tbody>
table.tbodies[i].rows(cols) 行属性 (列属性)
案例3:添加元素(与案例四合并讲)
案例4:省市关联案例
知识点:
添加元素流程
1 var ele=document.createelement(标签) 创建新元素标签
2 var txt=document.createtextnode(文本) 创建标签内容
3 ele.appendchild(文本) 为标签添加内容
4 ELE.appendchild(ele) 在ELE元素节点后面添加元素ele
步骤概括
1 创建元素 2在节点后面添加元素
省市联动触发事件 onchange(下拉列表触发)
创建二维数组 一维内容维省份 二维内容为省包含的市
for(var i=object.options.length;i>0;i--){
object.options[i]=null;
}
清除每次触发事件加载的市
for(var i=0;i<arr.length;i++){
if(value==i){
for(var j=0;j<arr[i].length;j++){
var ele=document.createElement("option");
var wep=document.createTextNode(arr[i][j]);
ele.appendChild(wep);
object.appendChild(ele);
}
}
}
根据触发事件的省创建对应市的表单
作者: chenyelong 时间: 2018-5-18 22:01
今天的学习内容中:用<Span>+innerHTML给表单框中显示提示内容,用<table>.rows.bgcolor给表格隔行换色,用<checkbox>.checked=boolean对复选框进行全选和全不选,这三个案例比较掌握得比较好,最后省市二级联动的那个案例感觉转了好多弯,没太弄懂,回去了再好好敲一遍.
作者: 一梦 时间: 2018-5-18 22:01
陈世彪:
今天学习了JavaScript
使用注册校验的时候我们在使用函数体之前要先使用,js中的事件
js中常用的事件有
onfocus:获得焦点时触发该事件
onblur:失去焦点触发该事件
onsubmit:表单提交的时候触发
onload : 页面加载事件
onclick: 点击事件
onchange : 下拉列表改变事件
在使用js中的各行换色时,有两种方法.
一种是获取行数,取余2,得到奇数或者偶数,第一行标题不设定的话,for循环时要i要设为1,跳过第一行
第二种方法,加thead和tbody标签,tbody把要变色的行包裹起来,调用时 tab1.tBodies[0].rows[i].style.backgroundColor = "red";
使用js完成复选框全选时,需要判断复选框为true还是false,如果为true就遍历需要全选的,为他们赋值true.
如果为false就遍历需要全选的,为他们赋值false
使用JS完成省市联动效果时,要先将市里的东西清空掉,再往里添加新的市名称,通过value给省赋值,当省的值和数组中的市一致时
就遍历数组中的市的值,依次添加到下拉状态栏中
document.createElement("option"); -- 先创建元素
document.createTextNode(); -- 再创建文本
element.appendChild(); -- 在最后添加一个节点
作者: avip0000 时间: 2018-5-18 22:02
表单校验的第二种方式:
1.在文本框中添加获取焦点事件 onfocus.
2.触发一个函数 onfocus = "spis('id名称','需要提示的文字内容')"
3.调用函数function spis(id,content),参数记得传入id号跟内容
4.通过innerHTML往对应的ID元素内添加内容
表格隔行换色
1.确认触发事件,即浏览器加载事件 onload,并触发函数
2.定义一个函数如:method();
3.调用函数
4.获取表格的控制权(tab1=document.getElementById("xxx")),再获取表格所有的行数(tab1.rows.length)
5.遍历行数,获取每一行,对每一个进行判断,并更改表格中这行的背景颜色 (tab1.rows[i]).style.......
复选框的全选和全不选
1.需要点击复选框,所以为点击事件 onclick,并触发一个函数
2.调用函数
3.获取全选复选框和其它所有待选复选框(name的值都一样)的元素控制权
4.判断全选复选框是否为被选中状态,如果checked==true (即被选中) 遍历所有的待选复选框,
将每一个的checked变为true
如果没被选中 遍历所有的待选复选框
将每一个checked变为false
作者: 沅瞻 时间: 2018-5-18 22:02
詹源
今天学习了DOM.
DOM是文档对象模型,行为是将一个HTML文档加载到内存,形成一个树形结构,如下
文档
↓html
元素head 元素body
↓ ↓
元素title 属性href←元素a 元素h1
↓ ↓ ↓
文本 文档标题 文本 "链接" 文本"标题"
操作树形结构就可以改版HTML的样子
DOM有获取,创建元素的方法.可以添加删除节点
作者: 滴滴eclipse启动 时间: 2018-5-18 22:17
江某人:
js的输出:
1.document.getElementById(“(<sp>里的id)”).innerHTML=”HTML的代码”;("里面可以写标签")
<input onfocus="方法名"> <sp id="">
2.document.write(“”); (这种方式用的较少)
js的触发事件:
onfocus :获得焦点.
onblur :失去焦点.
onsubmit:提交的时候.
onchange:下拉列表改变事件.
ondblclick:双击某个元素的事件.
onload :某个页面或图像被完成加载
onclick:鼠标点击某个对象
<table align="center"> 居中
循环获取表格行数:
获得到控制的表格元素:
var tab1 = document.getElementById(“tab1”);
var len = tab1.rows.length;
document.getElementById(); -- 通过ID获得元素.
document.getElementsByName(); -- 通过name属性获得元素.
document.getElementsByTagName(); -- 通过标签名获得元素.
创建元素：
document.createElement(); -- 创建元素
document.createTextNode(); -- 创建文本
添加节点：
element.appendChild(); -- 在最后添加一个节点.
element.insertBefore(); -- 在某个元素之前插入.
删除节点：
element.removeChild(); -- 删除元素
作者: 名字被人注册了 时间: 2018-5-18 22:24
刘文峰
2018年5月18日,晴.今天是学习JavaScript的第二天,主要学习JavaScript的文档对象模型Dom.Dom的作用是对html文件进行增删改查,我们可以通过id,name,标签名获得元素对象,然后进行其他操作,例如父元素可以删除子元素,可以创建新元素和文本作为子元素写入父元素中,从而对html进行更改.
今天还学了一些事件:
onload :页面加载事件
onclick: 鼠标单击事件;
ondblclick: 鼠标双击事件;
onsubmit : 上传表单事件,需要获得一个布尔值判断是否上传
onchange : 下拉列表发生改变事件
onfocus : 获取焦点事件
onblur :失去焦点事件
其他还有鼠标移动,按下,键盘按下,抬起等事件
此外,还学了一些JavaScript的内置对象和内置函数,例如string ,Array,Date等,用法与java相似,但由于JavaScript是弱类型对象语言,所以所有的类型都用var来接收.
作者: 光宇 时间: 2018-5-18 22:43
侯玉林
今天学习了js高级,主要是js中的dom,dom也叫文档对象模型,浏览器在接收到数据库模型后,先将html文件
导入内存中,让后生成树状模型对象document,通过document我们可以对html文档的各种操作.
js技术由js基础语言,dom,bom组成,通过今天的知识,我们对整个js的大概架构有了一个大概的了解.
js技术以js语言为基础,借助bom浏览器本地的对象,实现了对dom的各种操作,dom的js的最终实现目的,
所有的js技术都是为在dom实现各种各样功能而存在的.
作者: finfin12 时间: 2018-5-18 23:14
张育辉
学习了常用的事件
onfocus:获得焦点时触发该事件,
onblur:失去焦点触发该事件
onchange : 下拉列表改变事件,
ondblclick: 双击某个元素的事件
onmouseover : 鼠标被移到某元素之上
onmouseout ;鼠标从某元素移开
还学习了DOM,文档对象模型
document.getElementsByName(); 通过name属性获得元素,返回是一个数组;
需要遍历数组拿到每一个元数,有索引,
添加节点
function addEment(){
var city = document.getElementById("city"); //获取添加地方的id
var liel = document.createElement("li"); //拼接成了一个元数,<li></li>
var text = document.createTextNode("深圳");//拼接一个文本
liel.appendChild(text); 把文本添加到元数中 <li>深圳</li>
city.appendChild(liel); 把属性添加到指定的地方,
}
作者: COLDER 时间: 2018-5-18 23:21
本帖最后由 COLDER 于 2018-10-18 19:12 编辑
Day04
今天学习内容分为以下几点:
1.表单验证案例:学习表单验证的另外一种方式,利用<span>块,onfocus(获得焦点事件),onblur(失去焦点事件),
onsubmit(提交事件),JS的写入方式(document.getElementById("").inner = "HTML的代码"),判断条件来编写函数方法实现.
2.隔行换色与全选案例:
隔行换色:通过获取表格行数,然后遍历表格行数,判断奇偶数来实现不同颜色.
全选:利用onclick(点击事件)加上checked默认值,判断按钮状态(boolean),如果全选则遍历每一行来修改按钮状态.
3.省市联动案例:通过for循环嵌套,二维数组,onchange,判断条件来实现.
-
day04.png
(69.51 KB, 下载次数: 11)
作者: 追风筝的人哇 时间: 2018-5-18 23:29
康元中
今天学习 Dom 完成对html 文本的的增删该查
学习了四个案列
1 js完成省市联动 -- 步骤: 确定onchange事件--触动函数-定义代参函数-- 定义二元数组 --获取要操作元素的控制权
遍历二元数组得到每个一元数组与value 值判断 - 符合就遍历一元数组 --创造文本写入值 --然后进行添加值....
2 js完成格行换色
3 js完成复选框的全选和全不选
4 js完成表单的提示和 校验
作者: 丶犯二 时间: 2018-5-18 23:46
任佳锋
今天学习改进了四个案例,然后学习了JS中的常用几个触发事件
onfocus 获得焦点时触发(又指光标出现时)
onblur 失去焦点时触发(光标消失时)
onsubmit 表单提交的时候触发 注意:此事件触发需要一个返回值,否则默认返回值为true
onload 页面加载事件
onclick 点击事件
ondblclick 双击事件
onchange 下拉列表事件
且关于事件的触发 在head中只能出现一次
然后总结了JS常见的三个开发步骤
创建Html文件
确认事件
编写触发该事件的函数
再之后学习了DOM-文档对象模型以及它在内存中的树状结构
然后通过它的一些常用方法可以对元素以及它的属性进行增删改查等操作
元素(标签对象)
最后又了解了JS的一些内置对象及它们的方法(查API)
还有关于JS的全局函数
说说Hbuilder吧,相较于eclipse他没了编译时期的报错功能,有时候很不起眼的一小个标点符号、
字母错了你没注意,等敲完代码回过头来发现不能运行,然后一找就需要好长一段时间.
因此敲代码的时候若能不断的调试,则可以减少BUG的发生率.
虽说两者都费时费力,但后者可能更省时省力些
作者: 李成林 时间: 2018-5-19 00:08
李成林
js的总结
关键单词:
Element(元素)
Document(文档)
Attribute(属性)
Node(节点)
今天主要学习了DOM里面的方法和一下触发事件;
DOM是文档对象模型,将一个HTML的文档加载到内存形成一个树形结构,
从而操作树形结构就可以改变HTML的样子
树形结构的组成有:Document(文档),Element(元素),Attribute(属
性),Node(节点);
他们的关系是:
所有的Document(文档),Element(元素),Attribute(属性),都是Node(节点
)
document的主要方法有:
获取元素: getElementById();ElementsByName():返回值是数组;
创建元素:createElement();createTextNode():创建文本对象;
append(添加)
Child(小孩)
insert(插入)
before(在什么之前)
添加节点:元素(可以是标签).appendChild();insertBefore():指定索引
插入;
删除节点:元素.removeChild():可以是元素的属性或是里面的子标签;
作者: 李思贤126 时间: 2018-5-19 00:36
李思贤:今天我们继续学习了JS,常用事件{onfocus,onblur,onsubmit,onload,onclick,onchange}
可以用这些事件去触发函数,进行进一步操作.
学习了DOM(文档对象模型,其实就是把HTML中内存形成一个树形结构,操作来改变HTML样子)
DOM常用方法:
(1)获取元素:document.getElementById()------document.getElementByName()-------
document.getElementByTagName(标签名)
(2)创建元素: document.createElement()-------document.createTextNode()
(3)添加节点:在后面添加element.appendChild()--------在某元素前插入element.insertBefore()
(4)删除节点:element.removeChild()
今天做了四个案例:
(1) 表单提示和校验:如果校验2个单位及以上,在函数(id,content),
function tips(id, content) {
document.getElementById(id + "Span").innerHTML = "<font color='red'>" + content + "</font>";
}
(2) 隔行换色:onload;拿到表格对象,
var count = tab1.rows.length;
for(var i = 0; i < count; i++) {
if(i % 2 == 0) {
tab1.rows[i].style.backgroundColor = "green";
} else {
tab1.rows[i].style.backgroundColor = "gold"}}
(3) 全选:在表格上面加一行,
<tr><td colspan="?">
<input type="button" value="添加" />
<input type="button" value="删除" />
</td></tr>
然后在每一行前面加一列
<td>
<input type="checkbox" name="ids" />
</td>
函数方法:
function checkALL() {
var seleclall = document.getElementById("seleclall");
var ids = document.getElementsByName("ids");
if(seleclall.checked == true) {
for(var i = 0; i < ids.length; i++) {
ids[i].checked = true;
}
} else {
for(var i = 0; i < ids.length; i++) {
ids[i].checked = false;
}
}
}
(4) 省市联动:在省份那个<select>中写入onchange事件调用函数;
<option value="">--请选择--</option>
<option value="0">浙江省</option>
<option value="1">安徽省</option>
<option value="2">福建省</option>
<option value="3">江苏省</option>
<option value="4">河北省</option>
函数方法: var arrs = new Array(5);
arrs[0] = new Array("杭州市", "宁波市", "温州市", "舟山市");
arrs[1] = new Array("淮北市", "合肥市", "淮南市", "芜湖市");
arrs[2] = new Array("厦门市", "福州市", "三明市", "泉州市");
arrs[3] = new Array("南京市", "徐州市", "苏州市", "扬州市");
arrs[4] = new Array("廊坊市", "张家口市", "石家庄市", "邢台市");
function selectCity(value) {
var city = document.getElementById("city");
for(var i = city.options.length - 1; i > 0; i--) {
city.options[i] = null;
}
for(var i = 0; i < arrs.length; i++) {
if(value == i) {
for(var j = 0; j < arrs[i].length; j++) {
var opE1 = document.createElement("option");
var TextE1 = document.createTextNode(arrs[i][j]);
opE1.appendChild(TextE1);
city.appendChild(opE1);
}
}
}
}
作者: hpb199567 时间: 2018-5-19 00:40
本帖最后由 hpb199567 于 2018-5-19 15:05 编辑
何平波:
今天学了javascript的另外一些比较深的知识,今天的重点是掌握4个案例,分别是掌握 1.表格的换色 2.注册表的内容检测是否符合规范 3.复选框的一些多选操作 4.省市联动的案例
觉得课上的视频讲解的速度很快,一些比较关键的方法都没有详细的讲解,今天的前两个知识点比较容易理解,后两个知识点需要再详细的去总结,理解!
对于知识点1的理解是需要先定义好一个表格(表格里设定好函数的方法名),然后设定好id,在body里采用一加载就执行的方法(这是一种Dom事件 onload),然后调用函数function,在函数里做一些表格行数的判断,如果行数是为偶数行的话就是制定的一种颜色,如果不是的话就是另外一种指定的颜色,这样就能达到表格行的换色!
知识点2的话,也涉及了事件(Dom里的onclike (一点击)和onfoucus(元素获得焦点),onblur(元素失去焦点))分别会产生什么样的效果,这边需要结合DOM的内容输入使用 innerHTML 属性提示注册表里的元素要符合什么规范,这种方法比较常见,需要去理解和总结更多的细节!
知识点3需要定义好一个复选框,在复选框里设定好函数的方法名和id,它也是Dom事件的一点击就会触发指定好的效果,在这个函数方法里先1.获取最外层分类的id ,
2.获取次层里的元素内容,通过byname方法 因为byname返回的是一个数组
3.checked 的意思是默认选中,
4.判断最外层是不是被默认选中
5.如果是的话就拿到次层里被默认选中的复选框
6.如果不是的话也拿到次层里被默认选中的复选框
这只是大体的步骤,很多细节问题需要再去好好总结整理.
知识点4知识点41. 因为省市联动是省和市,所以在同一行设定好两个下拉列表
2. 而且要分别给代表省跟市的下拉列表定义ID函数(可以被function调用) 而且省市联动是DOM的改变事件(this.value代表了value的值可以被用来对比)
3. 然后创建一个数组
4. 数组1-5个元素内容分别为.......(省对应的市)
5. 获取市的id
6. 清除第二个列表中的内容:(如果不清除第二个列表的内容,那么第二个列表的元素将会重复出现)
7. 拿到省份
8. 判断省份的value值是否等于数组中对应的索引
9. 如果是的话就遍历数组中的元素内容 这边一个for循环嵌套,可以用对应的value值拿到对应的省市
10. 创建元素,传入设定的省
11. 创建文本节点,传入省市的全部元素
12. 元素添加子文本节点
13. 把全部的元素添加到市下拉列表里
这样就能获得一个注册表的省市联动籍贯.
作者: cxming 时间: 2018-5-19 00:49
陈旭明
学了JS的DOM,主要是通过获取html树状节点,然后进行相应的增删改查操作。
然后学习了四个案例:
1.表单的校验:onfocus(获取焦点) 、onblue(失去焦点);
2:隔行换色:onload(页面加载);
3:全选全不选:onclick(鼠标单击);
4:省市联动:onchange(下拉列表改变)
要注意代码的大小写,善用alter()来调bug。
今天的案例会敲就可以,重点掌握接下来要学的JQ。
作者: AsusCoder 时间: 2018-5-19 01:00
本帖最后由 AsusCoder 于 2018-5-19 12:32 编辑
姓名:曾耀峰 今天上课时忽然注意到老师每次写一个案例都会写需求分析文档。这个不单单是笔记，以后在开发过程中我们也会写技术文档。这个好像是《软件开发工程》所要掌握的内容。所以，这次的总结想模仿一下技术文档来写。
今天的核心内容是JS事件和DOM元素操作。 通过今天学习的案例来说明DOM知识点的使用。这里通过模仿上课视频中的项目需求分析来对所做的案例进行总结。
一、案例1、案例3:表单的本地校验版本2:
1.需求分析:
在一张用户注册表中，校验用户输入的信息是否符合规定。由如下信息输入:用户名、密码、确认密码、Email、户籍信息。请校验用户输入的信息是否正确，并给与方便的提示。校验规则如下:
用户名:不能为空
密码:不能少于6位
确认密码:确认密码与密码需要相同
Email:一个合法的Email字段
户籍信息:当在省份选择框中，选择省份完省份后，在市区选择框中会自动生成该省的所有市区项。
在核对以上信息正确后，点击“注册”按钮提交表单
2.技术分析:
1)实现形式:当用户输入完一个信息后，在输入项后面会显示用户输入的信息所得到的校验结果，字体红色表示不通过，绿色表示通过;
2)实现方法:
(1)通过JS事件机制中的获取焦点事件onfocus和失去焦点事件onblur这两个方法调用JS函数运行。
(2)在JS函数中使用DOM获取元素方法document.getElementById("id")，获取用户输入的信息。与校验规则进行判断。
(3)在HTML中的每项输入框后面添加一个<span>块状标签，其id值设为输入框的id+Span。该<span>标签用来接受校验的结果
(4)在注册提交按钮添加属性onSubmit ="return 校验方法" 所有信息都校验通过时返回ture.表单方可提交。
3.实现细节:
1).输出结果到 span标签:使用innerHTML方法:这个方法是js两个输出方法之一，可以往所指定的标签中输出内容。输出的内容可以是文字，也可以是标签。小代码如下:
document.getElementById(id + "Span").innerHTML = "<font color=" + color + ">" + content + "</font>";
2).在检验两次密码是否相等，居然不能用password.equals(repassword)。。。而是用passowrd == repassword。
3).校验Email字段的时候，使用到了正则表达式。虽然已经不能自己写出来，但是看得懂还是可以的。代码如下:
reg = new RegExp("^[a-z0-9]+([._\\-]*[a-z0-9])*@([a-z0-9]+[-a-z0-9]*[a-z0-9]+.){1,63}[a-z0-9]+$");
email = document.getElementById(id).value;
if(reg.test(email))
{
content = "邮箱正确";
color = "green";
}
else
{
content = "请输入正确的邮箱格式";
color = "red";
}
4.核心代码:户籍输入框的省市联动制作:
1).利用onChange = "函数方法"，当选择框的选项做改动的时候，会触发该事件，进而启动JS代码
2).给<select>标签中的字标签<option>标签添加属性value，每一项设置为0，1，2，3...
3).开始写函数:
(1)获取城市标签:city = document.getElementById("city");
(2)获取<option>的所有标签,有两个做法:
[1.]options = city.getElementsByTagName("option");遍历options
[2.]因为city是选择框，里面自带属性options。所以可以遍历city.options
(3)遍历过程中删除options结点，有多种做法，推荐两种:
[1.]利用父标签city删除:city.removeChild(options);
[2.]把结点清空:while(option.length>=0) options[options.length] =null;利用了options被删除元素后，长度可变的情况。
(4)清空完前面的元素后，接下来是自己创造新的元素了。
[1.]建立城市表:var arrs = Array(4);arrs[0] ={"城市1","城市2","城市3","城市4"}...建立在函数方面作为全局变量。
[2.]遍历
for(i = 0;i<arrs.lenth;i++)
{
for(j = 0;j<arrs.length;j++)
{
//这里是创造新元素的代码区
}
}
(5)创造新<option>标签的步骤:
//[1.]新元素创造:
var newOption = document.createElement("option");
//[2.]创建一个文本结点接收城市名字:
var textNode = document.createTextNode(arr[j]);
//[3.]文本结点textNode装入newOption中
newOption.appendChild(textNode);
//[4.]option选项装入父类中
city.appendChild(newOption);
作者: sts 时间: 2018-5-19 01:02
今天主要学JS常用事件和DOM;
常用事件主要有:
(!为未掌握全拼)
1.获得/失去焦点:
onfocus!!!
onblur
2.表单提交触发:
onsubmit!!!
3.页面加载:
onload
4.点击:
onclick
5.下拉列表改变:
onchange
6.(双击某元素:ondblclick!!!)
常用方法有:
获取元素:
document.getElementBy+获取元素的方法
创建元素:
document.create+创建的元素或文本
添加节点:
element.appendChild
删除元素:
element.removeChild
了解(无需完全掌握,不懂可查API):
(内置对象和全局函数)
通过今天的学习,课上案例基本掌握,有几个格式上的小错误仍需改进,在轩哥和超哥的讲解后已能自己敲出
作者: ...ylq 时间: 2018-5-19 01:04
叶凌青
今天主要学习了js里的Dom
什么是DOM : 文档对象模型
将一个HTML的文档加载到内存形成一个树形结构,
从而操作树形结构就可以改变HTML的样子
感觉就是对HTML的树形结构进行增删改查
还又新学了几个js的事件
如
onfocus:获得焦点时触发该事件
onblur:失去焦点触发该事件
onchange : 下拉列表改变事件
然后还学习了几个案例
1.使用JS完成表单的校验
主要用到的是
document.getElementById(“”).innerHTML=”HTML的代码”;
2.表格的隔行换色
3.JS完成复选框的全选效果
4.完成省市联动效果
其实这些案例只要记住开发步骤都可以完成
【步骤一】创建一个html文档
【步骤二】在要去校验的文本框上添加事件.
【步骤三】触发函数
【步骤四】在函数中向文本框后的html的区域中写入一段提示的内容.
作者: 张述明 时间: 2018-5-19 01:18
张述明
今天学习的主要内容是一些案例的偏写,知识点挺多的,首先是使用js完成注册页面的表单提示和校验, 其重要注意的点事JS的事件和输出 目前我们学习的事件有onload onsubsmit
Onfocus onblur 等 js的输出是document.getelmentByid().innerHTML=””
注册页面的表单提示和校验 首先是要创建一个html文档 在要去校验的文本框上添加事件onfocus 和onblur 并且添加<span> 通过触发函数,并在函数的文本框后面的html里面添加要提示的内容.
隔行换色案例要注意的一点就是Js要获得表格的行数要用的方法就是table.rows.length,然后遍历,判断奇偶.
全选和全部不选的案例 也是要确定事件onclick 然后触发函数,判断复选框是否被选中,如果是,所有复选框都选中,反之.
省市联动案例
事件 onchange 通过二维数组然后遍历 使用创建元素document.creatElement();
创建文本 document.creatTextNode() ,然后添加节点 使用 element.appendChild();
作者: 黄兴磊 时间: 2018-5-19 01:20
黄兴磊
今天学习了JS 原理步骤大概如下 首先要创建一个HTML的文件
然后要求校验的文本框上添加事件,在去触发函数, 在函数中向文本框后的html的区域中写入一段提示的内容,案例格式原理记住下,以后碰到类似的也都是换汤不换药, js的联动步骤大概如下 1 在下拉列表中定一个onfocus:获得焦点时触发该事件,把值传入,
2 在创建一个二维数组,给每个省会赋值, new Array()
3 在调用函数获取每个省份的信息, function changeCity(value)
4 在清除第二个列表中的类容,要记住掉着遍历,
- 如果把 options[] 数组中的一个元素设置为 null，那么选项就会从 Select 对象中删除。
- 5在遍历每个省会的信息,利用if语句来判断Value的值是否等于下拉列表对应的值,
- 6创建元素
- 7创建文本节点 将文本的内容添加到option元素中
- 8将option的元素添加到第二个列表中
作者: 郁闷客 时间: 2018-5-19 01:33
林树德
今天主要学习了js的输出及Dom的一些用法;
1,js的输出方法的两种操作 : document.getElementById(“”).innerHTML=”HTML的代码”;
document.write(“”); 第一种方法比较常用;
2,学习了一些常用的事件: onfocus:获得焦点时触发该事件 ; onblur:失去焦点触发该事件; onchange : 下拉列表改变事件
3:DoM:是文档对象模型;将一个HTML的文档加载到内存形成一个树形结构,
从而操作树形结构就可以改变HTML的样子;DOM当中的一些常用方法;获得元素;
A: document.getElementById(); -- 通过ID获得元素
B: document.getElementsByName(); -- 通过name属性获得元素
C: document.getElementsByTagName(); -- 通过标签名获得元素
创建元素
A; document.createElement(); -- 创建元素
B: document.createTextNode(); -- 创建文本
添加节点
A: element.appendChild(); -- 在最后添加一个节点
B: element.insertBefore(); -- 在某个元素之前插入
删除节点
A: element.removeChild(); -- 删除元素
通过获取焦点失去焦点可以完成注册页面的一些验证,通过下拉事件来完成省市联动的案例;操作时经常出错,
作者: 林荣彬 时间: 2018-5-19 01:51
林荣彬
JS输出的两种方式:
1.document.getElementById("标签").innerHTML="HTML的代码"
2.document.write("""")
JS事件:
获得焦点:onfocus
失去焦点:onblur
表单提交事件:onsubmit 需要有返回值
获得控制表格的元素
1.var tab = document.getElementById("tab")//获得表格的控制权
2.var len = tab.rows.length;//获得表格的行数
DOM可以对HTML进行增删改查
JS表格隔行换色
步骤 : 设置一个事件 ( onload ) ---定义一个函数---根据要操作的表格的ID获取对象---获取到行数---遍历行数---进行判断 ( 奇数行或者偶数行 )---进行相应的操作
DOM的常用的操作
获得元素：
document.getElementById(); -- 通过ID获得元素.
document.getElementsByName(); -- 通过name属性获得元素.
document.getElementsByTagName(); -- 通过标签名获得元素.
创建元素：
document.createElement(); -- 创建元素
document.createTextNode(); -- 创建文本
添加节点：
element.appendChild(); -- 在最后添加一个节点.
element.insertBefore(); -- 在某个元素之前插入.
删除节点：
element.removeChild(); -- 删除元素
编码和解码的方法：
解码
decodeURI();
decodeURIComponent()
作者: 黄志彬 时间: 2018-5-19 02:27
黄志彬
今天主要学习了JS输出
1.Document文档对象获得某一个元素.innnerHTML属性： document.getElementByid("").innerHTML="输出的内容"
2.Document.Write方法，可以覆盖加载后页面的内容： document.write("")
js的常用事件
Onfocus 获得焦点
Onblur 失去焦点
Onsubmit 提交
Onchange 下拉列表改变事件
ondblclick双击某个元素事件
了解到还有键盘事件和鼠标事件
隔行换色
使用JS获得表格行数：获得控制表格的元素：
var tab1 = document.Getelement;
Var len = tab1.rows.length;
确定事件onload 获得表格控制权id
页面加载完就触发函数获得操作表格，获得表格所有的行数，遍历表格行数，判断呢是否是奇数行 是奇数行给当前行添加颜色
Tab1.rows[i].style.background=”#FF0000”;否则添加其他颜色
表格中的thead和tbody
thead头部加粗居中， td变成th
DOM: 可以对元素增删改查
element.appendChild(); 添加子节点
document.getElementById(); 通过ID获得元素
document.getElementsByName(); 通过name属性获得元素
document.createElement(元素名); 创建元素
document.createTextNode(文本内容); 创建文本
document object model:文档对象模型 标签就是element对象
DOM使用要知道document，element，attribute中的方法
省市联动
创建数组 触发时间 下拉列表的改变事件onchange DOM的操作
创建元素 添加元素
确定事件onchange 触发函数 在函数中编写代码 获得选择的省份信息，定义数组创建二维数组，根据省份信息获得对应市的数据，遍历市的信息，创建元素，创建文本，将文本添加到第二个下拉列表里
作者: 柯建程 时间: 2018-5-19 10:42
使用JS完成表单的校验
表单校验是在表格后直接个提示需要一个<span></span>块 给span设置一个ID 需要onfoucus获得焦点 onfoucus="tirs1('id','内容')" 因为需要给多个表格设置所以使用有参函数 创建一个函数 function tirs1(id,内容)
输出方式为 docment.getelementbyid(id).innerHTML="内容" innerHTML="(可以写元素)"
使用JS完成表格的隔行换色
表格一般有一个表头thead()(里面字体加粗居中)和多个表身体(tbody),使用onload事件 创建一个函数 需要获取表格对象 得到其行数 table.tbios[0].rows.length 遍历行数 判断行数为奇偶数 奇偶颜色不同 tablic.tbios[0].rows[i].backgoundcolor="";
使用JS完成复选框的全选效果
全选或者全不选 定义一个全选按钮,其他按钮id取一样,函数里选择按钮为checked=true 当true时遍历其他按钮 同样为true就行了
使用JS完成省市联动效果
下拉onchenge事件 当下拉一边时,另一边跟着变化,需要定义二维数组,获取对象, 创建option,创建文本<数组里的元素>,将文本添加到option里,将option加入<select>里
作者: wpwing 时间: 2018-5-19 11:38
吴鹏
--------------------------------------------------------------
高级:
document.getElementById("").innerHTML = "HTML的代码";
document.write("");
onfocus :获得焦点
onblur :失去焦点;
onsubmit :提交的时候
步骤一 船舰一个html文档;
步骤二 在要去检验的文本框创建一个事件;
步骤三 创建一个获得焦点时要触发的函数;
步骤四 写入获得焦点时要显示的内容;
---------------------------------------------------------------
使用JS完成表单的提示和校验:
一,确定触发事件;
二,确认触发事件时要执行的函数(方法);
三,获取要执行操作的元素;
四,对元素进行操作;
本题目的是当鼠标移动到文本框点击后,在文本框后面显示提示语句;
使用到的:document.getElementById().innerHTML = "";
onfocus = ;
1 在文本框所在便签内定义id,为了后面函数可以通过方法获取文本框对象;
2 在文本框所在标签内定义事件onfocus="函数名("id值",提示内容)"(焦点事件,当鼠标对这个标签的元素进行点击等取得焦点后,
执行后面的函数,使用传参,将具体的id值和内容传进函数);
3 文本框所在<td>标签后定义一个<span id = "文本框id值Span"></span>,这个标签是在文本框所在同一行后面可以添加内容,
id值是后面可以将校验提示通过这个id值来进行赋值;
4 在<head></head>内部使用标签<script></script>,写入事件触发后要执行的函数体,函数体要实现扁担的提示和校验功能;
5 语句:
function 函数名() {
通过document.getElementById().innerHTML = "",方法,将提示内容以及要显示的标签的id值传进去;
}
-------------------------------------------------------------
使用JS实现表格隔行换色:
本题要将表格的行数作为数组对象存进数组里,则数组的索引值就代表了表格的行数,
使用的方法:tab1 = document.getElementById("表格的id值");获取表格对象
for方法遍历tab1对象,获取每行的索引值;
进行if判断,当索引值能被2整除时(索引值 % 2 == 0),对该行元素 如tab1.rows[i].style.backgroundColor进行颜色的设置;
当索引值不能被2整除时,进行不同颜色的设置;
另外一种办法:是通过<thead></thead><tbody></tbody>进行设置;
将表格的标题头放进<thead></thead>,其余的内容放进<tbody></tbody>里;
通过document.getElementById().thead.style.backgroundColor = 设置表格的标题颜色;
通过len = document.getElementById().tbodies[0].rows.length,获取表格内容每行的个数;
遍历document.getElementById().tbodies[0],
判断索引值是否能被2整除,分别对其的背景颜色进行设置(通过tab1.tbodies[0].rows[i].style.backgroundColor);
---------------------------------------------------------------
使用JS完成复选框的全选和全不选:
通过getElementsByName(),获取所有同名(要先在标签里用name取相同的名字)的元素集合;
因要求复选框,所以<input type = "checkbox" />;
标题上的复选框:<input type="checkbox" name="selectAll" id="checkAll()" />;
表格体上的复选框统一为:<input type="checkbox" name="ids" />
以上,标题的语句,输入类型为复选框,id为checkAll()(通过id值获取元素),触发事件为点击,触发的函数为checkAll(),通过定义一个
checkAll()函数,在函数内实现复选框的全选和全不选;
表格体上的复选框,输入类型为复选框,name取值为统一的ids,可以通过getElementsByName(),获取全部的复选框,进行操作;
函数:
function checkAll() {
var select = document.getElementById("checkAll()");
//获取标题头的复选框对象;
var ids = document.getElementsByName("ids");
//获取所有需要操作的复选框;
if (select.checked == true) {
//对select的值进行判断;
for (var i = 0; i < ids.length;i++) {
ids[i].checked = true;
}
//主复选框值为true时(勾选),将所有的复选框设置为true;
}else {
for (var i = 0; i < ids.length;i++) {
ids[i].checked = false;
}
//主复选框值为false时(勾选),将所有的复选框设置为false;
}
}
}
注意:上面的数组的值用checked,不是value
------------------------------------------------------------------
用JS完成省市联动:
onchange:此为打开下来菜单时触发事件;
使用二维数组存放省市的数据,比如:
假设有5个省,先定义一个数组var arrs = new Array(5),用来存放具体的每个省,
具体的省份在表单中的option标签里用value定义好(当前有5个省,则value的值为0-4,对应省数组的索引值);
在arrs[0]中,再用数组的方式存放当前省份的市;
在表单中,省的<select id="province"></select>
市的<select id="city"></select>;
省的<option value= " "></option>存放具体不同的省份,不同的省用不同的value值;
定义函数:
function pToC(value) {
//此函数传入一个value值,用来和省的数组的索引值对比,将对比后的市值赋值给city;
var city = document.getElementById("city");
//获取city对象,此时city里面还没有值;
for (var i = city.length;i >0;i++) {
city[i] = null;
//将city的值清空,这样在每次选择其它省份时,不会将其它省份的市的值写进去;
}
var arrs = new Array();//定义省的数组
arrs[0] = {"xx市","xx市",...}
.
.
.
//将所有省数组元素里添加各自的省份;
//遍历省数组,判断省数组的value值,将索引值与赋值给city对象;
for(var i =0;i < arrs.length;i++) {
if(value == i) {
//判断省的value的值与数组中索引的值是否相等;
for(var j=0; j<arrs[i].length;j++){
//当上面判断为true时,遍历对应索引值的市数组;创建option元素,创建对应的城市的文本对象;
var opt = document.createElement("option");
var text = document.createTextNode(arrs[i][j]);
//将对应的元素添加进city数组里;
opt.appendChild(text);
city.appendChild(opt);
}
}
}
}
作者: zzx835387607 时间: 2018-5-19 12:16
郑志祥
今天学了DOM的重要格式 document.getElementByID().innerHTML="HTML代码
学习了四个重要案例
案例一(完成表单的校验)
解题思路分析:
1.在用户名栏中添加一个id 并传入参数( id ,文字内容)
2. 输出传入的提示参数,并获取id.value得到输入的值
3.进行判断(document.getElementById(“”).innerHTML=”HTML的代码”;) 输出用户名为空的值
案例二(表格的隔行换色)
1.在body处定义一个页面加载事件 娶个方法名(记得写上括号)
2.学习了表格头部(thead) 表格身部(tbody)
3.通过id获取操作表格的控制权,
4.获取表格中的长度
5.For循环遍历表格后进行判断,奇数行为红色,偶数行为灰色
案例三(使用js完成表格的全选与全不选.html)
1.在原来的表格基础上添加新的一行(合并所有所谓列数) 添加button删除/添加
2.第二行第一列添加一个复选按钮 ,设定方法名 定义id 并设定一个触发事件
3.在三行及以下的左边添加新的一列,功能复选按钮,类名为ids 上面调用
4.获得上面的复选框
5.判断这个全选复选框是否被选中
6.遍历下面的子复选框,如果全选复选框被选中,下面的子复选框全部为true,否则为false
案例四(省市联动的实现)
1.在省的部位创建一个下拉列表事件,(并传入一个参数)也就是将左边所有省传入,在下拉列表中可以看到.
2.定义一个二维数组
3.通过获取id来创建市的对象
4.遍历市的数组,清空第二个列表里面的内容
5.遍历省的数组,里面嵌套一个市的数组,将省与市进行匹配
6.创建元素,创建文本节点,
7.将文本添加到元素当中. 元素添加到第二个列表(也就是市当中)
(内置对象)
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
var str=new String("ab-cd"); //创建一个字符串 (创建了2个对象)
var str="ef-kk"; //也是创建一个字符串(创建了1个对象)
var str1= str.split("-");
alert(str1[1]);
</script>
作者: 磬辰 时间: 2018-5-19 13:45
林文辉
内容:
DOM,文本对象模型,以类似树形状的方式存在内存中,和数据结构中的树原理一样
,都有着根节点,子节点及叶子等.
通过DOM对象我们可以实现通过id,name及标签名等获取元素,得到元素我们又可以进行
元素创建,文本创建,节点删除等一系列的操作,在此基础上我们就能完成一些类似表格
行列动态变色,以及添加导航等的这些功能.
常用事件:
onfocus()获取焦点
onblur()失去焦点
onsubmit()提交时
onchange() 下拉列表改变事件 如选择省份与对应城市的功能
innerHTML,可以直接链接到一个标签的位置,一般用于校验表单是否满足条件等等,
相对于alert()的弹框,innerHTML则是在文框旁出现提醒(正常都是在文本框旁)
更加人性化.
关于Array的一个方法:
join(),Array对象的一个比较强大的方法.把数组的所有元素放入一个字符串。
元素通过指定的分隔符进行分隔.比如我需要向数据库查询多个id的时候,如果用
数组作为参数传进去再循环去查询,就显得比较麻烦和笨拙.而我们可以通过.join(","),
将字符串数组通过","分隔存入一个字符串中,这样我们可以将这个字符串作为参数传进去
,然后使用In() 就可以利用数据库本身的方法进行多值查找.
作者: 1748341437 时间: 2018-5-19 14:48
林玮
今天就讲的是js一个重点:DOM,所以说内容没多少,不能说没多少吧,反正是比昨天的少;
虽然今天讲的少,但是我听得是一头雾水,晚上敲案例时没少出bug,但是这些都不影响我前进的步伐;;
DOM是一个文档对象模型,它的主要功能是把HTML文档变成一个以HTML本身为根,各种标签为枝,标签里的内容为叶的树状图加载到内存;
今天主要讲了DOM的方法,它要记的方法也是有很多,而且也是到AIP查的到的(只要你会查),然后我就挑几个几天用的比较多的几个吧;
DOM的方法:(注:获取元素和创建元素方法如果你要对该元素进行操作的话就要给,该方法设置一个变量赋值)
document.getElementByld():通过id获取元素,()里写的是id有
document.getElementsByName():通过name来获取元素,()里写的是name值
element.appendChild():在最后添加一个任意节点,()里写的是var变量名
document.createElement(): 创建元素,元素就是标签,也就是树的枝,括号里写的是元素
document.createTextNode():创建文本,也就是最后的叶,虽说是创建文本其实也就是内容,因为你把文本
写入数组在创建文本也是可以的
(*´ﾟ∀ﾟ｀)ﾉ (*´ﾟ∀ﾟ｀)ﾉ
今天除了要讲DOM重点,还要讲一个相对其他也比较重要的东西:js的常用事件,这些事件是用在body里面的.通过事件的关键字调用函数,再通过函数来完成需求,然后在页面中触发事件大概应该是这么个流程;
js事件作为重点之一自然是也要记得很多东西的,它要记得就是事件了,还是一样挑几个;嘿嘿(=´ω｀=)不要说我偷工减料哈,我是真的记不住撒(～￣▽￣)～
js的常用事件:
onfocus:获得焦点时触发该事件
onblur:失去焦点触发该事件
onsubmit:表单提交的时候触发
onchange : 下拉列表改变事件
(注:最后说一下,当你不记得某个东西的时候,确实去查API是最好的选择,但是查完API自己也要一点一点记下来,这样子积少成多也是很好的一个习惯)
作者: 郑学馨 时间: 2018-5-19 18:27
郑学馨
什么是DOM:
dom可以理解为HTML对象树,通过DOM可以对HTML文档的每个节点
进行增删改查,
查:document.getelenmentbyid():通过id查找对象/byname():通
过name值查找/bytagname():通过标签名查找对象(注意:该方法
返回的是一个数组,它会找到整个HTML中所有你要的标签的对象)
增:doucument.createelement():创建元素/createtextnode():
创建文本,
怎么在元素里添加文本:element.appendchild();
删除某个元素:element.removechild();
js中的事件:onclick:点击触发;onload:加载触发;onchance:选
择触发;onsubmit:提交触发;onfocus:获得焦点触发;(什么是焦
点:就是光标闪动的位置)
什么span,怎么使用?
答:span与div类似,span是横向排列,div默认是纵向排列,使用与
div一样;
onfocus定义位置在哪?
答:今天所学的都是定义在input标签中;
传参的content可以用别的字母代替吗?
答:可以,这个值名字是可以随意给定的;
什么是thead和tbody?怎么使用?
答:thead是table中的表头部分,tbody是table中的主体部分;
怎么给表格背景行换颜色?
怎么实现全选?
怎么实现省市联动?
作者: conan75 时间: 2018-5-19 21:35
今天进一步学习了JS的相关知识,一个html文件加载到内存,被解析后会形成一个树状document模型(DOM),通过操作树状结构就可以改变HTML的样子.BOM中有四个对象:window\navigater\screen\history.其中window是BOM中最高级的对象,其他三个对象都可以通过window的属性得到
DOM的对象:所有加载至树状模型的元素都是DOM的对象,可以说,所有的标签都是DOM的对象,我们可以通过 向元素添加新的子节点，作为最后一个子节点 element.appendChild()
每个对象都有其特有的属性,建议记下常用的属性,没事多翻翻API
作者: 凉面要趁热吃 时间: 2018-5-19 23:35
黄进安:
1. 使用js完成表单校验:
a. 事件:onfocus(获得焦点触发事件)和onblur()失去焦点触发该事件)
b. 输出方法: document.getElementById(“id”).innerHTML=”HTML的代码”
2. 使用js完成表格隔行换色
a. 新学习了头标签<thead>和体标签<tbody>的使用
3. 使用js完成复选框的全选的全不选
a. 了解了通过document.getElementsByName();获得的元素是个数组
4. 使用JS完成省市联动
a. 事件: onchange (下拉列表改变事件)
b. 通过DOM动态改变HTML的结构
5. DOM:是一种文档对象,即把HTML中的文档标签当成对象进行相关的增删改查的操作
a. element.appendChild(); 是一种追加的添加的方式
b. js获取的对象只能是内置好的对象???是否可以自己创建???
作者: 望蜀 时间: 2018-5-20 00:45
邵倩
JS的3个组成部分之一: DOM 即document object model文档对象模型
DOM就是将HTML文档加载到内存,形成一个树形结构,我们再通过操作该树形结构来实现增删改查功能
整个HTML文档可以称为document对象 HTML中所有标签可以称为element对象,标签的属性可以称为attribute对象,所有文本内容可以称为text对象,最后所有的对象可以统称为节点node.
JS的输出:
1.(常用)document.getElementByid("").innerHTML="输出的内容"
2.document.write("")
常用事件:获得焦点onfocus 失去焦点onblur 提交onsubmit 下拉列表改变onchange
掌握以下4个案例
1.表单的提示和非空校验
2.表格的隔行换色
3.复选框的全选和全不选
4.省市二级联动
常见的开发步骤
确定事件,触发函数,在函数中获取要操作的元素对象,对元素进行操作
代码写一点就测试一下 使用alert()
作者: Do1 时间: 2018-5-20 08:45
本帖最后由 Do1 于 2019-11-23 00:36 编辑
总结，今天学习了JS的3种功能
1是未提交及已提交，在input输入框后的span的标签中加入提示功能，这里用到的主要是根据js的增删改查功能。
2是隔行换色功能，用到的主要是tab1.tBodies[0].rows.length;方法(tab1表示的是表格元素),tBodies[0]表示提取到第0行
3是根据js来设定二级标签页面的功能，这里主要涉及到了js的数组，需要注意的是添加完后需要将原有的二级标签删除。
涉及函数：
createElement 创建一个元素
createTextNode 创建一个文本
appendChild 加入元素
var arrs=new Arrya(x);创建一个长度为i的数组
arrs[0]=new Array("杭州市","绍兴市","温州市","义乌市","嘉兴市");
和java不同的是js所创建的数组可以是多维的，并且所用的括号是小括号
| 欢迎光临 黑马程序员技术交流社区 (http://bbs.itheima.com/) |
黑马程序员IT技术论坛 X3.2 |
