zoukankan      html  css  js  c++  java
  • 2.8学习

    使用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>
  • 相关阅读:
    python3全栈开发-并发编程的多进程理论
    python3全栈开发-补充UDP的套接字、操作系统、并发的理论基础
    python3全栈开发-什么是粘包、粘包现象、如何解决粘包
    python3全栈开发-socket编程
    python3全栈开发- 元类metaclass(面试必考题)
    浏览器窗口
    SQL 笔记
    数据库连接字符串
    获取网卡地址信息
    启动所选择的应用程序
  • 原文地址:https://www.cnblogs.com/zql-42/p/12295440.html
Copyright © 2011-2022 走看看