原生JavaScript -----------学习小结

基本数据类型：

数字：number
var num1=123
//================//
var num1;
num1=123;

字符串：string
“” ‘’:嵌套时交叉用
es6:模板字符串
var str=“我是文字”//"" ‘’

布尔：boolean
var bool = true;
var bool1 = false;

空对象：null
var null1 = null

未定义：undefined
var num1;
console.log(num1)//控制台输出

引用数据类型：

对象：object
数组：array
函数：function

算术运算符：

+：字符串拼接
字符串在和别的做加法时会转为字符串，输出字符串
-，*，/：隐式转换后进行算数运算
console.log( true-“100”)
转成1后进行减法运算
%：取余

逻辑运算符

！ 非，，转成布尔值后取反
&& 和 ，
|| 或者
!!1:转成布尔值
优先级：
逻辑运算符>算术运算符

比较运算符,一定会得到布尔值
< > <= >= != == !== ===

==:值是否相等
===：不仅比较值，还要比较数据类型
parseInt（）：强制转换为整数 发现转不了的就结束

parseIFloat（）：强制转换为浮点数，发现转不了的就结束

var num123='123.456';
console.log(parseInt(num123));//123
var num123='123a.456';
console.log(parseInt(num123));//123
var num123='12a3a.456';
console.log(parseInt(num123));//12
var num123='1.2a3a.456';
console.log(parseFloat(num123));//1.2

var abc = Number('21a321');/*NaN - not a number*/

NaN无法比较

console.log(isNaN(abc));判断NaN的方法

var zaijian='haha'
console.log(!!zaijian)
console.log(Boolean(zaijain))
// 只有空值才为false

小结：
true ==> number //1
false ==> number //0
数字 ==> boolean 非0 是true 0是false
字符串 ==> boolean 空字符是false 其他是true
字符串 ==> 数字 Number方法将整体转成数字 parseInt转整型从左向右

分支结构

单分支

if（）{
}

双分支

if(){
}
else{
}

多分支

if（）{
else if(){
}
else if(){
}
else{
}

节点操作

<button onclick="removeDiv()">删除节点</button>
<button onclick="removeDivAll()">删除所有h1节点</button>
<button onclick="addDiv()">添加节点</button>
<button onclick="myReplace()">替换节点</button>
<button onclick="myappend()">前面插入节点</button>
<button onclick="myclone()">克隆节点</button>
<button onclick="getparent()">获取父节点</button>
<div id="mydiv1">
    <h1>我是h1</h1>
    <h1>我是h1</h1>
    <h1>我是h1</h1>
    <h1>我是h1</h1>
    <h1 id="myh">我是要被替换的标签</h1>
</div>
<div id="mydiv2">
    我是div2
    <h2>我是div2的元素子节点</h2>
</div>
<script>
    let div = document.querySelector('#mydiv1')
    // 获取节点的方法
    let div1 = document.querySelector('#mydiv1 h1:nth-child(1)')/*参数可以是css3的选择器的字符串*/
    /*返回的是第一个满足条件的节点对象*/

    let div2 = document.querySelectorAll('#mydiv1 h1')
    div1.style.backgroundColor = 'pink'

    // 用getelement方法获取
    let h1Lsit = div.getElementsByTagName('h1')

    // for(let i=0;i<h1Lsit.length;i++){
    //     console.log(i)
    //     let myChildNode = document.createElement('h1')
    //     div.appendChild(myChildNode)
    // }


    function removeDiv(){
        div.removeChild(div1)
        console.log(document.querySelectorAll('#mydiv1 h1'))
    }
    function addDiv() {
        // 添加之前需要先有一个节点
        let h1 = document.createElement('h1')
        let wenzi = document.createTextNode('我是创造出来的文字节点')
        h1.appendChild(wenzi)
        div.appendChild(h1)
    }
    function myReplace() {
        let h1 = document.createElement('h1')
        let wenzi = document.createTextNode('我是替换的文字')
        let yaotihuandeh1 = document.getElementById('myh')
        h1.appendChild(wenzi)
        // div.replaceChild(替换的新节点,要被替换的节点)
        div.replaceChild(h1,yaotihuandeh1)
    }
    // 插入
    function myappend() {
        // let newDiv = document.createElement("div")
        let h1 = document.getElementById('myh')
        let mydiv2 = document.getElementById('mydiv2')
        // div.insertBefore(newDiv,h1)
        div.insertBefore(mydiv2,h1)
    }
    // 克隆节点
    function myclone() {
        let mydiv2 = document.getElementById('mydiv2')
        let newClone = mydiv2.cloneNode(false)
        div.appendChild(newClone)
    }
    function getparent() {
        let myH = $('myh')
        myH.parentNode.removeChild(myH)
        console.log(myH.parentNode)
    }

    //删除所有
    function removeDivAll(){
        // let myH1all = div.getElementsByTagName('h1')
        let myH1all = div.querySelectorAll('h1')
        console.log(myH1all)
        for(let i = 0;i<myH1all.length;i++){
            div.removeChild(myH1all[i])
            // i--
            // 要么
            // div.removeChild(myH1all[0])
        }
    }

    function $(id) {
        return document.getElementById(id)
    }

字符串的方法

     // let str = "" ||  ''  ||  ``
        let str = "我是一个人一个人"      // 字面量创建
        let strobj = new String('123')       //创建字符串对象     不建议
        //  typeof 返回数据类型
         
console.log(typeof str)/*string*/
console.log(typeof strObj) /*object*/

（1）找到字符方法 str[0] str.charAt[1]

console.log(str[0])   //我
console.log(str.charAt[1])   //是
str[1] = '我的'  //这种方法不能改变原有字符，它是自己生成一个新的字符串

（2）截取字符串 slice

let str1 = str.slice(1,4)     //  是一个  slice(起始下标(要被截取),结                                //   束下标(不被截取))

        字符串第一次出现的位置  indexOf

console.log(str.indexOf['一'])  //2

（3）查找字符串 search

console.log(str.search('一'))

（4）替换字符串 （找到第一个匹配的，替换成第二个参数） replace

console.log(str.replace('一','wd'))
//我是wd个人一个人      只替换了第一个
console.log(str.replace(/你好/g,'wd'))
//要想换所有，只能用正则

（5）分割字符串 split

console.log(str.split('一'))   //返回一个数组
//["我是","个人","个人"]

  （6）清除字符串两边的空格   tri

时间的方法

let date = new Date()  //object

*getMonth 从0开始

计算天数

function riqi(date1,date2) {
    var num1 = new Date(date1)
    var num2 = new Date(date2)
    return (num2 - num1)/1000/60/60/24
}
console.log(riqi('2051-5-20','2599-12-2'))

// max/1000 求秒数
/60 求分钟数
/60 求小时数
/24 求天数
/365 求年数

正则 通过指定符号来描述该组字符串的方法

出现场景——> 1.提示输入的格式 2.对数据进行匹配修改
正则表达式

var a = /^hello$/

字符串在比较正则的时候有2种方法

1）match

//字符串.match(写规则)
console.log(str.match(a))   //null var str='hello+nihao+ming'
//满足正则的话返回一个字符串，若不满足返回n

ull

2）test 方法

//规则.test(要比较的字符串)
console.log(a.test(str))     //true   var str='hello'
//满足正则的话返回boolean

[] 定义字符是什么
{} 定义字符的长度 {5}:必须有5个长度 {最少有几个，最多有几个} {3,}至少3个
\d 匹配的是一个数字字符 /\d/ === /[0-9]/
\D 匹配的是一个数字字符 /\D/ === /[^0-9]/

\d 匹配0-9之间任一数字 相当于[0-9]
\D 匹配所有0-9以外的数字 相当于[^0-9]
\s 匹配空格（包括制表符、空格符、段行符等等） 相当于[\t\r\n\v\f]
\S 匹配非空格 相当于[^\t\r\n\v\f]
. 查找单个字符，除了换行和行结束符。
\w 匹配任意字母、数字和下划线 [A-Za-z0-9]
\W 匹配所有字母、数字和下划线以外的字符 [……A-Za-z0-9]
\b 匹配单词边界。
\B 匹配非单词边界,即词的内
\0 查找 NULL 字符。
\n 查找换行符。
\f 查找换页符。
\r 查找回车符。
\t 查找制表符。
\v 查找垂直制表符。
\xxx 查找以八进制数 xxx 规定的字符。
\xdd 查找以十六进制数 dd 规定的字符。
\uxxxx 查找以十六进制数 xxxx 规定的 Unicode 字符。
修饰符
修饰符用于执行区分大小写和全局匹配:
i 执行对大小写不敏感的匹配。
g 执行全局匹配（查找所有匹配而非在找到第一个匹配后停止）。
m 执行多行匹配。

？ 出现0次或1次 ==》 {0，1}

• 出现0次或多次 ==》{0，}

• 出现1次或多次 ==》{1，}

事件绑定

1.传统绑定

οnclick=“f()”

1.1.节点绑定
节点.onclick = function(){}

无法传参

this为mydiv这个节点；

2.取消传统事件绑定

3.现代绑定

节点.addEventListener()

增加监听事件，dom浏览器的现代事件绑定

test(){
    
}

btn.addEventListener('click',test) //实参

btn.addEventListener('click',function(){
    test(this);//btn
    //this指向btn
})

4.取消现代绑定

事件流

“事件触发的先后顺序
冒泡：从里到外，从精确到模糊
捕获：从外到里

dom可以控制事件流
ie只允许冒泡

事件对象：
键盘对象
envent