JavaScript学习笔记

javascript
他是一种独立的语言，一般存在于html文件中，浏览器就是js的解释器
script可以和CSS的style一样放在head标签里面，也可以写一个commons.js文件，导入即可

语言的学习内容：
写js代码可以在html文件里面进行也可以在浏览器上点击审查元素，在console里面调试编写
变量的创建方式：
    全局变量：
        a ='asdf' 一般很少
    局部变量(在函数里面)
         var b = 'asdasd'
基本的数据类型
      数字
            a= 12
            age='18';
            转换类型
            a = parseInt(age);
            b= parsefloat(age)
      字符串

              obj.length                           长度
              obj.trim()                           移除空白
              obj.trimLeft()
              obj.trimRight)
              obj.charAt(n)                        返回字符串中的第n个字符
              obj.concat(value, ...)               拼接
              obj.indexOf(substring,start)         子序列位置
              obj.lastIndexOf(substring,start)     子序列位置
              obj.substring(from, to)              根据索引获取子序列
              obj.slice(start, end)                切片
              obj.toLowerCase()                    大写
              obj.toUpperCase()                    小写
              obj.split(delimiter, limit)          分割
              obj.search(regexp)                   从头开始匹配，返回匹配成功的第一个位置(g无效)
              obj.match(regexp)                    全局搜索，如果正则中有g表示找到全部，否则只找到第一个。
              obj.replace(regexp, replacement)     替换，正则中有g则替换所有，否则只替换第一个匹配项，
                                                   $数字：匹配的第n个组内容；
                                                   $&：当前匹配的内容；
                                                   $`：位于匹配子串左侧的文本；
                                                   $'：位于匹配子串右侧的文本
                                                   $$：直接量$符号
      列表（数组）
                    obj.length          数组的大小
                    obj.push(ele)       尾部追加元素
                    obj.pop()           尾部获取一个元素
                    obj.unshift(ele)    头部插入元素
                    obj.shift()         头部移除元素
                    obj.splice(start, deleteCount, value, ...)  插入、删除或替换数组的元素
                                        obj.splice(n,0,val) 指定位置插入元素
                                        obj.splice(n,1,val) 指定位置替换元素
                                        obj.splice(n,1)     指定位置删除元素
                    obj.slice( )        切片
                    obj.reverse( )      反转
                    obj.join(sep)       将数组元素连接起来以构建一个字符串
                    obj.concat(val,..)  连接数组
                    obj.sort( )         对数组元素进行排序
      字典
      布尔     
             “真“为小写（true）
               ==      比较值相等
               !=       不等于
               ===   比较值和类型相等
               !===  不等于
               ||        或
               &&      且

条件语句
for循环
    1、循环列表的时候循环的是元素的索引所以要这么写
        1. 循环时，循环的元素是索引
            a = [11,22,33,44]
            for(var item in a){
                console.log(item);
            }

            a = {'k1':'v1','k2':'v2'}
            for(var item in a){
                console.log(item);
            }

        2.
            for(var i=0;i<10;i=i+1){
            }
            这种方式不支持字典
            a = [11,22,33,44]
            for(var i=0;i<a.length;i=i+1){
            }

条件语句

if(条件){

}else if(条件){

}else if(条件){

}else{

}

== 值相等

=== 值和类型都相等

&& and

|| or

函数的创建：
            funtion 函数名（a,b,c）{
            }
            调用的时候函数名（1,2,3）

DOM：文件对象，用来找到html文件中的标签
        1、找到标签
            获取单个元素document.getElementById('i1')
            获取多个元素(返回列表)document.getElementsByName('asda')
            获取多个元素(返回列表)document.getElementsByTagName('div')
            获取多个元素（返回列表）document.getElementsByClassName('c1')
           间接找：
                  #parentNode          // 父节点
                  #childNodes          // 所有子节点
                  #firstChild          // 第一个子节点
                  #lastChild           // 最后一个子节点
                  #nextSibling         // 下一个兄弟节点
                  #previousSibling     // 上一个兄弟节点
                  parentElement           // 父节点标签元素
                  children                // 所有子标签
                  firstElementChild       // 第一个子标签元素
                  lastElementChild        // 最后一个子标签元素
                  nextElementtSibling     // 下一个兄弟标签元素
                  previousElementSibling  // 上一个兄弟标签元素

        2、操作标签
            获取标签内的内容
            标签.innerText
            b.classname
                b.classname 直接整体操作
                b.classlist.add(样式名字) 添加样式
                b.classlist.remove(样式名字) 删除样式
             c、checkbox
                    获取值
                        checkbox对象.checked
                        设置
                        checkbox对象.checked = true

CSS补充：
    - position
    - background
    - hover
    - overflow
    - z-index
    - opacity

示例：输入框右边放置图标

JavaScript：
    局部变量 var
    基本数据类型：
        数字
        字符串
        数组
        字典
        布尔值
    For循环

    条件语句
        ==
        !=
        ===
        !==

        ||

        &&

条件语句还支持switch
   a='3'
   switch(a){
   case '1':
      b=123;
      break;
   case '2':
      c= 1234;
      break;
    default:
       a =0;
   }

    函数的定义：
        function func(){
            ...
        }
Dom

    找标签
        - 直接找 $('#id')  $('.c1').siblings()
        - 简介找
    操作：
        innerText
        checkbox:
            checked
        className
        classList
    事件：
        <div onclick='函数(123)'></div>
        <script>
            。。。。
        </script>
    定时器
        setInterval('函数()', 4000)
    其他：
        alert()
        console.log()
实例：
    莅临指导
    多选
    模态对话框
    左侧菜单
    返回顶部