1.js简介
// 写入HTML输出
document.write("<h1>aaa</h1>") //不推荐使用这种方法
//对事件作出反应 alert函数
<button type="button" onclick="alert('welcome!')">点击这里</button>
///改变HTML内容
x=document.getElementById('demo'); /*获取元素*/
x.innerHTML="Hello JavaScript!"; /*改变元素显示*/
//改变图片
<!DOCTYPE html>
<html>
<head>
<title>更换灯泡</title>
<meta charset="utf-8">
</head>
<body>
<img id="demo" src="http://www.w3school.com.cn/i/eg_bulboff.gif">
<button type="button" onclick="changecolor()" value="switch">开关</button>
<script type="text/javascript">
function changecolor() {
x=document.getElementById('demo');
if (x.src.match("bulboff")) {
x.src="http://www.w3school.com.cn/i/eg_bulbon.gif";
}
else{
x.src="http://www.w3school.com.cn/i/eg_bulboff.gif";
}
}
</script>
</body>
</html>//改变样式
x=document.getElementById('demo'); /*获取元素*/
x.style.color="red"; /*改变元素样式*/
//验证输入
<!DOCTYPE html>
<html>
<head>
<title>数字判断</title>
<meta charset="utf-8">
</head>
<body>
<input type="text" id="demo">
<script type="text/javascript">
function aaa() {
var x=document.getElementById('demo').value;
if(x==""||isNaN(x)){ /*判断是否为空，或是否是非数字*/
alert("不能为空且只能输入数字");
}
}
</script>
<button type="button" onclick="aaa()">确定</button>
</body>
</html>// 在html5中<script>已经无需+type="text/JavaScript"
// 通常的做法是外部js放在head中
<script src="myScript.js"><script>
// 内部js放在页面底部。
// js对大小写敏感
//能通过反斜杠\对字符串这行
document.write("Hello \
World!")
//单行注释，/**/多行注释
//定义变量
var x=2; //这是数字
var x="2"; //这是字符串
var name="KF",age=18,job="CEO"; /*一语句定义多变量*/
var name; /*相当于name=undefined*/
var x=y+2; /*定义算法*/
//数组1
var cars=new Array();
cars[0]="ag";
cars[1]="b";
//数组2
var cars=["a","b","c"];
//js对象
var person{firstname:"jc",lastname:"h",id:123};
document.write(person.firstname); //引用，得到jc
document.write(person[firstname]); //引用，得到jc
//undefined表示变量不含有值,通过cars=null将变量cars的值设置为空
// 声明类型
var carname=new String;//字符串类型
var x=new Number; //整型
var y=new Boolean; //布尔类型
var cars=new Array; //数组类型
var person=new Object; //对象类型
// js函数（在script）
function funName(arg1,arg2){
alert(arg1);
return arg2; //返回指定值,如果直接 return; 表示退出函数
}
var myVar=funName("a","b"); //这样myVar="b";
//js比较
greeting=(visitor=="a")?"b":"c";
//判断visitor是否等于"a",如果为真取b,否则取C、
//js Switch
switch(n)
{
case 1:
执行代码块 1
break;
case 2:
执行代码块 2
break;
default:
n 与 case 1 和 case 2 不同时执行的代码
}
// 循环continue
var x="";
for (var i = 0; i < 10; i++) {
if (i==3) {coninue;}
x=x+i+"<br/>";
}
document.getElementById('demo').innerHTML=x;
//如果i小于10，i+1。但i=3时，continue会直接调到重新循环 ,不会执行x=x+i+"<br/>",也就是显示时不会有数字3。
//break不仅能用在循环和switch中，还能用于跳出javascript块。
list:{ /*不懂这个list：{}*/
...
break list;
... //因为break了，所以后面的代码不会执行
}
// js错误
<!DOCTYPE html>
<html>
<head>
<title>JS错误</title>
<meta charset="utf-8">
</head>
<body>
<h1>这将测试输入值是否满足我们的规定</h1>
<p>请输入5~9之间的数字：</p>
<input type="text" name="num" id="input" />
<button type="button" onclick="testnum()">测试输入值</button>
<p id="mistake"></p>
<script type="text/javascript">
function testnum() {
try{
x=document.getElementById("input").value;
if (x=="") {throw "不能为空";}
else if (isNaN(x)) {throw "必须是数字";}
else if (x<5) {throw "输入值太小";}
else if (x>9) {throw "输入值太大";}
else{throw "你终于输入正确了";}
}
catch(err){
document.getElementById('mistake').innerHTML="错误："+err;
}
}
</script>
</body>
</html>2.HTML DOM
var x=document.getElementById("main");
var y=x.getElementByTagName("p");
y[0].innerHTML="00"; /*代替原有p元素下的内容*/
document.write(y[0].innerHTML) /*新开一行取y的值*/
//HTML DOM 修改htnl
Date() /*获取时间*/
document.getElementById('id').innerHTML="需要修改内容"; /*改变内容*/
document.getElementById('img').scr="/i/htc.jpg"; /*改变属性值*/
document.getElementById('P1').style.color="blue"; /*改变样式属性值*/
document.getElementById('p1').style.visibilit="bisible"; /*设置可见*/
//HTML DOM事件
onclick事件 //还有onload事件（打开页面启动）,onunload事件(有效但关闭网页时，alert已经被关闭)，onmouseover事件，onmouseout事件，onmousedown事件，onmouseup事件,onfocus事件。
<h1 onclick="changetext(this)">请点击文本</h1> //*直接分配属性*/
//使用html dom分配属性，id为mybutton的onclick属性被修改
document.getElementById('mybutton').onclick.function(){displayDate()};
<!DOCTYPE html>
<html>
<head>
<title>测试html_dom事件</title>
<meta charset="utf-8">
<style type="text/css">
div.test{
background-color: purple;
color: white;
width: 3em;
font-size: 24px;
font-weight: bold;
margin:0px;
border: 1px solid red;
}
input{
margin:2px auto;
border: 1px solid red;
}
</style>
</head>
<body onload="welcome()">
<div class="test" onmouseover="onover(this)" onmouseout="onout(this)" onmousedown="ondown(this)" onmouseup="onup(this)">HuangJC</div>
<div><input type="text" name="yourname" onfocus="changeyellow(this)" onfocusout="changenull(this)" /></div>
<script type="text/javascript">
function welcome(argument) {
alert("welcome to my web!")
}
function byebye(argument) {
alert("byebye");
}
function onover(argument) {
argument.innerHTML="就是帅";
}
function onout(argument) {
argument.innerHTML="HuangJC";
}
function ondown(argument) {
argument.style.backgroundColor="red"; //注意：竟然不是background-color.
}
function onup(argument) {
argument.style.backgroundColor="purple"; //注意：竟然不是background-color.
}
function changeyellow(argument) {
argument.style.backgroundColor="yellow";
}
function changenull(argument) {
argument.style.backgroundColor="white";
}
</script>
</body>
</html>
//HTML DOM节点（就是用javascript的方式创建div，段落等）
var para=document.createElement("p"); /*创建段落元素p*/
var node=document.createTextNode("这是字符串。"); /*创建文字节点*/
para.appendChild(node); /*向段落元素p追加文本节点，就是将文本放入P中*/
/*删除html元素，需要先获取该元素的父元素*/
var parent=document.getElementById('div1');
var child=document.getElementById('p1');
parent.removeChild(child);
/*通常做法：(这种做法不需要知道父元素ID)*/
var child=document.getElementById('p1');
child.parentNode.removeChild(child);
3. JS对象
var x=message.length; /*获取message对象属性*/
var x=message.toUpperCase(); /*获取message字符串方法*/
/*创建JS对象方法1*/
person=new Object();
person.name="KF";
/*创建JS对象方法2*/
person={name:"KF",age:18};
/*创建JS对象方法3,使用对象构造器*/
function person(name,age) {
this.name=name;
this.age=age;
this.changename=function changename(na) { /*添加方法*/
this.name=na;
}
}
/*利用对象创建实例*/
var myFather=new person('HJF',19)
var myMother=new person('CXM',14)
/*循环获取实例中的属性值*/
for(x in person){}
4.JS数字
所有数字都存储为8字节64位，浮点型。
var y=0377 /*0开头是八进制*/
var z=0xff /*0x开头是16进制*/
/*JS数字属性*/
MAX_VALUE /*最大的数*/
MIN_VALUE /*最小的数*/
NaN /*非数字值*/
NEGATIVE_INFINITY /*负无穷大*/
NPOSITIVE_INFINITY /*正无穷大*/
if(test.constructor==Array) /*判断数字类型*/
prototype /*是您有能力向对象添加属性和方法*/
/*JS数字方法*/
toString() /*把数字变成字符串，使用指定的基数*/
5.JS字符串方法
+KF.age.fontcolor("red")+ /*KF.age是一个对象中的属性，显示时时该属性值变成红色*/
.fontsize(16) /*字符大小*/
.big() /*变大*/
.small() /*变小*/
.bold() /*加粗*/
.italics() /*倾斜*/
.fixed() /*固定，案例中只是字母变细了*/
.strike() /*罢工，就是字符串中间又横杠*/
.toUpperCase() /*全大写*/
.toLowerCase() /*全小写*/
.sub() /*靠下图标*/
.sup() /*靠上图标*/
.link("www.zhilaiwu.com") /*链接*/
.index("a") /*指定a首次出现的位置，从左第0位开始*/
.match("hjc") /*匹配是否包含“hjc”，是返回"hjc"，否返回null*/
str.replace(/abc/,"hjc") /*用"hjc"代替str中的“abc”
6.JS日期
Date() /*可直接返回日期,包括年月日时分秒和时区*/
getTime() /*获取从1997年1月1日到现在的 毫秒 数 */
setFullYear(year,month,day) /*用于设置年份。年必填，month取值区间0~11，day取值区间1-31,时分秒去现在的*/
toUTCString() /*将获取的时间变成字符串*/
today=new Date()
today.getDay() /*返回星期几，是数字*/
today.getHours() /*获取时钟*/
today.getMinutes() /*获取分钟*/
today.getSeconds() /*获取秒钟*/
案例：显示星期和实时时间
<!DOCTYPE html>
<html>
<head>
<title>获取星期几和实时时间</title>
<meta charset="utf-8">
</head>
<body>
<h1>点击按钮会展示星期和实时时间</h1>
<button type="button" onclick="showdate()">出来吧！</button>
<p id="p1"></p>
<script type="text/javascript">
function showdate() {
var d=new Date()
var w=d.getDay()
var weekend=new Array(7)
weekend[0]="星期日"
weekend[1]="星期一"
weekend[2]="星期二"
weekend[3]="星期三"
weekend[4]="星期四"
weekend[5]="星期五"
weekend[6]="星期六"
var h=d.getHours()
var m=d.getMinutes()
var s=d.getSeconds()
m=checkTime(m)
s=checkTime(s)
function checkTime(i) {
if(i<10){
i="0"+i
}
return i
}
document.getElementById('p1').innerHTML="今天是："+weekend[w]+"<br />"+"时间是："+h+":"+m+":"+s
t=setTimeout("showdate()",500)
}
</script>
</body>
</html>7.js数组
/*创造数组并输出*/
var myarray=new Array() /*再创建数组时如果括号中有值，如Array(3)，表示这数组有3个值*/
myarray[0]='1'
myarray[1]="2"
for(x in myarray){
document.write(myarray[x]+"<br />")
}
/*另一种创建数组方法*/
var myarray=new Array("a","b","c")
/*合并数组*/
arr1.concat(arr2) /*arr2中的值排在arr1中的值后面*/
/*将所有值组成一个字符串,以.分开每个值*/
arr.join(".")
/*数组中的值以字母顺序排序*/
arr.sort()
/*对数组中的数字进行排序*/
arr.sort(sortNumber)
8.js布尔对象（逻辑）
true: 1,字符串
false: 0,-0,空字符串"",null,NaN,undefined,
/*创建布尔*/
var myBoolean=new Boolean()
9.js算数对象（math）
无需创建对象
/*算数值*/
Math.E /*常数*/
Math.PI /*圆周率*/
Math.SQRT2 /*2的平方根*/
Math.SQRT1_2 /*1/2的平方根*/
Math.LN2 /*2的自然对数*/
Math.LN10 /*10的自然对数*/
Math.LOG2E /*以2为底的e的对数*/
Math.LOG10E /*以10为底的e的对数*/
/*算数方法*/
Math.round(4.7) /*四舍五入*/
Math.random() /*随机数0~1之间*/
Math.max(1.5,1.7) /*取最大值，min是最小值*/
Math.floor(1.6) /*返回接近小于或等于的整数，这里返回值是1*/
10.JS正则表达式(RegExp)
/*创建对象，检索内容为"e"*/
var patt1=new RegExp("e")
/*如果存在"e"，返回true，否则返回false*/
document.write(patt1.test("Hello,World"))
/*这种是存在"e"，就返回"e"，否则返回null*/
document.write(patt1.exec("Hello World"))
/*在上面基础上，全球检索，连续返回，结果类似eeenull*/
var patt1=new RegExp("e","g") /*g代表global*/
/*已经检索了e，但又想连续不断检索是否有q*/
var patt1=new RegExp("e")
document.write(patt1.test("Hello,World"))
patt1.compile("q")
document.write(patt1.test("Hello,World"))/*返回truefalse*/