【4.26】熟悉DOM编程，完成简单的点击事件

学习目标：

• js内置对象Array:js如何创建数组,遍历数组
• js自定义自定义对象的四种方式(json方式)
• 什么是DOM编程(document object model:文档对象模型编程)
• js常用的点击事件

---

学习内容：

1. 在js中，array对象和java的数组不一样，js是弱类型语言，数组对象不存在角标越界，元素可以不断扩容,创建数组array对象的三种方式：
   第一种 var 数组对象=new Array（）； 可以不指定数组长度，如果此时想要去查看元素的长度，可以使用length去查看数组对象的长度属性。第二种方式就是在第一种方式的里面加上指定的大小，此时数组的大小就不能去超过此时规定的大小了。其他方面和第一种是大同小异的；第三种方式，数组对象=[元素1，元素2，元素3…]这种方法是直接规定了数组里的元素
   2.自定义对象
   第一种方式 他的格式和函数的格式是相同的function 对象（属性1，属性2，属性3…）{},此时（）里的属性依旧是形参，定义完对象后，我们还要去创建对象，var a=new 对象（实际参数1，实际参数2，实际参数3…）,这样一个简单的对象就自定义好了，现在就是去完善自定义对象里的内容，举个例子，现在要去自定义一个对象Person，让他拥有姓名，年龄，性别，身高，地址这五个属性，那么定义的时候，就应该是function Person(name,age,sex,high,address){}，现在就该给属性赋值了，属性赋值的内容就是大括号里的内容，具体如下图：此时我们是吧形参给赋值给了定义的对象里的各个属性，当我们再去访问这个对象的属性值的时候，这个属性的值就是此时的形参（形参运行的时候，会变成我们输入的实参），如果此时突然想要去给这个Person添加一个别的属性，不是小括号里的形参，我们可以使用一下操作this.方法名=function{},具体操作如下：现在定义对象全部完成，开始创建对象：现在这一步，相当于吧实际参数传输给了我们的对象中，现在如果提取a.name的值，那么获取到的就是bxq了，我们操作一下：
   
   第二种方法，这种方法是不在去给定义的对象加形参，直接让对象函数为一个空函数，function 对象(){} 定义完对象后，再去创建一下对象var 变量名=new 对象，然后直接通过变量给对象加属性，比如：他的额外添加方法也和第一种的是一样的。
   方法三，第三种方法，可以直接使用js里的内置对象Object，Object可以代表所有对象，那么就不需要再去定义一个新的对象，那么就只需呀创建对象，var a=new Object();创建完后，就给对象添加属性就可以了.方法四，第四种方法，也是最常用的方法，json数据格式（也称为 字面量值的方式） 是一种数据交互的格式，前后端交互，使用json传参。具体的格式是var 对象名={“key1”:value1,“key2”:value2,“key3”:value3…}比如：这里每个key都相当于给他了一个值value，每当我们去访问key值的时候，都会吧key值对应的value返回给你，所以访问方式就是对象名.key，至于"study":function(){}则是他添加方式的方法，记住就好，那么整体代码就如下：
   

3… 什么是dom编程，该如何去用dom呢，其实主要是要去通过document来获取所要的标签的属性值，一共有四种方法，分别是
1）document.getElementById(“id属性值”) 【常用】
2） document.getElementsByName(“页面种所有同名的name属性”)
3）document.getElementsByTagName(“页面中所有同名标签的属性”)
4）document.getElementsByClassName(“页面中所有同名class的属性”)
可以通过上述的方法，来让js中的变量去获取到名为id或者class的属性；获取到之后，就可以通过函数之类的，对属性的value值来进行操作了。
4. 常见的一些事件，click单击事件；dbclick双击事件；focus获取焦点；blur失去焦点 change变化事件，这里要注意，所有写在标签上的事件都需要加on，比如单击事件在标签内就应该写成onclick；那么知道了这些，接下来去做一些简单的操作
5. 一个简单的表单校验。我们的要求是，当输入在文本框里的内容不符合我们所需要的条件的时候，让文本框外面可以立马显示出用户名不符合，那么我们应该首先是让用户输入一个账户；用户名：<input type="text" placeholder="请输入用户名">这个时候，用户已经输入了账户，我们要去获取到这个账户的信息，就是去获取到此时这个input标签的value，用上述的dom方法，首先给input标签给予一个id，则用户名:<input type="text" id="user" placeholder="请输入用户名">,然后在script里去获取这个的属性在var a=document.getElementById("user").value,现在a就是此时输入的用户名了，既然已经获取到了用户名，那么下一步，让input标签获取一个事件，即失去焦点事件，当input标签失去焦点后，则让他去进行一个函数，函数里对刚刚获取的属性值进行一个简单的判断就可以了，在判断不符合所需条件后，在input标签后面加上一个span标签，让span标签里的innerHTML属性变为用户名错误就好了，具体操作代码如下：
6.需求，让选择一个省的时候可以出现这个省的其他市来进行选择，具体代码如下:


这里就要用到change事件了，当在select中所选择的东西发生改变的时候，运行我们的sheng（）函数，我们在这个函数里首先获取一下select刚刚选择后获取的值，（var a=document.getElementById(“sheng”).value）比如此时选择的是陕西省，那么此时a的值就是陕西，现在去判断，当a的值等于陕西的时候，创建一个数组，数组里的内容就是陕西省里有的市(这里随便写几个市)，然后让他遍历整个元素，要遍历的话，自然是用for来进行，现在已经可以去遍历整个数组了，那么要让他出现的形式是option形式来，那么就再去改变底下select的innerHTML属性，对他的内容进行修饰，进行option格式的渲染，再由于我们进行遍历元素的时候，使用的是拼接**+=，这个时候如果，再去改变了前面的省份选择，函数重新进行运行，之前的innerHTML值还是之前拼接的内容，那么重新选择之后，会在之前的innerHTML属性上接着加上此次遍历的属性，就像下图一样:所以我们要在函数执行判断之前，让底下select的innerHTML**属性变为空，那么就会在重新进行函数的时候，让之前拼接的内容变为空，就不会再有多余的部分存在。