JS 总结

短命女 2022-02-05 02:34 175阅读 0赞

**目录**

JS 语言基础

JS 简介

JS 注释

JS 基本数据类型

JS 类型转换

JS 运算符

JS 循环语句

JS 事件

JS 对象

JS BOM

Window

Navigator

Screen

History

Location

JS DOM

HTML DOM节点概念

HTML DOM 节点属性

HTML DOM 元素节点操作

HTML DOM 节点的增删替插

HTML DOM 元素样式

HTML DOM 事件

--------------------

# JS 语言基础 #

## JS 简介 ##

JavaScript用于网页和用户之间的交互，比如提交的时候，进行用户名是否为空的判断。   
完整的javascript由[语言基础][Link 1]，[BOM][]和[DOM][]组成。

## JS 注释 ##

单行注释 //

多行注释 /\*\*/

## JS 基本数据类型 ##

基本数据类型 undefined，Boolean,Number,String，null

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70][]

## JS 类型转换 ##

**1.转换成字符串**

无论是Number,Boolean还是String都有一个toString方法，用于转换为字符串

**2.转换成数字**

javascript分别提供内置函数 parseInt()和parseFloat()，转换为数字

**3.转换为Boolean**

使用内置函数Boolean() 转换为Boolean值  
当转换字符串时：非空即为true  
当转换数字时：非0即为true  
当转换对象时：非null即为true

## JS 运算符 ##

JS运算符包含2中运算符:算术运算符和逻辑运算符

**1.算术运算符**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 1][]**

**2.逻辑运算符**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 2][]**

## JS 循环语句 ##

**1条件语句**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 3][]

**2.循环语句**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 4][]**

## JS 事件 ##

见 下面的DOM

## JS 对象 ##

JavaScript中常见的对象有数字Number，字符串String，日期Date，数组Array等。

**1.Number对象**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 5][]

**2.String对象**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 6][]

**3.Array对象**

**![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 7][]**

**4.Date对象**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 8][]

**5.Math 对象**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 9][]

# JS BOM #

BOM即 浏览器对象模型(Browser Object Model)  
浏览器对象包括 Window(窗口)  [Navigator(浏览器)][Navigator]  [Screen (客户端屏幕)][Screen]  [History(访问历史)][History]  [Location(浏览器地址)][Location]

## Window ##

//文档显示区域的宽度和高度（不包括工具栏/滚动条）
    window.innerWidth
    window.innerHeight
    
    //整个浏览器窗口的宽度和高度（包括工具栏）
    window.outerWidth
    window.outerHeight
    
    window.open() - 打开新窗口
    window.close() - 关闭当前窗口
    window.moveTo() - 移动当前窗口
    window.resizeTo() - 调整当前窗口的尺寸
    
    window.setInterval() - 间隔指定的毫秒数不停地执行指定的代码。
    window.setTimeout() - 暂停指定的毫秒数后执行指定的代码
    window.clearInterval() 方法用于停止 setInterval() 方法执行的函数代码。
    window.clearTimeout() 方法用于停止执行setTimeout()方法的函数代码。
    window.alert()- 警告框
    window.prompt()- 确认框
    window.confirm()- 提示框经

## Navigator ##

Navigator即浏览器对象，提供浏览器相关的信息

navigator.appName 浏览器产品名称
    navigator.appVersion 浏览器版本号
    navigator.appCodeName 浏览器内部代码
    navigator.platform 操作系统
    navigator.cookieEnabled 是否启用Cookies
    navigator.userAgent 浏览器的用户代理报头

## Screen ##

Screen对象表示用户的屏幕相关信息

//用户的屏幕大小(与浏览器无关)
    screen.width
    screen.height
    
    //屏幕的可用宽度、高度(与浏览器无关)
    screen.availWidth
    screen.availHeight

## History ##

History用于记录访问历史

history.back(); 返回上次访问
    history.back(-2); 返回上上次的访问
    
    history.forward() 加载历史列表中的下一个 URL

## Location ##

Location表示浏览器中的地址栏

location.reload(); //刷新当前页
    //跳转到其他页
    location="/";
    location.assign("/");
    
    location.protocol  //协议
    location.hostname  //主机名
    location.port  //端口号
    location.host  //主机加端口号
    location.pathname  //访问的路径
    location.hash //锚点
    location.search  //参数列表

# JS DOM #

DOM 是Document Object Model( 文档对象模型 )的缩写。

## HTML DOM节点概念 ##

DOM把所有的html都转换为节点   
    整个文档 是一个节点   
    元素 是节点   
    元素属性 是节点   
    元素内容 是节点   
    注释 也是节点

## HTML DOM 节点属性 ##

![20190504183013213.png][]

节点类型如下:

![20190504183022516.png][]

## HTML DOM 元素节点操作 ##

> **1.获取元素节点**
> 
> **2.获取/设置元素的属性 **

**1.获取元素节点**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 10][]

**2.获取/设置元素的属性 **

获取元素属性方式有两种方法

获取元素属性有三种方式:
    var  div1 = document.getElementById("d1");
    
    1.div1.id  元素.属性 //只能获取元素自带的属性
    2.div1.getAttribute("align") //可以获取所有属性(包括自定义属性)
    3.
      var attrs=div1.attributes;
      attrs["align"].nodeValue
      attrs[i].nodeValue
    
    设置元素属性有:
    div1.setAttribute("align","left")

例子:
    <!DOCTYPE html>
    <html>
    <head>
        <meta charset="utf-8">
        <title></title>	
    </head>
    <body>
        <div id="d1" align="center" class="abc" test="test1">hello HTML DOM</div>
    		
    <script>
        var  div1 = document.getElementById("d1");
        document.write(" 获取元素属性:<br/>");
        document.write("元素.属性的方式: "+div1.align+"<br/>")
        document.write("getAttribute方式: "+div1.getAttribute("align")+"<br/>")
    						
        var attrs = div1.attributes;
        document.write("div总共有"+attrs.length +" 个属性分别是:<br/>");
        for(i = 0; i< attrs.length; i++){
            document.write(attrs[i].nodeName+":"+attrs[i].nodeValue+"<br>");
        }
        // 设置属性	
        div1.setAttribute("align","right");
        document.write("<br>");
        document.write("div的id属性值是："+ attrs["align"].nodeValue);		
    </script>
    </body>
    </html>

## HTML DOM 节点的增删替插 ##

**1.节点关系**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 11][]

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>	
    </head>
    <body>
        <div id="parentDiv">
        父Div的内容
        <div id="d1">第一个div</div><div id="d2">第二个div</div><div id="d3">第三个div</div>
        </div>
    		
    <script>
        var d2=document.getElementById("d2");
        document.write("<br/>"+d2.previousSibling.innerHTML+"<br/>");
        document.write(d2.nextSibling.nodeName+"<br/>");
        document.write(d2.parentNode.nodeName+"<br/>");
    
        document.write("<br/>子节点有:<br/>")
        var parentNode=document.getElementById("parentDiv");
        var childs=parentNode.childNodes;
        for(var i=0;i<childs.length;i++){
            document.write(childs[i].nodeName+"<br/>");
        }
    		
    </script>
    </body>
    </html>

**2.增加,删除,插入,替换节点**

createElement	创建元素节点	
    createAttribute	创建属性节点
    createTextNode	创建文本节点	
    
    removeChild	删除元素节点	
    removeAttribute	删除属性节点	
    removeChild	删除文本节点
    
    replaceChild 替换节点
    
    appendChild	追加节点	
    insertBefore 在前方插入节点

<!DOCTYPE html>
    <html>
    <head>
    <meta charset="utf-8">
    <title></title>	
    </head>
    <body>
        <div id="parentDiv">
            <div id="d1">第一个div</div>
            <div id="d2">第二个div</div>
            <div id="d3">第三个div</div>
        </div>
    		
    <script>
        var parentDiv=document.getElementById("parentDiv");
        var d4=document.createElement("div");
        d4.appendChild(document.createTextNode(" 第四个 div"));
        //parentDiv.appendChild(d4);
        //在前面插入
        var d3=document.getElementById("d3");
        parentDiv.insertBefore(d4,d3);
        //替换
        parentDiv.replaceChild(d4,d3);
        //删除
        //parentDiv.removeChild(d4);
        // 添加和删除元素属性
        var className=document.createAttribute("class");
        className.nodeValue="d";
        d4.setAttributeNode(className);
        d4.removeAttribute("class");
    							
    </script>
    </body>
    </html>

## HTML DOM 元素样式 ##

var d = document.getElementById("d");
    d.style.display="block";
    
    d.style.backgroundColor="green";//-会编程驼峰命名

## HTML DOM 事件 ##

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 12][]

吃水不忘挖井人，时刻想念发帖人。

[Link 1]: http://how2j.cn/k/javascript/javascript-type/428.html
[BOM]: http://how2j.cn/k/javascript/javascript-bom-window/449.html
[DOM]: http://how2j.cn/k/dom/dom-node/457.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70]: /images/20220205/d01d9edafdb24fdab9fb84aa9a813a64.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 1]: /images/20220205/3812c8f99995433b80d963e6f32522c7.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 2]: /images/20220205/3fcc2c0e20214d6ca607d75fcb1e1f23.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 3]: /images/20220205/3c70de20914c484385468a872836cb08.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 4]: /images/20220205/00392131f2e64d43b2d4674f54d357a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 5]: /images/20220205/35c75f033303464eb6a706dccfedf4a0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 6]: /images/20220205/466f224e65df4583ad4a8d07aaca42c6.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 7]: /images/20220205/cb929765cc1c4dba9df8f6797f306284.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 8]: /images/20220205/54ba0d4fc6b147ceb53b1d341d751b33.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 9]: /images/20220205/57537ab0d50c48959d3c285ce40cf75f.png
[Navigator]: http://how2j.cn/k/javascript/javascript-bom-navigator/453.html
[Screen]: http://how2j.cn/k/javascript/javascript-bom-screen/450.html
[History]: http://how2j.cn/k/javascript/javascript-bom-history/452.html
[Location]: http://how2j.cn/k/javascript/javascript-bom-location/451.html
[20190504183013213.png]: /images/20220205/8993102aca8547d68307fc830ecd1f08.png
[20190504183022516.png]: /images/20220205/f326fce2c5dc410b9fafaf1cd2fd229e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 10]: /images/20220205/aa6ea6039d3847f0ba18e8855dc3ee2a.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 11]: /images/20220205/e30ff5eee0904cdb85fdf0af807be373.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2xkdXpoZW5saW4_size_16_color_FFFFFF_t_70 12]: /images/20220205/7c6125fd6ae74e83b9732fef0eb193b2.png