JavaScript
js无需编译，直接被浏览器所解析。
两种引入方式
//内部js
<head>
<script>
//书写js代码
</script>
</head>
- 外部js
1.在外部定义.js为后缀的文件。
2.通过src属性来关联外部js文件。
<script type="text/javascript" src="js/js.js">
数据类型
1.number数据类型
2.string字符串
3.boolean
4.null
5.undefined
数组
//数组 内置对象
var arr=[];//空数组
//alert(arr.length);
arr[0]="abc";
arr[1]=true;
arr[2]=1;
//alert(arr.length);
//创建数组的同时赋值
arr=["dance","sing","draw","game"];
/*for(var i=0;i<arr.length;i++){
alert(arr[i]);
}*/
var array=new Array(23,34,12,87,100);
/*for(var i=0;i<array.length;i++){
alert(array[i]);
}*/
//实现数字排序
//定义一个比较器， 一定是按照数字大小去比较
function compare(a,b){
return a-b;
}
//排序
array.sort(compare);
document.write(array+"<br/>");
//反序
array.reverse();
document.write(array+"<br/>");
//添加元素到数组的末尾
array.push(98);
document.write(array+"<br/>");
//拼接
document.write(array.join("*")+"<br/>")函数
函数的定义两种方式：
-
function myfun(参数列表){方法体};
如果需要在js中定义带返回值的方法，只需要在方法体中使用return返回即可。
-
var 方法名=function (参数列表){方法体};
自定义对象
//自定义对象方式一
var obj=new Object(); //创建对象实例
obj.name='jack'; //定义一个属性同时为属性赋值
obj.age=21;
obj.sex="男";
obj.fun=function (){ //定义一个方法
return "name:"+obj.name+",age:"+obj.age+",sex:"+obj.sex;
}
//alert(obj.fun());
//自定义对象方式二
var obj1={
name:'tom',
age:23,
sex:"男",
fun:function (){
return "name:"+obj1.name+",age:"+obj1.age+",sex:"+obj1.sex;
}
}
//alert(obj1.name);
//alert(obj1.fun());事件
电脑输入设备与页面进行交互，当我们出发某一个按钮发生某种事件称为事件，执行某一段代码。
onload页面加载事件：当页面加载完成之后，要做的事情。
onclick单击事件：用于按钮的点击事件。
onblur失去焦点事件：用于输入框失去焦点后验证能容是否合法。
onsubmit表单提交事件：用于表单提交的，验证表单内容是否合法。
onmouseover：鼠标移动到某个元上
onmouseout：鼠标离开
onmousemove：鼠标移动
onkeydown：键盘被按钮
onkeyup：某个键盘被松开
onchange：内容被改变
onselect：文本被选中
静态注册和动态注册
静态注册：通过html标签的事件属性直接赋予事件后要执行的代码，这种方式叫做静态注册。
<script>
function myfun(){
alert("静态注册");
}
</script>
</head>
<body onload="myfun();">
</body>动态注册：先通过js代码得到标签对象，通过对象.事件名=function (){}这种形式叫做动态注册。
<script>
window.onload=function (){
alert("动态注册");
}
</script>onClick
<script>
//静态注册
function onclickBtn(){
alert("click");
}
//动态注册
window.onload=function (){
document.getElementById("btn1").onclick=function (){
alert("btn1 click");
}
}
</script>
</head>
<body>
<button onclick="onclickBtn();">btn1</button>
<button id="btn1">btn2</button>
</body>onChange
<script>
function myfun(){
alert('123');
}
window.onload=function (){
document.getElementById("city").onchange=function (){
alert('深圳');
}
}
</script>
</head>
<body>
<select onchange="myfun()">
<option>java工程师</option>
<option>运维工程师</option>
<option>售前工程师</option>
<option>产品经理</option>
</select>
<br />
<select id="city">
<option>广州</option>
<option>北京</option>
<option>深圳</option>
<option>长沙</option>
<option>上海</option>
</select>
</body>onSubmit
<script>
function onSubmit(){
alert('静态注册，用户长度必须是6-8数字与字母的组合');
return false; //发现表单项不合法，禁止提交
}
window.onload=function (){
document.getElementById("sub").onsubmit=function (){
alert('动态注册，密码长度必须是6-8数字与字母的组合');
return false;
}
}
</script>
</head>
<body>
<form action="#" method="post" onsubmit="return onSubmit();">
<input type="text" value="静态注册"/><br />
<input type="submit" value="提交"/>
</form>
<form action="#" method="post" id="sub">
<input type="text" value="动态注册"/><br />
<input type="submit" value="提交"/>
</form>
</body>Date日期类
<script>
/* var d=new Date();
document.write(d+"<br/>");
//d=new Date(2018,8-1,27);
document.write(d+"<br/>");
//d=new Date(2018,8-1,27,10,10,10);
document.write(d+"<br/>");
document.write(d.getFullYear()+"<br/>");
document.write(d.getMonth()+"<br/>");
document.write(d.getDate()+"<br/>");
document.write(d.getDay()+"<br/>"); //星期
document.write(d.getTime()+"<br/>");
document.write(d.toString()+"<br/>");
document.write(d.toLocaleString()+"<br/>");*/
//函数
function showTime(){
//当前时间显示在div中
var date=new Date();
var str_date=date.toLocaleString();
//document文档对象 get获得 Element元素 根据ById
var div=document.getElementById("time");
//需要将时间放到div的文本中
//innerHTML 用于表示所有标签之间的文本 div span
div.innerHTML=str_date;
//延迟调用的方法 递归调用
setTimeout("showTime();",1000); //2秒
}
</script>
</head>
<!-- onload页面加载完毕之后 -->
<body onload="showTime();">
<div id="time">
</div>
</body>Math随机数
<script>
document.write(Math.random()+"<br/>");
//使用随机数 和setTimeOut来实现一秒钟随机改变背景颜色
function changeBgColor(){
//document.bgColor="#FFCCEE";
//产生3个随机数 0-255之间
var r=Math.floor(Math.random()*256);
var b=Math.floor(Math.random()*256);
var g=Math.floor(Math.random()*256);
document.body.bgColor="rgb("+r+","+b+","+g+")";
setTimeout("changeBgColor()",1000);
}
</script>
</head>
<body onload="changeBgColor();">
</body>String字符串
<script>
//str 必须定义为全局变量
var str="猥琐发育别浪~~~";
function changeStr(){
//以第一个字作为头
var head=str.charAt(0);
//其他的所有的内容作为尾部
var foot=str.substring(1);
//每次将第一个字放到字符串的尾部
str=foot+head;
var input=document.getElementById("mytext").value=str;
setTimeout("changeStr();",200);
}
</script>
</head>
<body onload="changeStr();">
<input id="mytext" style="color: red;width: 150px;"/>
</body>document对象
document对象管理所有的html文档内容，我们可以通过document对象访问所有的标签对象，把我们标签都对象化了。
对象中的方法
document.getElemetById(元素id)：通过标签的id属性查找标签，元素id是标签的id属性值。
document.getElementsByName(元素名称):通过标签的name属性查找标签对象。
显示隐藏
| 属性 | 值 | 说明 |
| display | none | 隐藏,连位置都没有 |
| inline | 显示 | |
| block | 显示,元素独占一行 | |
| visibility | visible | 显示 |
| hidden | 隐藏,但保留位置 |
435
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
