Date-Math-包装类-字符串的相关方法-正则表达式-DOM-事件

最新推荐文章于 2022-10-10 17:02:58 发布

黑马程序员xlj

最新推荐文章于 2022-10-10 17:02:58 发布

阅读量170

点赞数

分类专栏： web前端开发文章标签： javascript

本文链接：https://blog.csdn.net/qq_42236548/article/details/111237694

版权

web前端开发专栏收录该内容

17 篇文章 0 订阅

订阅专栏

1、Date

/* Date对象

*–在js中使用Date对象中表示一个时间

//创建一个Date对象

// 如果直接使用构造函数创建一个Date对象，则会封装为当前代码执行的时间

var d = new Date();

// console.log(d);

//创建一个指定的时间对象

// 需要在构造函数中传递一个表示时间的字符串作为参数

// 日期的格式：月份/日/年时:分：秒

var d2 = new Date(“12/15/2020 09:05:30”);

console.log(d2);

var d3 = new Date(); //2020/12/15 09:25

* getMonth()

* d2 = new Date(“12/18/2011 11:10:30”);

* - 获取当前时间对象的月份

* - 会返回一个0-11的值

* 0 表示1月

* 1 表示2月

* 11 表示12月

var month = d3.getMonth();

console.log(month);

* getFullYear()

* - 获取当前日期对象的年份

var year = d3.getFullYear();

console.log(year);

* getDate()

* - 获取当前日期对象是几日

var date = d3.getDate();

console.log(date);

* getTime()

* - 获取当前日期对象的时间戳

* - 时间戳，指的是从格林威治标准时间的1970年1月1日，0时0分0秒

* 到当前日期所花费的毫秒数（1秒 = 1000毫秒）

* - 计算机底层在保存时间时使用都是时间戳

var time = d3.getTime();

console.log(time); //1607995478328

var time = d2.getTime();

console.log(time / 1000 / 60 / 60 / 24 / 365); //50.989165715372906

var d3 = new Date(“1/1/1970 0:0:0”);

time = d3.getTime();

console.log(time); //-28800000 北京时间与格林威治标准时间相差8个小时

//利用时间戳来测试代码的执行的性能

//获取当前的时间戳

var start = Date.now();

// for (var i = 0; i < 100; i++) {

// console.log(i);

// }

var end = Date.now();

// console.log(“执行了：”+(end - start)+“毫秒”);

       var d = new Date();
        // console.log(d);

2、Math

// Math和其他的对象不同，它不是一个构造函数

// 它属于一个工具类不用创建对象,它里面封装了数学运算相关的属性和方法

// 比如 Math.PI();

* abs()可以用来计算一个数的绝对值

//console.log(Math.abs(-1));

* Math.ceil()

* - 可以对一个数进行向上取整，小数位只有有值就自动进1

* Math.floor()

* - 可以对一个数进行向下取整，小数部分会被舍掉

* Math.round()

* - 可以对一个数进行四舍五入取整

//console.log(Math.ceil(1.1));

    //console.log(Math.floor(1.99));

    console.log(Math.round(15));

*Math.random()

--可以用来生成一个0-1之间的随机数

* --生成一个0-x之间的随机数

* Math.round(Math.random() * x)

--生成一个1-10之间的随机数

Math.round(Math.random() * 9+1)

--生成一个x-y之间的随机数

Math.round(Math.random() * (y-x)+x)

 // for (var i = 0; i < 10; i++) {
    //   console.log(Math.round(Math.random() * 10));
    // }
    for (var i = 0; i < 1000; i++) {
      console.log(Math.random());
    }

* max() 可以获取多个数中的最大值

* min() 可以获取多个数中的最小值

   var max = Math.max(10, 45, 30, 100);
    var min = Math.min(10, 45, 30, 100);
    //console.log(min);

* Math.pow(x,y)

* 返回x的y次幂

console.log(Math.pow(12,3));

* Math.sqrt()

* 用于对一个数进行开方运算

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

3、包装类

* 基本数据类型

* String Number Boolean Null Undefined

* 引用数据类型

* Object

* 在JS中为我们提供了三个包装类，通过这三个包装类可以将基本数据类型的数据转换为对象

* String()

* - 可以将基本数据类型字符串转换为String对象

* Number()

* - 可以将基本数据类型的数字转换为Number对象

* Boolean()

* - 可以将基本数据类型的布尔值转换为Boolean对象

* 但是注意：我们在实际应用中不会使用基本数据类型的对象，

* 如果使用基本数据类型的对象，在做一些比较时可能会带来一些不可预期的结果

 //创建一个Number类型的对象
    //num = 3;
    var num = new Number(3);
    var num2 = new Number(3);
    var str = new String("hello");
    var str2 = new String("hello");
    var bool = new Boolean(true);
    var bool2 = true;
    //向num中添加一个属性
   num.hello = "abcdefg";
    //console.log(str === str2);
    var b = new Boolean(false);
    /*if(b){
      alert("我运行了~~~");
    }*/

* 方法和属性之能添加给对象，不能添加给基本数据类型

* 当我们对一些基本数据类型的值去调用属性和方法时，

* 浏览器会临时使用包装类将其转换为对象，然后在调用对象的属性和方法

* 调用完以后，在将其转换为基本数据类型

   var s = 123;
    s = s.toString();
    s.hello = "你好";
   console.log(s.hello);
    //console.log(typeof s);

4、字符串的相关方法

//创建一个字符串

var str = “Hello Atguigu”;

* 在底层字符串是以字符数组的形式保存的

* [“H”,“e”,“l”]

* length属性

* - 可以用来获取字符串的长度

//console.log(str.length);

//console.log(str[5]);

* charAt()

* - 可以返回字符串中指定位置的字符

* - 根据索引获取指定的字符

str = “中Hello Atguigu”;

var result = str.charAt(7);

console.log(result);

* charCodeAt()

* - 获取指定位置字符的字符编码（Unicode编码）

result = str.charCodeAt(0);

* String.formCharCode()

* - 可以根据字符编码去获取字符

result = String.fromCharCode(0x2692);

* concat()

* - 可以用来连接两个或多个字符串

* - 作用和+一样

result = str.concat(“你好”, “再见”);

* indexof()

* - 该方法可以检索一个字符串中是否含有指定内容

* - 如果字符串中含有该内容，则会返回其第一次出现的索引

* 如果没有找到指定的内容，则返回-1

* - 可以指定一个第二个参数，指定开始查找的位置

* lastIndexOf();

* - 该方法的用法和indexOf()一样，

* 不同的是indexOf是从前往后找，

* 而lastIndexOf是从后往前找

* - 也可以指定开始查找的位置

str = “hello hatguigu”;

result = str.indexOf(“h”, 1);

result = str.lastIndexOf(“h”, 5);

* slice()

* - 可以从字符串中截取指定的内容

* - 不会影响原字符串，而是将截取到内容返回

* - 参数：

* 第一个，开始位置的索引（包括开始位置）

* 第二个，结束位置的索引（不包括结束位置）

* - 如果省略第二个参数，则会截取到后边所有的

* - 也可以传递一个负数作为参数，负数的话将会从后边计算

str = “abcdefghijk”;

result = str.slice(1, 4);

result = str.slice(1, -1);

* substring()

* - 可以用来截取一个字符串，可以slice()类似

* - 参数：

* - 第一个：开始截取位置的索引（包括开始位置）

* - 第二个：结束位置的索引（不包括结束位置）

* - 不同的是这个方法不能接受负值作为参数，

* 如果传递了一个负值，则默认使用0

* - 而且他还自动调整参数的位置，如果第二个参数小于第一个，则自动交换

result = str.substring(0, 1);

* substr()

* - 用来截取字符串

* - 参数：

* 1.截取开始位置的索引

* 2.截取的长度

str = “abcdefg”;

result = str.substr(3, 2);

* split()

* - 可以将一个字符串拆分为一个数组

* - 参数：

* -需要一个字符串作为参数，将会根据该字符串去拆分数组

str = “abcbcdefghij”;

result = str.split(“d”);

* 如果传递一个空串作为参数，则会将每个字符都拆分为数组中的一个元素

result = str.split("");

//console.log(Array.isArray(result));

//console.log(result[0]);

console.log(result);

str = “abcdefg”;

* toUpperCase()

* - 将一个字符串转换为大写并返回

result = str.toUpperCase();

str = “ABCDEFG”;

* toLowerCase()

* -将一个字符串转换为小写并返回

result = str.toLowerCase();

//console.log(result);

5、正则表达式

5.1

* 正则表达式

* - admin@atguigu.com

* - admin@.com adminatguigu.com

* - 邮件的规则：

* 1.前边可以是xxxx乱七八糟

* 2.跟着一个@

* 3.后边可以是xxxx乱七八糟

* 4…com获取其他的乱七八糟

* - 正则表达式用于定义一些字符串的规则，

* 计算机可以根据正则表达式，来检查一个字符串是否符合规则，

* 获取将字符串中符合规则的内容提取出来

//创建正则表达式的对象

* 语法：

* var 变量 = new RegExp(“正则表达式”,“匹配模式”);

* 使用typeof检查正则对象，会返回object

* var reg = new RegExp(“a”); 这个正则表达式可以来检查一个字符串中是否含有a

* 在构造函数中可以传递一个匹配模式作为第二个参数，

* 可以是

* i 忽略大小写

* g 全局匹配模式

var reg = new RegExp(“ab”, “i”);

var str = “a”;

var reg = new RegExp(“a”);

console.log(typeof reg);

*正则表达式的方法

*test()

* 使用这个方法可以用来检查一个字符串是否符合正则表达式的规则

* 如果符合则返回true 否则返回false

*严格区分大小写

var result = reg.test(str);

console.log(result);

* 使用字面量来创建正则表达式

* 语法：var 变量 = /正则表达式/匹配模式

* 使用字面量的方式创建更加简单

* 使用构造函数创建更加灵活

//var reg = new RegExp(“a”,“i”);

var reg = /a/i;

//console.log(typeof reg);

//console.log(reg.test(“abc”));

//创建一个正则表达式，检查一个字符串中是否有a或b

* 使用 | 表示或者的意思

reg = /a|b|c/;

* 创建一个正则表达式检查一个字符串中是否有字母

//reg = /a|b|c|d|e|f|g/;

* []里的内容也是或的关系

* [ab] == a|b

* [a-z] 任意小写字母

* [A-Z] 任意大写字母

* [A-z] 任意字母

* [0-9] 任意数字

reg = /[A-z]/;

//检查一个字符串中是否含有 abc 或 adc 或 aec

reg = /a[bde]c/;

* [^ ] 除了

reg = /[^ab]/;

reg = /[^0-9]/;

console.log(reg.test(“12a3456”));

5.2

* 创建一个正则表达式检查一个字符串中是否含有aaa

* 量词

* - 通过量词可以设置一个内容出现的次数

* - 量词只对它前边的一个内容起作用

* - {n} 正好出现n次

* - {m,n} 出现m-n次

* - {m,} m次以上

* - + 至少一个，相当于{1,}

* - * 0个或多个，相当于{0,}

* - ? 0个或1个，相当于{0,1}

var reg = /a{3}/;

//ababab

reg = /(ab){3}/;

reg = /b{3}/;

reg = /ab{1,3}c/;

reg = /ab{3,}c/;

reg = /ab+c/;

reg = /ab*c/;

reg = /ab?c/;

//console.log(reg.test(“abbc”));

* 检查一个字符串中是否以a开头

* ^ 表示开头

* $ 表示结尾

reg = /^a/; //匹配开头的a

reg = /a$/; //匹配结尾的a

//console.log(reg.test(“abcabca”));

* 如果在正则表达式中同时使用^ $则要求字符串必须完全符合正则表达式

reg = /^a$/;

console.log(reg.test(“a”));

//console.log(reg.test(“bbca”));

* 创建一个正则表达式，用来检查一个字符串是否是一个合法手机号

* 手机号的规则：

* 1 3 567890123 （11位）

* 1. 以1开头

* 2. 第二位3-9任意数字

* 3. 三位以后任意数字9个

* ^1 [3-9] [0-9]{9}$

var phoneStr = “13067890123”;

var phoneReg = /^1[3-9][0-9]{9}$/;

console.log(phoneReg.test(phoneStr));

5.3

* 检查一个字符串中是否含有 .

* . 表示任意字符

* 在正则表达式中使用\作为转义字符

* . 来表示.

* \ 表示\

* 注意：使用构造函数时，由于它的参数是一个字符串，而\是字符串中转义字符，

* 如果要使用\则需要使用\来代替

var reg = /./;

reg = /\/;

reg = new RegExp("\.");

reg = new RegExp("\\");

* \w

* - 任意字母、数字、_ [A-z0-9_]

* \W

* - 除了字母、数字、_ [^A-z0-9_]

* \d

* - 任意的数字 [0-9]

* \D

* - 除了数字 [^0-9]

* \s

* - 空格

* \S

* - 除了空格

* \b

* - 单词边界

* \B

* - 除了单词边界

reg = /\w/;

reg = /\W/;

reg = /\d/;

reg = /\D/;

console.log(reg.test(“avv”));

reg = /\s/;

reg = /\S/;

* 创建一个正则表达式检查一个字符串中是否含有单词child

reg = /\bchild\b/;

//console.log(reg.test("hello child "));

//接收一个用户的输入

//var str = prompt(“请输入你的用户名:”);

var str = " he llo ";

//去除掉字符串中的前后的空格

//去除空格就是使用""来替换空格

console.log(str);

//str = str.replace(/\s/g , “”);

//去除开头的空格

//str = str.replace(/^\s*/, “”);

//去除结尾的空格

//str = str.replace(/\s*$/, “”);

// /^\s*|\s*$/g 匹配开头和结尾的空格

str = str.replace(/^\s*|\s*$/g, “”);

console.log(str);

5.4电子邮件的正则

*任意字母数字下划线 .任意字母数字下划线 @ 任意字母数字 .任意字母(2-5位) .任意字母(2-5位)

*\w{3,} .\w+ @ [A-z0-9]+ (.[A-z]{2,5}){1,2}

var emailReg = /^\w{3,}\.\w+@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
var email = "abc.hello@126.com";
console.log(emailReg.test(email));

6、DOM

文档节点：#document 9

属性节点: 属性名 1

元素节点: 标签名 2

文本节点: #text 3 文本内容

浏览器已经为我们提供文档节点对象这个对象是window属性

可以在页面中直接使用，文档节点代表的是整个网页

		<button id="btn">我是一个按钮</button>
		<script type="text/javascript">
			/*
			 * 浏览器已经为我们提供 文档节点 对象这个对象是window属性
			 * 	可以在页面中直接使用，文档节点代表的是整个网页
			 */
			//console.log(document);			
			//获取到button对象
			var btn = document.getElementById("btn");			
			//修改按钮的文字
			btn.innerHTML = "I'm Button";			
		</script>

7、事件

* 事件，就是用户和浏览器之间的交互行为，

* 比如：点击按钮，鼠标移动、关闭窗口。。。

//获取按钮对象

  var btn = document.getElementById("btn");

* 可以为按钮的对应事件绑定处理函数的形式来响应事件

* 这样当事件被触发时，其对应的函数将会被调用

//绑定一个单击事件

//像这种为单击事件绑定的函数，我们称为单击响应函数

btn.onclick = function(){
        alert("你还点~~~");
      };

黑马程序员xlj

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

专栏目录