javascript与css、html配合的高级使用

javascript与css、html配合的高级使用

网页的主体是由html构成，因此要用javascript实现与用户的交互，就要获取到目标标签

获取标签元素并操作标签元素

• 获取标签元素

  可以使用内置对象 document 上的 getElementById 方法来获取页面上设置了id属性的标签元素，获取到的是一个html对象，然后将它赋值给一个变量，比如：

  
  
  
      
      
      
      
      
  
  
      
  这是一个要被获取的标签
  
  
  

  这段代码，弹出的窗口会显示一个null，那是因为script的语句在定义这个div这个标签之前，他会先执行，所以document.getElementById("div1")会找不到这个div1的，因此会打印出null。

  • 解决方法一：将javascript的语句放在定义div标签之后，如下：

    
    
    
        
        
        
        
    
    
    
        
    这是一个要被获取的标签
        
    
    
    

    这是就会返回一个[object HTMLDivElement]的对象

  • 解决方法二：设置页面加载完成执行的函数，在执行函数里面获取标签元素。

    
    
    
        
        
        
        
        
    
    
        
        
    这是一个要被获取的标签
    
    
    

    这种方法运行的结果和是第一种方法一样，里面的注释写得很详细。

• 操作标签元素的属性

  上面我们知道了如何获取标签元素，但是我们还不知道如何获取标签的属性和操作属性，接下来就来学习如何获取和操作属性

  • 首先获取的页面标签元素，然后就可以对页面标签元素的属性进行操作，属性的操作包括:

    • 属性的读取

    • 属性的设置

      • 特别注意的是：
        1. html的属性和js里面属性大多数写法一样，但是“class” 属性写成 “className”
        2. “style” 属性里面的属性，有横杠的改成驼峰式，比如：“font-size”，改成”style.fontSize”

      
      
      
          
          
          
          
          
      
      
          
          这是一个链接
      
      
      

• 读取或设置标签包裹的内容

  innerHTML可以读取或者设置标签包裹的内容

  
  
  
      
      
      
      
      
  
  
      
  这是一个div标签
  
  
  

javascript数组循环和定时器

• 数组及操作方法

  1. 数组的介绍

     • 数组就是一组数据的集合，javascript 中，数组里面的数据可以是不同类型的数据，好比 python 里面的列表。

  2. 数组的定义

     • 实例化对象方式创建

 - 字面量方式创建（推荐使用）

   ```javascript
       
   ```

3. 多维数组(类似于python里面的列表里面嵌套列表)

4. 数组的操作

   1. 获取数组的长度

              // 获取数组的长度
              var aList1 = [1,2,3]
              alert(aList1.length)
      

 2. 根据下标取值

    ```html
            alert(aList1.length)
            // 根据下标取值
            var nNum = aList1[1]
            alert(nNum)
    ```

    

 3. 从数组最后添加和删除数据

    ```html
            // 往数组里面追加数据
            aList1.push(4)
            alert(aList1.length)
            // 从数组最后面去除一个数据，并返回（有返回值）
            aList1.pop()
            alert(aList1.length)
    ```

 4. 根据下标添加和删除元素

    数组.splice(start,num,element1,.....,elementN)

    参数解析：

    1. start：必需，开始删除的索引。

    2. num：可选，删除数组元素的个数。

    3. elementN：可选，在start索引位置要插入的新元素。

       ```html
       
       
       
           
           
           
           
           
       
       
           
       
       
       ```

• 循环：循环就是某个时间重复执行

  1. for循环语法：for(初始值；比较表达式；增量){每次满足条件要执行的代码}

  2. while 循环语法:先定义两个变量while(比较表达式){满足条件执行的代码;自增量}

     3. do while循环：do while语法：do{满足条件执行的代码;自增量}while(比较条件表达式)

        • 拓展：字符串拼接：用“+”

          如果拼接的多个不是字符串类型，会自动转换成字符串类型，然后再拼接。

• 定时器

  定时器就是在一段特定的时间后执行某段程序代码。

  • 定时器的使用
    1. setTimeout(func[, delay, param1, param2, ...]) ：以指定的时间间隔（以毫秒计）调用一次函数的定时器
    2. setInterval(func[, delay, param1, param2, ...]) ：以指定的时间间隔（以毫秒计）重复调用一个函数的定时器

  setTimeout函数的参数说明:

  • 第一个参数 func , 表示定时器要执行的函数名
  • 第二个参数 delay, 表示时间间隔，默认是0，单位是毫秒
  • 第三个参数 param1, 表示定时器执行函数的第一个参数，一次类推传入多个执行函数对应的参数。