js内置对象array
<!--
目前:记住js的创建数组三种格式
在js中Array对象特点,跟Java中的数组不一样的,
js是一个弱类型语言,数组对象中不存在角标越界,元素可以不断扩容!
而且js数组对象可以存储任何类型的元素！
创建Array对象三种方式
var 数组对象名 = new Array() ;//不指定长度
var 数组对象名 = new Array(size) ;//指定数组长度
var 数组对象名 = new Array([元素1,元素2,...]) ;
它可以简化为
var 数组对象名 = [元素1,元素2,...] ;
不管js还是java,数组都有一个length属性:获取数组长度
-->
<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>
js自定义对象的方式
<script>
/* 自定义对象
定义一个对象,格式和定义函数相同的,形式参数不能带var
方式1:function 对象名(形式列表...)
//定义一个对象
function 对象(属性1,属性2,属性3...){ //属性就是某个真实世界事物的特征!
//给属性赋值
//给对象添加功能(方法)
}
创建对象
var 对象名 = new 对象(实际参数1,实际参数2,实际参数3....)
*/
//定义一个人对象
/* function Person(name,age,gender,address){//姓名,年龄,性别,住址 属性
//给属性赋值
//=号左边name:就相当于要给Person对象添加name值 (this:代表的是当前Person对象一个地址值 (先了解))
//=号右边name 当前形式参数里面的name
//this.属性名称 = 形式参数值;
this.name = name ; //this.name = 高圆圆 ''
this.age = age ;//this.age = 30
this.gender = gender ;//this.gendser = "女"
this.address = address; //this.addrss = "南窑国际";
//给对象添加功能(方法)
//人会说英语
//this.方法名 = function(){}
this.speak = function(a){ //方法里面参数 a="英语"
alert("会说"+a) ;
}
this.playGame = function(gameName){//gameName
alert("会玩"+gameName) ;
}
} */
//创建一个具体的人:创建对象
//var 对象名 = new 对象(实际参数1,实际参数2,实际参数3....)
//var p = new Person("高圆圆",30,"女","南窑国际") ;
//方式2:定义对象的时候,function 对象(){} //不携带参数了
//创建对象: var 对象名 = new 对象() ;
//定义一个人对象
/* function Person(){
}
//创建对象 人对象
var p = new Person() ;
//自己追加属性
//对象名.追加的属性名称 = 实际值;
p.name = "文章" ;
p.age = 20 ;
p.gender = "男" ;
p.address = "西安市" ;
p.high = 180 ; //身高
//追加方法
//对象名.追加的方法名 = function(空参/带参数) {...}
p.speak =function(a){//"英语"
alert("会"+a) ;
}
p.playGame = function(gameName){
alert("会玩"+gameName) ;
}
//学习的方法
p.study=function(className){ //前端的javascript
alert("正在学习"+className) ;//"正在学习前端的javascript""
}
//输出这个人的基本信息
//对象名.属性名 =获取内容
//对象名.方法名() ;调用方法
document.write("这个人的姓名是:"+p.name+",这个人的年龄是:"+p.age+",性别是:"+p.gender
+",住址是:"+p.address+",身高为:"+p.high) ;
p.speak("英语") ;
p.playGame("csGo") ;
p.study("前端的javascript") ;
*/
//方式3:
//利用js内置对象:Object,代表的所有对象的模板!
//var 对象名 = new Object()
//直接创建对象
/* var p = new Object() ;
//追加属性
//对象名.属性名 = 值;
p.brand = "华为mate30pr0" ;// brand:品牌
p.price = 4699 ; //price:价格
p.color = "粉翠绿" ; //color:手机颜色
p.memory = "64G" ; //memory:手机内存
//追加方法
//对象名.追加的方法名 = function(空参/带参数) {...}
//打电话
p.call = function(toName){//高圆圆
alert("这个手机给可以给"+toName+"打电话了") ;
}
//发短信
p.sendMessage = function(){
alert("可以发短信") ;
}
//打印出 手机信息 以及调用手机的这两个功能
document.write("手机品牌是:"+p.brand+",它的价格是:"+p.price+
",机身颜色是:"+p.color+",它的机身内存是:"+p.memory) ;
p.call("高圆圆") ;
p.sendMessage() ; */
//方式4:后期经常用到(重点),json数据格式(也称为 "字面量值的方式")
//json:Js对象简谱,是一种数据交互的格式(体现,前后端交互,使用json传参)
//json数据解析速度非常快!
/*
var 对象名 = {"key1":value1,"key2":value2....}
现在描述一个具体学生事物
姓名,年龄,性别,地址这个几个属性
*/
var student = {
//追加属性
"name":"王宝强",
"age":35 ,
"gender" :"男",
"address":"渭南市",
//追加方法:
//"方法名":function(){...}
//学习
"study":function(){
alert("学习Javascript") ;
}
};
//方式4
//json开发中常用的数据格式--也称字面量值方式
//json 数据简谱 是一种前后端数据交互的格式使用json传参 解析速度很快
/* Dom:document object model基于文档对象模型编程，当浏览器解析
html页面时，内置javascript引擎将html中所有标签，都将它封装成标签对象
(元素对象/节点对象)从而形成树状结构，看节点关系
var 对象名 = {"key1":value1,"key2":value2…}
*/
//追加属性
var student = {
"name":"杨子江",
"age":22,
"sex":"男",//字符得带双引号
//访问方式: var 值 = 对象名.key ;
document.write("学生的姓名是:"+student.name+"<br/>") ;
document.write("学生的年龄是:"+student.age+"<br/>") ;
document.write("学生的性别是:"+student.gender+"<br/>") ;
document.write("学生的住址是:"+student.address+"<br/>") ;
//访问方法
//对象名.方法名() ;
student.study() ;
</script>
js常用事件编程
<!--
这些所有的事件在标签上 只需要在事件名称前面加上on..,将指定的事件绑定到onxx属性上
1)点击相关的事件
单击 click -- onclick属性
双击 dbclick -- ondblick属性
2)焦点事件
获取焦点 focus -- onfocus属性
失去焦点 blur -- onblur
3)选项卡发生变化的事件,一般用在select下拉菜单中
事件名称 change --onchange属性
-->
</head>
<body>
<input type="button" value="click" onclick="testClick()" /><br/>
<input type="button" value="dbClick" ondblclick="testDbClick()" /><br/>
用户名:<input type="text" id="username" value="请输入用户名"
onfocus="testFouces()" onblur="testBlur()" /><span id="tip"></span> <br/>
<hr/>
籍贯:
<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 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>
js
<script>
/* var arr = new Array(3);js是弱类型语言，所以不存在角标越界，元素可以不断扩容
可以存放任何类型的元素，1）指定数组长度2）不指定数组长度
alert(arr.length);
arr[0]=1;索引值从0开始 数组的对象名称[索引值]=实际值
arr[1]=2;
arr[2]=3;
arr[3]=4;
*/
//存放方式3）
var arr = [1,2,"a","b"]//可以存储各种类型，但在实际开发中，具体元素按照格式统一存放
alert(arr.length);//对象名.length属性:获取长度
for(i=0;i<arr.length;i++){//从1开始的话 终值arr.length-1
document.write(arr[i]+"<br />");
}
</script>
点击图1切换图2 再次点击切换回来
<title>如何用js实现点击图片切换为另一个图片 再次点击恢复</title>
</head>
<body>
<!-- <input type="text" placeholder="请输入用户名" id="username" onblur="get()"/> -->
<div id="button">
<img id="pic" src="img/下载.jfif" />
</div>
</body>
<script>
/* function get(){
var input = document.getElementById("username");
alert(input.value);
} */
function change(){
var button = document.getElementById("button");
var pic = document.getElementById("pic");
button.onclick = function(){
if(pic.getAttribute("src",2)=="img/OIP-C.jfif"){
pic.setAttribute("src","img/下载.jfif");
}else{
pic.setAttribute("src","img/OIP-C.jfif");
}
}
}
change();
</script>
常见的dom操作
<script>
function test(){
//alert("失去焦点事件触发");
//方式1 document.getElementById("Id属性值")
//常用的需要在标签中给定唯一id值
var input = document.getElementById("username");
//通过id="username"获取input对象
//方式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")[
//获取它的value属性:获取内容
alert(input.value);
}
</script>
事件编程
<title>常用的事件编程</title>
<!--
这些所有的事件在标签上 只需要在事件名称前面加上on,将指定的事件绑定到onxx属性上
1）点击相关的事件
单击 click -- onclick属性
双击 dbclick -- ondbclick属性
2）焦点事件
获取焦点 focus --onfocus属性
失去焦点blur -- onblur
3)选项卡发生变化的事件，一般用在select下拉菜单中
事件名称change -- onchange属性
-->
</head>
<body>
<input type="button" value="click" onclick="testClick()" /><br />
<input type ="button" value="dbclick" ondblclick="testDbClick()" /><br />
<!-- 不要忘记onclick属性后面跟的是函数，所以要加() 既onclick = "testClick()" -->
用户名:<input type="text" id="username" value="请输入用户名"
onfocus="testfocus()" onblur="testBlur()"/><span id="tip"></span><br />
<hr />
籍贯:
<select onchange="testChange()" id="pro">
<option value="请选择">请选择</option>
<option value="陕西省">陕西省</option>
<option value="山西省">山西省</option>
<option value="广东省">广东省</option>
</select>
<select id="city"></select>
</body>
<script>
function testClick(){
alert("单击事件触发");
}
function testDbClick(){
alert("双击事件触发");
}
//定义获取焦点事件函数
function testfocus(){
//将文本输入框的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>
3104
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
