A、我的第一个js程序:弹窗的实现
window.alert(1); 弹框。window可以省略。 兼容性不好,而且比较突然,基本用来测试代码。
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="utf‐8" />
5. <title>我的第一个js</title>
6. <script type="text/javascript"> 7. // alert('我的第一个js代码!');弹窗
8. var a;
9. a=88;
10. // var a=5; var用来定义变量的,a是变量名,给我一个临时空间存放东西,=叫做赋值,将右边的内容放到左边的变量里。
11. // alert(a);
12. var b=5;
13. var c='6';
14. alert(c+b);
15. // 两边是数字,+就是加法算数运算,如果两边是文字,+是连接符,把字符串拼接。
16. </script>
17. </head>
18. <body>
19.
20. </body>
21. </html>
B、函数:就是具备一定功能的代码段。声明函数如果不调用是不起作用的。
1. function 函数名(){
2. 代码段……
3. }
4. function tosmo(){
5. document.getElementById('box').style.width='100px';
6. document.getElementById('box').style.height='100px';
7. }
C、技术干货:
1、 JS控制样式 要控制一个元素或者说是标签,需要两步:
1.获取标签。2.控制样式。
2、 如何获取标签
通过document.getElementById()来实现获取页面当中要寻找的元素。 var nav= document.getElementById(“nav”);
3 、如何控制样式
找到元素,然后.style属性,.各种样式 = “”;
找到元素,然后.style属性,.各种样式 = “”; 元素(标签).style.width = “98px”;
.4、变量命名
a、变量命名必须以字母或是下标符号”_”或者”$”为开头。
b、变量名长度不能超过255个字符。
c、变量名中不允许使用空格,首个字不能为数字。
d、不用使用脚本语言中保留的关键字及保留符号作为变量名。
e、变量名区分大小写。(javascript是区分大小写的语言)
5、事件
onclick — —鼠标单击;
ondblclick — —鼠标双击;
onmouseout — —鼠标移除,即离开图片等所在的区域;
onmouseover — —鼠标悬停,即鼠标停留在图片等的上方;
onload — —网页文档加载事件;
6、window.onload事件:当页面加载完后,执行右边的程序代码段;
只能加载一次。如果有两次的话,只执行后一次。页面加载完毕后触发。
1. window.οnlοad=function (){
2.
3. }
D、代码的结构
1、顺序结构:
程序从上到下执行。
2、选择结构:
第一种:
- if(条件成立){
- 条件成立,语句1;
- }
- else{
- 条件不成立,语句2;
- }
第二种:
多条件语句:
- if(条件1){
- 语句1; }
- else if(条件2){
- 语句2; }
- ……
- else{
- 结束;
- }
多分支结构还有一个写法:
- var a=55;
- switch(a)
- case:条件1;
- 语句1;
- break;
- case:条件2;
- 语句2;
- break;
- case:条件3;
- 语句3;
- break;
- default;
举例说明:
new Date()是获取系统时间的函数,
getDay()是获取星期的函数,
这些都叫做系统函数,我们自己声明的函数,叫做自定义函数。
3、循环结构
第一种:
- while循环
- var i=0; 初始值
- while(i<5){ i<5 判断值
- 弹出i;
- i++; 自增值
- }
第二种:
for循环:这种写法比较常用
- for(var i=0;i<10;i++){
- 弹出i;
- }
特别说明:循环最核心是循环次数,取决于初始值、判断值、自增值的设计,
一般的写法是:从i=0到i<n之间自增 1(i++)循环共n次,也可以写成i=1到i<=n之间自增1(i++)循环共n次。
循环当中的break和continue
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="utf‐8">
5. <title>break和continue</title>
6. <script>
7. for(var i=0;i<5;i++)
8. {
9. if(i==2)
10. {
11. //break; //整个循环中断了
12. continue; //本次循环中断了
13. }
14. alert(i);
15. }
16. </script>
17. </head>
18.
19. <body>
20. </body>
21. </html>
判断语句的真假判断
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="utf‐8">
5. <title>真假判断</title>
6. <script>
7. //真:true、非零数字、非空字符串、非空对象
8. //假:false、数字零、空字符串、空对象、undefined
9.
10. var a;
11.
12. if(a)
13. {
14. alert('真的');
15. }
16. else
17. {
18. alert('假的');
19. }
20. </script>
21. </head>
22.
23. <body>
24. </body>
25. </html>
E、数据类型
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF‐8">
5. <title>常用数据类型</title>
6. <script type="text/javascript">
7. var a=4;
8. // 数字类型number
9. var b='4';
10. // 字符串string
11. var c=true;
12. // 布尔类型 boolean
13. var d;
14. // 未定义类型 undefined :真的没有定义;定义没赋值;
15.
16. var oa=document.getElementById('aa');
17. // 对象类型 object
18. var bb=function sum(){
19.
20. };
21. // 函数类型 Function
22. var kk=null;
23.
24. var ac=new Array('ds','sd','dsd');
25. alert(typeof kk);
26. //基本数据类型: 数字类型number,字符串string,布尔类型 boolean,未定义类型 undefined ,空类型 null
27. //
28. //复合数据类型:对象类型 object,函数类型 Function, 数组array
29. </script>
30. </head>
31. <body>
32. </body>
33. </html>
F、控制台
console.log(); 控制台输出日志(控制台.日志() ) 一般使用console.log来检测代码。
G、强制类型转换和隐式类型转换
parseInt() :可以将字符串转换成数字类型(整型)。
有三个作用:
1.可以将字符串转成数字;
2.取整;
3.将字符串前面的数字提取出来
parseFloat (): 转成浮点数,就是小数 。
像parseInt和parseFloat 这种强制把字符串转
成数字类型的方式,叫做强制类型转换。
H、函数参数的传递
函数分为无参函数和有参函数,无参函数就是函数里面什么都别写,有参函数有变量在里面。
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF‐8">
5. <title>参数的传递</title>
6. <script type="text/javascript">
7.
8. function aa(b,c){
9. // 函数的声明,无参函数aa(),aa(bb)叫做有参函数,bb形参,变量
10. alert(b+c);
11. }
12. // 函数的调用
13. aa(2,5);
14. // aa(85888)里面的叫做实参,真实的数值,常量。
15. //函数的传参:实参给形参的过程
16.
17. </script>
18. </head>
19. <body>
20. </body>
21. </html>
I、局部变量和全局变量
局部变量:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF‐8">
5. <title> 局部变量</title>
6. <script type="text/javascript">
7. function aa(){
8. var a=5;
9. // 局部变量,只在aa()函数体里面起作用。
10. }
11. function bb(){
12. var a=5;
13. alert(a);
14. }
15. bb();
16. </script>
17. </head>
18. <body>
19. </body>
20. </html>
全局变量:
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF‐8">
5. <title>全局变量</title>
6. <script type="text/javascript">
7. var a=888;
8. // 全局变量,但是:很少,尽量别用.
9. function aa(){
10. var a=55;
11. alert(a);
12. }
13. function bb(){
14. alert(a);
15. }
16. aa();
17. </script>
18. </head>
19. <body>
20. </body>
21. </html>
闭包:子函数使用父函数的局部变量
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF‐8">
5. <title>闭包</title>
6. <script type="text/javascript">
7. function aa(){
8. var a=55;
9. function bb(){
10. alert(a);
11. }
12. }
13. aa();
14. bb();
15. </script>
16. </head>
17. <body>
18. </body>
19. </html>
J、求模
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF‐8">
5. <title>求模</title>
6. <script type="text/javascript">
7. // var a=8;
8. // var b=3;
9. // alert(a%b); 求模:%
10. // 845秒显示成: 分 秒
11. var a=845;
12. alert(parseInt(a/60)+'分'+parseInt(a%60)+'秒');
13. </script>
14. </head>
15. <body>
16. </body>
17. </html>
k、运算符
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF‐8">
5. <title>运算符</title>
6. <script type="text/javascript">
7. // 算数运算符 + ‐ * / %
8. // 赋值运算符 = += ‐= *= /= %=
9. var a=2; 10. a=a+1; a+=1; a++;
11. a=a‐1; a‐‐;
12. a=a*1;
13. a=a%1;
14. // alert(a);
15. // 关系运算符:< > <= >= == === != !== 关系运算符:运算后就是真和假
16. // alert(true!=false);
17. // 逻辑运算符: && 与 || 或 !非
18. // &&:同时满足条件 :女生短裙能免费乐满地一日游;
19. // ||:只要满足一个即可:户口本或者身份证就可以领证啦。
20. // !:取反
21. var kk=80;
22. if(kk<60 && kk>=0){
23. alert('你不及格!');
24. }
25. else if(kk>=60 && kk<80){
26. alert('成绩还好吧');
27.
28. }
29. else if(kk>=80 && kk<=100){
30. alert('你好棒');
31. }
32. else{
33. alert('你输入错误!');
34. }
35. </script>
36. </head>
37. <body>
38. </body>
39. </html>
三目运算符 ?: 判断语句可以换这个写法
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="utf‐8">
5. <title>三目运算</title>
6. <script>
7. var a=14;
8.
9. /*if(a%2==0)
10. {
11. alert('双数');
12. }
13. else
14. {
15. alert('单数');
16. }*/
17.
18. a%2==0?alert('双数'):alert('单数');
19. </script>
20. </head>
21.
22. <body>
23. </body>
24. </html>
隐式类型转换的功能
1、-、*、/、% 先帮你把两边的数据转换成数字类型,再运算
2、= =等于,先转换后比较
3、= = =全等,恒等,不转换,直接比较
常用运算符优先级:
1.()
2.++ -- !;
3.* / %;
4.+ - ;
5.< > <= >=
6.== === != !==
7.&&
8.||
9.?:
L、数组
1. <!DOCTYPE html>
2. <html>
3. <head>
4. <meta charset="UTF‐8">
5. <title>数组</title>
6. <script type="text/javascript">
7. var aUserUame=['张三','李四','王五'];
8. var b=aUserUame.length;
9. alert(b);
10. </script>
11. </head>
12. <body>
13. </body>
14. </html>
M、this的含义:当前的
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="utf‐8">
5. <title>this的含义</title>
6. <style>
7. #div1 .active {background:yellow;}
8. #div1 div {width:200px; height:200px; background:#CCC; border:1px solid #999; display:none;}
9. </style>
10. <script>
11. window.οnlοad=function ()
12. {
13. alert(this.value);
14.
15. };
16. </script>
17. </head>
18.
19. <body>
20. <div id="div1">
21. <input class="active" type="button" value="教育" index="0" />
22. <input type="button" value="培训" index="1" />
23. <input type="button" value="招生" index="2" />
24. <input type="button" value="出国" index="3" />
25. </div>
26. </body>
27. </html>
N、innerHTML的使用
1. <!DOCTYPE HTML>
2. <html>
3. <head>
4. <meta charset="utf‐8">
5. <title>innerHTML</title>
6. <style>
7. #div1 {width:200px; height:150px; border:1px solid black;}
8. </style>
9. <script>
10. window.οnlοad=function ()
11. {
12. var oTxt=document.getElementById('txt1');
13. var oBtn=document.getElementById('btn1');
14. var oDiv=document.getElementById('div1');
15.
16. oBtn.οnclick=function ()
17. {
18. oDiv.innerHTML=oTxt.value;
19. //alert(oDiv.innerHTML);
20. };
21. };
22. </script>
23. </head>
24.
25. <body>
26. <input id="txt1" type="text" />
27. <input id="btn1" type="button" value="设置文字" />
28. <div id="div1">
29. </div>
30. </body>
31. </html>
O、命名规范
1、匈牙利命名法:
类型前缀+首字母大写 通过在变量名前面添加相应小写字母的符号标示作为前缀,标示出变量的作用域,类型等,
前缀后面是一个或多个单词组合,单词描述了变量的用途,如i表示的是整数,s表示的是字 符串。
示例:
- var sUserName = 'css8';
- var iCount = 0;
比如下面的登录框类名是user_login。
1. <div class="user_login"></div>
我们就可以这样命名变量:
1. var oDivUserLogin=document.getElementById('user_login');
2、骆驼式/驼峰命名法:
混合使用大小写字母来构成变量的名称。
示例:
- var printLoadTemplates;//名称首字母小写,其他每个单词的首字母大写
- var print_load_templates;//下划线法,每个单词用一个下划线标记
3、帕斯卡命名法
和驼峰命名法类似,但是,驼峰第一个单词首字母小写,而帕斯卡命名法第一个单词首字母也大写。
- var PrintLoadTemplates;//第一个单词首字母也大写
P、js选择DOM的方法
1、通过ID选取元素(getElementById)
1)使用方法:document.getElementById("domId") 其中,domId为要选取元素的id属性值
2)兼容性:低于IE8版本的IE浏览器对getElementById方法的实现是不区分元素ID号的大 小写的,并且会返回匹配name属性的元素。
2、通过名称name选取元素(getElementsByName)
1)使用方法:document.getElementsByName("domName") 其中,domName为要选取元素的name属性值
2)说明:
a. 返回值是一个nodeList集合(区别于Array)
b. 和ID属性不一样,name属性只在少数DOM元素中有效(form表单、表单元素、 iframe、img)。这是因为name属性是为了方便提交表单数据而打造的。
c. 为form、img、iframe、applet、embed、object元素设置name属性时,会自动在 Document对象中创建以该name属性值命名的属性。
所以可以通过document.domName引 用相应的dom对象
3)兼容性:IE中ID属性值匹配的元素也会一起返回
3、通过标签名选取元素(getElementsByTagName)
1)使用方法:element.getElementsByTagName("tagName") 其中,element是有效的DOM元素(包括document) tagName是DOM元素的标签名
2)说明:
a. 返回值是一个nodeList集合(区别于Array)
b. 该方法只能选取调用该方法的元素的后代元素。
c. tagName不区分大小写
d. 当tagName为*时,表示选取所有元素(需遵从b.规则)
e. HTMLDocument会定义一些快捷属性来访问标签节点。
如:document的 images、forms、links属性指 向<img>、<form>、<a>标签元素集合,而document.body和 document.head总是
指向body和head标签(当未显示声明head标签时,浏览器也会创建 document.head属性)
4、通过CSS类选取元素(getElementsByClassName)
1)使用方法:element.getElementsByClassName("classNames") 其中,element是有效的DOM元素(包括document)
classNames是CSS类名称的组合(多个类名之间用空格,可以是多个空格隔 开),
如element.getElementsByClassName("class2 class1")将选取elements后代元素中 同时应用了class1和class2样式的元素(样式名称不区分先后顺序)
2)说明:
a. 返回值是一个nodeList集合(区别于Array)
b. 该方法只能选取调用该方法的元素的后代元素。
3)兼容性:IE8及其以下版本的浏览器未实现getElementsByClassName方法
兼容代码如下:The Ultimate getElementsByClassName方案,作者为Robert Nyman,05 年实现。
1. //三个参数都是必需的,查找一网页中5007个类名为“cell”的元素,IE8历时1828 ~ 1844毫秒,
2. //IE6为4610 ~ 6109毫秒,FF3.5为46 ~ 48毫秒,opera10为31 ~ 32毫秒,Chrome为23~ 26毫秒,
3. //safari4为19 ~ 20毫秒
4. function getElementsByClassName(oElm, strTagName, strClassName){
5. var arrElements = (strTagName == "*" && oElm.all)? oElm.all :
6. oElm.getElementsByTagName(strTagName);
7. var arrReturnElements = new Array();
8. strClassName = strClassName.replace(/\‐/g, "\\‐");
9. var oRegExp = new RegExp("(^|\\s)" + strClassName + "(\\s|$)");
10. var oElement;
11. for(var i=0; i < arrElements.length; i++){
12. oElement = arrElements[i];
13. if(oRegExp.test(oElement.className)){
14. arrReturnElements.push(oElement);
15. }
16. }
17. return (arrReturnElements)
18. }
5、通过CSS选择器选取元素
1)使用方法:document.querySelectorAll("selector") 其中,selector为合法的CSS选择器
2)说明:a. 返回值是一个nodeList集合(区别于Array)
3)兼容性:IE8及其以下版本的浏览器只支持CSS2标准的选择器语法