A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

第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获得元素
回复 使用道具 举报
凌辉:
今天学习了js的输出innerHTML,用于获取元素内容
学习了很多js常用时间,今天主要用了onfocus:获得焦点时触发该事件,
onblur:失去焦点触发该事件,onsubmit:表单提交的时候触发,
onload : 页面加载事件,onclick: 点击事件,onchange : 下拉列表改变事件
还学习了DOM,DOM是文档对象模型
将一个HTML的文档加载到内存形成一个树形结构,
从而操作树形结构就可以改变HTML的样子
DOM主要用法可以获得元素,创建元素,添加节点,删除节点
回复 使用道具 举报
郑阳阳
今天学习了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
回复 使用道具 举报
吴利君
今天学习了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一直调,难受。
回复 使用道具 举报
许煜 每日总结
  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);
                                        }
                                }
                                }
根据触发事件的省创建对应市的表单                               
回复 使用道具 举报
今天的学习内容中:用<Span>+innerHTML给表单框中显示提示内容,用<table>.rows.bgcolor给表格隔行换色,用<checkbox>.checked=boolean对复选框进行全选和全不选,这三个案例比较掌握得比较好,最后省市二级联动的那个案例感觉转了好多弯,没太弄懂,回去了再好好敲一遍.
回复 使用道具 举报
陈世彪:
今天学习了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();                        -- 在最后添加一个节点
回复 使用道具 举报
表单校验的第二种方式:
        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
回复 使用道具 举报
詹源
今天学习了DOM.
DOM是文档对象模型,行为是将一个HTML文档加载到内存,形成一个树形结构,如下
                文档
                 ↓html
元素head                                        元素body
   ↓                                                    ↓
元素title                        属性href←元素a                元素h1
   ↓                                          ↓                   ↓
文本 文档标题                                文本 "链接"        文本"标题"
操作树形结构就可以改版HTML的样子
DOM有获取,创建元素的方法.可以添加删除节点
回复 使用道具 举报
江某人:
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日,晴.今天是学习JavaScript的第二天,主要学习JavaScript的文档对象模型Dom.Dom的作用是对html文件进行增删改查,我们可以通过id,name,标签名获得元素对象,然后进行其他操作,例如父元素可以删除子元素,可以创建新元素和文本作为子元素写入父元素中,从而对html进行更改.
今天还学了一些事件:
onload :页面加载事件
onclick: 鼠标单击事件;
ondblclick: 鼠标双击事件;
onsubmit : 上传表单事件,需要获得一个布尔值判断是否上传
onchange : 下拉列表发生改变事件
onfocus : 获取焦点事件
onblur :失去焦点事件
其他还有鼠标移动,按下,键盘按下,抬起等事件
此外,还学了一些JavaScript的内置对象和内置函数,例如string ,Array,Date等,用法与java相似,但由于JavaScript是弱类型对象语言,所以所有的类型都用var来接收.
回复 使用道具 举报
侯玉林
今天学习了js高级,主要是js中的dom,dom也叫文档对象模型,浏览器在接收到数据库模型后,先将html文件
导入内存中,让后生成树状模型对象document,通过document我们可以对html文档的各种操作.
js技术由js基础语言,dom,bom组成,通过今天的知识,我们对整个js的大概架构有了一个大概的了解.
js技术以js语言为基础,借助bom浏览器本地的对象,实现了对dom的各种操作,dom的js的最终实现目的,
所有的js技术都是为在dom实现各种各样功能而存在的.
回复 使用道具 举报
张育辉
学习了常用的事件
                        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-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, 下载次数: 9)

day04.png
回复 使用道具 举报
康元中
今天学习 Dom 完成对html 文本的的增删该查
学习了四个案列
1 js完成省市联动 -- 步骤: 确定onchange事件--触动函数-定义代参函数-- 定义二元数组 --获取要操作元素的控制权
    遍历二元数组得到每个一元数组与value 值判断 -  符合就遍历一元数组 --创造文本写入值 --然后进行添加值....
2    js完成格行换色
3   js完成复选框的全选和全不选
4    js完成表单的提示和 校验   
回复 使用道具 举报
任佳锋
今天学习改进了四个案例,然后学习了JS中的常用几个触发事件
onfocus  获得焦点时触发(又指光标出现时)
onblur   失去焦点时触发(光标消失时)
onsubmit   表单提交的时候触发   注意:此事件触发需要一个返回值,否则默认返回值为true
onload    页面加载事件
onclick   点击事件
ondblclick   双击事件
onchange    下拉列表事件
且关于事件的触发  在head中只能出现一次


然后总结了JS常见的三个开发步骤
创建Html文件
确认事件
编写触发该事件的函数

再之后学习了DOM-文档对象模型以及它在内存中的树状结构
然后通过它的一些常用方法可以对元素以及它的属性进行增删改查等操作
元素(标签对象)

最后又了解了JS的一些内置对象及它们的方法(查API)
还有关于JS的全局函数

说说Hbuilder吧,相较于eclipse他没了编译时期的报错功能,有时候很不起眼的一小个标点符号、
字母错了你没注意,等敲完代码回过头来发现不能运行,然后一找就需要好长一段时间.
因此敲代码的时候若能不断的调试,则可以减少BUG的发生率.
虽说两者都费时费力,但后者可能更省时省力些
回复 使用道具 举报
李成林
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():可以是元素的属性或是里面的子标签;
回复 使用道具 举报
李思贤:今天我们继续学习了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 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知识点4
1. 因为省市联动是省和市,所以在同一行设定好两个下拉列表
2. 而且要分别给代表省跟市的下拉列表定义ID函数(可以被function调用)  而且省市联动是DOM的改变事件(this.value代表了value的值可以被用来对比)
3. 然后创建一个数组
4. 数组1-5个元素内容分别为.......(省对应的市)
5. 获取市的id
6. 清除第二个列表中的内容:(如果不清除第二个列表的内容,那么第二个列表的元素将会重复出现)
7. 拿到省份
8. 判断省份的value值是否等于数组中对应的索引
9. 如果是的话就遍历数组中的元素内容 这边一个for循环嵌套,可以用对应的value值拿到对应的省市
10. 创建元素,传入设定的省
11. 创建文本节点,传入省市的全部元素
12. 元素添加子文本节点
13. 把全部的元素添加到市下拉列表里
这样就能获得一个注册表的省市联动籍贯.
回复 使用道具 举报
陈旭明
学了JS的DOM,主要是通过获取html树状节点,然后进行相应的增删改查操作。
然后学习了四个案例:
1.表单的校验:onfocus(获取焦点)  、onblue(失去焦点);
2:隔行换色:onload(页面加载);
3:全选全不选:onclick(鼠标单击);
4:省市联动:onchange(下拉列表改变)
要注意代码的大小写,善用alter()来调bug。
今天的案例会敲就可以,重点掌握接下来要学的JQ。
回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马