JavaScript知识点-周1.md

一、javascript初识

1、概念

javascript是基于对象和事件驱动的解释性脚本语言;
特性

基于对象	可以运用自己创建的对象
事件驱动	javascript可以直接对用户或者客户端的操作进行响应
解释性	相对编译性来说, 浏览器可以直接识别和解析代码
跨平台性	只要是浏览器就可以运行

js组成部分
1. ECMAScript: 用来指定javascript语法标准, 核心
2. DOM: Document Object Model 文档对象模型
3. BOM: Browser Object Model 浏览器对象模型

2、 js引入方式

行内引入：事件驱动, 给元素加上对应的事件, 不常用

   <div class="box" onclick="alert(1)">这是一个div</div>

内嵌: script双标签, script标签可以放置于任何位置,推荐放于body的结束标签之前, 工作少用, 学习常用

   <script>

          alert(3);

   </script>

外链: script双标签, script标签可以放置于任何位置, 用src将地址引入进来, 工作常用

   <script src="test.js"></script>

注意事项:

   // 注意： 1. 从上到下的顺序执行, 遇到script标签会停止执行去运行script标签中的代码，script标签中代码执行完成后再继续执行其他代码

   // 2. 外链的script标签中写其他js代码，其他js代码不会执行

   <script>

           // 阻断页面

           alert(2);

   </script>

   <script src="test.js">

           // 不会执行

           alert(1);

   </script>

3、调试工具

alert(要弹出的内容): 警告框，让用户看到提示, 阻断页面
console.log(要输出的内容): 输出在控制台, 右键—> 检查—>console

4、获取元素（id）

   document.getElementById('id')
   // 获取元素方式: 通过id获取

   // 语法: document.getElementById('id');

   // document: 文档

   // get: 得到

   // Element: 元素

   // ById: 通过id
   document.getElementById('box')

5、事件三部曲

元素添加事件三部曲
- 得到元素 document.getElementById(‘box’)
- 添加事件: .事件 = function(){}
- 具体要做的事情: alert(2);

   document.getElementById('box').onclick = function(){
    
    

               alert(2);

   }

二、鼠标事件

鼠标事件	对应函数
单击事件	onclick
双击	ondblclick
鼠标移入	onmouseover/ onmouseenter
鼠标移出	onmouseout / onmouseleave
鼠标按下	onmousedown
鼠标抬起	onmouseup
鼠标移动	onmousemove
鼠标右键菜单	oncontextmenu

单击事件： onclick

   document.getElementById('box').onclick = function(){
    
    

               alert(2);

   }

双击: ondblclick

   document.getElementById('box').ondblclick = function(){
    
    

               alert(3);

   }

鼠标移入: onmouseover/ onmouseenter
鼠标移出: onmouseout / onmouseleave

   // onmouseenter: enter中子元素不会触发父元素身上的事件

   // onmouseover: over中子元素会触发父元素的事件

   // document.getElementById('box').onmouseenter = function(){
    
    

   //     console.log(1);

   // }

   document.getElementById('box').onmouseover = function(){
    
    

               console.log(2);

   }

鼠标按下: onmousedown

   document.getElementById('box').onmousedown = function(){
    
    

               // alert(3);

               console.log(1);

   }

鼠标抬起: onmouseup

   document.getElementById('box').onmouseup = function(){
    
    

               // alert(4);

               console.log(2);

   }

鼠标移动：onmousemove

   document.getElementById('box').onmousemove = function(){
    
    

               console.log(5);

   }

鼠标右键菜单: oncontextmenu

   document.getElementById('box').oncontextmenu = function(){
    
    

            console.log(6);

   }

三、变量

用来存储数据的容器

1、声明

先声明后赋值
- 单个声明: var 变量名; 变量名 = 值;
- 多个声明: var 变量名1, 变量名2, … , 变量名n; 变量名1 = 值; 变量名2 = 变量名3 = 值2;
声明的同时并赋值
- 单个声明: var 变量名 = 值;
- 多个声明: var 变1 = 值1, 变2 = 值2, …, 变n = 值n;

   var val;

   val = 10;

   console.log(val);

   

   var val1, val2, val3;

   val1 = 20;

   val2 = val3 = 30;

   console.log(val1, val2, val3);

   

   var newNum = 30;

   console.log(newNum);

   

   var newNum1 = 20, newNum2 = 30;

   console.log(newNum1, newNum2);

2、变量的命名规范

遵循驼峰命名法, 见名知意; userLoginName, userPassword
变量由字母、数字、_、$组成, 数字不能开头
不能使用关键字和保留字
不能重复, 后面的会覆盖前面的

3、 window.onload = function(){}

作用：等待窗口(页面及资源)加载完成后在执行其中的代码

   window.onload = function () {
    
    

           console.log(1);

           var oDiv = document.getElementById('box');

           console.log(oDiv);

           oDiv.onclick = function () {
    
    

               alert(2);

   }

           oDiv.onmousedown = function () {
    
    

               console.log(7);

           }

   }

四、js操作元素内容

1、获取

标签.innerText: 获取得到纯文本内容, 不识别标签
标签.innerHTML: 获取得到文本内容及标签(带标签的文本内容)

   var box = document.getElementById('box');

   var box1 = document.getElementById('box1');

   console.log(box, box1);

   console.log(box.innerText);
   
   console.log(box1.innerHTML);

2、设置

标签.innerText = 值; 设置时，会覆盖标签中原有的内容, 不识别标签
标签.innerHTML = 值; 设置时, 会覆盖标签中原有的内容, 可以识别标签

   box.innerText = '这是新更改的内容9';

   box.innerText = '<i>这是第二次更新的内容8<i>'; 
   
   box1.innerHTML = '这是新更改的内容7';

   box1.innerHTML = '<strong>这是新更改的内容6</strong>';

3、 innerText与innerHTML的区别

innerText不识别标签	innerHTML可以识别标签

   案例：简易聊天框

   <div>

        <ul id="oul">

            <li>这是第一句话</li>

            <li>这是第二句话</li>

            <li>这是第的句话</li>

        </ul>

   </div>

   <button id="btn">添加内容</button>

   <script>

        // 点击添加内容，往ul中添加li

        // 1. 获取元素

        var btn = document.getElementById('btn');

        var oul = document.getElementById('oul');

        // 2. 添加事件

        btn.onclick = function(){
    
    

            // 3. 做具体的事情

            // 得到原有的ul中的内容

            var text = oul.innerHTML;

            console.log(text + '<li>这是新内容</li>');

            oul.innerHTML = text + '<li>这是新内容</li>';

        }

   </script>

4、innerHTML与document.write的区别

innerHTML	document.write
都可以操作body标签，document.body.innerHTML页面中获取到body之后在操作	document.write直接操作body
可以操作所有的闭合标签	只能操作body
都可以识别标签	都可以识别标签
覆盖原标签中的所有内容	也会覆盖原标签中的所有内容，但是自己添加的内容不覆盖
document.body.innerHTML == document.write(在一定程度上相等)	document.write需要加window.onload

   window.onload = function () {
    
    
                document.write('<b>123</b>');
                document.write('<b>678</b>');   
   }

五、操作表单

1、获取

标签.value

注意： option中如果设置了value 得到的就是value，建议使用value获取textarea的值

   var userName = document.getElementById('userName');

   var userPassword = document.getElementById('userPassword');

   console.log(userName.value);

   console.log(userPassword.value);

  

   var ck = document.getElementById('ck');

   var ck1 = document.getElementById('ck1');

   console.log(ck.value, ck.checked);

   console.log(ck1.value, ck1.checked);

  

   var man = document.getElementById('man');

   var woman = document.getElementById('woman');

   console.log(man.value, woman.value);

  
   var cs = document.getElementById('cs');

   // 下拉列表中,没有添加value时, 默认用option中的内容作为value值

   // 有value时, 返回被选中的option的value值 

   console.log(cs.value);

  

   var txt = document.getElementById('txt');

   console.log(txt.value); // textarea 中内容可以拿到, 建议用

   console.log(txt.innerText); // 空

   console.log(txt.innerHTML); // 可以拿到

2、设置

标签.value = 值


   // ----------设置--------

   userName.value = '前端迷';

   userPassword.value = '666666';

  

   txt.value = '这是新的设置内容';

  

    city.value = '重庆'; //匹配不到

    city.value = 'cq'; //所设置的内容要与value值完全一致否则为空

    city.value = 'cq'; //重设默认选中项


   简易聊天框

   <div id="box">

        <ul id="oul">

            <li>我们已经成为好友,快开始聊天吧</li>

        </ul>

   </div>

   <input type="text" id="inp"><button id="send">发送</button>

   <script>

        // 输入内容，点击发送，到对话框中

        // 1. 获取元素

        var inp = document.getElementById('inp');

        var send = document.getElementById('send');

        var oul = document.getElementById('oul');

        // 2. 添加事件

        send.onclick = function(){
    
    

            // 3. 做具体的事情

            // 3-1: 获取输入的内容

            var txt = inp.value;

            console.log(txt);

            var ulHTML = oul.innerHTML;

            // 拼接: 1. 删 2. 加： 加两个引号两个加号 3. 拼

            oul.innerHTML = ulHTML + '<li>' + txt + '</li>';

            // 3-2: 清空输入框

            inp.value = '';

        }

   </script>

六、操作元素属性

1、获取

元素.属性名
元素[“属性名”] 元素[变量];

2、设置

元素.属性名 = “属性值”;
元素[“属性名”] = “属性值”;

元素[变量] = “属性值”;
注意: class作为保留字, 不能直接使用, 用className
区别: 所有点的方式都可以换成中括号, 中括号中属性名要加引号, 中括号中可以用变量, 点的方式不能用变量

   var box = document.getElementById('box');

   var btn = document.getElementById('btn');

   btn.onclick = function(){
    
    

              console.log(box.className);

              box.id = 'a';

              // class作为保留字, 不能直接使用, className

              var y = box.className; // box

              box.className = y + ' b';//注意要有空格拼接

  

              var cn = 'id';//将id设为cn变量

              console.log(box.id);

              console.log(box["id"]);

              console.log(box[cn]);

              // box['id'] = 'c';

              box[cn] = 'c';

   }

七、操作img的src属性

1、获取

标签.src 注意：获取到绝对地址, 没有实际作用

2、设置:

标签.src = ‘值’; 相对地址

   var img = document.getElementById('img');

   console.log(img.src); // file:///E:/%E4%B8%AD%E5%85%AC%E6%95%99%E8%82%B2/20200316/day02/img/dark.jpg

  

   // 点击开灯按钮，让图片亮起来(换img的src)

   // 1. 获取元素

   var btn = document.getElementById('btn');

   // 2. 添加事件

   btn.onclick = function(){
    
    

   // 3. 具体的事情

              img.src = './img/bright.jpg';

              //img.src = "../images/" + userInput + ".jpg";相对地址

   }

八、操作元素样式

1、获取

标签.style.属性名

2、设置

标签.style.属性名 = ‘属性值’;

注意:
- 只能操作行内样式
- js中没有连字符’-’, 遇到有连字符, 去掉连字符,将连字符紧跟的第一个字母变成大写, 遵循驼峰命名法

    var box = document.getElementById('box');

    console.log(box.style); // 不会直接用

    console.log(box.style.width); // 200px

    console.log(box.style.height);

    console.log(box.style.background);

    console.log(box.style.color); // 空



    box.style.width = '500px';

    box.style.border = '10px solid #0f0';

   // 点击放大按钮, 将字体放大

    var btn = document.getElementById('btn');

    btn.onclick = function(){
    
    

            box.style.fontSize = '100px';// 无连字符，遵循驼峰命名法

    }

九、批量样式设置: cssText

1、获取

标签.style.cssText 只能获取到行内所设置的样式

2、设置

标签.style.cssText = ‘值’; 设置标签上的style属性

设置时, cssText会覆盖原有的所有行内样式

   console.log(box.style.cssText);

   box.style.cssText = 'width: 100px; height: 200px; font-size: 10px;';


   操作元素案例：输入序号-显示对应图片

   <input type="text" id="inp"> <button id="btn">切换</button>

   <br>

   <img src="./img/1.jpg" alt="" id="myImg">

   <div id="cont">当前显示的是: img/1.jpg</div>

   <script>

        // 输入图片地址, 切换到对应的图片

        // 用户输入图片名称, 点击切换按钮, 图片显示为用户所输入的名字的图片, 展示的文字对应更改成用户输入的名字

        // 1. 获取元素

        var inp = document.getElementById('inp');

        var btn = document.getElementById('btn');

        var myImg = document.getElementById('myImg');

        var cont = document.getElementById('cont');

        // console.log(inp, btn, myImg, cont);



        // 2. 添加事件

        btn.onclick = function(){
    
    

            // 3. 具体要做的事情

            // 3-1: 得到用户所输入的内容

            var txt = inp.value; // 1 2 3 4

            // 3-2: 切换图片

            myImg.src = "./img/" + txt + ".jpg";

            // 3-3:文字显示

            cont.innerHTML = '当前显示的是: img/' + txt + '.jpg';

            // 3-4: 清除输入框

            inp.value = '';

        }

   </script>

十、数据类型

1. 检验数据类型

typeof 要检验的数据
typeof(要检验的数据)
typeof 检验结果:
- 返回自身类型: number\string\boolean\undefined\function
- 返回object: null\object\array
存储的数据类型和存储位置
- 基础: 存储数据类型比较单一, 存储于栈中
- 复杂: 存储数据类型比较多样化, 存储于堆中
- 复杂数据类型用=赋值，改变的是地址指针

2、分类

基础数据类型	复杂数据类型
number\string\boolean\null\undefined	(引用、复合)object\array\function

基础数据类型

number

整型: 0 1 2 3 整数
浮点型: 小数, 必须包含一个小数点并且小数点后至少一位不为0的数字 1.2 2.01
特殊值:
- 如果数字以0开头，并且后面的数字都不超过8，就表示八进制数
- 如果数字以0x开头，表示十六进制数 0-9ab-f
- 正无穷大：Infinity/-Infinity(100/0,除数为0)
- NaN: 特殊值, Not a Number, 不是一个数字, 任何与数值操作错误的时候都会返回NaN
  - 检验: 使用typeof之后，返回结果是number
  - NaN与所有数值进行计算，返回结果都是NaN
  - NaN与任何数值都不相等，包括自身

   注意: 由于计算机存储不精的问题，导致计算结果有偏差, 在使用的过程中要避免使用小数去做判断

   console.log(0.1 + 0.2); // 0.30000000000000004

string

概念: 字符串, 被成对的单双引号包裹起来的字符都是字符串

   var str = 'abc';

   console.log(typeof str); // string

   var str1 = '123';

   console.log(typeof str1); // string

字符串的长度: 字符串.length
获取到指定下标的字符:
- 字符串.charAt(下标);
- 字符串[下标]: ie8以上可以使用
- 下标: 从左往右、从0开始的数字

boolean

boolean: 布尔值, true(真) false(假)
一般用来做判断条件或者是判断条件的结果

   var b = true;

   console.log(b);

   console.log(typeof b); // boolean

   console.log(1 == 1); // true

   if(true){
    
    //如果为真就执行

            console.log(1);//1

   }

null与undefined

undefined: 声明了变量未赋值时(未初始化)
null: 空, 空对象, 现在没有值，但是将来可能会给他一个值
js中规定: null和undefined相等

null和undefined的区别: undefined是声明了未赋值, null本身就是空


        var a;

        console.log(a);



        var b = undefined;

        console.log(typeof b); // undefined



        var nu = null;

        console.log(nu);

        console.log(typeof nu); // object



        console.log(1 == undefined); // false

        console.log(undefined == undefined); // true

        console.log(null == null);//true

        // js中规定: null和undefined相等

        console.log(null == undefined); // true

复杂数据类型

object

概念: 对象, 对象是由方法和属性组成的, 一切皆对象, 所有的一切都是对象
例子: window\document\元素 {}

   console.log(typeof window); // object

   console.log(document);

   console.log(typeof document); // object

   var box = document.getElementById('box');

   console.log(typeof box); // object

   var obj = {
    
    };

   console.log(obj); // 空对象

创建： var 变量名 = {

‘key’: ‘value’,

‘key1’: ‘value1’

}

   var myObj = {
    
    

               'name': '彭于晏',

               'height': '183cm'

   }

   console.log(myObj);

取值：对象变量名.key 对象变量名[‘key’] 对象变量名[变量]

   console.log(myObj.name);//彭于晏

   console.log(myObj['name']);

   var h = 'height';

   console.log(myObj[h]);//183cm

array

array: 数组, 存放数据的容器, 用来存放不定数量、不定类型的数据值的有序集合;

索引: 每一个值的下标

元素: 数组中的每一项
创建: var 变量名 = [元素1, 元素2, …, 元素n];
数组的长度: 数组.length
得到指定下标的元素: 数组[下标]

   var arr = [];

   console.log(arr);//Array(0)[]

   

   var arr1 = [1, 2, 3];

   console.log(arr1);

   

   var arr2 = [1, true, null, 0xa7, 060, 'abc', 1.2, undefined, NaN, {
    
    }, 1/0, box, [1,2,3]];

   console.log(arr2);

   console.log(arr2.length);

   console.log(arr2[3]); // 167 0xa7

   console.log(typeof arr2); // object

function

function: 函数, 存放一段代码, 在有需要的时候调用
函数使用:
- 声明函数: function 函数名(){ // 要执行的代码块 }
- 调用: 函数名();
- 注意: 只声明不调用函数不起作用
- 函数名的命名规则遵循变量的命名规则

   function today(){
    
    

         console.log('啊，要学习');

   }

   today();//调用执行函数

3、强制转换

Number

Number(要转换的数据): 将数据强制转换成number类型
可以转换：
- 纯数字字符串\空和空格\Boolean\null
- array: 空数组、只有一项且为数字、数字字符串、空字符串、boolean、null可以转换


   // string: 纯数字字符串\空和空格

   console.log(Number('')); // 0

   console.log(Number(' ')); // 0

   console.log(Number('a')); // NaN

   console.log(Number('123a')); // NaN

   console.log(Number('123')); // 123

   console.log(Number('12.5')); // 12.5



   // boolean: true(1)  false(0)

   console.log(Number(true)); // 1

   console.log(Number(false)); // 0



   // null(0) undefined

   console.log(Number(null)); // 0

   console.log(Number(undefined)); // NaN



   var obj = {
    
    };

   console.log(Number(obj)); // NaN



   // array: 空数组、只有一项且为数字、数字字符串、空字符串、boolean、null可以转换

   var arr = [];

   console.log(Number(arr)); // 0

        

   console.log(Number(['123'])); // 123

   console.log(Number([null])); // 0

   console.log(Number(['123', '456'])); // NaN

parseInt

parseInt(要转换的数据, 进制)
从左往右依次转换, 遇到不能转换的就停止, 返回整型(整数); 如果第一个字符就不能转换, 返回NaN
进制: 2-36进制, 得到对应进制字符串

注意: 进制不是必须写,但是建议写

   console.log(parseInt('300px')); // 300

   console.log(parseInt('12.5px')); // 12

   console.log(parseInt('070')); // 在ie8及以下，以0为开头的会转换成8进制数

   console.log(parseInt('070', 10));

   console.log(parseInt('110', 8));

   console.log(parseInt('a123')); // NaN

parseFloat

parseFloat(要转换的数据): 转换规则与parseInt一致, 返回可以是浮点数

   console.log(parseFloat('300px')); // 300

   console.log(parseFloat('12.5px')); // 12.5

   console.log(parseFloat('12.0px')); // 12

isNaN

isNaN(要判断的数据): 判断数据是不是不是一个数字
不是一个数字: true 是一个数字: false

   console.log(isNaN(123)); // false

   console.log(isNaN('123')); // false

   console.log(isNaN('a123')); // true

   console.log(isNaN('123a')); // true

   // Number('123a')---> NaN--true   数字---false

   console.log(isNaN('12.5')); // false

   console.log(isNaN('12.5px')); // true

   // Number(true); 1

   console.log(isNaN(true)); // false

   console.log(isNaN(null)); // false 

   console.log(isNaN(undefined)); // true

   console.log(isNaN({
    
    })); // true

   console.log(isNaN([])); // false

   console.log(isNaN([null])); // false

string

数据对象.toString(进制)：
- toString方法是属于要转换的对象的自带方法, 可以被改变
- null与undefined不支持
- 进制, 转换后得到转换的数据对应的进制字符串, 2-36进制

   // number

   var num = 30;

   console.log(num.toString());

   console.log(typeof num.toString()); // string
    
   // boolean
   
   var t = true;

   console.log(t.toString());

   console.log(typeof t.toString()); // string
 

   // null 与 undefined: null 是空对象，本身就是空  undefined是声明未赋值

   var n = null;

   // console.log(n.toString());

   // console.log(undefined.toString());

     

   var obj = {
    
    };

   console.log(obj.toString()); // [object Object]

     

    var arr = [];

    console.log(arr.toString()); // 空字符

    var arr1 = [1,2,3];

    console.log(arr1.toString()); // 1,2,3

     

    // 进制, 转换后得到转换的数据对应的进制字符串, 2-36进制

    var num = 10;

    console.log(num.toString(2));

    console.log(typeof num.toString(2)); // string

String(要转换的数据): 强制转换

   console.log(String(null));

   console.log(typeof String(null)); // string

   console.log(String(undefined)); // undefined

   console.log(String(arr1)); // 1,2,3

Boolean

Boolean(要转换的数据): 强制转换
js中的真真假假:

假: 空字符 0 NaN null undefined false

真: 除了以上6个，剩下都是真的

   // string

   console.log(Boolean('')); // false

   console.log(Boolean(' ')); // true

   console.log(Boolean('a')); // true

   console.log(Boolean('0')); // true

            
   // number

   console.log(Boolean(0)); // false

   console.log(Boolean(10)); // true

   console.log(Boolean(-1)); // true

   console.log(Boolean(0.25)); // true

   console.log(Boolean(NaN)); // false

           

   // null与undefined

   console.log(Boolean(null)); // false

   console.log(Boolean(undefined)); // false

            

   // 复杂

   var obj = {
    
    };

   console.log(obj);

   console.log(Boolean(obj)); // true

           
   var arr = [];

   console.log(arr);

   console.log(Boolean(arr)); // true

            

   function a(){
    
    

            console.log(1);

   }
        
   console.log(Boolean(a));

十一、运算符

1、分类

运算符	语法
算术运算符	+ - * / %(取余) ++ –
赋值运算符	= += -= *= /= %=
比较运算符	> >= < <= = =(双等) = = =(恒等\全等) !=(不等) !==(不全等)
逻辑运算符	&&(与)
三目运算符	三元, 判断的条件 ? 条件成立时, 执行的代码 : 条件不成立时, 执行的代码

算术运算符

+: 计算中，如果有一边为string, 那么做拼接; 其他数据类型, 尽可能的用Number转换后在做计算
- * / %: 尽可能的使用Number转换后在做计算
复杂数据类型在做计算的时候, 先使用toString方法转换成字符串之后在做计算

   console.log('abc' + '123'); // abc123

   console.log('abc' + 123); // abc123

   console.log(123 + true); // 123 + 1  124

   console.log(123 + null); // 123 + 0  123

   console.log(null + undefined); // 0 + NaN  NaN

   console.log('123' + {
    
    }); // 123[object Object]

   console.log(123 + [1,2,3]); // 123 + '1,2,3' '1231,2,3'

   console.log(123 + []); // 123

  

   // - * / %: 尽可能的使用Number转换后在做计算

   // -:

   console.log('abc' - '123'); //  NaN - 123  NaN

   console.log(123 - true); // 122

   console.log(null - undefined); // NaN

   console.log({
    
    } - false); // NaN

   console.log([] - null); // 0

   console.log(true - []); // 1

  

   // *:

   console.log('abc' * null); // NaN

   console.log(123 * undefined); // NaN

   console.log(true * false); // 0

   console.log({
    
    } * '123'); // NaN * 123 NaN

   console.log(['2'] * true); // 2

   console.log(['2', '3'] * false); // NaN

  

   // /:

   console.log('123' / false); // 123 / 0  Infinity

   console.log('-123' / null); // -Infinity

   console.log(null / undefined); // NaN

   console.log(true / [1]); // 1

  

   // %: 取余: 余数(除不尽剩下的那个数)

   console.log(10 % 3); // 1

   console.log(10 % 2); // 0

   console.log(true % false); // 1 % 0 NaN

   console.log(null % true); // 0 % 1  0

   console.log([5] % '2') // 5 % 2 1

++与–

++(在自身基础上+1) --(在自身基础上-1)
++/–在前: 先自加/减再运算(赋值/输出)
++/–在后: 先做运算(赋值或输出), 在做自加/减


   var num = 10;

   // num++;

   // num = num + 1;

   // num = num - 1; 

   // num--;

   // ++num;

   console.log(num);



   // ++/--在前: 先自加/减再运算(赋值/输出)

   var m = ++num; // ++num --> 11

   console.log(m); // 11

   console.log(num); // 11

   console.log(++num); // 11

   console.log(num);  // 11



   // ++/--在后: 先做赋值或输出, 在做自加/减

   var m = num++;

   console.log(m); // m = num; m = 10; num++; num-->11

   console.log(num); // 11

   console.log(num++);// 输出num-->10  num++; num--->11

   console.log(num); // 11

   console.log(--num); // 10

   console.log(num); // 10

   console.log(num--); // 10

   console.log(num); // 9

赋值运算符: =(赋值) += -= *= /= %=

   var num = 10;

   // +=: 

   var num1 = 10;

   num += 30;

   // num = num + 30;

   console.log(num);


   // -=:

   var num2 = 10;

   num2 -= 2;

   console.log(num2); // 8


   // *=:
    
   var num3 = 10;

   num3 *= 10;

   console.log(num3); // 100



   // /=:

   var num4 = 20;

   num4 /= 2;

   console.log(num4); // 10



   // %=:

   var num5 = 10;

   num5 %= 2;

   console.log(num5); // 0


   var n = 30;

   n += 'a';

   // n = n + 'a';

   console.log(n); // 30a



   var m = true;

   m /= 1;

   console.log(m); // 1

比较运算符

< <= > >= == === != !==
返回结果是个布尔值, 比较的判断成立返回true 不成立返回false
字符串比较中, 从左到右依次比较每个字符的ASCII值, 如果有一位已经比较出来大小，那就结束比较
==: 双等: 只比较值

===: 三等\全等\恒等: 不仅比较值，还比较数据类型
!=: 只比较值

!==: 不仅比较值，还比较数据类型

   // 返回结果是个布尔值

   // 比较的判断成立返回true 不成立返回false

   console.log(1 > 2); // false

   console.log(2 < 3); // true

  
   console.log('1' < '2'); // true  49 < 50

   console.log('10000' < '2'); // true

   // 字符串比较中, 从左到右依次比较每个字符的ASCII值, 如果有一位已经比较出来大小，那就结束比较

   // 0 ----> 48

   // A ----> 65

   // a ----> 97

   console.log('a' > 'A'); // 97 > 65 true

   console.log('22221' < '2'); // false

  

   console.log(true > false); // 1 > 0

   console.log('a' > undefined); // false NaN > NaN

   console.log('a' < undefined); // false

   console.log('a' < 'undefined'); // true

   console.log({
    
    } > []); // '[object Object]' > ''  true

  

   console.log(1 >= 1); // 1 > 1 或 1 == 1 true

  
   // ==: 双等: 只比较值

   // ===: 三等\全等\恒等: 不仅比较值，还比较数据类型

   console.log('1' == 1); // true

   console.log('1' === 1); // false

  

   // !=: 只比较值

   // !==: 不仅比较值，还比较数据类型

   console.log('1' != 1); // false

   console.log('1' !== 1); // true

逻辑运算符

&&(与): 左右两边各为一个条件, 如果两边均为true, 返回true, 如果有一边为false则返回false
||(或): 左右两边各为一个条件,如果有一个条件为true, 返回true, 如果两个都是false, 会false
!(非\取反): 布尔, Boolean, true–>取反—> false

   console.log(3 > 2 > 1); // false

   console.log(3 > 2 && 2 > 1); // true && true  true

   console.log(3 < 2 && 2 > 1); // false && true false

  

   console.log(3 > 2 || 2 > 1); // true

   console.log(3 < 2 || 2 > 1); // false || true  true

   console.log(3 < 2 || 2 < 1); // false || false false

  

   // js为假: false '' null undefined 0 NaN

   console.log(!''); // true

   console.log(!' '); // false

   console.log(!0); // true

   console.log(!{
    
    }); // false

  
   console.log(!!false); // !false ---> true  !true --- > false

三目运算符

条件 ? 条件成立, 执行的代码 : 条件不成立, 执行的代码


   var num = 10;

   // num > 10 ? alert(1) : alert(2);

          

   var a;

   // num < 30 ? a = 30 : a = 10;

   // console.log(a); // 30

 

   a = num < 30 ? 30 : 20;

   console.log(a); // 30

2、隐式转换规则

+: 计算中，如果有一边为string, 那么做拼接; 其他数据类型, 尽可能的用Number转换后在做计算
- * / %: 尽可能的使用Number转换后在做计算
复杂数据类型在做计算的时候, 先使用toString方法转换成字符串之后在做计算

十二、条件语句

1、流程控制语句分类：控制代码的执行顺序的语句

流程控制语句分类	控制代码的执行顺序的语句
顺序结构	按照顺序执行代码
条件选择结构(分支)	if\ if else\switch
循环结构	将代码执行特定次数的语句, for\while\do while
其他语句	break\continue

2、条件选择结构

if(条件) { // 条件为真(成立)时, 执行的代码}

if else: if(条件) { // 条件为真(成立)时, 执行的代码} else { // 条件为假(不成立)时, 所执行的代码 }
if else多层嵌套

if(条件1){
// 条件1成立的时候，执行的代码
} else if(条件2){
// 条件2成立的时候, 执行的代码
} else {
// 以上条件都不成立的时候, 所执行的代码
}

   var m = 0;

   // 适用于单一代码代码

   // m > 60 ? alert('合格') : alert('不合格');

   if(m > 60){
    
    

            console.log('你可太优秀了');

            alert('合格');

    } else{
    
    

            // 条件不成立

            console.log('我们继续加油');

            alert('不合格');

    }



    // 60及以下: 不合格   61 - 80: 中等  81 - 90: 良好  91 - 100: 优秀

    var mark = 73;

    if(mark <= 60){
    
    

            console.log('不合格, 继续加油');

    } else if(mark > 60 && mark <= 80){
    
    

            console.log('中等, 在拼一下');

    } else if(mark > 80 && mark <= 90){
    
    

            console.log('良好, 在努力一下你就是优秀了');

    } else {
    
    

            console.log('非常优秀, 继续保持');

    }

注意：if后的{}可以省略的, 如果省略了, 只能控制后面的第一条语句

   // if后的{}可以省略的, 如果省略了, 只能控制后面的第一条语句

   var a = 10;

   if(a > 10){
    
    

            console.log(1);

            console.log(2);

   }

   if(a > 10) 

            console.log(1);

            console.log(2);


   案例：复选框的反选  

   <input type="checkbox" name="" id="inp" >

   <button id="btn">反选</button>

   <script>

        // 点击btn, 将input从选中变成不选中, 从不选中变成选中

        // 1. 获取元素

        var btn = document.getElementById('btn');

        var inp = document.getElementById('inp');

        // console.log(inp, btn);

        // 2. 添加事件

        btn.onclick = function(){
    
    

            // 3. 具体要做的事情

            console.log(inp.checked); // 选中为true, 不选中为false

            // true ----> false   false ---> true

            inp.checked = !inp.checked;

            

            if(inp.checked){
    
    

                inp.checked = false;

            } else {
    
    

                inp.checked = true;

            }

        }

   </script>

3、switch

适用于条件结果比较明确并且单一的时候
语法:

switch(要判断的数据/ 条件){

case 结果1:
符合结果1时, 所执行的代码;
break;

case 结果2:
符合结果2时, 所执行的代码;
break;
…(可以有很多个结果)

default:

以上结果都不符合的时候, 所执行的代码;
break;
}
注意事项: break: 是防止穿透; 不加break, case匹配到一个之后, 后面的结果都不会进行匹配, 直接执行;

   /* 

    90以上: A  80以上: B  70以上: C 其他: D

   */

   var core = 78;

   // 找出如何是单一条件

   var p = parseInt(core / 10);

   switch (p) {
    
    

            case 10:

                console.log('A+');

                break;

            case 9:

                console.log('A');

                break;

            case 8:

                console.log('B');

                break;

            case 7:

                console.log('C');

                break;

            default:

                console.log('D');

                break;

    }

十三、获取元素的方式

Id获取	document.getElementById(‘id’)
标签名获取	document.getElementsByTagName(‘标签名’);
类名获取	document.getElementsByClassName(‘类名’);

1、标签名获取

document.getElementsByTagName(‘标签名’); 获取文档中的所有的标签
父元素.getElementsByTagName(‘标签名’); 获取对应的父元素中的标签

标签名不区分大小写

2、类名获取

document.getElementsByClassName(‘类名’); 获取文档中的所有此类名的标签
父元素.getElementsByClassName(‘类名’); 获取对应的父元素中的类名标签


   var lis = document.getElementsByTagName('li');

   console.log(lis);

   console.log(lis[0]);



   var uls = document.getElementsByTagName('ul');

   console.log(uls[1]);

   var lis2 = uls[1].getElementsByTagName('li');

   console.log(lis2);



   var boxs = document.getElementsByClassName('box');

   console.log(boxs);



   // 第一个ul中的类名为box的元素

   var box1 = uls[0].getElementsByClassName('box');

   console.log(box1);

注意：返回一个集合
集合: 类数组, 有索引有元素, 但是不能使用数组的方法
通过下标获取到对应的下标的元素

3、tagName/className与id获取元素的区别:

tagName/className获取元素	id获取元素
可以是document也可以是父元素;	id只能通过document获取
获取到的是一个集合	id直接获取到元素
需要通过下标取出元素后再操作	id可以直接操作
获取的元素具有动态性, 先获取, 后添加, 元素也可以找得到	d不可以

特殊点: className在ie8以上才支持


   var box = document.getElementById('box');

   var lis = document.getElementsByTagName('li');

   console.log(box, lis);



   var ul = document.getElementsByTagName('ul')[0];

   ul.innerHTML += '<li id="box">12345</li>';

   console.log(lis);

   console.log(box);



   var four = document.getElementsByClassName('four'); // ie8报错

   console.log(four);

十四、循环

1、for

语法：

for(表达语句一; 表达语句二; 表达语句三){

// 每次循环要执行的代码

}

for(1 初始化循环变量; 2 循环结束的条件; 4 更新循环变量){

// 3 循环体

}
执行顺序：
1. 初始化循环变量: var i = 0;
2. 循环判断: i < 5 ? 是符合条件, 执行第三步: 不符合条件, 终止循环
3. 循环体执行
4. 更新循环变量: i++;
5. 回到第二步
注意: 必须要有一个可以让循环结束的条件, 否则就会造成死循环

   for(var i = 0; i < 5; i++){
    
    

               console.log(i);

   }

2、for 变种

初始化变量: var i = 0;

for(;2.循环结束的条件;){

// 3.循环体

// 4.变量更新

}

注意: 两个分号不能省略


   var sum = 0;

   var i = 1;

   for(; i <= 100;){
    
    

            sum += i;

            i++;

   }

   console.log(sum);

JavaScript知识点-周1.md

一、javascript初识

1、 概念

2、 js引入方式

3、 调试工具

4、获取元素（id）

5、 事件三部曲

二、鼠标事件

三、变量

1、 声明

2、 变量的命名规范

3、 window.onload = function(){}

四、js操作元素内容

1、获取

2、设置

3、 innerText与innerHTML的区别

4、innerHTML与document.write的区别

五、操作表单

1、获取

2、设置

六、操作元素属性

1、获取

2、设置

七、操作img的src属性

1、获取

2、设置:

八、操作元素样式

1、获取

2、设置

九、批量样式设置: cssText

1、获取

2、设置

十、数据类型

1. 检验数据类型

2、分类

基础数据类型

number

string

boolean

null与undefined

复杂数据类型

object

array

function

3、强制转换

Number

parseInt

parseFloat

isNaN

string

Boolean

十一、运算符

1、分类

算术运算符

++与–

赋值运算符: =(赋值) += -= *= /= %=

比较运算符

逻辑运算符

三目运算符

2、隐式转换规则

十二、条件语句

1、流程控制语句分类： 控制代码的执行顺序的语句

2、条件选择结构

3、switch

十三、获取元素的方式

1、标签名获取

2、类名获取

3、tagName/className与id获取元素的区别:

十四、循环

1、for

2、for 变种

猜你喜欢

1、概念

3、调试工具

5、事件三部曲

1、声明

2、变量的命名规范

1、流程控制语句分类：控制代码的执行顺序的语句