js知识整理(二)---JavaScript中常用对象

JavaScript中常用对象

Date类:

主要掌握:

1. 创建方法
2. 获取年月日时分秒的方法
   0-11 是月份 0 是1月 11 是 12月
3. 获取周几的方法
   0-6 是周几 0 是周日
4. 如何设置时间
5. 把时间转成本地时间

 // date 的创建  
        var  date = new Date();

        console.log(date);

        // date 中的方法  
        // 获取年份 
        var year = date.getFullYear();
        
        //获取月份  0-11 是月份  0 是一月  11 是 12月 
        var month = date.getMonth();

        // 获取日期 
        var day = date.getDate(); 

        console.log(year);
        console.log(month);
        console.log(day);

        // 获取 时分秒
        var hour = date.getHours();
        var min = date.getMinutes();
        var sec = date.getSeconds();
        console.log(hour);
        console.log(min);
        console.log(sec);
        // 周几   0-6 是周几  0 是周日  
        var weekDay = date.getDay();
        console.log(weekDay);

        // 设置时间 
        date.setMonth(7);
        console.log(date);

Math 类:

主要掌握:

1. abs() 绝对值
2. sqrt() 开方
3. pow(a,b) 幂运算(a的b次方)
4. ceil() 向上取整(不会四舍五入)
5. floort() 向下取整(不会四舍五入)
6. round() 四舍五入
7. Math.random() 随机数随机 [0,1) 之间的数据
8. 10 -20 之间的随机数

 // abs() 绝对值
        // 使用和java中的方法类似  static 方法调用  
        console.log(Math.abs(-10));

        // 开方    sqrt()

        console.log(Math.sqrt(9));


        // 幂运算  a^b pow()
        console.log(Math.pow(2,3)); 

        // 向上转  ceil()  把小数向上转出整数 
        console.log(Math.ceil(-3.3)); 
        // 向下转  floort()   不会四舍五入  
        console.log(Math.floor(3.3));


        // 四舍五入  round();

        console.log(Math.round(3.4));  // 3  
        console.log(Math.round(3.5));  // 4 四舍五入 

       // 随机数 
       // Math.random() 随机 [0,1) 之间的数据  
       // 想实现一个随机数 0-5 区间的随机数 
       // 随机数 * 数据  向下取整可以实现  Math.random() * a 
       //Math.random() * 5;  // [0,5) 向下取整 
      
      // random.nextInt(6); 
       for(var i = 0 ; i <= 10;i++){
            var num = Math.floor(Math.random() * 6);
            console.log(num);
       }
       console.log("********");
       // 10 -20 之间的随机数 
       // [0-10]的随机数据 + 10 
       for(var i = 0 ; i <= 10;i++){
            var a = Math.floor(Math.random() * 11) + 10;
            console.log(a);
       }

String类:

主要掌握:

1. charAt() 返回字符串的下标的字符
2. indexOf() 返回字符在字符串中的位置 从左往右找 如果没有找到 返回 -1
3. lastIndexOf 返回字符在字符串中的位置 从右往左找 如果没有找到 返回 -1
4. subStr(m,n) 字符串的截取 从m 开始位置下标 截取n个字符串
5. substring(m,n) 字符串的截取 m 开始位置下标 n 结束位置的下标
6. 字符串转成大写 或者小写
7. concat() 拼接 在java中 在mysql 中也有函数 js中也有

// 字符串的创建   用 单引号 或者 双引号  
        var h1 = "hello";
        var h2 = 'hello';
    
        var s = "javascript";

        // js中字符串的方法  大多数方法和java中类似  
        // charAt()   返回字符串的下标的字符
       var ch = s.charAt(0);
       console.log(ch);
       // indexOf()  返回字符在字符串中的位置 从左往右找  如果没有找到 返回 -1 
        // lastIndexOf
        var index = s.indexOf('v');
        console.log(index);

        // subStr(m,n)  字符串的截取  从m 开始位置下标   截取n个字符串 
        var s1 = s.substr(1,3);
        console.log(s1); // ava 

        // substring(m,n)  字符串的截取 m 开始位置下标  n 结束位置的下标 
        var s2 = s.substring(1,3); 
        console.log(s2); // av 


        // 字符串转成大写  小写 
       var s3= s.toLocaleUpperCase(); 
        console.log(s3);
        // s1.toLocaleLowerCase() // 小写

        // concat() 拼接  在java中 在mysql 中也有函数  js中也有  
        var s4 = s1.concat("hello");ss
        console.log(s4);

JavaScript中event事件

主要掌握:

1. 点击事件 onclick (一般用在button 上,在 btn 上面 可以提交数据)

 <button onclick="test01()"> 点我 </button>
  function test01() {

        // 函数处理 
        alert('点我干啥 ');

    }
 

3. 双击事件 ondbclick

 <button ondblclick="test02()"> 点我双击666 </button>
  function test02() {

        // 函数处理 
        alert('双击我干啥 ');

    }

5. 改变事件 onchange(一般用在 select上面,如果select 发生了改变 发送数据)

//this是当前的select 标签,value 是 select选中的 值
  <select onchange="test03(this.value)">
        <option value="武汉">武汉</option>
        <option value="北京">北京</option>
        <option value="广州">广州</option>
        <option value="拉萨">拉萨</option>
    </select>
     function test03(city){
       alert('你选择了:' + city);
    }

7. 键盘按下事件 onkeyDown (用得少)

用户名:<input type="text" onkeydown="test01(this.value)"><br>
 function test01(val){

      console.log('按下了键盘')
      
      //this.value  this是当前点击的触发事件的标签input  
                    value 是获取input输入的值  
      console.log(val);
    }

9. 失去焦点事件 onblur() (用得多, 一般用在 input上面,可以在form中 进行 数据校验)

 用户名:<input type="text" onblur="test02(this.value)"><br>
  function test02(val){
       console.log("失去了焦点..."+ val)
    }

失去焦点指的是:鼠标光标离开了 input输入框

11. onload 页面或者图片加载 会执行的方法 onload(一般用在 body上面,可以在页面 加载 初始化数据)

<body onload="test03()">

    用户名:<input type="text" onkeydown="test01(this.value)"><br>  
    用户名:<input type="text" onblur="test02(this.value)"><br>
     
</body>
  function test03(){
        alert('初始化页面的数据...');
    }

13. 鼠标覆盖事件 onmouseover (一般用在块标签中)
14. 鼠标离开 onmouseout (一般用在块标签中)

<div id="box1" onmouseover="test01()" onmouseout="test02()">
      hello div

    </div>
      function test01(){
         console.log('鼠标over了');
         // 拿到  div标签  
         var divNode = document.getElementById("box1");
         // 通过js操作样式 
         divNode.style.backgroundColor = "skyblue";
         divNode.style.color = "green";
         divNode.style.fontSize = "20px";
     }

     function test02(){
         console.log('鼠标out..');
         var divNode = document.getElementById("box1");
         // 通过js操作样式 
         divNode.style.backgroundColor = "red";
         divNode.style.color = "black";
         divNode.style.fontSize = "14px";
     }