JavaScript

JavaScript

1.弱类型语言：是 由数据 决定了 数据的类型是什么    - 更自由
        1   - number数字
        "1" - string字符串

2.面向对象语言 - 万物皆对象（属性和方法）
        以后语法中：对象名.属性名;
                对象名.方法名();

引入的方式：<script type="text/javascript">
                                  //编写自己的js代码
                      </script>

或者外部创建js文件

                       <script src="js路径" type="text/javascript" charset="utf-8">
                                  //js代码
                       </script>

注释： 单行注释：//

            多行注释：/**/

输出方式：

****打桩输出-可以检查错误：console.log(数字/"字符串"/变量)。

**变量：

语法：var 变量名=值；

***数据类型：

            Number - 数字，取值：无数个
            String - 字符串，取值：无数个
            Boolean - 布尔值，取值：2个，表示一个【判断的结果】，true（真） 、 false（假）
            Undefined - 取值只有一个：undefined - 变量的默认值，undefined没有任何作用
            Null - 空，取值1个：null，作用，你用完了的变量（内存），可以用null释放 - 释放内存节约

**运算运算符：+   -    *   /   %

***算术运算其实具有隐式数据类型转换，默认都会转为数字，运算。

分支：用于判断

         if(判断条件){
                操作;
              }

*****函数：Function

创建函数/方法：
            function 函数名(){
                //若干代码段
            }

调用函数/方法

函数名（）；

带有参数的函数：
       function show(a,b,c)

{ //这里的是实参

var sum=a+b+c;

alert(sum);

}

show(3,4,5); /这里的是实参

**********循环：

    第一种：while循环：
    语法：
    var 循环变量=几;
    while(循环条件){
        循环体;
        循环变量变化一下;
    }//不怎么用

***for循环

语法：for(var 循环变量=几;循环条件;变量的变化){
            循环体
           }
 

数组：

创建方式：

1、*****直接量方式：
        var arr=[];//空数组
        var arr=[数据,数据,...];

    2、构造函数方式：
        var arr=new Array();//空数组
        var arr=new Array(数据,数据,...);

*****访问数组

1.数组名[下标]

2、添加数据
        数组名[下标]=新数据;

三个固定套路：
        1、向末尾添加元素：arr[arr.length]=新值
        2、获取倒数第n个元素：arr[arr.length-n];
        3、删除末尾的n个元素：arr.length-=n

*****遍历数组：将数组中的每个元素都取出来 执行 相同 或 相似的操作
     公式：for(var i=0;i<arr.length;i++){
            arr[i];//当前次获取到的元素
           }

获取元素：

通过 HTML 的属性去获取元素
    1、通过ID：
       语法：var elem=document.getElementById("id值");
       返回：是一个DOM对象/DOM节点/DOM元素，才可以直接做操作
       特殊：
        1、如果id重复了，只会返回第一个
        2、如果没找到，返回的是一个null
        3、此方法白学，以后不准使用

    2、*通过 标签名：
       语法：var elems=document/parent.getElementsByTagName("标签名");
       返回：是一个DOM集合 - 是一个类数组对象：类似数组，也可以使用下标、length、遍历
       特殊：
        1、一个DOM集合是不允许直接做操作的，除非加下标得到某一个 或 遍历得到所有人，才能做操作
           2、如果没找到，返回的是一个空集合
        3、此方法不一定非要写document,也可以写一个parent（已经找到的某个父元素）
            如果是写的document，则会找到页面上所有的标签
            而写的是parent，只会找到parent下面的所有的标签

    3、*通过 class名：
       语法：var elems=document/parent.getElementsByClassName("class名");
       返回：是一个DOM集合 - 是一个类数组对象：类似数组，也可以使用下标、length、遍历
       特殊：
        1、一个DOM集合是不允许直接做操作的，除非加下标得到某一个 或 遍历得到所有人，才能做操作
           2、如果没找到，返回的是一个空集合
        3、此方法不一定非要写document,也可以写一个parent（已经找到的某个父元素）
            如果是写的document，则会找到页面上所有的标签
            而写的是parent，只会找到parent下面的所有的标签

*通过 节点之间的关系 获取元素
    前提：至少先要找到一个元素，才能找关系

    1、父元素：xx.parentNode - 单个元素
    2、子元素：xx.children - 集合
    3、第一个儿子：xx.firstElementChild - 单个元素
    4、最后一个儿子：xx.lastElementChild - 单个元素
    5、前一个兄弟：xx.previousElementSibling - 单个元素
    6、后一个兄弟：xx.nextElementSibling - 单个元素
//可以做购物车

操作元素：<elem 属性名="属性值" style="样式">内容<elem/>
   1、内容：
    1、*innerHTML：用于操作双标签，能够识别标签
       获取：elem.innerHTML;
       设置/修改：elem.innerHTML="新内容";

    2、innerText：用于操作双标签，不能识别标签
       获取：elem.innerText;
       设置/修改：elem.innerText="新内容";

    3、*value：用于操作input
       获取：elem.value;
       设置/修改：elem.value="新内容";

   2、*自定义属性：
    获取属性值：elem.getAttribute("属性名");
    设置属性值：elem.setAttribute("属性名","属性值");

    简化版：
      获取属性值：elem.属性名;
      设置属性值：elem.属性名="属性值";

      简化版注意：两个小缺点：
        1、class必须写为className
        2、只能操作标准属性，不能操作自定义属性

    建议：开发中优先使用简化版，简化版实现不了的时候在用复杂版代替

   3、样式：
    内联样式：
        优点：1、优先级最高 - 保证js用户触发一定会生效
              2、不会牵一发动全身 - 只会操作当前元素
        缺点：1、获取样式时，一定要保证此样式在内联样式中

    获取样式：elem.style.css属性名;
    设置样式：elem.style.css属性名="css属性值";
    
    特殊：css属性名的写法，如果有横线要去掉横线，变为小驼峰命名法
        原来CSS                JS：
        background-color        backgroundColor
        width                width
        border-top-width        borderTopWidth

   4、******绑定事件：
    为什么不用以前的绑定方式了呢？
        保证HTML和CSS和JS分离

    语法：elem.οnclick=function(){
            点击后要执行什么代码
            ***this关键字：
                单个元素绑定事件，this->这个元素
                多个元素绑定事件，this->当前触发事件的元素
          }