<!DOCTYPE html><html><head><meta charset="utf-8"><title>点击事件</title></head><body><div id="div1" onclick="test()">芜湖,起飞</div><div id="div2" ondblclick="test2()">汪汪队立大功</div></body></html><script type="text/javascript">
var v=document.getElementById("div1");
function test(){
v.style.background="red";}
var v2=document.getElementById("div2");
function test2(){
v2.style.background="green";}</script>
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body></body></html><script type="text/javascript">//方式1://函数本身也是一个对象,使用函数来封装数据,当成构造函数//有参构造
function Student(name,age){//alert("构造函数执行了");//this代表的就是这个函数对象this.name=name;this.age=age;//一些功能this.eat=function(){alert("吃饭的功能");}}
var student=newStudent("张三",22);alert(student.name);alert(student.age);
student.eat();//方式2://JS中提供了一个Object类
var obj=newObject();
obj.num=200;
obj.name="李四";
obj.sleep=function(){alert("sleep");}//方式3:</script>
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body></body></html><script type="text/javascript">
var person2 ={
firstName:"John",
lastName:"Doe",
age:50,
eyeColor:"blue"};for(key in person2){alert(person2[key]);}//for...in循环也可遍历数组
var arr=[1,2,3,4,5];for(index in arr){
console.log(arr[index]);}</script>
4.JSON对象的嵌套
实际开发中,遇到的情况复杂的话,对于复杂数据,需要使用JSON对象嵌套
<!DOCTYPE html><html><head><meta charset="utf-8"><title>JSON的嵌套</title></head><body></body></html><script type="text/javascript">
var person ={"name":"张三","age":20,"car":{"color":"白色","price":2000},"arr":[20,30,60,100]}//取出2000
var v = person.car.price;alert(v);//取出100
var vv = person.arr[3];alert(vv);//JSON数组:数组中的每一个元素是JSON对象
var jsonArr =[{"name":"张三","age":20,"car":{"color":"白色","price":2000},"arr":[20,30,60,100]},{"name":"李四","age":22,"car":{"color":"黑色","price":3000},"arr":[20,30,60,100]},{"name":"王五","age":30,"car":{"color":"红色","price":5000},"arr":[20,30,60,99900]}]//取出99900
var num=jsonArr[2].arr[3];alert(num);</script>
<!DOCTYPE html><html><head><meta charset="utf-8"><title>JSON对象的JSON字符串的互转</title></head><body></body></html><script type="text/javascript">//定义JSON对象
var person ={"name":"张三","age":24}//alert(person.name);//定义JSON字符串://var student ="{'name':'name','age': 24}"; //错误的JSON字符串格式//注意：JSON字符串，外面用单引号引起来，里面键用双引号引起来。
var student ='{"name": "张三","age": 24}';//先把JSON字符串转换成JSON对象才能去键找值
var s = JSON.parse(student);alert(s.name);//前台给后台提交数据时，会以JSON字符串来提交给后台
var person2 ={"name":"张三","age":24}//JSON对象转换为JSON字符串//JSON字符串是这种紧凑格式，不要弄成漂亮的格式
var jsonStr = JSON.stringify(person2);alert(jsonStr);</script>
<!DOCTYPE html><html><head><meta charset="utf-8"><title></title></head><body><select name="" id="sf" onchange="selectShen()"><option value="">--请选择省份--</option><option value="">陕西</option><option value="">河南</option></select><select name="" id="city"><option value="">--请选择城市--</option></select></body></html><script type="text/javascript">//获取对应的标签对象
var shengFen = document.getElementById("sf");
var citys = document.getElementById("city");//0 1 2//把省份对应的数据用二维数组来存储
var data =[[],['西安','宝鸡','汉中','商洛','延安'],['郑州','开封','南阳','安阳']];
function selectShen(){//切换省份时，把之间的旧数据清空掉//citys.innerHTML="<option>--请选择城市--</option>";
citys.length=1;//把下拉选项，只保留一项。//取出用户选择的那个省份的索引
var index = shengFen.selectedIndex;//取出这省份所对应的城市的数组 陕西 1 ['西安', '宝鸡', '汉中', '商洛', '延安'],
var arr = data[index];//遍历城市的数组，把城市填充到第二个下拉框中for(let i =0; i < arr.length; i++){//动态的创建option标签
var op = document.createElement("option");//创建文本对象
var cityName = document.createTextNode(arr[i]);//给op接设置内容
op.appendChild(cityName);//把op放到select之间
citys.appendChild(op);}}</script>
2.三级联动
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>三级联动</title></head><body><select id="province" onchange="addCity(this.value);"><option value="-1">--请选择--</option><option value="0">陕西</option><option value="1">河南</option><option value="2">湖北</option></select><select id="city" onchange="addCounty(this.value);"><option value="-1">--请选择--</option></select><select id="county"><option value="-1">--请选择--</option></select></body></html><script type="text/javascript">
var citys=[["西安","汉中","宝鸡"],["郑州","南阳","信阳"],["武汉","荆州","随州"]];
var countys=[[["西安1区","西安2区","西安3区"],["汉中1区","汉中2区","汉中3区"],["宝鸡1区","宝鸡2区","宝鸡3区"]],[["郑州1区","郑州2区","郑州3区"],["南阳1区","南阳2区","南阳3区"],["信阳1区","信阳2区","信阳3区"]],[["武汉1区","武汉2区","武汉3区"],["荆州1区","荆州2区","荆州3区"],["随州1区","随州2县","随州3区"]]];
function addCitysOpt(text,value){//根据id获得city下拉框
var city = document.getElementById("city");//创建下拉选项
var opt = document.createElement("option");//分别赋值
opt.text = text;
opt.value = value;//将该节点添加到city下拉框节点中
city.options.add(opt);}
function addCountyOpt(text,value){//同上
var county = document.getElementById("county");
var opt = document.createElement("option");
opt.text = text;
opt.value = value;
county.options.add(opt);}
function addCity(value){//通过id获得省级元素
var province = document.getElementById("province");//通过id获得市级元素
var city = document.getElementById("city");//通过id获得县级元素
var county = document.getElementById("county");//每次联动前，将联动下拉框的长度变为1；
city.options.length =1;
county.options.length =1;//根据value循环citys数组，将对应城市一一添加进城市下拉框。for(var i =0; i< citys[value].length; i++){addCitysOpt(citys[value][i],i);}}
function addCounty(value){//同上
var province = document.getElementById("province");
var city = document.getElementById("city");
var county = document.getElementById("county");
p_value = province.value;
county.options.length =1;for(var i =0;i<countys[p_value][value].length;i++){addCountyOpt(countys[p_value][value][i],i);}}</script>
245
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
