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

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

同学们,以下是今日任务,以案例为主。今日重点是掌握JS常用的BOM和DOM对象,掌握常用的事件要求每位同学可以完成以下案例,然后以口语化的方式在评论区提交你的每日总结,谈谈你对今日重点知识的理解!

  • 使用JS完成表单的校验
  • 使用JS完成表格的隔行换色
  • 使用JS完成复选框的全选效果
  • 使用JS完成省市联动效果

评分

参与人数 1黑马币 +1 收起 理由
沅瞻 + 1 赞一个!

查看全部评分

60 个回复

倒序浏览
陈强
高级JS的一天,其实今天的案例都是在之前做的案例上增加一些新的功能;
1,表单中获得焦点和失去焦点的校验中,使用到onfocus 和 onblur ,这里需要注意传入两个参数,一个是ID,一个是content的内容,最后在函数中通过innerHTML写入即可
2,表单隔行换色案例中,使用到的是onload ,这里需要注意的是,给背景色赋值时,因为背景色是在style中的,所以赋值语句中千万别少了style
3,复选框的全选与全不选案例,逻辑相对就简单了,只要根据一个主框的checked值来对副框的值进行设定即可
4,省市联动案例中,相对其他案例会比较复杂一点,这里用到了一个onchange,就是下拉列表改变的时间,
该案例复杂的原因是因为根据省的value值设置完市的内容后,还需要在重新选择省份时,对市下拉框中的信息进行清空,避免重复添加.然后在对市的下拉框中添加信息时,需要注意先添加<option>标签,再将数组中的内容添加到标签中,最后才是将<option>标签添加到市所对应的<select>中.
回复 使用道具 举报
吴利君
今天学习了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一直调,难受。
回复 使用道具 举报
本帖最后由 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. 把全部的元素添加到市下拉列表里
这样就能获得一个注册表的省市联动籍贯.
回复 使用道具 举报
本帖最后由 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);        

回复 使用道具 举报
许剑鸿    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-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:追加





回复 使用道具 举报
张裕
今天主要学了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属性中 在添加到市对象中
回复 使用道具 举报
叶身辉:
今天学习了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是下拉框
回复 使用道具 举报
王刘锁
先来记录一下今天的重中之重: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 双击
回复 使用道具 举报
汪志阳:
今天主要还是学习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()在最后添加一个节点
回复 使用道具 举报
常小天
今天学习了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:38
9#
颜琳琳
      今天学习了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:12
10#
柯威龙
今天学习了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的总结.
回复 使用道具 举报
李志勇:
javascript
主要js常用事件:
        onload 页面加载事件
        onclick 单击事件
        ondblclick 双击事件
        onsubmit 表单提交事件
        onfocus 获得聚焦事件       
        onblur 失去聚焦事件
        onkeydown 某个键盘的健被按下
        onkeyup 某个键盘的键被松开
        onkeypress  某个键盘的键被按下或按住
        onmouseout  鼠标从某元素移开
        onmousemove  鼠标被移动
        onmouseover  鼠标被移动某个元素之上
        onmousedown   某个鼠标键被按下
        onmouseup    某个鼠标键被松开
Dom  文档对象模型
        学习一些方法   用来操作HTML树形结构的增删改查
通过今天的学习进一步的改进了以前案例   也更灵活更精确的做判断
回复 使用道具 举报
王清松
今日主菜: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("(文本内容)")
        }
}
回复 使用道具 举报
郑雪平

今天主要学习了四个方面的知识点,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>
回复 使用道具 举报
16weisong
今天主要学了js常见事件,js的DOM,和4个案例使用JS完成表单的校验,使用JS完成表格的隔行换色,使用JS完成复选框的全选效果使用JS完成省市联动效果.案例不难能敲出来即可,DOM比较重要,通过DOM我们可以对HTML中的任意元素,在任何位置进行增删查改,且在后面的学习xmL也会用到DOM.DOM(着重掌握,不会多查查API即可)
回复 使用道具 举报
谢洪彬:
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:52
16#
游荣辉
今天还是学习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

回复 使用道具 举报
郭明杰
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:37
18#
没人?占个楼先
回复 使用道具 举报 1 0
2902 初级黑马 2018-5-18 21:58:22
19#
张清才 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 : 某个键盘的键被按下或按住
回复 使用道具 举报
123下一页
您需要登录后才可以回帖 登录 | 加入黑马