zoukankan      html  css  js  c++  java
  • JavaScript完整总结

    #JavaScript
    
    ## 1. 基本语法
    ### 1.1 引入
    - 内联试
    <pre>
    <a href="javascript:void(0)" onclick="alert('ok')">点击</a>
    </pre>
    - 内嵌式
    <pre>
    <script>
    alert('ok');
    </script>
    </pre>
    - 外链式
    <pre>
    <script src="demo.js"></script>
    </pre>
    ### 1.2 调试输出
    1. alert():将内容通过对话框弹出到浏览器
    - document.write():将内容直接输出到浏览器
    - con
    sole.log():将内容输出到浏览器的控制台
    
    ### 1.3 语句
    1. javascript代码的末尾不必须添加分号,但是推荐加上
    - **javascript严格区分大小写**
    - javascript会忽略多余的空格
    - javascript是脚本语言,浏览器在读取代码时,逐行的执行脚本代码。而对于传统的编程来说,会在执行前对所有代码进行编译(解释型语言)
    - 程序都是从0开始计数
    
    ### 1.4 注释
    1. 单行注释:(双斜杠)//
    - 多行注释:/**/
    
    ### 1.5 变量:
    - 存储信息的“容器”
    - **变量的命名规则:变量名由字母,数字,下划线和$组成,且不能以数字开头**
    <pre>
    // 申明变量
    var username = 'zhangsan';
    
    // 同时申明多个变量
    var username = 'zhangsan', age = 30, sex = '男';
    
    // 申明变量但是不赋值
    var username;
    
    // 不使用var申明变量
    username = 'zhangsan';
    </pre>
    
    <mark>一个好的编程习惯是,在代码开始处,统一对需要的变量进行声明。</mark>
    
    ### 1.6 数据类型
    **字符串(String)、数字(Number)、布尔(Boolean)、对象(Object)、空(Null)、未定义(Undefined)函数(Function)**
    <p>使用typeof检测数据类型</p>
    
    #### 1.6.1 字符串(String)
    - 使用单引号和双引号定义字符串
    - 单双引号需要注意的内容
        - 单双引号没有区别,都不解析变量
        - 单双引号可以相互嵌套
        - 不可以嵌套自身,除非使用转义字符转义
      
    #### 1.6.2 数字(Number)
    - 整型
    - 浮点型(计算的时候有计算损耗,不建议进行精确计算)
    - NaN(Not a number)
        - NaN与任何值运算都为NaN
        - NaN与任何值都不想等,包括自身
        - isNaN():判断一个值是否时NaN
    
    #### 1.6.3 布尔(Boolean)
    - true
    - false
    
    #### 1.6.4 数组
    <pre>
        // 1. 创建数组的方式
        var cars = new Array();
        cars[0] = 'BMW';
        cars[1] = 'BYD';
        cars[2] = 'BenZ';
        
        // 2.直接定义数组
        var cars = new Array('BMW', 'BYD', 'Benz');
        
        // 3.简单定义
        var cars = ['BMW', 'BYD', 'Benz'];
        
        // 4.数组元素的值可以是任何值
        var shoplist = ['zhangsan',20,true,null,undefined,[1,2,3],{}];
        
        // 5.常用的一种复合数据(瀑布流,AngularJS中$scope.shoplist)
        var shoplist = [
            {id:1,username:"zhangsan",age:20,sex:"男"},
            {id:2,username:"lisi",age:18,sex:"女"},
            {id:3,username:"wangwu",age:32,sex:"男"}
        ];
    </pre>
    
    #### 1.6.5 对象
    <pre>
        // 1.{}定义对象(jquery中animate,$.ajax({}))
        var obj = {
            username:"zhangsan",
            age:20,
            sex:"男",
            say:function(){},
            eat:function(){}
        }
        
        // 2.使用new Object()定义
        var obj = new Object();
        obj['username'] = 'zhangsan';
        obj.age = 20;
        obj.say = function(){}
        
        // 3.使用构造函数定义
        function Ball(){
            this.x = 100;
            this.y = 100;
            this.radius = 50;
            this.draw = function(){}
        }
        // 通过new关键字生成对象
        var b = new Ball();
    </pre>
    
    #### 1.6.6 Undefined
    - 未定义的变量    alert(typeof age)
    - 定义但是未赋值的变量 var sex; alert(typeof sex)
    
    #### 1.6.7 Null
    - 将值设置为null清空变量
    
    ### 1.7 数据类型的相互转化
    #### 1.7.1 转化为字符串
    - String()
    
    #### 1.7.2 转化为布尔
    - Boolean()
        - **'' 0 0.0 NaN false null undefined->false**
        - 其余都为真('false','0','null')
    
    #### 1.7.3 转化为数值 <mark>不包含进制之间的转化</mark>
    - Number()    
        1. 普通字符串->NaN
        2. 纯数字字符串,数值->原型输出
        3. 空字符串'',空格字符串' ',null->0
        4. true->1  false->0
        5. undefined->NaN
    - parseInt()
        - **从第一个字符开始查找,直到找到非法字符(非数字)截止,返回找到的数字**
    - parseFloat()
        - **从第一个字符开始查找,直到找到非法字符(除数字和第一个小数点之外的字符)截止,返回找到的数字**
    
    ### 1.8 运算符
    #### 1.8.1 算术运算符 + - * / % ++ --
    #### 1.8.2 赋值运算符 = += -= *= /= %=
    #### 1.8.3 **连接运算符 +**
    - +号两边是纯数字:+代表加法运算
    - 除此之外,+都是连接运算
    
    #### 1.8.4 比较运算符 == === !=!== > < <= > >=
    #### 1.8.5 逻辑运算符
    - &&(两真为真,其余都为假)
    - ||(两假为假,其余都为真)
    - ! (取反)
    
    #### 1.8.6 条件运算符(三元运算符)
    3==3 ? value1 : value2;
    
    ### 1.9 流程控制:条件语句
    #### 1.9.1 if条件语句(范围判断)
    <pre>
    // 定义变量
    var age = 24;
    
    // 只有if判断
    if (age < 18) {
        console.log('小弟弟,你好小');
    }
    
    // if...else...判断
    if (age < 18) {
        // 当年龄小于18岁的时候,执行此段代码
        console.log('你还小,不要祸害小姑娘');
    } else {
        // 当年龄大于等于18岁的时候,执行此段代码
        console.log('不小了,找个小姑娘吧');
    }
    
    // if...else if...else...
    if (age < 18) {
        console.log('小弟弟,你还小');
    } else if (age >= 18 && age < 24) {
        console.log('你还是一个剩斗士');
    } else if (age >= 24 && age < 30) {
        console.log('你是一个必剩客');
    } else {
        console.log('你乃齐天大剩也');
    }
    </pre>
     
    #### 1.9.2 switch语句(具体值判断)
    <pre>
    var month = 1;
    switch (month) {
        case 1:
        case 3:
        case 5:
        case 7:
        case 8:
        case 10:
        case 12:
            console.log('31天');
            break;
        case 4:
        case 6:
        case 9:
        case 11:
            console.log('30天');
            break;
        case 2:
            console.log('28天');
            break;
        default:
            console.log('输入的月份有问题');
    }
    </pre>
    
    ### 2.0 流程控制-循环语句
    #### 2.0.1 for循环
    <pre>
    for (var i = 0; i < 10; i++) {
        console.log(i);
    }
    </pre>
    
    #### 2.0.2 while循环
    <pre>
    var i = 0;
    
    while (i < 10) {
        console.log(i);
        
        i++;
    }
    </pre>
    
    #### 2.0.3 do...while循环
    <pre>
    var i = 0;
    do {
        console.log(i);
        
        i++;
    } while (i < 10);
    </pre>
    
    #### 2.0.4 for...in...循环
    <pre>
    var data = {username:'张三',age:20,sex:'男'};
    
    for (var i in data) {
        console.log(i+'===>'+data[i]);
    }
    </pre>
    
    #### 2.0.5 break和continue语句
    <pre>
    // break:终止循环
    for (var i = 0; i < 10; i++) {
        if (i == 4) {
            break;
        }
    
        console.log(i);
    }
    
    // 最终的结果是:0 1 2 3
    </pre>
    
    <pre>
    // 跳过当前循环继续执行下一次的循环
    for (var i = 0; i < 10; i++) {
        if (i == 4) {
            continue;
        }
    
        console.log(i);
    }
    // 最终的结果是:0 1 2 3 5 6 7 8 9
    </pre>
    
    ### 2.1 **正则表达式**
    #### 2.1.1 元字符
    - [0-9]:任意一个数字
    - [a-z]:任意一个小写字母
    - [x|y]:匹配x或者y(匹配其中的一个)
    - [^0-9]:匹配一个任意非数字
    - [d]:任意一个数字
    - [s]:任意一个空白字符(
    	)
    - [w]:约等于A-Za-z0-9_
    - ^[a-z]{6,12}$:必须是6-12位的字母
    
    #### 2.1.2 量词
    - *    相当于{0,} 任意数量
    - +    相当于{1,} 至少一个
    - ?    相当于{0,1} 至多一个
    - {6,18}
    
    #### 2.1.3 模式修正符
    - i:不区分大小写
    - g:执行全局匹配
    - m:执行多行匹配
    
    ### 2.2 JSON:只有属性的对象
    #### 2.2.1 JSON功能
    存储和传输数据的格式
    #### 2.2.2 实例
    <pre>
    // JS对象
    // 与普通对象区别:只有属性,键用引号
    {"username":"zhangsan", "age":20, "sex":"男"}
    </pre>
    #### 2.2.3 JSON方法
    - 将JSON字符串转化为JSON对象:JSON.parse()
    - 将Javascript对象转换为JSON字符串:JSON.stringify()
    
    ### 2.3 **函数**
    #### 2.3.1 函数定义
    <pre>
    // 1.普通函数
    function demo(){
        console.log('第一种定义函数方式');
    }
    
    // 2.匿名函数
    (function(){
        console.log('第二种定义函数方式');
    })()
    
    // 3.使用Function定义函数
    new Function('x','y','return x+y;');
    </pre>
    #### 2.3.2 函数的特点
    - 普通函数在同一个script标签之内,可以先调用后定义,但是跨script标签则不支持
    - 定义函数而不调用等于没写
    - 同名函数会覆盖,不会报错
    - 变量的作用域
        - 在函数外申明的变量为全局变量,函数内可以直接调用
        - 在函数内使用var申明的变量为局部变量,只能在函数内调用
        - 在函数内直接定义变量为全局变量
    - 参数个数
        - 形参 > 实参:多余的形参的值为undefined
        - 实参 > 形参:多余的实参被忽略
    - argument函数内置对象 
        - 函数中内置的的所有参数组成的对象
    
    #### 2.3.3 函数分类
    <pre>
    1.功能函数 执行一个功能,而不需要返回值
        function test(){
            alert('ok');
        }
        var t = test();
        alert(t);    // ???
    2.返回值函数
        function demo(){
            return 'ok';
        }
        var d = demo();
        alert(d);    // ???
    </pre>
    
    ### 2.4 内置对象
    #### 2.4.1 Array对象
    - arr.length:获取数组元素的长度
    - arr.join(str):将arr以指定字符连接成字符串
    - arr.push():在数组末尾推入指定元素
    - arr.pop():弹出并返回数组末尾元素
    - arr.shift():弹出并返回数组第一个元素
    - arr.unshift():在数组开头处添加指定元素
    - arr.sort([函数:排序规则]):排序(默认采用字符串顺序排序,数字排序则需要通过自定义函数实现)
    - arr.reverse():数组元素顺序反转
    - arr.indexOf():获取指定元素在数组中的位置,不存在返回-1
    - arr.lastIndexOf():获取指定元素最后一次出现的位置,不存在返回-1
    - arr.slice(起始位置,结束位置):获取数组中指定的片段(不包含结束位置)
    - arr.splice(起始位置,长度):从数组中添加或删除元素。
    - arr.every():检测数值元素的每个元素是否都符合条件。
    - arr.map():通过指定函数处理数组的每个元素,并返回处理后的数组。
    - arr.filter():检测数值元素,并返回符合条件所有元素的数组。
    - arr.some():检测数组元素中是否有元素符合指定条件。
    
    #### 2.4.2 Boolean对象
    
    #### 2.4.3 Date对象
    - var d = new Date():获取当前的日期对象
    <pre>
        new Date()
        new Date(时间戳)
        new Date('2016/8/19 5:28:30'):注意这种格式的兼容性
        new Date(2016,7,19,5,28,19,178)
    </pre>
    - d.getFullYear():年
    - d.getMonth():月(0-11- d.getDate():日(1-31- d.getHours():小时(0-23- d.getMinutes():分钟(0-59- d.getSeconds():秒数(0-59- d.getTime():时间戳
    
    #### 2.4.4 Math对象
    ##### 属性
    - PI:圆周率
    ##### 方法
    - Math.abs():绝对值
    - Math.ceil():进一取整
    - Math.floor():舍去取整
    - Math.round():四舍五入
    - Math.max():获取最大值
    - Math.min():获取最小值
    - Math.random():获取随机数
    <pre>
    function rand(m,n){
        return Math.floor(Math.random()*(n-m+1)+m);
    }
    </pre>
    
    #### 2.4.5 Number对象
    - MAX_VALUE:最大的数
    - MIN_VALUE:最小的数
    - num.toFixed(num):保留指定的小数位
    
    #### 2.4.6 String对象
    - str.length:字符串的长度
    - str.split(str):将字符串以指定字符切割
    
    - str.search(str|reg):在字符串中搜索指定字符,返回对应的位置,不存在返回-1
    - str.match(str|reg):在字符串中匹配指定字符,存在返回数组,不存在返回null
    - str.replace(str1|reg,str2):用str2替换str1的值
    
    - str.slice(start,end):获取字符串中指定的片段(不包含结束位置)
    - str.indexOf(str):获取字符串中指定字符的位置,不存在返回-1
    - str.lastIndexOf(str):获取字符串中指定字符最后出现的位置,不存在返回-1
    - str.charAt(num):获取指定位置的字符
    
    - str.charCodeAt(num):指定位置的字母对应的Unicode编码
    - String.fromCharCode():将Unicode编码转为字符
    
    #### 2.4.7 RegExp对象
    - reg.test(str):使用正则表达式检验str是否符合要求
    
    ## 2.BOM(Window对象)
    ### 2.1 全局属性和函数
    - 所有的全局变量是window对象的属性
    - 所有的全局函数是window对象的方法
    - 系统方法
        - alert()、confirm()、prompt()
        - moveBy()、moveTo()、resizeBy()、resizeTo()、scrollBy()、scrollTo()
        - open('1.html','','width=200,height="200'):打开一个新窗口
        - close():关闭窗口
        - setInterval()、setTimeout()、clearInterval()、clearTimeout()
        
    ### 2.2 Navigator对象(浏览器相关的信息)
    - navigator.appCodeName        返回浏览器的代码名。
    - navigator.appName    返回浏览器的名称。
    - navigator.appVersion    返回浏览器的平台和版本信息。
    - navigator.cookieEnabled    返回指明浏览器中是否启用 cookie 的布尔值。
    - navigator.platform    返回运行浏览器的操作系统平台。
    - navigator.userAgent    返回由客户机发送服务器的 user-agent 头部的值。
    - navigator.userLanguage    返回 OS 的自然语言设置。
    
    ### 2.3 Screen对象(屏幕相关的信息)
    - screen.浏览器的宽度
    - screen.height:浏览器的高度
    - screen.availHeight:浏览器可用高度
    - screen.availWidth:浏览器可用宽度
    
    ### 2.4 Frames对象
    
    ### 2.5 **History对象(当前那浏览器的历史记录)**
    - history.length:返回浏览器历史列表中URL数目
    - history.go(0|-1|1):加载 history 列表中的某个具体的页面
    - history.pushState(state,'',url) 与window.onpopstate()结合使用
    
    ### 2.6 **Location对象(当前浏览器的url地址信息)**
    - location.hash:锚点|做历史记录管理
    - location.href:获取设置当前的URL地址
    - location.reload():刷新
    
    ## 3.HTML DOM对象
    ### 3.1 DOM Document对象
    #### 3.1.1 Form表单对象
        - document.forms[0]
        - document.forms['formName']
        - document.formName
        - 表单元素对象:formObj.inputName
    #### 3.1.2 Select对象
        - 属性:
            - disabled
            - length
            - selectedIndex
        - 方法:
            add()
            remove()
    #### 3.1.2 table表格对象
        - table.rows:获取表格行
        - talbe.insertRow(index):添加行
        - table.deleteRow(index):删除行
        - row.cells:获取单元格对象
        - row.insertCell(index):添加单元格
    #### 3.1.3 Cookie对象
        document.cookie = 'username=zhangsan;expires=date;path=/;domain=qq.com;secure'
    
    ### 3.2 **DOM 功能(通过功能确定DOM是做什么的)**
    #### 3.2.1 获取并改变HTML标签
        - document.getElementById()
        - document.getElementsByTagName()
        - document.getElementsByName()
        - document.querySelector('css选择器#box .a div'):匹配复合条件的第一个元素
        - document.querySelectorAll():匹配所有的复合条件的元素
        - ID名直接获取(用于测试,不推荐用于正式环境)
    #### 3.2.2 获取并改变HTML属性
        - obj.src
        - obj.getAttribute()
        - obj.setAttribute()
        - obj.removeAttribute()
    #### 3.2.3 获取并改变CSS样式
        - obj.style.只能获取行内的样式,获取不到style标签和link标签之内的样式
        - 获取最终的样式(兼容)
            function getStyle(obj, attr){
                return obj.currentStyle ? obj.currentStyle[attr] : document.defaultView.getComputedStyle(obj, null)[attr];
            }
    #### 3.2.4 **事件处理**
    ##### 3.2.4.1 鼠标事件
    - onclick
    - ondblclick
    - oncontextmenu:右击
    - onmouseover
    - onmouseout
    - onmousedown
    - onmouseup
    - onmousemove
    
    ##### 3.2.4.2 键盘事件
    - onkeydown
    - onkeyup
    - onkeypress
    
    ##### 3.2.4.3 表单事件
    - onfocus
    - onblur
    - onsubmit 当文本被选中时
    - onchange
    - onreset
    - onselect
    
    ##### 3.2.4.4 框架对象事件
    - onload
    - onresize
    - onerror
    - onscroll
    
    ##### 3.2.4.5 鼠标键盘属性值
    - altKey: ALT 键被按下
    - shiftKey:
    - ctrlKey:
    - clientX
    - clientY
    
    ##### 3.2.4.6 事件冒泡
    - JS:var e = ent || window.event; e.cancelBubble = true
    - jquery:e.stopPropagation()/return false;
    
    <pre>
    区别:
    return false;代表终止函数,之后的代码将不执行
    e.stopPropagation():阻止事件冒泡,之后的代码继续执行
    </pre>
    
    ##### 3.2.4.7 千万要注意的事件默认行为
    - 点击a链接默认跳转页面
    - 点击提交按钮默认提交表单
    - 点击鼠标右键出现右键菜单
    <pre>
    // 阻止a链接跳转(如果要用a链接做点击事件,务必将这里禁止)
    <a href="javascript:;">百度</a>
    <a href="javascript:void(0);">百度</a>
    // 表单
    formObj.onsubmit = function(){
        // 验证不通过,阻止表单提交
        return false;
    }
    document.oncontextmenu = function(){
        // 阻止浏览器右键菜单
        return false;
    }
    </pre>
    
    ### 3.3 **DOM 节点操作**
    #### 3.2.1 标签元素的属性
    - attributes:
    - className:
    
    - childNodes/children:
    - firstChild/firstElementChild:
    - lastChild/lastElementChild:
    - nextSibling/nextElementSibling:
    - previousSibling/previousElementSibling:
    - parentNode:
    - nodeName:
    - nodeType:
    - nodeValue:
    
    - innerHTML:
    
    - clientWidth:dom对象的可见宽度
    - clientHeight:可见高度    
        document.documentElement.clientWidth:当前窗口宽度
        document.documentElement.clientHeight:当前窗口高度
    - offsetHeight:
    - offsetWidth
        divObj.offsetHeight:高度(包含height,padding,border)
        divObj.offsetWidth
    
        距离上一级元素的左边距和上边距(如果父级没有定位,则是相对于body)
    - offsetLeft:
    - offsetTop:
        
    - scrollWidth:
    - scrollHeight:
        document.documentElement.scrollWidth:获取当前页面的宽度
        document.documentElement.scrollHeight:获取当前页面的高度
    
        当前内容滚动的距离
    - scrollTop:
    - scrollLeft:
        document.body.scrollTop || document.documentElement.scrollTop;
        divObj.scrollTop/divObj.scrollLeft
    
    #### 3.2.2 标签元素的方法
    - appendChild()
    - insertBefore()
    - replaceChild()
    - removeChild()
    - cloneNode()
    不积跬步,无以至千里;不积小流,无以成江海。
  • 相关阅读:
    Linux 安装JDK Tomcat MySQL(使用Mac远程访问)
    Linux 基础
    IntelliJ IDEA 新建项目
    Android Studio|IntelliJ IDEA 常用快捷键(Mac|Window)
    C 进制 类型说明符 位运算 char类型
    C 函数
    C 流程控制
    113路径总和II
    111.二叉树的最小深度
    110.平衡二叉树
  • 原文地址:https://www.cnblogs.com/caoruichun/p/9201428.html
Copyright © 2011-2022 走看看