js基础一

1.js引入方法

内部：

 <script></script>

外部:

<script src=""></script>

在哪里引入:
$\color{orange}{注意: }$ js 不管是内部还是外部都在底部引入

因为 js 是要操作 dom元素而代码的编译习惯又是从上往下编译
如果 js代码写在需要操作的dom元素上面那么在执行js代码时候 dom元素还没有在页面里面生成则 js 无法操作该元素会返回 undefined 报错信息

所以 js 通常写在页面的底部即当所有dom元素全部生成后在运行js

2.js输出方式

1.第一种
通过弹出框输出
会打断进程

 alert("这是第一种输出方式");
 alert(1+2);

2.第二种输出方式
直接渲染到 body 的最后面

document.write("6666666666");

3.第三种输出方式
控制台输出
不会打断进程
通常用来调bug

console.log(1111111111111);

在js中不管是数字还是字符串只要带了引号全部都是字符串类型
数字可以运算但是字符串只能拼接

$\color{orange}{注意: }$ 在js中不管是数字还是字符串只要带了引号全部都是字符串类型
数字可以运算但是字符串只能拼接

断点：debugger;

3.在js中声明变量

通过 var 来声明变量
$\color{orange}{注意: }$ 一般变量被声明后没有赋值的情况下没有数据类型
给它赋什么值就是什么类型
= 一个等号是赋值

  数字
  a = 1;

  字符串
  a="1";
  a='1';
  不管是单引号  还是双引号   都是字符串

  数组
  a = [];
  a = [1,2,3,4,5];

   变量之间的相互传值
    var b = 5;
    var c;
    c = b;

    b = 6;
    console.log(c,b);

4.在js中声明变量

通过 var 来声明变量

  var a;

一般变量被声明后没有赋值的情况下没有数据类型
给它赋什么值就是什么类型
$\color{orange}{注意: }$ = 一个等号是赋值

数字

 a = 1;

字符串

 a="1";
 a='1';

$\color{orange}{注意: }$ 不管是单引号还是双引号都是字符串

5.变量之间的相互传值

 var b = 5;
 var c;
 c = b;

 b = 6;
 console.log(c,b);

6.变量的加减乘除

c = b - 1;
c = b + 1;
c = b * 2;
c = b / 2;

7.元素的获取

1.通过标签来获取
由于页面内不止一个目标标签所以获取到的结果是一个数组
既然是数组可以通过中括号来选择具体的元素
如果不带中括号那么获取的就是整个数组

 var div1 = document.getElementsByTagName("div")[1];
  console.log(div1);

2.通过clss获取
获取到也是一个数组

var div2 = document.getElementsByClassName("box1");
console.log(div2);

3.通过 id 获取元素

 var div3 = document.getElementById("box");
 console.log(div3);

4.属性选择器选择
只能选择目标的第一个元素

var div4 = document.querySelector(".box1");
console.log(div4);

8.获取到元素的内容

1. innerHTML();
输出html页面里面目标盒子所包含的所有东西
如果里面包含了html代码也会将 html 代码输出

var fbox = document.getElementById("fbox");
console.log(fbox.innerHTML);

2. innerText();
输出页面内的内容
如果有子元素不会输出子元素标签但是会将子元素的内容输出

 var fbox = document.getElementById("fbox");
 console.log(fbox.innerText);

9.动态静态获取

获取到元素
动态获取
变量的值会根据元素的改变而动态改变

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

静态获取
变量的值不会根据元素的改变而改变

 var box1 = document.querySelector("#box");

10.基础事件

1.点击事件:onclick
给元素绑定事件

box.onclick = function(){
var a;
a = box.innerText;
a = parseInt(a);
box.innerText = ++a;
console.log(a,b);
}

2.onmouseover 当鼠标移入的时候触发事件

box.onmousemove = function(){
box.style.backgroundColor = "#000";
}

3.onmouseout 当鼠标移出的时候触发事件

box.onmouseout = function(){
box.style.backgroundColor = "blue";
}

11.布尔类型

boolean bool
只有两个值 true flace
$\color{orange}{注意：}$ 通常 0 -0 以及特殊值 null NAN undefined 布尔值都是 flase
其他值为 true

12.逻辑运算符

1. && 且

var x = 5;
var y = 10;
console.log(x < 5 && y == 10);  
且    运算符   两边的条件  必须都成立

2. || 或

var x = 5;
var y = 10;
console.log(x < 5  || y == 10);   
或     运算符 两边的条件  有一个生效就行

3. ! 非

var x = 5;
var y = 10;
console.log(!(x == y));   
非  取反  如果条件是 false  则 结果为 true

13. if语句

结构:
if 声明这个方法体是分支 if 语句
() 小括号内部写的是判断条件
() 大括号内部写的是当条件成立的时候执行的方法

var a = 5;
var b = 0;
if(b){
console.log(a);
}

$\color{orange}{注意：}$ 如果条件内部没有写关系运算符则直接根据变量或具体值的 bool 来做判断

14. switch语句

var n = 0;
switch(n){

n 是 自定义的变量
根据 变量的值 和 case中的条件 做关系运算;

case 0:

必须写break
break 写在 case 语句 最后面

console.log(n);
break;

case 1:
console.log(1);
break;
default:

写在 Switch 最后面
除了 上面 case 条件之外的所有情况
不用写  break

console.log(2);
}

15. 三目运算符

基于某些条件对变量进行赋值的语句

var s = 1;
var sex = (s == 1)? "男": "女";

console.log(sex);

$\color{orange}{注意：}$ () 内部是判断条件
当条件为 true 则赋值引号前面的值
当条件为 false 则赋值引号后面的值