JavaScript的入门(下)
目录
一、JavaScript的内置对象-----Array
二、JavaScript自定义对象的方式
1、第一种表示方式：function 对象名(形式列表...)
2、第二种表示方式：定义对象的时候,function 对象(){}----不带参数
3、第三种表示方式：第二种表示方式使用js内置对象:Object----------代表的所有对象的模板
4.第四种表示方式：json数据格式
三、常用的DOM操作
四、常用的事件编程
总结
一、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----当前形参里面的name2.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 -- onblur3.选项卡发生变化的事件,一般用在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操作和事件编程，会在前端和后端的交互中使用，在编写的过程中一定要仔细仔细仔细，不然就会像小白一样，太容易出错，而且今天学的内容有的方法还可以进一步优化的。希望今日小白的能帮助到你！
发光并非太阳的专利，只要努力，你也可以。
JavaScript的入门(下)相关推荐
- JavaScript快速入门（四）——JavaScript函数
函数声明 之前说的三种函数声明中(参见JavaScript快速入门(二)--JavaScript变量),使用Function构造函数的声明方法比较少见,我们暂时不提.function func() { ...
- JavaScript从入门到放弃 -（七）ES6
目录 1. ES6相关概念 1.1 什么是 ES6 ? 1.2 为什么使用 ES6 ? 2 ES6新增语法 2.1 新增关键字 2.1.1 let 关键字 小结 2.1.2 const 关键字 小结 ...
- JavaScript从入门到放弃 -（六）正则表达式
正则表达式 1. 正则表达式概述 1.1 什么是正则表达式 1.2 正则表达式的特点 2. 正则表达式在JavaScript中的使用 2.1 创建正则表达式 2.1.1 通过调用 RegExp 对象的 ...
- JavaScript从入门到放弃 -（五）函数进阶（高级用法）
目录 1. 函数的定义和调用 1.1 函数定义的3种方式 1.2 函数调用方式(常见的6种) 1.2.1 普通函数的调用 1.2.2 对象中的函数调用 1.2.3 构造函数的调用 1.2.4 DOM元 ...
- JavaScript从入门到放弃 -（四）E5 新增方法
目录 5. trim方法 6. 对象方法 6.1 Object.keys() 6.1.1 作用 6.1.2 语法 6.2 Object.defineProperty() 6.2.1 作用 6.2.2 ...
- JavaScript从入门到放弃 -（三）ES5新增方法及商品查询案例
目录 1. ES5新增方法概述 2. 数组方法 2.1 forEach方法 2.2 filter 筛选数组方法 2.3 some方法 3. 查询商品案例 3.1 HTML结构和CSS样式 3.2 准备 ...
- JavaScript从入门到放弃 -（二）继承
目录 1. Call() 2.子构造函数继承父构造函数中的属性 3. 借用原型对象继承方法 1. Call() 它的作用是: call()可以调用函数: call()可以修改函数运行时this的指向: ...
- JavaScript从入门到放弃 - （一）构造函数和原型
目录 1. 创建对象的三种方式 1.1 用字面量创建 1.2 用new关键字创建 1.3 借用构造函数创建 2. 实例成员和静态成员 2.1 实例成员 2.2 静态成员 3 构造函数原型 4 对象原型 ...
- JavaScript新手入门教程大全~~~
JavaScript新手入门教程大全~~~ 一. js教程介绍:JavaScript是一种运行在浏览器中的解释型的编程语言. 那么问题来了,为什么我们要学JavaScript?因为你没有选择.在Web ...
最新文章
- 『原创』网站测试计划模板
- java指导手册,Java 注解指导手册 – 终极向导
- python中的sorted是什么意思_python中sort与sorted区别
- 树莓派4B (aarch64) 安装PyTorch 1.8 的可行方案
- java clone concurrentlinkedqueue_java – ConcurrentLinkedQueue代码解释
- 进行DosBox的下载与配置
- 突破百度网盘下载限制（大文件直接下载、使用迅雷下载）
- 因果分析.科学实验评估
- GHOST系统（迅雷下载集合）
- QPST驱动安装失败的原因以及解决方法
- python读取usb数据_PyUSB：从USB设备读取
- 总结使人进步，遵循事物的发展规律
- 2023，开启「线控转向」元年
- R-基本统计分析--独立、相关性及其检验
- 电信光纤猫HG8245 超级密码 及路由功能启用
- PTES标准的渗透测试七个阶段
- 虚拟机下克隆CentOS后更改MAC地址
- 【报告分享】 2021中国跨境电商发展报告-德勤（附下载）
- 网页中实现flash在线拍照
- 如何在SQL Server中附加Pubs数据库