纯手打。。。。
1.value和innerHTML没有联系,只是value是表单的一个特有属性,而innerHTML是通用的。
2.当从外部引入js文件时,该外部文件里面可以有多个方法,
html页面中的onclick只选中其中一个方法即可。
做法是在<script src="外部文件名.js"></script>
注意:外部脚本不能包含<script></script>标签。
3. js有四种方法显示数据:window.alert();弹出警示框
document.write();将内容写到 HTML文件中
innerHTML;写入到HTML元素中
console.log()写入到浏览器的控制台
注意:1》当页面加载完成后执行document.write(),则会被覆盖。
2》使用console.log(),在浏览器中按F12,然后点击console
1》 <p>大家好</p>
<button type="button" οnclick="a()">点击</button>
<script>
function a(){
document.write("糟了");
}
</script>
3》innerHTML比document.write先显示
4.js中数字可以是整数,小数和e,不需要引号。文字内容需要用单/双引号连接。
5.js字母大小写非常敏感
函数 getElementById 与 getElementbyID 是不同的。
同样,变量 myVariable 与 MyVariable 也是不同的。
6.js常见命名是用驼峰法。如:lastName
7.js中用分号来结束语句是可选的,并且用分号的作用是为了在一行可以编写多条语句。
如:a=1;b=4;
8.js会忽略多余的空格,来提高可读性。
9.js中命名对象是使用键值对的方式,以{}开始和结尾。普通数组则是用[];
<script>
//采用键值对的方式
var person={name:"liuaihong",age:12,job:"boss"};
document.write(person.name+"<p>");
document.write(person["age"]);
</script>
10. 若没有赋值为var,则默认为全局变量,记住,位置不能变!js是从上到下编译!
window是全局变量,所有数据都属于window对象。
<body>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML=a;
=window.a;
function myFunction(){
a="hah";
}
</script>
</body>
11.js中的字符串中可以使用任何符号,也可以使用转义字符,但是注意不能跟外部的引号一样即可。
\+符号=符号
12. ==意思是绝对相等,数据类型和值都必须相等。
x+=y意思是x=x+y
13.字符与数字相加,返回字符串,数字与数字相加,返回数字。
注意: 空文本 + 数字得到的运算结果都是把数字转成字符串,无论文本有多少个空格。但是空
格会计入长度。
var re=""+5;显示"5"
var re=" "+5;显示" 5"//空格也会显示
var re=5+5+"abc";显示"10abc"
var re=""+5+5+"abc";显示"55abc
14.只有单独的if 语句时,条件为true才会执行,当不为true时,则不执行任何代码。
15.时间的函数:var d=new Date();
d.getHours();//获取当前时间
d.getDay();//获取星期几
16.switch情况,当两种情况相同时,可以只在第一个情况下面写代码。
switch(number)
{
case 1:alert("1");break;
case 10:
case 11:alert("10 或 11");break;
default:alert("都不是");
}
17. for in是循环遍历对象的属性值
function myFunction(){
var person={name:"liu",age:12,address:"haha"};//对象数组的书写
方式
var x;
var txt="";//txt需要设置值,不然会显示为undefined
for(x in person){
txt=txt+person[x];//需要加上txt,不然只会遍历最后一个
的值
}
document.getElementById("demo1").innerHTML=txt;
}
18.while是遍历为true时的值。 do while是先进行一次代码的执行,再判断,所以最少执行一次。
<script>
function myFunction(){
var i=6,txt="";
do{
txt=txt+i;
i++;
}
while(i<5);
document.getElementById("demo").innerHTML=txt;
}
</script>
19. break是终止循环,continue是跳出本次循环,而继续执行其后面的代码,如果有的话。
20.typeof是用来检测变量的数据类型,null可以把变量的值改变,改为空,但是其数据类型还是不会变。
而undefined也是清空对象,但是类型也成了undefined.
21.js中有5种数据类型:string ,number,boolean,object,function
3种对象类型:Object,Date,Array
2种不包含任何值的数据类型:null,undefined
22.一元运算符可以把字符类型转化为数字类型:x=+y为number类型。
23.正则表达式(RE),使用单个字符串来描述、匹配一些类符合某个语法规则的字符串搜索模式,一般用于
search()和 replace()方法。
RegExp对象是一个预定义了属性和方法的正则表达式。
test()是检测一个字符串是否匹配某个模式。
var patt=new RegExp("e");
document.write(patt.test("the eel"));//返回true
document.write(patt.exec("hello eee"));//返回e,不匹配就返回null
24.try 和 catch是成对出现的
try{
addlert("welcome!");
}
catch(err){
alert(err.message);
}
25. 在js输出语句中直接用回车换行是会报错的。
注意,不能对return语句进行换行。
注意,定义数组和对象,最后一个不能加逗号
points = [40, 100, 1, 5, 25, 10,];
websites = {site:"菜鸟教程", url:"www.runoob.com", like:460,}
26.表单自动验证使用required
<form action="demo_form.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="提交">
</form>
27.获取表单的值
var fname=document.forms["myForm"]["fname"].value;
28.<a href="javascript:void(0);">点击我什么都不会发生</a>
<a href="#">点我会调到默认的当前页的顶部</a>
29.通常运算符 ( = + - * / ) 前后需要添加空格:
var x = y + z;
通常使用 4 个空格符号来缩进代码块:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
通常左花括号前加一个空格,右花括号单独放在一行
for (i = 0; i < 5; i++) {
x += i;
}
- 通常在 JavaScript 中被认为是减法,所以不允许使用。 一般使用下划线_.
js函数
1.函数显式参数(Parameters)与隐式参数(Arguments) ;
2.如果一个函数调用前使用了new关键字,则这是一个构造函数
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
var x = new myFunction("John","Doe");
3.call()方法和apply()方法是预定义的两个方法,两个方法的第一个参数必须是对象本身。
myObject = myFunction.call(myObject, 10, 2); // 返回 20
myObject = myFunction.apply(myObject, myArray); // 返回 20
4.闭包就是一个函数引用另一个函数的变量,因为变量被引用着所以不会被回收,因此可以用来封装一个私
有变量。这是优点也是缺点,不必要的闭包只会增加内存消耗。
或者说闭包就是子函数可以使用父函数的局部变量,还有父函数的参数。
闭包是可访问上一层函数作用域里变量的函数,即便上一层函数已经关闭。
HTML DOM文档对象模型
1.通过 HTML DOM可访问js html文档的所有元素。
2.var x=document.getElementById("demo").getElementsByTagName("p");
document.write(x[1].innerHTML); //根据标签查找,p是一个标签。
document.getElementsByClassName("intro");函数来查找 class="intro" 的元素;
document.getElementById("image").src="a.jpg";//可以改变html的属性,原图为b.jpg,现改为a.jpg
document.getElementById("p2").style.color="blue";//可改变css的样式,比如改变颜色等。
document.getElementById("p1").style.visibility="hidden";//改变文本,使之隐藏。
doucment.getElementById("P2").addEventListener("click",displayDate);//点击时,事件加载。
js对象
1.js是基于prototype,而不是基于类的。
prototype 属性使您有能力向对象添加属性和方法。
2.js用Infinity来表示数字的无穷大。
3.一个数字除以一个字符串结果不是一个数字、一个数字除以一个字符串数字结果是一个数字
var x = 1000 / "Apple";//不是数字,返回false
var y = 1000 / "1000";//是数字,返回true
4.String是一个字符串对象,a.lenght计算字符长度
a.indexOf("")计算字符串出现的位置,没有返回-1
a.match("")查找字符串中特定的字符,若找到则返回这个字符。
a.replace("新的","旧的")替代指定字符
a.toUpperCase()大写
a.toLowerCase()小写
5.Array数组对象:var a=["一","二","三","四"];
a.concat(b,c);//合并两个数组
a.shift();//删除数组第一个元素
a.pop();//删除数组的最后一个元素
aunshift("");//在数组最前面加上元素
a.push("xxx");//在数组末尾加上一个元素
a.reverse();//将数组元素顺序反转排序
a.sort();//按升序排列数组
a.toString();//数组转化成字符串
6.Math对象: a.Math.round(4.3);//返回最接近4.3的数,4
a.Math.random();//返回0-1之间的随机数
a.Math.max(a,b,c..);返回a,b,c..中最大的一个数
a.Math.min(a,b,c..);返回a,b,c..中最小的一个数
JS BOM浏览器对象模型
1.location.href;//返回URL
location.hostname;//返回web主机域名
location.pathname;//返回当前页面的路径和文件名
location.port;//返回web主机的端口
location.protocol;//返回使用的web协议
注意:不能使用window这个前缀。
2.history.back();//返回上一个地址
history.forward();//返回下一个地址
3.navigator.attribute;//返回当前浏览器的信息
4.弹窗alert();//提示
confirm("sometext");//警告
prompt("sometext","默认");//输入数据并继续
5.setInterval(function(){},时间);//间隔相同的时间执行相同的代码,1000ms为1秒
clearInterval(a);//停止
setTimeOut(function(){},时间);//设置方法执行的时间
clearTimeOut(a);//停止,你必须在它设置的时间之前阻止它
1.value和innerHTML没有联系,只是value是表单的一个特有属性,而innerHTML是通用的。
2.当从外部引入js文件时,该外部文件里面可以有多个方法,
html页面中的onclick只选中其中一个方法即可。
做法是在<script src="外部文件名.js"></script>
注意:外部脚本不能包含<script></script>标签。
3. js有四种方法显示数据:window.alert();弹出警示框
document.write();将内容写到 HTML文件中
innerHTML;写入到HTML元素中
console.log()写入到浏览器的控制台
注意:1》当页面加载完成后执行document.write(),则会被覆盖。
2》使用console.log(),在浏览器中按F12,然后点击console
1》 <p>大家好</p>
<button type="button" οnclick="a()">点击</button>
<script>
function a(){
document.write("糟了");
}
</script>
3》innerHTML比document.write先显示
4.js中数字可以是整数,小数和e,不需要引号。文字内容需要用单/双引号连接。
5.js字母大小写非常敏感
函数 getElementById 与 getElementbyID 是不同的。
同样,变量 myVariable 与 MyVariable 也是不同的。
6.js常见命名是用驼峰法。如:lastName
7.js中用分号来结束语句是可选的,并且用分号的作用是为了在一行可以编写多条语句。
如:a=1;b=4;
8.js会忽略多余的空格,来提高可读性。
9.js中命名对象是使用键值对的方式,以{}开始和结尾。普通数组则是用[];
<script>
//采用键值对的方式
var person={name:"liuaihong",age:12,job:"boss"};
document.write(person.name+"<p>");
document.write(person["age"]);
</script>
10. 若没有赋值为var,则默认为全局变量,记住,位置不能变!js是从上到下编译!
window是全局变量,所有数据都属于window对象。
<body>
<p id="demo"></p>
<script>
myFunction();
document.getElementById("demo").innerHTML=a;
=window.a;
function myFunction(){
a="hah";
}
</script>
</body>
11.js中的字符串中可以使用任何符号,也可以使用转义字符,但是注意不能跟外部的引号一样即可。
\+符号=符号
12. ==意思是绝对相等,数据类型和值都必须相等。
x+=y意思是x=x+y
13.字符与数字相加,返回字符串,数字与数字相加,返回数字。
注意: 空文本 + 数字得到的运算结果都是把数字转成字符串,无论文本有多少个空格。但是空
格会计入长度。
var re=""+5;显示"5"
var re=" "+5;显示" 5"//空格也会显示
var re=5+5+"abc";显示"10abc"
var re=""+5+5+"abc";显示"55abc
14.只有单独的if 语句时,条件为true才会执行,当不为true时,则不执行任何代码。
15.时间的函数:var d=new Date();
d.getHours();//获取当前时间
d.getDay();//获取星期几
16.switch情况,当两种情况相同时,可以只在第一个情况下面写代码。
switch(number)
{
case 1:alert("1");break;
case 10:
case 11:alert("10 或 11");break;
default:alert("都不是");
}
17. for in是循环遍历对象的属性值
function myFunction(){
var person={name:"liu",age:12,address:"haha"};//对象数组的书写
方式
var x;
var txt="";//txt需要设置值,不然会显示为undefined
for(x in person){
txt=txt+person[x];//需要加上txt,不然只会遍历最后一个
的值
}
document.getElementById("demo1").innerHTML=txt;
}
18.while是遍历为true时的值。 do while是先进行一次代码的执行,再判断,所以最少执行一次。
<script>
function myFunction(){
var i=6,txt="";
do{
txt=txt+i;
i++;
}
while(i<5);
document.getElementById("demo").innerHTML=txt;
}
</script>
19. break是终止循环,continue是跳出本次循环,而继续执行其后面的代码,如果有的话。
20.typeof是用来检测变量的数据类型,null可以把变量的值改变,改为空,但是其数据类型还是不会变。
而undefined也是清空对象,但是类型也成了undefined.
21.js中有5种数据类型:string ,number,boolean,object,function
3种对象类型:Object,Date,Array
2种不包含任何值的数据类型:null,undefined
22.一元运算符可以把字符类型转化为数字类型:x=+y为number类型。
23.正则表达式(RE),使用单个字符串来描述、匹配一些类符合某个语法规则的字符串搜索模式,一般用于
search()和 replace()方法。
RegExp对象是一个预定义了属性和方法的正则表达式。
test()是检测一个字符串是否匹配某个模式。
var patt=new RegExp("e");
document.write(patt.test("the eel"));//返回true
document.write(patt.exec("hello eee"));//返回e,不匹配就返回null
24.try 和 catch是成对出现的
try{
addlert("welcome!");
}
catch(err){
alert(err.message);
}
25. 在js输出语句中直接用回车换行是会报错的。
注意,不能对return语句进行换行。
注意,定义数组和对象,最后一个不能加逗号
points = [40, 100, 1, 5, 25, 10,];
websites = {site:"菜鸟教程", url:"www.runoob.com", like:460,}
26.表单自动验证使用required
<form action="demo_form.php" method="post">
<input type="text" name="fname" required>
<input type="submit" value="提交">
</form>
27.获取表单的值
var fname=document.forms["myForm"]["fname"].value;
28.<a href="javascript:void(0);">点击我什么都不会发生</a>
<a href="#">点我会调到默认的当前页的顶部</a>
29.通常运算符 ( = + - * / ) 前后需要添加空格:
var x = y + z;
通常使用 4 个空格符号来缩进代码块:
function toCelsius(fahrenheit) {
return (5 / 9) * (fahrenheit - 32);
}
通常左花括号前加一个空格,右花括号单独放在一行
for (i = 0; i < 5; i++) {
x += i;
}
- 通常在 JavaScript 中被认为是减法,所以不允许使用。 一般使用下划线_.
js函数
1.函数显式参数(Parameters)与隐式参数(Arguments) ;
2.如果一个函数调用前使用了new关键字,则这是一个构造函数
function myFunction(arg1, arg2) {
this.firstName = arg1;
this.lastName = arg2;
}
var x = new myFunction("John","Doe");
3.call()方法和apply()方法是预定义的两个方法,两个方法的第一个参数必须是对象本身。
myObject = myFunction.call(myObject, 10, 2); // 返回 20
myObject = myFunction.apply(myObject, myArray); // 返回 20
4.闭包就是一个函数引用另一个函数的变量,因为变量被引用着所以不会被回收,因此可以用来封装一个私
有变量。这是优点也是缺点,不必要的闭包只会增加内存消耗。
或者说闭包就是子函数可以使用父函数的局部变量,还有父函数的参数。
闭包是可访问上一层函数作用域里变量的函数,即便上一层函数已经关闭。
HTML DOM文档对象模型
1.通过 HTML DOM可访问js html文档的所有元素。
2.var x=document.getElementById("demo").getElementsByTagName("p");
document.write(x[1].innerHTML); //根据标签查找,p是一个标签。
document.getElementsByClassName("intro");函数来查找 class="intro" 的元素;
document.getElementById("image").src="a.jpg";//可以改变html的属性,原图为b.jpg,现改为a.jpg
document.getElementById("p2").style.color="blue";//可改变css的样式,比如改变颜色等。
document.getElementById("p1").style.visibility="hidden";//改变文本,使之隐藏。
doucment.getElementById("P2").addEventListener("click",displayDate);//点击时,事件加载。
js对象
1.js是基于prototype,而不是基于类的。
prototype 属性使您有能力向对象添加属性和方法。
2.js用Infinity来表示数字的无穷大。
3.一个数字除以一个字符串结果不是一个数字、一个数字除以一个字符串数字结果是一个数字
var x = 1000 / "Apple";//不是数字,返回false
var y = 1000 / "1000";//是数字,返回true
4.String是一个字符串对象,a.lenght计算字符长度
a.indexOf("")计算字符串出现的位置,没有返回-1
a.match("")查找字符串中特定的字符,若找到则返回这个字符。
a.replace("新的","旧的")替代指定字符
a.toUpperCase()大写
a.toLowerCase()小写
5.Array数组对象:var a=["一","二","三","四"];
a.concat(b,c);//合并两个数组
a.shift();//删除数组第一个元素
a.pop();//删除数组的最后一个元素
aunshift("");//在数组最前面加上元素
a.push("xxx");//在数组末尾加上一个元素
a.reverse();//将数组元素顺序反转排序
a.sort();//按升序排列数组
a.toString();//数组转化成字符串
6.Math对象: a.Math.round(4.3);//返回最接近4.3的数,4
a.Math.random();//返回0-1之间的随机数
a.Math.max(a,b,c..);返回a,b,c..中最大的一个数
a.Math.min(a,b,c..);返回a,b,c..中最小的一个数
JS BOM浏览器对象模型
1.location.href;//返回URL
location.hostname;//返回web主机域名
location.pathname;//返回当前页面的路径和文件名
location.port;//返回web主机的端口
location.protocol;//返回使用的web协议
注意:不能使用window这个前缀。
2.history.back();//返回上一个地址
history.forward();//返回下一个地址
3.navigator.attribute;//返回当前浏览器的信息
4.弹窗alert();//提示
confirm("sometext");//警告
prompt("sometext","默认");//输入数据并继续
5.setInterval(function(){},时间);//间隔相同的时间执行相同的代码,1000ms为1秒
clearInterval(a);//停止
setTimeOut(function(){},时间);//设置方法执行的时间
clearTimeOut(a);//停止,你必须在它设置的时间之前阻止它