JS基础笔记

js基础

标签（空格分隔）： js基础知识

---

基本概念

JavaScript ###原名叫 LiveScript是一种基于对象和事件驱动的客户端脚本语言，最初的设计是为了检验HTML表单输入的正确性。

基本组成

完整的JavaScript是由3部分组成的：

- ECMAScript (当前学习版本5.1) 规定了JS的基本语法
- BOM 浏览器对象模型
- DOM 文档对象模型

JS基本语法

// 注释  (单行注释)


// 多写注释
/**
 * 1 JS中严格区分大小写
 * 2 每一条语句之后都要加上一个分号;
*/

标识符

• 变量名、常量名、函数名、函数参数名、对象属性名的统称
• 标识符的命名规则：

- 由数字、字母、下划线和美元符($)组成
- 首字符不能使数字
- 不能使用JS的关键字和保留字

标识符的名字可以是任意长度

变量

• 1: 什么是变量？

  标识符的一种，是一种变化的量，它的作用就是用来储存数据的。
  

• 2: 如何声明一个变量？

 使用关键字  var/let 变量的名字;
 如果声明一个变量，没有初始化那么默认值是： undefined (未定义的意思)
 同时声明多个变量的时候可以使用 “,” 分开

    var a = 1;
    var b = 2;
    var c = 3;

    // 和下面的这一句话是一个意思。

    var a = 1, b = 2, c = 3;

获取元素对象

• 1: 通过ID获取元素

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

• 2: 通过CSS选择器获取元素

document.querySelector('css选择器')
    // var box = document.querySelector('#box');
    // var box = document.querySelector('.box

鼠标事件

• 鼠标事件
  
  • 点击事件 onclick
  • 鼠标移入事件 onmouseover
  • 鼠标移出事件 onmouseout

函数

• 什么是函数?
  
  • 可以封装任意多条语句，代表一个功能的整体
• 声明一个函数
  
  • 使用关键字 function 函数名(){ xxx…. }
• 放在函数内的代码不会主动执行
• 函数的调用
  
  • 函数名();
  • 通过事件去调用
• 匿名函数
  
  • function (){},匿名函数不能单独存在，可以通过事件去调用

元素对象的属性操作是指操作元素的行间属性

• 元素对象的属性操作主要包括2个部分：
  
  • 属性的读操作：
  • 属性的读取，读取的都是行间的样式，如果行间没有设置，那么是获取不到的。
  • 属性的写操作：
  • • 元素.属性的名字 = 新的值
  • • 元素[‘属性的名字’] = 新的值

  元素.属性的名字, 还可以使用 元素['属性的名字']，能用 "." 的地方都能用 '[]',能用 '[]'的地方不一定都能用 '.'

  // 写操作
  var text = document.querySelector('.text');

  document.onclick = function (){
      // text.value = 456;
      text['value'] = 456;
    };

获取文本框的值

<input type="text" class="text">
 <!-- 虽然没有value属性，但是默认还是有值的，这个值是一个 '' -->

 <input type="button" value="按钮" class="btn">

 /**
     * 1 让文本框自动聚焦
     * 2 点击按钮，首先获取到文本框的值
     * 3 弹出（打印）获取到的值
     * 4 清空文本框，并且让文本框重新聚焦
 **/

<script>
    var btn = document.querySelector('.btn');
    var text = document.querySelector('.text');
    // 让文本框自动聚焦
    text.focus();
      btn.onclick = function (){
      console.log(text.value);
      text.value = '';
      text.focus();

    };
    text.focus();  //  自动获取焦点

    text.onblur = function(){
        // 失去焦点执行的事件
    }
</script>

innerHTML

• innerHTML 表示元素标签内的 html 内容的
• 元素.innerHTML 获取某个元素内的html内容
• 元素.innerHTML = ‘新的内容’; 修改某个元素内的html内容
• innerHTML 获取到的内容和操作的内容都是字符串
• innerHTML 会先清空之前的内容，然后再添加新的内容

<div class="box">这是一个盒子</div>
<script>
    var box = document.querySelector('.box');
    document.onclick = function(){
        box.innerHTML = '这是设置的内容'
    }
</script>

字符串

• 字符串：由0个或者多个字符组成的字符序列，并且放在一对引号或者反引号中

 1: length 用来获取某个字符串的长度的，它只能读不能写
 字符串.length

 2: 字符串一但创建，就不能修改。

 3: 简单的字符串操作：字符串的拼接
    运算符 +

class操作

box.className = 'box1 box3';  // 添加class 类名

元素.classList 它是元素的所有的class的一个集合

• classList.add(”) 添加class类名

元素.classList.add('class的名字');  // 添加class 名字 可以多次添加;

document.getElementById("myDIV").classList.add("mystyle", "anotherClass", "thirdClass");

元素.classList.add('class的名字');  // 添加class 名字 可以多次添加

• classList.remove(”)

元素.classList.remove('class的名字');   // 移除class

document.getElementById("myDIV").classList.remove("mystyle", "anotherClass", "thirdClass");

• classList.toggle(”)

元素.classList.toggle('class的名字') // 如果没有就添加 否则就移除

• classList.contains(”) //
  查看元素是否存在某个class 类名

元素.classList.contains('class的名字')  //返回值是一个 true 跟 false

var x = document.getElementById("myDIV");

if (x.classList.contains("mystyle")) {
    x.classList.remove("anotherClass");
} else {
    alert("Could not find it.");
}

比较操作符

• == 只比较值，而不比较数据类型
• === 严格比较，不仅仅比较值，而且还比较类型

Boolean

• 布尔值，仅有两个值 true 和 false

布尔值的字面值 true 跟 false 是区分大小写的

布尔值判断：Boolean(0); // false
Boolean(1);    //true

三元操作符

 条件成立吗 ? 成立就执行这句话 : 条件不成立执行的代码; //// 如果不想做什么也要写个空字符串

自增和自减

• 自增就是某个数值+1，自减就是某个数值-1

 自增分为前自增和后自增，在单独使用的时候没有任何区别。
 只有当在运算或者在其他表达式中的时候，那么前自增是自己先加1，然后再参与运算，后自增先参与运算，自己再加1

    var num = 9;
    console.log(--num);  // 8
    console.log(num--); //8
    console.log(num); //7

“`