JavaScript笔记

一、基本语法

• 大小写敏感
• 弱类型语言
  注： var定义参数的时候不需要在意是什么类型，但后续开发会照成bug；强类型语言定义的时候必须标明是什么类型的参数。
• 分好结尾 ;
• 字符串即可以使用单引号，也可以使用双引号。

二、数据类型

• Boolean 布尔
• Number 数字
• String 字符串
• Undefined 未定义
• Null 空对象
• Object 对象类型
• Undefined 和 Null 都是只有一个值 分别是 undefined和null。
• 可以通过typeof方法查看变量类型

  var strValue = "Hello Word";
  var strType = typeof(变量);
  console.log(strType);//输出“string”

• 类型转换
  • 字符串转number
    var num = parseInt(str);//转整数
var num = parseFloat(str);//转带浮点

三、集合

• 数据
  -var array = [1,2,3,4,5];

• 键对值

• var keyValues = {"key1":"value1","key2":"value2"};

• 对象数据

• var keyValues =[{"key1":"value1","key2":"value2"}; {"key1":"value1","key2":"value2"};]

• Array对象属性
  length设置或返回数组中元素的数目
  循坏遍历
  * for循环

for (let index = 0; index < arrayKv.length; index++) {
            const element = arrayKv[index];
            console.log(element);
        }

• forof循环

for (const iterator of arrayKv) {
            console.log(iterator);
        }

• forin循环

for (const key in arrayKv) {
            if (arrayKv.hasOwnProperty.call(arrayKv, key)) {
                const element = arrayKv[key];
                console.log(element);
            }
        }
        for (const key in arrayKv) {
            console.log(key);//数组的索引下标
            console.log(arrayKv[key]);//下标所对印元素
        }

Array对象方法

• concat() 连接来个或者更多的数组，并返回结果。
  var ar3 = ar1.concat(ar2);
• join() 把数组的所有元素放入一个字符串，元素通过指定的分隔符进行分隔
  var arStr = ar.join("|");
• push() 向数组的末尾添加一个或者更多元素，并返回新的长度
  vat arLength = ar.push("");
• reverse() 颠倒数组中元素的顺序
  ar.reverse()
• sort() 对数组的元素进行排序
  ar.sort();//正序
ar.sort(function(a,b){return a-b;});//倒序
• splice() 删除元素，并向数组添加新元素
  ar.splice(1,2,3)
  1代表删除元素的下标，如果只有1，则会删除1下标开始后面所有元素
  2代表删除的多少元素，如果2为0，则不删除；
  3代表插入的元素，从1下标开始插入

四、方法使用

• 使用关键字function定义方法
• 方法名使用驼峰命名法
• 方法可以设置参数及返回值
• js不存在方法重载

注册事件

元素注册法

<input type="text" name="" id="txt" value="me">
    <input type="button" value="按钮" onclick="clickMe()">
    <script>
        function clickMe(){
            //获取标签对象
            var txt = document.getElementById("txt");
            //通过对象获取属性
            alert(txt.value);
            //通过点击目标获取该对象的属性
            alert(event.target.value);
        }
    </script>

对象注册法

<input type="text" name="" id="txt" value="me">
    <script>
        var changeMe = function(){
            alert(event.target.value);
        }
        document.getElementById("txt").onchange = changeMe;
    </script>

匿名方法

匿名方法可以理解为不需要写方法名称的方法
匿名方法一般有俩种写法

• 方法一：这种方法可以吧匿名方法赋值给一个变量，调用这个变量可使用该方法

var fun = function(params){

        }

• 方法二：这种方法可以在定义匿名方法时同事传参及调用

(function(params1,params2){
        alert(params1+params2);
        })(1,2);

五、DOM

• DOM 即 Document Object Model
• DOM 用于操作html文档，准确的说是操作html标签内的内容
• js中将每一个标签都当成对象处理
• 在HTML中，每个标签都拥有自己的属性，比如 style、id、class等，也拥有触发事件、方法。同样在js中作为对象处理的标签也拥有属性、方法、事件等。
• 操作DOM对象，一般使用document关键词调用。

js获取元素方法

• document.getElementById(id);根据id获取元素节点

• document.getElementsByClassName(className);根据class的值获取一组元素节点

• document.getElementsByName(name);根据name获取一组元素节点

• document.getElementsByTagName(tag);根据标签名称获得一组元素节点

• document.querySelector(".dv");根据class获取整个第一个标签内容

• document.querySelectorAll(".dv")根据class获取整个所有标签内容

• document.createElement("input");创建元素

• document.appendChild();添加子元素

    <div id="dv1"></div>
    <script>
        var dv1 = document.getElementById("dv1");
        var appendNode = document.createElement("input");
        dv1.appendChild(appendNode);
    </script>

• document.body.insertBefore(appendNode,dv1);在某元素前添加元素

<div id="dv1"></div>
    <script>
        var dv1 = document.getElementById("dv1");
        var appendNode = document.createElement("input");
        document.body.insertBefore(appendNode,dv1);
    </script>

• document.firstChild; 获取第一个子元素
• document.childNodes; 获取所有子节点元素

获取元素内容

innerHTML

• innerHtml用于获取或赋值拥有开闭标签的元素中完整内容

  • 获取内容

    <div id="dv1">
        <span>hello</span>
        <span>word</span>
    </div>
    <script>
        var dv1 = document.getElementById("dv1").innerHTML;
        console.log(dv1);
    </script>

赋值内容

    <div id="dv1">
        <span>hello</span>
        <span>word</span>
    </div>
    <script>
        document.getElementById("dv1").innerHTML="<b>Hello</b>"
        var content = document.getElementById("dv1").innerHTML;
        console.log(content);
    </script>

innerText

• innerText用于获取或者赋值标签中文字部分，不识别标签

操作样式

操作style属性

• style属性可以设置或返回样式
• style设置css特征值后， 需要把特征的短横线命名法改成驼峰命名法后使用

    <p id="p1">hello word</p>
    <button onclick="blue()"></button>
    <script>
        function blue(){
            document.getElementById("p1").style.color="blue";
        }  
    </script>

！float 是js保留字，因此再给元素设置float属性时，需要写做cssFloat
操作className属性

• className属性设置或返回元素的class属性
  • 获取属性值 document.getElementById("p1").className;
  • 设置属性值 document.getElementById("p1").className="ppp"

    <p id="p1">hello word</p>
    <p id="p2" class="ppp">hello word</p>
    <button onclick="blue()"></button>
    <script>
        function blue(){
            document.getElementById("p1").className="ppp";
        }  
    </script>
    <style>
        .ppp{
            background-color: rebeccapurple;
            color: aliceblue;
        }
    </style>
</body>

六、BOM

• BOM 即 Browser OBject Model
• BOM 用于操作浏览器行为
• 操作BOM对象，一般使用window 关键字调用

常用方法

• alert() 弹出对话提示框

• confrim() 弹出确认对话框，返回bool值类型

• promp() 弹出用户输入对话框，返回输入的内容，如果取消则返回null

• setInterval(code,milliseconds) 计时器方法可按照指定的周期（以毫秒计）来调用函数或计算表达式

  • code：需要执行的代码
  • milliseconds：执行代码周期
  • 方法会不停的调用函数，直到**clearInterval()被掉用或者窗口被关掉。由setInterval()返回的计时器id值可用作clearInterval()**方法的参数。

• setTimeout(code,milliseconds): 一次性计时器 方法用于在指定的毫秒数后调用函数或计算表达式。

  • clearTimeout() 方法来阻止函数的执行。由clearTimeout() 返回的计时器id值可用作**clearInterval()**方法的参数。

• localhost 浏览器地址栏对象

  • hash ：一个URL的锚部分
  • host ：返回一个URL的主机名和端口
  • hostname ：返回URL的主机名
  • href ：返回完整的URL
  • pathname ：返回的URL路径名
  • port ：返回一个URL服务器使用的端口
  • protocol：返回一个URL协议
  • search：返回一个URL的查询部分

• onload() : 页面加载完成后调用