目录
1.JS内置对象之Array
<script>
//方式1:创建数组对象
//var arr = new Array() ;
//方式2: 数组对象名 = new Array(size) ;//指定数组长度
// var arr = new Array(4) ; // 数组中最大索引值:arr.length-1
//方式3:var 数组对象名 = [元素1,元素2,...] ;
//var arr = [10,20,30,40,"hello",true,'a',100,3.14,new Object()] ;
//虽然可以存储任何类型,但是实际开发中,具体的元素类型肯定统一的!
var arr = ["小王","小赵","小刘
"] ;
//对象名.length属性:获取长度
//alert(arr.length) ;
//分配数组元素
//数组的对象名称[索引值] = 实际值; //索引值从开始
/* arr[0] = 1 ;
arr[1] = 10 ;
arr[2] = 20 ;
arr[3] = 30 ;
arr[4] = 100; */
alert(arr.length)
//遍历数组,获取arr数组对象的运算
for(var i = 0 ; i < arr.length ;i++){ //i就是角标 0,1,2,3,4
document.write(arr[i]+"<br/>") ;//i=0,0<3,arr[0]
}
</script>
2.JS自定义对象方式
<script>
/* 自己定义一个函数(对象)
方式1:function 对象名(形式列表...)
//先定义一个对象
//定义一个 人对象
function people(name,age,address,hight){
this.name =name ;
this.age = age ;
this.address = address ;
this.hight = hight ;
//this.属性名称 = 形式参数 ;添加属性给属性赋值
this.play = function(a){
alert("也可以"+a);
this.play1 =function(LOL){
alert("可以"+LOL);
//给对象添加功能 (添加方法)
}
}
}
//创建一个具体的人:创建对象
var p = new people("小赵",27,"上单位",180 );
document.write("这人叫:"+p.name+",这人年龄:"+p.age+",这人玩:"+p.address+",这人高是:"+p.hight);
//输出
p.play("ADC") ;
p.play1("LOL");
//调用添加的功能(添加的方法)
--------------------------------------------------------------------------------
//方式4 (常用)JOSN数据格式,josn数据解析速度快
//需求:描述一个具体的人
var people ={
"name":"小王",
"age":18,
"address":"西安市",
"sex":"女人"
//加属性
"play":function(){
alert("会玩LOL");
//添加功能或者叫加方法
}
}
document.write("这个人叫:"+people.name+"<br/>");
document.write("这人年龄:"+people.age+"<br/>");
document.write("这人现在在:"+people.address+"<br/>");
document.write("这人是"+people.sex+"<br/>");
//输出内容
people.play();
//访问方法,
</script>
3.DOM操作方法
<!-- : DOM节点分为三大类:元素节点、属性节点、文本节点;
DOM事件:
onclick事件---当用户点击时执行
onload事件---当用户进入时执行
onunload事件---用用户离开时执
// 通过id号来获取元素,返回一个元素对象
document.getElementById(idName)
要求是 :当在输入框中输入内容完毕,鼠标光标失去焦点,
触发一个失去焦点事件,将文输入框的内容弹框出来 -->
</head>
<body>
用户名:<input type="text" id="username" placeholder="请输入用户名" οnblur="textBlur()"/>
<!-- 需要在标签中给定id属性值 -->
</body>
<script>
function textBlur(){
//失去焦点的函数
var input = document.getElementById(username);
//通过id="username"获取input标签对象
alert(input.value);
//获取它的value属性:获取内容
}
</script>
4.JS事件编程
这些所有的事件在标签上 只需要在事件名称前面加上on..,将指定的事件绑定到onxx属性上
1)点击相关的事件
单击 click -- onclick属性
双击 dbclick -- ondblick属性
2)焦点事件
获取焦点 focus -- onfocus属性
失去焦点 blur -- onblur
3)选项卡发生变化的事件,一般用在select下拉菜单中
事件名称 change --onchange属性
-->
</head>
<body>
<input type="button" value="click" οnclick="testClick()" /><br/>
<input type="button" value="dbClick" οndblclick="testDbClick()" /><br/>
用户名:<input type="text" id="username" value="请输入用户名"
οnfοcus="testFouces()" οnblur="testBlur()" /><span id="tip"></span> <br/>
<hr/>
籍贯:
<select οnchange="testChange()" id="pro">
<option value="请选择">请选择</option>
<option value="陕西省">陕西省</option>
<option value="山西省">山西省</option>
<option value="广东省">广东省</option>
</select>
<select id="city">
<!-- <option value="西安市">西安市</option>
<option value="渭南市">渭南市</option>
-->
</select>
</body>
<script>
//单击点击事件函数
function testClick(){
alert("单击事件触发") ;
}
//双击点击事件的函数
function testDbClick(){
alert("双击事件触发") ;
}
//定义获取焦点事件函数
function testFouces(){
//将文本输入框的value属性值清空掉
//dom操作:通过id="username"获取input标签对象
var a = document.getElementById("username") ;
//将input标签对象的value属性清空掉
a.value = "" ;
}
//定义一个函数:失去焦点的函数
function testBlur(){
//需求:当鼠标移出文本框,触发失去焦点事件,
//获取文本输入的内容,判断它的内容如果不是"高圆圆",在文本输入框的后面提示,"是否可用"
//1)获取文本输入框的内容
var username = document.getElementById("username").value ;
//2)获取id="tip"所在的span标签对象
var a = document.getElementById("tip") ;
//3)逻辑判断
if(username !="高圆圆"){
//给span标签对象设置文本
a.innerHTML = "×".fontcolor("red") ;
}else{
//可用
a.innerHTML = "√".fontcolor("green") ;
}
}
//定义函数:选项卡发生变化的事件
function testChange(){
//alert("选项卡变化了") ;
//通过id="pro" 所在的select标签,获取它的标签对象
//同时获取下拉菜单的内容
var province = document.getElementById("pro").value ;
//alert(province) ;
//应该要给第二个select标签(城市所在的下拉菜单),获取它的标签对象,动态给力拼接城市
//获取id="city"所在的select标签对象
var city = document.getElementById("city") ;
//将city的innerHTML清空掉
city.innerHTML = "" ;
//判断选择的省份的内容是否为"陕西省"/"山西省"/"广东省"
if(province=="陕西省"){
//定义一个城市数组
var arr = ["西安市","渭南市","咸阳市","宝鸡市"] ;
//遍历数组,获取每一个城市
for(var i = 0 ; i < arr.length;i++){
// 拼接<option value="渭南市">渭南市</option> 文本
//给city标签对象(代表就是第二个select标签对象)拼接上面的文本
city.innerHTML +="<option value="+arr[i]+">"+arr[i]+"</option> "
}
}
if(province=="山西省"){
//定义一个城市数组
var arr = ["太原市","晋中市","临汾市","大同市"] ;
//遍历数组,获取每一个城市
for(var i = 0 ; i < arr.length;i++){
// 拼接<option value="渭南市">渭南市</option> 文本
//给city标签对象(代表就是第二个select标签对象)拼接上面的文本
city.innerHTML +="<option value="+arr[i]+">"+arr[i]+"</option> "
}
}
if(province=="广东省"){
//定义一个城市数组
var arr = ["广州市","东莞市","佛山市","深圳市"] ;
//遍历数组,获取每一个城市
for(var i = 0 ; i < arr.length;i++){
// 拼接<option value="渭南市">渭南市</option> 文本
//给city标签对象(代表就是第二个select标签对象)拼接上面的文本
city.innerHTML += "<option value="+arr[i]+">"+arr[i]+"</option> "
}
}
}
</script>
JSON的总结 (全称是 JavaScript Object Notation),
JSON 的执行快速简单,总结起来有:
数组(Array)用方括号(“[]
”)表示,
对象(0bject)用大括号(“{}
”)表示。