首页 > 代码库 > 第一章

第一章

1.JS的位置

   1-1.行间

   1-2.内嵌

   1-3.外联  


2.JS的标签位置

   页面中的代码在一般情况下会按从上到下的顺序,从左往右的顺序执行。

    因此当JS放在了元素上面的时候,就不能正常执行。

   解决
             *     window.onload        页面加载完成之后再执行JS
             *     window.onload=function(){
             *         //当页面中的元素全部加载完成后执行这里的代码


3.JS变量
   
             * 变量
             *     可变的量(值)
             * 
             * 变量的好处
             *     1、可以复用代码
             *     2、可以精简代码
             * 
             * 声明变量方式
             *     var 变量名=值 
    3-1
             * 变量全名规则
             *     1、允许是字母,数字,下划线(_),美元符($)任意组合而成
             *     2、不允许数字开头
             *     3、不允许使用关键字和保留字
             *         关键字:当前语法中正在使用的单词
             *                 http://www.w3school.com.cn/js/pro_js_keywords.asp
             *         保留字:将来可能在语法中使用的单词
             *                 http://www.w3school.com.cn/js/pro_js_reservedwords.asp
             *     
             * 变量的命名风格
             *     语义化
             *         写的变量名尽量贴近实际的意思
             *             nav
             *     驼峰命名
             *         大驼峰
             *             首字母就大写
             *                 Math、Date

             *         小驼峰
             *             从第二个单词开始首字母大写
             *             getElementById
             *             get            获取
             *             Element        元素
             *             By            通过
             *             Id            id

      var box=document.getElementById(‘box‘);
4.函数
             *     复用代码,它复用是多行代码
             *     函数的名字在声明的时候尽量遵守变量的全名规则
             *     函数的定义
             *     function 函数名(){
             *         //这里面的代码,是要复用的代码,这里面可以放多行代码
             *     };
             * 函数调用
             *     函数名()  
            必须要调用函数才能实现函数内的代码。
 
                             function fn(){
                alert(1);
            };
            fn();

4-1匿名函数  
       匿名函数不能直接声明,会报错

             *     当匿名函数是以被赋值的形式所出现,并且它是被事件调用才会正确执行。
             * 事件        window.onload
             * 赋值        =
       
                              window.onload=function (){
                alert(1);    
            };
      当点击窗口便会弹出1
5.属性操作
             *     1、.    的
             *         元素.属性名
             *         如果属性是单一属性(例如font-size),用点操作符是取不到的,而且还会报错
             *         如果想用点操作符去获取带横杠的属性,那首先要把横杠去掉,然后把横杠后面的第一个字母大写
                   XXX.style.fontSize=
             *     2、[ ]    的
             *         如果属性中带横杠,用[]的方式去操作属性,并带上一对引号
                  XXX.style[‘font-size‘]=
                  3、区别    
                            ‘.‘ 点操作属性的时候,后面只能跟真正的属性名称,不能跟变量名
                                 XXX.style.background=
                           ‘[ ]‘操作属性的时候,里面可以放属性名称与变量名,如果放的时属性名,那要加引号,如果放的是变量名,那不需要加引号   
                            var name=background;
                            XXX.style[name]=
6.字符串
             *     字符串是js数据类型中的一种
             *     用一对单引号或者双引号包含起来的由0个或者多个字符组成的串
              例        var str=‘kaivon‘;
             * 字符串拼接
             *     +
             *     1、数学中的加法运算
             *     2、字符串连接
             *         当加号的任意一边有一个是字符串,那它就是字符串连接的意思
                 
               ‘img/‘+imgArr[n]+‘.jpg‘ 的意思为   img/imgArr[n].jpg
                 ‘a‘+10    的意思为      a10
                  ‘1‘+1    的意思为          11
                

7.innerHTML
              格式  XXX.innerHTML=‘   ‘;
             *     获取到是一个标签对里的所有内容
             *     如果标签对当中有其它的标签,那一样会拿的到                             
    <div id="box"><p>标题</p>这里是一段文字</div>
                  那么 var box=document.getElementById(‘box‘);
                          box.innerHTML 代表的就是 <p>标题</p>这里是一段文字

            *   在给innerHTML设置值的时候,如果这个值里面有html标签,那放到网页当中,会把它解析成一个真正的html标签
                           box.innerHTML=‘<span>XXX</span>‘;
                              这个div里面显示的内容则为XXX
                          如果赋予的值自带一对引号‘’ 则不需要再加引号
                           var name=‘HAHA‘;
                            box.innerHTML=name;
                               这个里面显示的内容则为HAHA
8.if   
             *     当代码有不同的情况需要去处理,这个时候就要用if
             * 
             * 语法
             *     if(判断条件){
             *         当判断条件成立的时候,会执行这里的代码
             *     }
             * 在判断条件中,因为js  “=” 被喻为赋值的功能,所以真真的等号为“ =="
                if(n==true)   或则  if(n==false)
                也不能以 style作为判断的条件,因为style操作的是行间样式,除非这个style是写在行间的。
             * if的判断条件为被转化成一个布尔值
             * 布尔值
             *         true            真
             *         false        假
             * 
             *     if的条件会被转化成布尔值,如果布尔值为true(真),大括号里的代码就会被执行,如果布尔值的结果为false(假),那大括号里的代码就不会被执行
            if(1<2){
                //当1<2这个条件成立,这里的代码才会执行
                alert(‘成立‘);
            }
            if(1<0){
                //1<0是不成立的,所以这里面的代码不会执行
                alert(‘不成立‘);
            }
            alert(1<2);    //true
            alert(1<0);    //false
9.if else
             * if        如果        当页面中只有一种特殊情况要去处理
             * else        否则        当页面中有两种特殊情况要去处理
             * 
             * 语法
             *     if(条件判断){
             *         当条件判断成立的时候,会执行这里的代码
             *     }else{
             *         当条件判断不成立的时候,会执行这里的代码
             *     }
             */
            
            if(1>2){
                //条件满足了,这里的代码执行了(只有当条件成立的时候,才走这里的代码)
                alert(‘成立‘);
            }else{
                //当条件不成立的时候,执行这里的代码
                alert(‘不成立‘);
            }
10.else if   
             * if        如果            只有一种特殊情况要去处理
             * else if    否则如果        有多种特殊情况要去处理
             * else        否则            有两种特殊情况要去处理
             
             * 
             * 语法
             *     if(判断条件){
             *         当判断条件成立的时候,执行这里的代码
             *     }else if(判断条件1){
             *         当头条条件1成立的时候,执行这里的代码
             *     }else if(判断条件2){
             *         当判断条件2成立的时候,执行这里的代码
             *     }else{
             *         当以上条件都不成立的时候,执行这里的代码
             *     }
             * 
             * 当一个条件满足的时候,代码只会走满足条件对应的大括号里的内容。其它的都不会走
             * 
             * 一个非0数字转布尔值的结果是true
             * =        赋值
             * ==    对比
             */
            
            var n=12;
            
            if(n<10){
                //这个条件成立,说明n是小于10的
                alert(‘n小于10‘);
            }else if(n==10){
                //这个条件成立,说明n是等于10
                alert(‘n等于10‘);
            }else{
                //以上条件都不成立,才会走这里的代码,代表n大于10
                alert(‘n大于10‘);
            }
11.数组(自己定义的组合)
             * 数组
             *     数据的组合
             * 
             * 语法
             *     []
             *     每个数据之间是用逗号隔开的,最后一个数据是没有逗号
             * 
             * 每个数据都会对应一个下标(序号)
             *         下标代表的意思是,每个数据都有一个自己的标识,用于方便获取
             *         下标值是从0开始
             * 
             * 数据会有一个length属性,代表数组中数据的个数
             * 
             * 取数组中的某个数据
             *     数组[下标值]

            //                  0        1        2        3        4         5           length=6
            var color=[‘red‘,‘green‘,‘blue‘,‘white‘,‘black‘,‘pink‘];        
            console.dir(color);
            
            console.log(color[1]);    //green
            console.log(color[4]);    //black
            
            console.log(color[color.length-1]);    //pink
12.获取元素的方法
           *     主语(限制范围):
             *         document            从整个文档中去获取一组元素
             *         父级                从父级下面去获取一级元素
 
             1.document.getElementById(id名称)
             *     通过id名称去获取一个元素,它只有一个主语,document(整个文档)
             2. getElementsByTagName(标签名称)
             *     通过标签名称去获取一组元素,它获取到的是一组元素
                            如果这一组元素在同一个父级下,获取到的是一个集合,   类数组
                              类数组:类似数组,但是数组中的一些方法,它没有
                               它只具备数组中的length属性,以及每个数据都会有一个自己对应的下标
             3. querySelector(css选择器)
             *     通过css选择器去获取一个元素
             *     它获取到的只有一个元素,如果说有重复的,那它只取第一个
             4. querySelectorAll(css的选择器)
             *     通过css选择器获取到一组元素
             *     它获取到的也是一组元素,它也是一个类数组
13for
             * for循环
             *     根据一定的条件,重复的执行一行或者多行代码
             * 
             * 语法
             *     for(条件初始化;条件判断;条件变化){
             *         当条件成立的时候(true)重复执行这里的代码
             *     }
             * 
             * 步骤
             *     第一步:条件初始化(声明了一个变量,给这个变量一个初始值)
             *             var i=0;
             * 
             *  第二步:条件判断(把变量的值限定了一个范围)
             *             i<10;
             *     
             *     第三步:走大括号里的代码(当条件判断成立的时候,走大括号里的代码)
             *             console.log(‘kaivon‘);
             *     
             *     第四步:条件判断(循环一次让变量的值加上1)
             *             i++;
             * 
             *     注意:从第二次循环开始,它就不走第一步了。不断的走第二步、第三步、第四步
             * 
             *     结束
             *         当判断条件不成立的时候,就结束循环
             *         循环什么时候结束由判断条件来决定的。一定要给一个条件(能够不成立的时候),否则就是一个死循环
             *     循环什么时候用
             *         当需要操作一组元素做同一件事件的时候就用for循环
  1. //获取到所有的li
  2. var lis1=document.querySelectorAll(‘li‘);
  3. //把所有的li的背景色全部变为红色
  4. // lis1[0].style.background=‘red‘;
  5. // lis1[1].style.background=‘red‘;
  6. // lis1[2].style.background=‘red‘;
  7. // lis1[3].style.background=‘red‘;
  8. // lis1[4].style.background=‘red‘;
  9. for(var i=0;i<lis1.length;i++){
  10. //i 0 1 2 3 4
  11. lis1[i].style.background=‘red‘;
  12. }
  13. };
  14. <ul>
  15. <li>red</li>
  16. <li>green</li>
  17. <li>blue</li>
  18. <li>yellow</li>
  19. <li>pink</li>
  20. </ul>
14this
             *     指的是当前对象
             *     它是关键词,不能当作变量名
             *     只能读,不能写。它的值只能用,不能修改

             *       被事件所调用,并且是以赋值的形式出现
             *        this指向是,谁调用了函数,那this就指向谁
  1. //获取到所有的li
  2. var lis1=document.querySelectorAll(‘li‘);
  3. //给每一个li都添加点击事件
  4. for(var i=0;i<lis1.length;i++){
  5. lis1[i].onclick=function(){
  6. //找点击的那个对象
  7. //这里的this代表谁点击了就指向谁
  8. //在循环的时候,给每个元素都添加了点击事件,想要在点击事件里找到点击的那个对象,不能用i的值作为下标去取,要用this,this指的就是点击的那个对象
  9. this.style.background=‘red‘;
  10. };
  11. }
  12. };
  13. <ul>
  14. <li>red</li>
  15. <li>green</li>
  16. <li>blue</li>
  17. <li>yellow</li>
  18. <li>pink</li>
  19. </ul>
15.自定义属性  
             * 属性
             *     元素身上所具有的一些特征
             *     
             *     1、系统自带的属性
             *         type、id、style、value、src
             *     2、自己添加的属性
             *         自定义属性,系统当中是没有的,我们自己添加的
             *         系统自带的属性,满足不了我们的需求,给一个自己添加的属性

                        inputs[i].index=i;    //给每个按钮添加一个自定义属性,存的是它们对应的索引值
                  
                     * inputs[0].index=0;
                     * inputs[1].index=1;
                     * inputs[2].index=2;                        



                        
                                    
                 


        




第一章