我在黑马程序员培训的第十七天

javaScript

  1. 简介:行为标准,网页和用户的交互,表单验证

  2. 三种使用方式:js的解释器内置在游览器中

    • 行内式: 一般用于标签的事件处理

      ​ EG:

      <button onclick='alert("大哥点我干哈");'> 点我啊button>
      
    • 内嵌式:新建一对 script 标签 在其中写上js代码

      	EG:
      
      
    • 外链式:script 的 src属性 引入 js 文件

      <script type="text/javascript" src="js/index.js">script>
      
  3. 定义变量:

    JavaScript的变量类型由它的值来决定, 定义变量需要用关键字 ‘var’, 一条JavaScript语句应该以“;”结尾

    JavaScript注释:JavaScript的注释分为单行注释(//注释内容)和多行注释(/多行注释/)

    打印数据的类型到控制台:console.log(typeof(a))

   EG:
   var i = 123;
   
   // 单行注释
   
   /*
   多行注释
   */
   
  1. 数据类型:js中有六种数据类型,包括五种基本数据类型和一种复杂数据类型(object)。

    5种基本数据类型:
    1、number 数字类型
    2、string 字符串类型
    3、boolean 布尔类型 true 或 false
    4、undefined undefined类型,变量声明未初始化,它的值就是undefined
    5、null null类型,表示空对象,如果定义的变量将来准备保存对象,可以将变量初始化为null,在页面上获取不到对象,返回的值就是null

    1种复合类型:
    1、object 后面学习的JavaScript对象属于复合类型

5.函数的定义与调用

  1. function 函数名(形参,)

    {函数体}

    EG:
    # 定义函数
    function fnAdd(){
           
        alert("add 运行了")
    }
    # 调用函数
    fnAdd();
    
    
    # 定义函数 用大括号限制作用域
    function fnAdd(num1,num2){
           
        var ret = num1 + num2;
        return ret;
    }
    #调用函数  返回值 = 函数名(实参,,,)
    var i = fnAdd(100,200);
    alert(i);
    

6.全局变量和局部变量:

  • **全局变量:**定义在函数之外的变量和整个网页的生命周期相同

  • **局部变量:**定义在函数体内的变量

    • 在局部作用域中可以访问和修改全局变量
    • 在全局作用域中不可以访问和修改局部变量
  • <script>
       var gNum = 100;
     function fnTest(){
           
         alert(gNum);
         gNum ++;
         alert(gNum);
         var age = 100;
         alert("age="+age);
     }
     fnTest();
     alert(gNum);
     alert("age="+age);
     </script>
    




7.**分支语句**:if(条件){
     }

	**关系运算符:&&||! 优先级非常高 需要使用括号 ()保证优先级** 

	**js中 == 值判断字面值,不判断类型**

	**js中 === 即判断类型也判断值**

  var age = 17;
  if(age>=18 ){
     
      alert("成年了");
  }else if(a>=80 && age <80){
     
      alert("高寿");
  }else if(age >150 || age < 0)
  else{
     
      alert("只是个孩子");
  }

8.操作标签元素:

  • 默认 script 标签中 js 代码会在所有标签加载前执行 导致获取不到标签对象而出错

  • 解决方法:等待 HTML 所有标签记载完成 才去运行 JS 代码

  • 对象.事件 = function(){} 对象发生时 就会自动执行右面的代码

  • <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta http-equiv="X-UA-Compatible" content="ie=edge">
        <title>Document</title>
        <script>
            window.onload = function(){
           
                var oP = document.getElementById('p1');
                alert("获取到标签原有内容"+oP.innerHTML)
                oP.innerHTML += "Js的新内容"
            }
    
            function Test(){
           
                var oP = document.getElementById('p1');
                alert('获取到标签原有内容'+oP.innerHTML)
                oP.innerHTML += "JS新内容"
            }
        </script>
    </head>
    <body>
        <p id='p1'>这是一个不平凡的段落</p>
        <button onclick='Test()'>点我有病</button>
    </body>
    </html>
    

9.操作标签的属性

属性名在js中的写法

  1. html的属性和js里面属性大多数写法一样,但是“class” 属性写成 “className”
  2. “style” 属性里面的属性,有横杠的改成驼峰式,比如:“font-size”,改成”style.fontSize”
   <!DOCTYPE html>
   <html lang="en">
   <head>
       <meta charset="UTF-8">
       <meta name="viewport" content="width=device-width, initial-scale=1.0">
       <meta http-equiv="X-UA-Compatible" content="ie=edge">
       <title>Document</title>
   
       <script>
   
           window.onload = function(){
     
               var oA = document.getElementById('link01');
               alert(oA.href);                   //获取标签属性
               oA.href = "http://www.baidu.com"; // 修改标签的属性 
   
               alert(oA.className);
               alert(oA.style.background);        // 获取样式
               oA.style.background = "red"       //  修改样式
   
               // 获取 input 标签的 name 属性
               var oInput = document.getElementById('input1');
               alert(oInput.name);
           }
       </script>
   </head>
   <body>
       <input type="text" name="setsize" id="input1" value="20px">
       <a href="http://www.jd.com" id="link01" class="sty01" style="background: green;">这是一个链接</a>
   </body>
   </html>

小总结

  • 获取标签元素:

    var 标签对象 = document.getElementById(‘标签id属性值’)

  • 操作标签属性:

    标签对象.属性名 class属性需要写成—className

  • 操作标签样式:

    标签对象.style.样式属性名 text-indent ----- textIndent

  • 操作标签内容:

    标签对象.innerHTML

10.数组的操作

  • 数组的定义

    • var aData1 = [1,2,3,4,5]

      alert(aData1);

    • aData2 = new Array(1,0,0,8,6,‘haha’)

  • 按照下标获取标签元素

    • alert(aData2[3]);
  • 获取数组长度:

    • alert(aData2.length);
  • 从末尾追加元素,从末尾删除元素

    • aData2.pop();

      alert(aData2);

    • aData2.push(100); //栈

      alert(aData2);

  • **添加元素:**aplice 关键字(起始下标,删除元素的个数,需要添加的元素…)

    • aData2.splice(0,0,1,2,3);

      alert(aData2);

    • aData2.splice(3,3);

      alert(aData2);

    • aData2.splice(2,1,1,2,1)

      alert(aData2);

  • 循环语句:

            var aData1 = [1,2,3,4,5]
    
             var iCount =0;
             while(iCount < aData1.length){
           
                 console.log(aData1[iCount]);
                 iCount ++;
             }
    
    
    
             for(var iCount=0;iCount<aData1.length;iCount++){
           
                 console.log(aData1[iCount]);
             }
    
    
    
             var iCount = 0;
             do{
           
                 console.log(aData1[iCount]);
                 iCount ++;
             }while(iCount<aData1.length)
    
  • 加号的意义:

    • 数学运算
    • 字符串拼接
    • JS中+左右类型可以不一样
  • 定时器

    • **创建单词定时器:**参数1 是定时器要执行的函数名(匿名函数)

      参数2 是延时时间

      
          var oTimer1 = setTimeout(function(){
               alert("单词定时器启动了");},3000);
      	
      	关闭:clearTimeout(oTimer1);
      	
      	<button onclick="clearTimeout(oTimer1);">关闭单次定时器</button>
      
      
      
      	var oTimer2 = setInterval(function(){
               alert("多次定时器执行了")},3000);
      
      	关闭多次定时器:clearInterval(oTimer2);
      	
      	<button onclick="clearInterval(oTimer2);">关闭多次定时器</button>
      
  • 创建多次定时器:参数1 是定时器要执行的函数名(匿名函数) 参数2 执行间隔

Document

​ var oTimer2 = setInterval(function(){
​ alert(“多次启动啦啦啦啊”)
​ },3000)

​ 关闭单次定时器 ​ 关闭多次定时器

jQuery的使用

  1. 引入jq的js文件:

    <script src="./js/jquery-1.12.4.min.js"></script>
    
  2. 操作标签:

    • 获取标签对象:var jq 对象 = $(’#id’)

      # jq 对象=$(js 对象)  等待窗口加载就绪 执行参数对应的代码
      $(documnet).ready(function(){
               
          var $p = $('#p1111')
          alert($p.html())
      });
                        
                        
              简化版本
       $(function(){
               
          var $p = $('#p1111')
          alert($p.html())
          $p.html('这是使用jq修改的内容')
          
      });
      
      
      
  3. jQuery选择器的种类

    • 标签选择器

      var $p3 = $('p');//查找所有标签名为 p 的所有标签
      
      $p3.css({
               "background":"pink"})
      
    • 类选择器

      var $p2 = $('.pp1');//查找 class 属性为 pp1 的标签
      $p2.css({
               "background":"green"})
      
    • id选择器

      var $p = $('#p2');//查找标签 id 为 p2 的标签
      
      $p.css({
               "background":"red"})
      
    • 层级/后代选择器

      var $p4=$('div p');//根据标签的嵌套结构查找所有标签
      $p4.css({
               "background":"black"})
      
    • 属性选择器

    var $ret = $('input[type=submit]')//根据标签属性值查找标签
    #input标签可以省略,查找name=submit 任意标签
    $ret.css({
           "background":"#000000"})
    
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="e:/wangye/js/jquery-1.12.4.min.js"></script>
    <script>
        
        $(function(){
     
            var $p = $('div p')
            alert($p.html());
            $p.html('HELLO');
            $p.append('WORLD');
            alert($p.prop('id'));
            $p.prop({
     "id":"pp2"})
        });

    </script>
</head>

<body>
    <div id = "div1">
        <p id="pp1" style="background:red;">hello</p>
        
    </div>
</body>
</html>

你可能感兴趣的:(黑马培训的日子,我在黑马程序员的日子)