看什么看，没见过帅哥！

一、js引入方式:

    <script type=“text/javascript”>
alert(“javascript”);弹出一个信息窗口，它是一个函数
</script>

<script type=“text/javascript” src=“js/
index.js”></script>正确外部引入方式

<script type=“text/javascript” defer=“defer” 
src=“js/index.js”></script>

<!—defer属性 只对外部js引用有效果 立即下载js，但是文档加
载完成之前不执行—>
<defer=“defer”>不建议使用

<script type=“text/javascript” async src=“js/
index.js”></script>

<!—async属性 只对外部js引用有效 异步的加载js文件。没有顺
序可言—>
<async>不建议使用


    script外部引入<最常用>；
    script内部引入<不建议常用>；
    script行间样式。

• 输出方式：

  document.write();//往html里输出；<不常用,会覆盖HTML>

  当页面加载完成后，使用document.write 会覆盖HTML的内容。

  alert();//在浏览器窗口弹出，缺点效果明显，不易调试。<不常
  用,太流氓>
  案例：alert(“123456”)会在页面弹出

  console.log();//往控制台里输出，需要调出控制台，方便调
  试。可以多个同时输出。<最常用>
  案例：console.log(“211433”,”123244”)在调试台弹出

• 语法:

  对大小写敏感，要区分大小写

  命名第一个字必须为字母、下划线、或美元符号。推荐驼峰式命名

  单行注释：//
  双行注释：/**/

• 关键字:
  有特定作用的关键字，不能用作标识符

  ECMAScript全部关键字
  break ,else, new, var,
  case, finally, return, void
  catch, for ,switch, while,
  continue, function ,this ,with,
  default, if ,throw,
  delete, in, try, debugger是es6新增关键字
  do ,instanceof ,typeof,

• 保留字：
  目前没有特定作用，以后会成为关键词。不能用作标识符

  abstract, double, goto, native, static,
  boolean, enum, implements, package, super.

二、var关键字

• 作用声明变量用的

什么是变量？

保存信息或数据用的。

变量有作用域的。var声明的变量，叫局部变量；没用var声明的变
量，叫全局变量。

全局变量 = 可以在任意位置调用

局部变量 = 只有在当前环境和相对内部环境调用

声明变量，没有初始化它的值，那么该变量的默认值是undefined;

变量的简写方式；
var changhao=“girl”,baixue=“boy”,zhouye=“xintongxue”;

var变量名 = 你要保存的数据

var girls = “小妹，大妹，多美“；

console.log(girls);//调用变量，不能用引号！！！

总结：1.所有的变量最好都用var声明
2.变量名采用驼峰样式
3.var声明的变量，没有值的情况下，默认值是undefined
4.全局变量不推荐使用

三、javascript的数据类型：

为了方便我们知道 我们保存的是什么东西！

五种基础数据类型：

1. String 字符串类型 如果这个值是字符串

   案例var str =‘aslkdalskjd’; y = ‘2’字符串
   

2. Boolean 布尔类型

   如果这个值是布尔值< r = true ；布尔值只有两种情况，真true 假false>

   案例var kaiguan = true;非空字符串转化为布尔值为
   true，空字符串转化为布尔值为false。
   

   经常用作开关

   或if(4>3){
           }else{
           }        else可运行
   
   if(4<3){
           }else{
           }        else不可运行
   

3. Number 数字类型 如果这个值是数值

   1、有整数、浮点数
   2、有最大值和最小值，超出范围显示正负无穷
   3、不要用浮点数做对比
   4、NaN（非数）表示一个特殊的数值，不和任何数值对等，包
   括自己。
   案例var num = 123;  i = 2，数字
   

4. Null 空类型

   只有一个值null

   用来保存数据类型为空；用来清空对象
   案例var obj = null;空对象
   

5. Undefined 空类型

   只有一个值undefined 如果这个值未定义

   案例var str2;
   

• 1种复杂的数据类型：

  Object 对象类型 如果这个值是对象或null

  案例var obj = { }

• Array 数组

  案例var arr = [ ]; arr = [1,2，3]数组,下面对应的都有数
  字，从0开始; u = arr[1]
  有长度属性还有push（有序的插入）方法

• Function 函数

  如果这个值是函数
  案例var fu = function(){
  }

• = 赋值

• == 比较 是否相等

四、

1. Number提取数值的方法<不推荐使用>

   var num1 = “123aaa”;一旦有字符转换为NaN
   var num2 =“123”;纯数字串可以转换成数字
   var num3 = “3.1415926”;

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

1. parseInt提取数值的方法：

可以将字符串转换成整数

var num1 = “123aaa”; //只认识这一种，取数值200
var num1 = “aaa123”; //不识别
var num1 = “200aaa123”; //只取值200
var num3 = “3.1415926”;

console.log (parseInt(num1，10)); // 后面的10表示十进制
console.log (parseInt(num1)); //后面没有进制

console.log (isNaN(num1)); //isNaN判断是否为数值，是不是”非数“，是的话输出true,不是输出false

• string:”或者”

  string（）可以用于任何类型，转换成字符串类型
  用于，数值、布尔、对象、字符串操作：
  toString();null和undefined

五、运算符

一元运算符：
++递增  
——递减

i++（i+1)
自身递增
i——(i-1)
自身递减

++num?前置递增 用前置是立即生效
num++?后置递增 用后置下一个环节生效


——num?前置递增 用前置是立即生效
num——?后置递增 用后置下一个环节生效

例如：var num1 = 20;
var num2 = 10;
var num3 = –num1+num2;//立即执行为19+10
var num4 = num1;//立即执行为19

console.log(num3,num4);//数值为（29，19）

var num1 = 20;
var num2 = 10;
var num3 = num1– +num2;//立即执行为20+10
var num4 = num1;//立即执行为19

console.log(num3,num4);//数值为（30，19）

加、减、乘、除 模（取余数）

+  —        *     /     %

加法：两个数值相加 就是相加之后的值
和字符串相加 还是字符串

减法：减法会把字符串转换成相应的数值，然后相减

乘法：乘法会把字符串转换成相应的数值，然后相乘

除法：除法会把字符串转换成相应的数值，然后相除

模：两数相除之后余数是什么数值就是什么数值，如果能整除数值为0；

模如何实现修改颜色：
var lists = document.querySelectorAll("ol li");
for(var i = 0; i < lists.length; i++){
lists[i].index = i;
if(i%3 == 0 ){ //比较i/3是否等于0，                               
        lists[lists[i].index].style.backgroundColor 
        =‘orange’;//如果等于执行orange

}else if(i%3 == 1){   //否则
lists[lists[i].index].style.backgroundColor = 
‘yellow'; //比较i/3是否等于1,等于了执行yellow
}else{   //否则
    lists[lists[i].index].style.backgroundColor = 
    ‘red’;//执行red
}
}

• 获取id节点：

   document.getElementById(“id名”);
   document.getElementsByClassName(“id名”);
  document.getElementsByTagName(“id名”);
  

  document.querySelector(“id名”);//获取一个标签元素
  document.querySelectorAll(“id名”);//获取一组标签元素
  obj.style.cssName = value;

1. js文件位置引用

2. querySelector(“body div”);选择一个元素 所有div中第一个div

3. querySelectorAll(“ ”);选中一组

4. var box = document.querySelector(“#xxx”);

六、点击事件：onclick

• 鼠标移入 onmouseover

  移出 onmouseout 
  

• id起名要加“# ”

1. 事件的基础写法

   box.onclick = function(){
   alert(“dhhfhjdfk”);
   }

   box.onmoseout = function(){
   alert(“dhhfhjdfk”);
   }

2. innerHTML

   var text = document.querySelector(“.text”);
   var btn = document.querySelector(“.btn”);
   btn.onclick = function(){
   div.innerHTML = “kkkk”; div标签赋予新的内容；
   }

字符串

不用+链接的是字符串
用+链接的是变量
属性一定要用引号引起来

字符串的拼接规则，外面双引号，里面的话就用单引号；外面是单引号，里面就用双引号。

七、for循环

• var i = 0 变量归零
  for(var i = 0 ; i < btns.length ; i++){
  console.log(i)
  }

  for(var i = 0;i<btns.length;i++){
  btns[i].index = i;
  // index是用来表示li是第几个
  // 在方法外面i的值是0、1、2、3、4、5，存放于btns[i]数组中
  // console.log(btns[i].index);
  btns[i].onmouseover = function(){

  // 在方法中i等于length
  // console.log(i);
  
  // 第一种方法使按钮只有一个变色
  // for(var j = 0;j<btns.length;j++){
  //     btns[j].style.backgroundColor = "gray";
  // }
  // this.style.backgroundColor = "green";
  
  // 第二种方法使按钮只有一个变色
  for(var j = 0;j<btns.length;j++){
      btns[j].className = "";
  }
  if(this.className == “"){       如果它没有名字，
      this.className = “sp";         那么它就叫sp,
  }else{                             否则
      this.className = “";            它就没名字  
  }
  pic.style.marginLeft = "-" + 800*this.index + "px";
  

  }
  }

用for循环做大小对比

• 最大对比：

  var arr=[-1,3,2,4,6,1,8];//从0开始对应共7个数
  var num=0;
  for(var i = 0;i<arr.length;i++){

  if(arr[i]>num){           //开始对比-1小于0所以不显示，3大于1所以显示，2不大于2所以不显示
      num=arr[i]；
  }
  

  }

• 最小对比：

  var min=arr[-1];//从arr里面选出任意一个数值，最好是第一个
  for(var i=0;i<arr.length;i++){

  if(arr[i]<min){
      min=arr[i]；
  }
  

  }

八、逻辑与或非：

（1） 逻辑非：！

逻辑非操作符由一个符号（！）表示，可以应用于任何值，不论类
型，该操作符都会返回一个布尔值。

逻辑非操作符首先会将它的操作数转换成一个布尔值，然后求反。

（2）逻辑与：&&

true&&false只要有一个是false结果就是false
true&&true结果就是true

操作对象：                 结果：
对象&&布尔值           布尔值
布尔值&&对象           布尔值为true时返回对象
对象&&对象             返回第二个对象

如果有一个值是null或者NaN或者undefined,
则返回null,NaN或者undefined

第一个操作值是true的话，会对第二个操作数求值。
第二个操作值是false的话，返回值肯定不会是true了。
第一个操作值是false的话，肯定会返回false，第二个就不理会
了。

（3）逻辑或：||

逻辑或操作符由两个竖线（||）表示，有两个操作数，可以应用于任何值，不论类型，该操作符都会返回一个布尔值。

操作对象：                       结果：
true || true                    true
true || false                     true
false|| true                     true
false|| false                     false

如果第一个操作数是对象，则返回该对象

如果第一个操作数为false，则返回第二个操作数

如果两个操作数都是对象，则返回以第一个

如果两个数都是null，返回null

如果两个数都是NaN,返回NaN

如果两个数都是undefined，返回undefined

如果一个操作值为true的话，第二个就不会求值了

如果第一个操作值为false的话，才会对第二个操作数求值

如果两个值是对象的话，则返回第一个对象

第一个操作值是空字符串和数值0的话，注意数据类型转换。

关系运算符：
< 小于
> 大于
<=小于等于
>=大于等于
用于两个数值比较，返回一个布尔值


相等操作符：
== 相等
！= 不相等
=== 全等
！==不全等

相等和全等使用没什么区别，相等操作会转换数据类型再比较，全等不会，全等必须要在类型相等的情况下才会比较。

• 条件操作符：

  表达式为：表达式1？表达式2：表达式3
  求解关系表达式，根据关系表达式的布尔值决定取值：关系表达
  式的
  值为true时取表达式1的值；关系表达式的值为false时取表达
  式2
  的值。
  案例：var num1 = 10;
  var num2 = 20;
  var num3 = num1>num2?num1:num2;
  alert(num3);
  

• if语句：

  if(条件语句{
      内部代码；
  }
  if( ){ }else{ }
  
  if( ){ }else if( ){ }else{ }
  

最常用最简单的语句

• do-while语句：

  var i=0;
  do{
  i+=2;
  }while(i<10);
  

先执行代码语句，再做条件判断，如果成立，继续循环，不成立的话，终止循环。

• while语句：

  var i=0;
  while(i<10){
  i+=2;
  };
  

类似于for循环语句，符合条件才会执行内部代码。前测试循环语句。

• for语句

  for(var i=0;i<xx.length;i++){ }
  

执行顺序，初始化变量，当条件成立后执行内部代码，然后执行i++，完成一遍循环。

• for无限循环：

  for(;;){ }
  

这个格式，for里面内容将无限循环下去。

1. break;打断终止循环运算

   案例：for(var i=0;i<100;i++){
       if(i==50){              //到50时，终止循环
           break;
       }
   }
   

2. continue;继续循环

   案例：for(var i=0;i<100;i++){
       if(i==50){            //跳过50继续循环
           continue;   
       }
   }
   

• 如果是套循环要终止哪一个循环，需要在循环外面给它以命名：

  例如：
  heike:
  for(var j=0;j<100;j++){
  hongke:
  for(var i=0;i<100;i++){
      if(i==50){
          break heike;
          }
      }
  }
  

• switch:开关,本身没有循环功能，用来断开

  案例：for(var i=0;i<100;i++){
      switch(i){
      case 10:
          alert(i);
          break;
      case 20:
          alert(i);
          break;
      case 50:
          alert(i);
          break;
      default:                  //不履行，缺席
          console.log(i); 查找i值
  }
  }
  

• function 函数名（非必需的参数1，参数2……）{
  内部代码
  }

  函数名（）;
  每一个函数都是相对独立的，除非函数名一样

1. arguments 是函数的属性，表示当前函数的参数,有length属性。表示参数长度

   案例：
   function doAdd(){
   if(arguments.length==1){
   return arguments[0];    //arguments[0]代表1
       }else if(arguments.length==2){
           return arguments[0]+arguments[1];
       }
   }
   doAdd(10,20);   //用函数名传参数（10，20）
   

1. return 返回值；

   案例：
   function doAdd(){
   if(arguments.length==1){
           return arguments[0];
       }else if(arguments.length==2){
           return arguments[0]+arguments[1];
       }
   }
   doAdd(10,20);
   
   function doAdd(){
       return 100;//当return生效以后，后面的语句将不再执行；
       console.log(‘1000’);
   }
   

• 用函数获取多个id参数值：

  function $(){
      return document.querySelector('#'+arguments[0]);
  }
  var box = $('box')
  

• 用函数获取多个class参数值：

  function className(){
      return document.querySelectorAll(arguments[0]+arguments[1]);
  }
  className(‘div','.test')
  

• 给每个class命名：

  function className(){
      for(var i=0;i<list.length;i++){
          list[i].className+=' '+arguments[2];
      }
      return document.querySelectorAll(arguments[0]+arguments[1]);
  }
  className('div','.test','');