本文详细介绍了JavaScript中的内置对象，包括数组的创建和特性，以及自定义对象的四种创建方法。同时，讲解了DOM入门，如何通过方法获取标签对象和处理事件，特别是选项卡变化事件的处理。内容涵盖JS弱类型数组的灵活使用和对象属性、方法的定义，以及DOM的基本操作技巧。
目录
一、js内置对象
1.数组
在js中Array对象特点,跟Java中的数组不一样的,
js是一个弱类型语言,数组对象中不存在角标越界,元素可以不断扩容!
而且js数组对象可以存储任何类型的元素！
2.创建Array的三种方式
var 数组对象名 = new Array() ;//不指定长度
var 数组对象名 = new Array(size) ;//指定数组长度
var 数组对象名 = new Array([元素1,元素2,...]) ;
它可以简化为
var 数组对象名 = [元素1,元素2,...]
不管js还是java,数组都有一个length属性:获取数组长度
3.创建数组
3.1 方法一
方式1:创建数组对象
/var arr = new Array() ;
3.2 方法二
方式2: 数组对象名 = new Array(size) ;//指定数组长度
var arr = new Array(4) ; // 数组中最大索引值:arr.length-1
3.3 方法三
方式3：var 数组对象名 = [元素1,元素2,...] ;
var arr = [10,20,30,40,"hello",true,'a',100,3.14,new Object()] ;
虽然可以存储任何类型,但是实际开发中,具体的元素类型肯定统一的!
创建数组如下
<script>
var arr = new Array();
alert(arr.length);
arr[0]=1;
arr[1]=10;
arr[2]=20;
alert(arr.length);
for(var i = 0; i<3;i++){
document.write(arr[i]+"<br/>");
}
</script>
如图
二、js自定义对象
1.自定义对象方法
1.1方法一
自定义对象
定义一个对象,格式和定义函数相同的,形式参数不能带var
方式1:function 对象名(形式列表...)
定义一个对象
function 对象(属性1,属性2,属性3...){ //属性就是某个真实世界事物的特征!
//给属性赋值
//给对象添加功能(方法)
}
创建对象
var 对象名 = new 对象(实际参数1,实际参数2,实际参数3....)
举例：
<script>
//定义一个人对象
function person (name,age,gender,adress){//姓名，年龄，性别，住址 属性
//给属性赋值
//=左边的name;相当于要给person对象添加name值（this;代表当前person对象一个地址值）
//=右边 当前形式参数里的name
//this.属性名称 = 形式参数值
this.name =name;
this.age = age;
this.gender = gender;
this.adress = adress;
//给对象添加功能（方法）
//人会打篮球
// this.方法名= function（）{
this.speak=function(a){
alert("欧文会说"+a);
}
this.playball=function(ball){
alert("欧文会打"+ball);
}
//}
}
var K=new person("欧文","30","男","布鲁克林");
//输出这个人的基本信息
//对象名.属性名=获取内容
//对象名.方法名=调用方法
document.write("这人叫"+K.name+",这人今年"+K.age+",这人性别"+K.gender+",这人住"+K.adress);
K.speak("英文");
K.playball("篮球");
</script>
如图
1.2方法二
方式2:定义对象的时候,function 对象(){} //不携带参数了
创建对象: var 对象名 = new 对象() ;
定义一个人对象
<script>
function person(){
}
//方法2
//定义对象时，function 对象（）{ }//不携带参数
var p=new person;
p.name="童某";
p.age=22;
p.adress="西安市";
p.gender="男";
p.speak=function(a){
alert("会"+a);
}
p.playball=function(ball){
alert("会打"+ball);
}
document.write("这人姓名是:"+p.name+",这人年龄是："+p.age+",这人住在："+p.adress+
",这人性别是："+p.gender);
p.speak("英语");
p.playball("篮球");
</script>
如图
1.3方法三
var 数组对象名 = [元素1,元素2,...] ;
var arr = [10,20,30,40,"hello",true,'a',100,3.14,new Object()] ;
虽然可以存储任何类型,但是实际开发中,具体的元素类型肯定统一的!
<script>
//利用js内置对象：object,代表所有对象！
//var 对象名=new object；
//直接创建对象
var p = new Object;
//追加属性
p.brand = "华为mate30pro";
p.price = 4699;
p.color = "翡翠绿";
p.memery = "64G"//内存
//追加方法
p.call=function(toname){
alert("手机可以给"+toname+"打电话");
}
p.message=function(toperson){
alert("手机可以给"+toperson+"发短信");
}
//打印
document.write("手机品牌是："+p.brand+",手机价格是："+p.price+",手机颜色是"+p.color+",手机内存是"+p.memery);
p.call("大帅哥");
p.message("大帅哥");
</script>
如图
1.4方法四
以后经常用到(重点),json数据格式(也称为 "字面量值的方式")
json:Js对象简谱,是一种数据交互的格式(体现,前后端交互,使用json传参)
json数据解析速度非常快!
var 对象名={ "key1":value1,"key2":value2...}
<script>
var student={
"name":"大学生",
"age":20,
"gender":"男",
"adderss":"西安市",
"study":function(){
alert("学习Java")
},
"play":function(){
alert("喜欢跑步");
},
"eat":function(){
alert("喜欢吃西瓜");
},
"drink":function(){
alert("喜欢喝西瓜汁");
},
};
//访问方式： var 值=对象名.key;
document.write("学生的姓名是："+student.name+"<br/>");
document.write("学生的年龄是："+student.age+"<br/>");
document.write("学生的性别是："+student.gender+"<br/>");
document.write("学生的住址是："+student.adderss+"<br/>");
student.study();
student.play();
student.eat();
student.drink();
</script>
如图
三、DOM入门
1.通过方法获取标签对象
举例说明：
当在输入框中输入内容完毕,鼠标光标失去焦点,
触发一个失去焦点事件,将文输入框的内容弹框出来
失去焦点事件: blur事件 ---标签中 onblur属性
```html
<script>
//失去焦点的函数
function testBlur(){
//alert("失去焦点事件触发了") ;
//方式1:docuement.getElementById("id属性值") ,常用的,需要在标签中给定id属性值(唯一的)
//通过id="username"获取input标签对象
var input = document.getElementById("username") ;
//方式2:docuement.getElementsByClassName("页面中所有同名的class属性值"),需要在标签中给定class属性值
// 获取的不是单个标签对象,而是标签对象列表,理解为一个数组,
//var input = document.getElementsByClassName("c1")[0] ;
//方式3:docuement.getElementsByName("页面中所有同名的name属性值") ;
//在标签中给定name属性值
//var input = document.getElementsByName("name")[0] ;
//方式4:docuement.getElementsByTagName("页面中所有同名的标签名称") ;
//var input = document.getElementsByTagName("input")[0] ;
//获取它的value属性:获取内容
alert(input.value) ;
}
</script>
2.常用事件编程
1)点击相关的事件
单击 click -- onclick属性
双击 dbclick -- ondblick属性
2)焦点事件
获取焦点 focus -- onfocus属性
失去焦点 blur -- onblur
3)选项卡发生变化的事件,一般用在select下拉菜单中
事件名称 change --onchange属性
-->
这些所有的事件在标签上 只需要在事件名称前面加上on..,将指定的事件绑定到onxx属性上
示例：
<body>
<input type="button" value="click" onclick="testClick()" />
<input type="button" value="dbclick" ondblclick="testdbClick()"/> <br />
用户名：<input type="text" id="username" value="请输入用户名" onfocus="testFoucus()" onblur="testBlur()" /><span id="tip"></span><br />
</body>
<script>
// 单击点击事件
function testClick(){
alert("点击触发事件");
}
// 双击
function testdbClick(){
alert("双击触发事件");
}
// 获取焦点事件函数
function testFoucus(){
var a =document.getElementById("username");
a.value="";
}
// 定义一个函数：失去焦点函数
function testBlur(){
var username = document.getElementById("username").value;
var a = document.getElementById("tip");
if(username=="童某"){
a.innerHTML="正确".fontcolor("green");
}else{
a.innerHTML="错误".fontcolor("red");
}
}
</script>
2.选项卡发生变化事件
选项卡发生变化的事件,一般用在select下拉菜单中
事件名称 change --onchange属性
<body>
籍贯:
<select onchange="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 testChange(){
var province = document.getElementById("pro").value;
var city = document.getElementById("city");
city.innerHTML="";
if(province=="陕西省"){
var arr=["西安市","铜川市","安康市","商洛市"];
for(var i=0 ;i < arr.length;i++){
city.innerHTML +="<option value=arr[i]>"+arr[i]+"</option>"
}
}
if(province=="山西省"){
var arr=["运城市","太原市","大同市","阳泉市"];
for(var i=0;i<arr.length;i++){
city.innerHTML+="<option value=arr[i]>"+arr[i]+"</option>"
}
}
if(province=="广东省"){
var arr=["东莞","深圳","广州","湛江"];
for( var i=0; i<arr.length;i++){
city.innerHTML+="<option value=arr[i]>"+arr[i]+"</option>"
}
}
}
</script>
扫一扫
359
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
