JavaScript基础-3

补充

入口函数【掌握】

js引入页面样式【了解】

入口函数【掌握】

• 
  JavaScript书写位置的区别
  
  
  
  • window.onload（当整个文档加在完以后调用）
  
  
  
  

js引入页面样式【了解】

• 我是按钮
  


• 点击按钮同样可以执行【弹出警示框】

一：数组

• 
  1.什么是数组？
  
  
  
  • 
    作用：
    
    
    
    • 数组【对象】就是专门用来【存储】“一系列”的值。
    
    
    
    
  
  
  
  


• 
  2.如何定义一个数组
  
  
  
  • 方式一【几乎没人用】：使用关键词 new 创建数组对象 var myArray=new Array()
  
  
  • 方式二【开发中常用】：var myArray = [];
  
  
  
  


• 
  3.数组的lengh属性；
  
  
  
  • arr.length:返回该数组对象的长度
  
  
  
  


• 
  3.数组的遍历
  
  
  
  • 什么是遍历？
  
  
  • 
    var arr = [1,“zhangsan”,"lis",3,"88"];
    
    
    
    • 就是取出数组中每一个元素。
    
    
    • 因为数组是【有序的】、【一系列数据的集合】，所以可以根据【下标或者索引】来获取数组中的每一元素
    
    
    • var[0]
    
    
    • var[1]
    
    
    • var[2]
    
    
    • var[...]
    
    
    
    
  
  
  • 
    //遍历数组的元素、
    
    
    
    • for(var i = 0;i{
      console.log(arr[i]);
      }
    
    
    
    
  
  
  
  


• 
  4.数组的常用方法
  
  
  
  • 增【push()】
  
  
  • 删【pop()】
  
  
  • 改【拿到对应的角标直接改】
  
  
  • 查【拿到对应的角标直接查看（或者遍历）】
  
  
  • 连接数组【join()】
  
  
  • 数组的更多其他方法链接
  
  
  
  

二：通过标签名称获取标签

• 案例：


• 1.数组遍历的应用：【隔行变色】


• 
  

  2.反选和全选

  
  
  
  
  • 全选：利用循环给每个标签的checked属性设置为 true
  
  
  • 全不选：利用循环给每个标签的checked属性设置为 false
  
  
  • 取反：获取当前标签的状态，然后取反
  
  
  
  


• 
  

  3.九宫格的布局

  
  
  
  
  • 2.1.定义总共的列数
  
  
  • 2.2定义当前行（i / 总列数）和当前列（i % 总列数）
  
  
  • 2.3定位left和top
  
  
  
  


• 
  

  4.排他思想

  
  
  
  
  • 3.1先让所有的标签的className为空“”
  
  
  • 3.2点击谁，谁的类名为“current"(this.className)
  
  
  • 3.3总结干掉所有人（包括自己），自己然后自己(this)在重生
  
  
  
  


• 
  

  5.通过类名获取标签

  
  
  
  
  • 1.getElementsByClassName（但是ie6、7、8不认识）
  
  
  • 
    2.封装自己的工具类
    
    
    
    • 2.1:如果浏览器支持：直接返回document.getElementsByClassName(className)
    
    
    • 2.2:如果浏览器不支持： 原理：遍历所有的的标签，获取标签的类名，如果等于指定的类名，那么获取出来添加到数组中
    
    
    
    
  
  
  
  


• 
  6.通过类名获取标签完整版（判断多个类名）
  
  
  
  • 1.如果浏览器支持：直接返回 document.getElementsByClassName(className)
  
  
  • 
    2.不支持
    
    
    
    • 2.1获取所有的标签
    
    
    • 2.2.遍历所有的标签，获取标签的类名，并且以“空格”分割成数组。
    
    
    • 2.3.遍历数组，判断数组中的每一个元素是否等于指定的类名，如果等于保存起来。
    
    
    
    
  
  
  
  


• 
  7.对象、方法、变量和属性
  
  
  
  • 变量：
  
  
  • 
    特点：
    
    
    
    • 1.用var 来声明
    
    
    • 2.谁都可以使用
    
    
    
    
  
  
  • 
    对象
    
    
    
    • 具有特定功能的功能组
    
    
    • 方法
    
    
    • 方法是能够在对象上执行的动作。(就是通过对象来调用的函数)
    
    
    • 属性
    
    
    • 属性是与对象相关的值。
    
    
    • 
      变量和属性的区别
      
      
      
      • 1.变量谁都可以使用
      
      
      • 2.属性不能直接使用，只有对象可以使用（归属于哪个对象，哪个对象才可以使用）
      
      
      • 3.属性也是变量，只不过使用的权限不一样，仅此而已
      
      
      
      
    
    
    
    
  
  
  
  


• 
  8.自定义属性
  
  
  
  • 举例：var arr = [1,2,4,55,89];
  
  
  • arr.suibianxie = 100;
  
  
  • suibianxie就是自定义的属性
  
  
  • 
    自定义属性如何来使用：
    - 通过该对象.的方式
    
  
  
  
  


• 
  9.tab切换【自定义属性的练习】
  
  
  
  • 1.利用排他思想实现上面切换
  
  
  • 2.实现下边的div显示或者隐藏
  
  
  • 3.下边的隐藏的盒子的索引和上边点击盒子的索引对应即可
  
  
  • 4.利用自定义对象，在遍历所有的li的时候给每个li绑定一个index属性
  
  
  
  

字符串

• 
  10.其他类型转换为字符串类型
  
  
  
  • Boolean 类型的 toString() 方法只是输出 "true" 或 "false"
  
  
  • 
    Number 类型的 toString() 方法比较特殊，它有两种模式，即默认模式和基模式。
    
    
    
    • 1.采用默认模式，toString() 方法只是用相应的字符串输出数字值（无论是整数、浮点数）
    
    
    • 2.采用 Number 类型的 toString() 方法的基模式，可以用不同的基输出数字，例如二进制的基是 2，八进制的基是 8，十六进制的基是 16。 基只是要转换成的基数的另一种加法而已，它是 toString() 方法的参数：
    
    
    • 3.number、布尔+字符串类型：结果都会变为字符串类型
    
    
    
    
  
  
  
  


• 
  11.字符串对象的常用方法
  
  
  
  • 连接字符串【concat()】
  
  
  • 
    检索字符串【indexOf(a,b)】
    
    
    
    • a为必须参数，规定需检索的字符串值。
    
    
    • b为可选的整数参数。规定在字符串中开始检索的位置。它的合法取值是 0 到 stringObject.length - 1。如省略该参数，则将从字符串的首字符开始检索。
    
    
    
    
  
  
  • 从后向前搜索字符串【lastIndexOf()】
  
  
  • 把字符串分割为字符串数组【split()】
  
  
  • 从起始索引号提取字符串中指定数目的字符【substring()】
  
  
  • 把字符串转换为小写【toLowerCase()】
  
  
  • 把字符串转换为大写【toUpperCase()】
  
  
  
  


• 
  

  注意点：字符串是 JavaScript 的一种基本的数据类型。 String 类定义了大量操作字符串的方法，例如从字符串中提取字符或子串，或者检索字符或子串。 需要注意的是，JavaScript 的字符串是不可变的（immutable），String 类定义的方法都不能改变字符串的内容。像 String.toUpperCase() 这样的方法，返回的是全新的字符串，而不是修改原始字符串。 在较早的 Netscape 代码基的 JavaScript 实现中（例如 Firefox 实现中），字符串的行为就像只读的字符数组。例如，从字符串 s 中提取第三个字符，可以用 s[2] 代替更加标准的 s.charAt(2)。此外，对字符串应用 for/in 循环时，它将枚举字符串中每个字符的数组下标（但要注意，ECMAScript 标准规定，不能枚举 length 属性）。因为字符串的数组行为不标准，所以应该避免使用它。

  
  


• 
  

  12.判断文件名称【字符串转换为大写的应用】