JavaScript

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、选择结构:

第一种:


  
  
  1. if(条件成立){
  2. 条件成立,语句1;
  3. }
  4. else{
  5. 条件不成立,语句2;
  6. }


第二种:

多条件语句:


  
  
  1. if(条件1){
  2. 语句1; }
  3. else if(条件2){
  4. 语句2; }
  5. ……
  6. else{
  7. 结束;
  8. }


多分支结构还有一个写法:


  
  
  1. var a=55;
  2. switch(a)
  3. case:条件1;
  4. 语句1;
  5. break;
  6. case:条件2;
  7. 语句2;
  8. break;
  9. case:条件3;
  10. 语句3;
  11. break;
  12. default;


 举例说明:

new Date()是获取系统时间的函数,

getDay()是获取星期的函数,

这些都叫做系统函数,我们自己声明的函数,叫做自定义函数。


3、循环结构

第一种:


  
  
  1. while循环
  2. var i=0; 初始值
  3. while(i<5){ i<5 判断值
  4. 弹出i;
  5. i++; 自增值
  6. }


第二种:

for循环:这种写法比较常用


  
  
  1. for(var i=0;i<10;i++){
  2. 弹出i;
  3. }


特别说明:循环最核心是循环次数,取决于初始值、判断值、自增值的设计,

一般的写法是:从i=0到i<n之间自增 1(i++)循环共n次,也可以写成i=1到i<=n之间自增1(i++)循环共n次。


循环当中的breakcontinue

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表示的是字 符串。

示例:


  
  
  1. var sUserName = 'css8';
  2. var iCount = 0;


比如下面的登录框类名是user_login。

1.  <div class="user_login"></div>


我们就可以这样命名变量:

1.  var oDivUserLogin=document.getElementById('user_login');


2、骆驼式/驼峰命名法: 

混合使用大小写字母来构成变量的名称。

示例:


  
  
  1. var printLoadTemplates;//名称首字母小写,其他每个单词的首字母大写
  2. var print_load_templates;//下划线法,每个单词用一个下划线标记


3、帕斯卡命名法 

和驼峰命名法类似,但是,驼峰第一个单词首字母小写,而帕斯卡命名法第一个单词首字母也大写。


  
  
  1. 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标准的选择器语法






  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值