javascript基础

获取元素

document.get Element By Id()

文档 获取 元素 通过

document.getElementById("box").style.background = "blue";
//就通过获取文档中的ID，来改变背景颜色

cssText

• cssText 获取style中所有内容

  • 直接修改cssText会覆盖，style中的所有内容，如果不想覆盖之前的所有内容，可以直接写 style，或者用 +=

    box.style.cssText += "width: 400px"; //修改其中的一个样式
    box.style.cssText = ""; //清空所有行间样式
    

    ​

• cssText = "" 可以直接清空所有的行间样式

元素改变的是行间的样式

innerHTML

• innerHTML 元素的内容
• 从元素的开标签到闭合标签之间的所有内容,包括元素中包含的子元素
• 直接设置元素的innerHTML，或替换掉之前的所有内容,如果不想替换只是添加内容用 +=

+号运算符

• 加法运算

• 链接两个字符串（包在引号中的一串字符，叫做字符串）

• += (a += b --- a = a + b)

  cosole.log(1 + 1); //2个数字相加，结果是2；
  cosole.log("1" + "1"); //2个字符串链接，结果是11；
  

  加号有两个作用，一个是加法运算，一个是字符串连接,只有加号左右两侧是数字的情况才会执行加法运算,如果有一次是字符串就会执行字符串连接，连接的结果也是字符串

  字符串写法
  var deg = 0;
  var tX = 0;
  //transform: rotate(0deg) translateX(0px);
  transform = "rotate(" + deg + "deg) translateX(" + tX + "px)";
  
  

  ​

---

函数

• 函数声明

function name(){

​ 要执行的内容；

}

name();

• 有名字的函数

var left = 0;
var t = 100;
function running(){
    left += 100;
    t += 100;
    box.style.left = left + "px";
    box.style.top = t + "px";
}
running();
//在写left，width等样式时，一定注意加单位

• 匿名函数

function(){
    left += 100;
    top += 100;
    box.style.left = left + "px";
    box.style.top = top + "px";
}
//暂时匿名函数不能直接使用，只能使用在事件中

• 函数调用

  事件调用：不加括号

  非事件调用：添加括号

  什么时候加括号，什么时候不加括号:

  1. 当浏览器读到这行代码的时候，就执行需要给函数调用加();
  2. 当某种特定的条件下才执行，不需要加();

  window.onload

  window.onload 整个页面加载完整

  onload事件 加载完整

  用来当页面加载完成后，运行js。

  window.onload = function(){
    //要运行的js代码
  }
  

  ---

  document.querySelector('Css Selector');

  接收一个css选择器(通配，群组，包含，id，类……等等)

  如果这个选择器对应的是一组元素，就只找第0个

  var box = document.querySelector('.box');
  //如果下面有很多个.box的class，那就只对应第0个
  

  js下是从0 开始计算

使用class来改变样式

先给一个class设置好需要改变的样式

.hover {
  display: block;
}

再通过给需要改变的元素添加class来改变样式

---

if判断

• 逻辑运算符

  == 相等；！=不等；>= 大于等于 ；<=小于等于；>大于；<小于；

• if(判断条件)｛

  ​ 条件成立要执行的内容

  ｝ else {

  ​ 条件不成立要执行的内容

  }

• 布尔值 （true/false）

  var a = 10;
    var b = 10;
    if(a != b){
        alert("正确");
    } else {
        alert("不正确");
    }    
    /*
        if(布尔值true或false){
            为true时要执行的语句
        } else {
            为false时要执行的语句
        }
    */
  
  

  一种操作下，会有两种或以上的执行结果，记得用判断

  开关

  取反

  布尔值的前缀一般为is

  ​

if的四种写法

• 第一种

• 第二种

• 第三种

• 第四种

  ---

  可以获取到一组元素的几种选择方式

  1.一组元素不能在js直接操作

  2.一组元素哪怕只有1个，他也是一组元素

  3.一组元素在操作的时候，可以使用下标

  4.如果需要知道这组元素有几个，可以使用 length属性

  window.onload = function(){
  var list = document.querySelector('.list');
  var li = list.getElementsByTagName("li");
  //console.log(li);
  li[0].style.background = "red";
  alert(li.length);
  };
  
  
  

  ---

  循环

  循环的样式

  循环执行过程

  var i = 0;是初始值 （1） i < 5;是判断条件（2） i++ ；自增（3） alert(i);执行语句（4）

  初始值往下走；

  判断条件是否成立；

  成立后执行语句；

  返回来自增；

  再进行判断条件是否成立；

  一直进行到判断条件不成立；

  ​

  this

  在事件函数中，this代表触发当前事件的元素

  例如

//console.log中的this 显示当前li的所有元素

innerHTML