目录
1、第一种表示方式：function 对象名(形式列表...)
2、第二种表示方式：定义对象的时候,function 对象(){}----不带参数
3、第三种表示方式：第二种表示方式使用js内置对象:Object----------代表的所有对象的模板
一、JavaScript的内置对象-----Array
数组的三种表示法：
1、var 数组对象名 = new Array() ;//不指定长度
2、 var 数组对象名 = new Array(size) ;//指定数组长度
3、 var 数组对象名 = new Array([元素1,元素2,...]) -----可以简化为：var 数组对象名 = [元素1,元素2,...] ;
二、JavaScript自定义对象的方式
1、第一种表示方式：function 对象名(形式列表...)
<script>
/*第一步:定义一个对象:
function 对象(属性1,属性2,属性3...){ //属性就是某个真实世界事物的特征!
//给属性赋值
//给对象添加功能(方法)
*/
function Person(name ,age ,gender,address){
/*给属性赋值
1.=左边的name----相当于要个Person对象添加name值
=右边的name----当前形参里面的name
2.this.属性名称=形参值
3.
*/
this.name=name;
this.age=age;
this.gender=gender;
this.address=address;
/*给对象添加功能(方法) eg:人会学习
this.方法名=function(){}
*/
this.speak=function(a){//a 是形参
alert("会说"+a);
}
this.play=function(gameName){
alert("会玩"+gameName);
}
}
// 第二步:创建一个具体的人:创建对象
// var 对象名=new 对象(实参1,实参2....)
var person=new Person("小刘","20","女","中国");
/*第三步:输出
对象名.属性名 =获取内容
对象名.方法名() ;调用方法
*/
document.write("这个人的姓名为:"+person.name+",年龄为:"+person.age+",性别为:"+person.gender+",地址为:"+person.address);
person.speak("英语");
person.play("王者荣耀");
</script>2、第二种表示方式：定义对象的时候,function 对象(){}----不带参数
function Person(){
//对象名.追加的属性名称 = 实际值;
var p=new Person();
p.name="乔安";
p.age=20;
p.gender="女";
p.address="西安";
//追加方法-----对象名.追加的方法名 = function(空参/带参数) {...}
p.study=function (className){
alert("正在学习JAVAEE+clasName");
}
}
document.write("这个人的姓名是:"+p.name+",这个人的年龄是:"+p.age+",性别是:"+p.gender
+",住址是:"+p.address) ;
p.study("前端的javascript") ;3、第三种表示方式：第二种表示方式使用js内置对象:Object----------代表的所有对象的模板
var p =new Object();
//追加属性
p.brand="华为mate30";
p.price=4099;
p.color="天蓝色";
p.memory="128G";
//追加方法
p.call=function(toName){
alert("可以打电话:"+toName);
}
//打印手机信息
document.write("手机品牌是:"+p.brand+",价格是:"+p.price+",颜色是:"+p.color+",内存是:"+p.memory);
p.call("小明");4.第四种表示方式：json数据格式
var 对象名 = {"key1":value1,"key2":value2....}
var student={
"name":"下滑",
"age":40,
"gender":"女",
"address":"西安",
"study":function(){
alert("学习JAVA");三、常用的DOM操作
失去焦点的函数
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] ;
四、常用的事件编程
1.点击相关的事件
单击 click -- onclick属性
双击 dbclick -- ondblick属性
2.焦点事件
获取焦点 focus -- onfocus属性
失去焦点 blur -- onblur
3.选项卡发生变化的事件,一般用在select下拉菜单中
事件名称 change --onchange属性
eg:
<body>
<input type="button" value="单击按钮" onclick="testClick()"/>
<input type="button" value="双击按钮" ondblclick="testDbclick()" />
用户名:<input type="text" value="" onfocus="testFouce()" id="username" onblur="testBlur()" />
<span id="tip"></span>
<hr/>
<select onchange="testOnChange()" id="province" >
<option value="请选择" >请选择</option>
<option value="陕西省" >陕西省</option>
<option value="山西省" >山西省</option>
<option value="河北省" >河北省</option>
</select>
<select id="city">
<!-- 通过数组存放了城市,然后在进行遍历
<option value=""></option> -->
</select>
</body>
<script>
//
function testClick(){
alert("单击");
}
function testDbclick(){
alert("双击");
}
function testFouce(){
var a =document.getElementById("username");
a.value="";
}
function testBlur(){
var name= document.getElementById("username").value;
var a=document.getElementById("tip");
if(name=="admin"){
a.innerHTML="正确".fontcolor("green");
}else{
a.innerHTML="错误".fontcolor("red");
}
}
function testOnChange(){
// var province=document.getElementById("province");
// provinceCotent =province.value ;
var province=document.getElementById("province").value;
var city=document.getElementById("city");
city.innerHTML="";
if(province=="陕西省"){
var arr=["西安市","宝鸡市","咸阳市","汉中市"];
for( var i=0;i<arr.length-1;i++){
city.innerHTML+="<option value="+arr[i]+">"+arr[i]+"</option>"
}
}
if(province=="山西省"){
var arr=["开封市","大同市","洛阳市","晋中市"];
for( var i=0;i<arr.length-1;i++){
city.innerHTML+="<option value="+arr[i]+">"+arr[i]+"</option>"
}
}
if(province=="河北省"){
var arr=["秦皇岛市","保定市","沧州市","石家庄市"];
for( var i=0;i<arr.length-1;i++){
city.innerHTML+="<option value="+arr[i]+">"+arr[i]+"</option>"
}
}
总结
今日的学习内容有点略多，需要深入理解，尤其是DOM操作和事件编程，会在前端和后端的交互中使用，在编写的过程中一定要仔细仔细仔细，不然就会像小白一样，太容易出错，而且今天学的内容有的方法还可以进一步优化的。希望今日小白的能帮助到你！
发光并非太阳的专利，只要努力，你也可以。
扫一扫
1208
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
