JS笔记

JS基本语法
  
        1.数据类型

    变量的基本类型有number、string、boolean、undefined、null五种。 u n n  s  b

    在Java中，当一个变量未被初始化的时候，Java中是null或者基本数据类型的默认值。

    在JavaScript中，当一个变量未被初始化的时候，它的值为undefined。当一个引用不存在时，它为Null。

        2.JS的三种使用方式
    
    第一种方式：在<script>标签中，script可以放在网页中任何位置
    第二种方式：使用外部JavaScript文件，把js代码放入单独的文件中  ，这个文件的扩展名.js
    第三种方式： 放在标签中的事件属性中,常见事件 ,onclick

        3.系统函数
    
    提示框 alert()    这是一个只能点击确定的弹窗

    确认框 confirm();    这是一个你可以点击确定或者取消的弹窗

    输入框 prompt()    这是一个你可以输入文本内容的弹窗

    parseInt(); 字符串转换整数

?    parseFloat(); 字符串转成小数

?    isNaN(); 判断数字是不是不是一个数字

        4.事件

    onchangeHTML     元素内容改变(离开光标触发)
    onclick        用户点击 HTML 元素
    onmouseover    光标移动到HTML元素
    onmouseout    光标离开HTML元素
    onkeydown    用户按下键盘按键onload浏览器已完成页面的加载
    

JS的DOM和BOM

        1.获取HTML元素

    1）通过 id 找到 HTML 元素

        var x=document.getElementById("intro");
        如果未找到该元素，则 x 将包含 null。

    2）通过标签名找到 HTML 元素

        本例查找 id="main" 的元素，然后查找 id="main" 元素中的所有 <p> 元素：
        var x=document.getElementById("main");
        var y=x.getElementsByTagName("p");

    3）通过类名找到HTML 元素
        本例通过 getElementsByClassName 函数来查找 class="intro" 的元素：
        var x=document.getElementsByClassName("intro");

        2.修改HTML元素

    改变HTML内容
        修改 HTML 内容的最简单的方法时使用 innerHTML 属性。

        如需改变 HTML 元素的内容，请使用这个语法：

            document.getElementById(*id*).innerHTML="*abcd*";

        
            document.getElementById(*id*).innerText="xxxx";

    改变HTML属性
        如需改变 HTML 元素的属性，请使用这个语法：
            document.getElementById(*id*).*attribute=新属性值*

        3.修改CSS样式
    
    改变HTML的样式：

        如需改变 HTML 元素的样式，请使用这个语法：

            document.getElementById(*id*).style.*property*=*新样式*

        4.元素操作

    创建新元素
        这段代码创建新的<p> 元素：

var para=document.createElement("p");

        如需向 <p> 元素添加文本，您必须首先创建文本节点。
        这段代码创建了一个文本节点：

var node=document.createTextNode("这是一个新段落。");
        

然后必须向 <p> 元素追加这个文本节点：

para.appendChild(node);

        最后必须向一个已有的元素追加这个新元素。

        这段代码找到一个已有的元素：

var element=document.getElementById("div1");

        以下代码在已存在的元素后添加新元素：

element.appendChild(para);

    删除已有的 HTML 元素
        找到 id="div1" 的元素：

        var parent=document.getElementById("div1");

        找到 id="p1" 的 <p> 元素：
        

var child=document.getElementById("p1");
        

从父元素中删除子元素：
        

parent.removeChild(child);

        5.DOM事件

    onload 和 onunload 事件会在用户进入或离开页面时被触发。
    onchange 事件常结合对输入字段的验证来使用
    onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。

        6.EventListoener
    
    addEventListener() 方法

   在用户点击按钮时触发监听事件：
        document.getElementById("myBtn").addEventListener("click", displayDate);

    addEventListener() 方法用于向指定元素添加事件句柄。
    

addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。

    

addEventListener() 方法可以更简单的控制事件（冒泡与捕获）。

    你可以使用 removeEventListener() 方法来移除事件的监听。

        7.window方法

    - window.open() - 打开新窗口

    - window.close() - 关闭当前窗口
    
        8. Location

    window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。

    
- location.href 属性返回当前页面的 URL。
    
- location.hostname 返回 web 主机的域名

    - location.pathname 返回当前页面的路径和文件名

    - location.port 返回 web 主机的端口 （80 或 443）

    - location.protocol 返回所使用的 web 协议（http:// 或 https://）

        9. History

    window.history 对象包含浏览器的历史。

    

- history.back() - 与在浏览器点击后退按钮相同
    history.forward() - 与在浏览器中点击按钮向前相同

        10. 时间

    Date

?        
    setInterval(); 周期执行函数

?        
    setTimeOut(); 延迟执行函数