使用JS完成省市二级联动:
技术分析
事件(onchange)
使用一个二维数组来存储省份和城市(二维数组的创建?)
获取用户选择的省份(使用方法传参的方式:this.value)
遍历数组(获取省份与用户选择的省份比较,如果相同了,继续遍历该省份下所有的城市)
创建文本节点和元素节点并进行添加操作
createTextNode()
createElement()
appendChild()
步骤分析
第一步:确定事件(onchange)并为其绑定一个函数
第二步:创建一个二维数组用于存储省份和城市
第三步:获取用户选择的省份
第四步:遍历二维数组中的省份
第五步:将遍历的省份与用户选择的省份比较
第六步:如果相同,遍历该省份下所有的城市
第七步:创建城市文本节点
第八步:创建option元素节点
第九步:将城市文本节点添加到option元素节点中去
第十步:获取第二个下拉列表,并将option元素节点添加进去
第十一步:每次操作前清空第二个下拉列表的option内容。
<script> // 1.创建一个二维数组用来储存省份和城市 var cities = new Array(3); cities[0] = new Array("武汉市","黄冈市","襄阳市","荆州市"); cities[1] = new Array("长沙市","郴州市","株洲市","岳阳市"); cities[2] = new Array("石家庄市","邯郸市","廊坊市","保定市"); cities[3] = new Array("郑州市","洛阳市","开封市","安阳市"); function changeCity(val){ // 7.获取第二个下拉列表 var cityEle = document.getElementById("city"); // 9.清空第二个下拉列表的option内容 cityEle.options.length=0; // 2.遍历二维数组中的省份 for(var i=0;i<cities.length;i++){ // 注意:比较的是角标 if(val==i){ // 3.遍历用户选择的省份下的城市 for(var j=0;j<cities[i].length;j++){ // alert(cities[i][j]); // 4.创建城市的文本节点 var textNode = document.createTextNode(cities[i][j]); // 5.创建option元素节点 var opEle = document.createElement("option"); // 6.将城市的文本节点添加到option的元素节点中去 opEle.appendChild(textNode); // 8.将option元素节点添加到第二个下拉列表中去 cityEle.appendChild(opEle); } } } } </script> <td>籍贯</td> <td> <select onchange="changeCity(this.value)"> <option>--请选择--</option> <option value="0">湖北</option> <option value="1">湖南</option> <option value="2">河北</option> <option value="3">河南</option> </select> <select id="city"> </select> </td>
javascript内置对象:ArrayBooleanDateMathNumberStringRegExp
Array 对象
Array 对象用于在单个的变量中存储多个值。
创建 Array 对象的语法:
new Array();
new Array(size);
new Array(element0, element1, ..., elementn);
参数:
参数 size 是期望的数组元素个数。返回的数组,length 字段将被设为 size 的值。
参数 element ..., elementn 是参数列表。当使用这些参数来调用构造函数 Array() 时,新创建的数组的元素就会被初始化为这些值。它的 length 字段也会被设置为参数的个数。
返回值:
返回新创建并被初始化了的数组。
如果调用构造函数 Array() 时没有使用参数,那么返回的数组为空,length 字段为 0。
当调用构造函数时只传递给它一个数字参数,该构造函数将返回具有指定个数、元素为 undefined 的数组。
当其他参数调用 Array() 时,该构造函数将用参数指定的值初始化数组。
当把构造函数作为函数调用,不使用 new 运算符时,它的行为与使用 new 运算符调用它时的行为完全一样。
数组的特点:
长度可变!数组的长度=最大角标+1
Boolean 对象
Boolean 对象表示两个值:"true" 或 "false"。
创建 Boolean 对象的语法:
new Boolean(value); //构造函数
Boolean(value); //转换函数
参数:
参数 value 由布尔对象存放的值或者要转换成布尔值的值。
返回值:
当作为一个构造函数(带有运算符 new)调用时,Boolean() 将把它的参数转换成一个布尔值,并且返回一个包含该值的 Boolean 对象。
如果作为一个函数(不带有运算符 new)调用时,Boolean() 只将把它的参数转换成一个原始的布尔值,并且返回这个值。
注释:如果省略 value 参数,或者设置为 0、-0、null、""、false、undefined 或 NaN,则该对象设置为 false。否则设置为 true(即使 value 参数是字符串 "false")。
Date 对象
Date 对象用于处理日期和时间。
创建 Date 对象的语法:
var myDate=new Date()
注释:Date 对象会自动把当前日期和时间保存为其初始值。
getTime() 返回 1970 年 1 月 1 日至今的毫秒数。
解决浏览器缓存问题
String 对象
String 对象用于处理文本(字符串)。
创建 String 对象的语法:
new String(s);
String(s);
参数:
参数 s 是要存储在 String 对象中或转换成原始字符串的值。
返回值:
当 String() 和运算符 new 一起作为构造函数使用时,它返回一个新创建的 String 对象,存放的是字符串 s 或 s 的字符串表示。
当不用 new 运算符调用 String() 时,它只把 s 转换成原始的字符串,并返回转换后的值。
<script> var str = "-a-b-c-d-e-f-"; var str1 =str.substr(2,4);//-b-c // alert(str1); var str2 = str.substring(2,4);//-b alert(str2); </script>
RegExp对象
正则表达式对象
test 检索字符串中指定的值。返回 true 或 false。
全局函数
JavaScript 全局对象
全局属性和函数可用于所有内建的 JavaScript 对象。
<script> var str = "张三"; var str_1 = encodeURI(str); // alert(str_1);//%E5%BC%A0%E4%B8%89 var str_2 = encodeURIComponent(str); // alert(str_2);//%E5%BC%A0%E4%B8%89 var str_3 = decodeURI(str_1); // alert(str_3);//张三 var str_4 = decodeURIComponent(str_2); // alert(str_4);//张三 var str1 = "http://www.itheima.cn"; var str1_1 = encodeURI(str1); // alert(str1_1);//http://www.itheima.cn var str1_2 = encodeURIComponent(str1); // alert(str1_2);//http%3A%2F%2Fwww.itheima.cn var str1_3 = decodeURI(str1_1); // alert(str1_3);//http://www.itheima.cn var str1_4 = decodeURIComponent(str1_2); // alert(str1_4);//http://www.itheima.cn var str2 = "alert('abc')"; // alert(str2); eval(str2); </script>