初探js

第一章

 

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名称)
                var text1=document.getElementById("text1");
             *     通过id名称去获取一个元素,它只有一个主语,document(整个文档)
             2. getElementsByTagName(标签名称)
                var lis=document.getElementsByTagName('li');
             *     通过标签名称去获取一组元素，它获取到的是一组元素
                            如果这一组元素在同一个父级下，获取到的是一个集合，   类数组
                              类数组：类似数组，但是数组中的一些方法，它没有
                               它只具备数组中的length属性，以及每个数据都会有一个自己对应的下标
             3. querySelector(css选择器)
                  var red=document.querySelector('#color li:first-child');
             *     通过css选择器去获取一个元素
             *     它获取到的只有一个元素，如果说有重复的，那它只取第一个
             4. querySelectorAll(css的选择器)
                  var lis=document.querySelectorAll('li');
             *     通过css选择器获取到一组元素
             *     它获取到的也是一组元素，它也是一个类数组
13for
             * for循环
             *     根据一定的条件，重复的执行一行或者多行代码
             * 
             * 语法
             *     for(条件初始化;条件判断;条件变化){
             *         当条件成立的时候（true）重复执行这里的代码
             *     }
             * 
             * 步骤
             *     第一步：条件初始化（声明了一个变量，给这个变量一个初始值）
             *             var i=0;
             * 
             *  第二步：条件判断（把变量的值限定了一个范围）
             *             i<10;
             *     
             *     第三步：走大括号里的代码（当条件判断成立的时候，走大括号里的代码）
             *             console.log('kaivon');
             *     
             *     第四步：条件判断（循环一次让变量的值加上1）
             *             i++;
             * 
             *     注意：从第二次循环开始，它就不走第一步了。不断的走第二步、第三步、第四步
             * 
             *     结束
             *         当判断条件不成立的时候，就结束循环
             *         循环什么时候结束由判断条件来决定的。一定要给一个条件（能够不成立的时候），否则就是一个死循环
             *     循环什么时候用
             *         当需要操作一组元素做同一件事件的时候就用for循环
  1. //获取到所有的li
  2. var lis1=document.querySelectorAll('li');
  4. //把所有的li的背景色全部变为红色
  5. // lis1[0].style.background='red';
  6. // lis1[1].style.background='red';
  7. // lis1[2].style.background='red';
  8. // lis1[3].style.background='red';
  9. // lis1[4].style.background='red';
  11. for(var i=0;i<lis1.length;i++){
  12. //i 0 1 2 3 4
  13. lis1[i].style.background='red';
  14. }
  15. };
  17. <ul>
  18. <li>red</li>
  19. <li>green</li>
  20. <li>blue</li>
  21. <li>yellow</li>
  22. <li>pink</li>
  23. </ul>
14this
             *     指的是当前对象
             *     它是关键词，不能当作变量名
             *     只能读，不能写。它的值只能用，不能修改
 
             *       被事件所调用，并且是以赋值的形式出现
             *        this指向是，谁调用了函数，那this就指向谁
  1. //获取到所有的li
  2. var lis1=document.querySelectorAll('li');
  4. //给每一个li都添加点击事件
  5. for(var i=0;i<lis1.length;i++){
  7. lis1[i].onclick=function(){
  8. //找点击的那个对象
  10. //这里的this代表谁点击了就指向谁
  12. //在循环的时候，给每个元素都添加了点击事件，想要在点击事件里找到点击的那个对象，不能用i的值作为下标去取，要用this,this指的就是点击的那个对象
  13. this.style.background='red';
  14. };
  15. }
  16. };
  18. <ul>
  19. <li>red</li>
  20. <li>green</li>
  21. <li>blue</li>
  22. <li>yellow</li>
  23. <li>pink</li>
  24. </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
 
posted @ 2017-01-30 15:02  CafeMing  阅读(243)  评论(0)  编辑  收藏  举报