文章目录

一.数组
- 1.数组API（方法）
- 2.二维数组
- 3.截取字符串
二.math对象
三.Date对象
四.数学
- 1.计算平方
- 3.计算阶乘
五.正则表达式
六.网络和谐语
七.jQuery选择器
篇章

一.数组

1.数组API（方法）

① API：应用程序编程的接口，预定义叫的一些方法或者函数
②toString():将数组中元素按逗号组成合成字符串
③ join(""):将数组中的元素按指定字符组合成字符串，默认是逗号

<script>var arr1=['tom','marry','king'];var arr2=['sun','mark','method'];console.log(arr.toString());console.log(arr1.join('|'));concat(arr1,arr2);//拼接多个数组console.log(arr1.concat(arr2));
</script>

④数组.slice(start,end)返回新数组包含从start到end(不包含该元素)的数组中的元素，该方法并不会修改数组，而是返回一个子数组。
注意点：1.可以使用负数从数组的尾部截取元素。
2.如果end未被规定，那么slice()方法会选取从start到数组结尾的所有元素。

<script>       console.log(arr.slice(2));//下标2(第三个)-最后console.log(arr.slice(2,5));//2-4console.log(arr.slice(-4,-2));//-4到-3
</script>

创建数组a-g.每一个字符是一个元素，分别截取cd,f,b,把截取到的结果拼接成一个新的数组

<script>   var arr=['a','b','c','d','e','f','g'];console.log(arr.slice(2,4));console.log(arr.slice(5,6));console.log(arr.slice(1,2));
</script>

⑤splice(start,cont,value1,value2…):删除数组中的元素，start开始的下标，count删除的长度。
⑥ value1删除后补充的元素；count为空的话，删除到最后，start为负数表示倒数，返回值是删除的元素，原数组不会发生变化。

<script> arr=['tom','mary','king','sun','mark','method'];console.log(arr.splice(3));//从下标3开始 全删除console.log(arr.splice(3,2));//从下标3开始 删2个console.log(arr);
</script>

创建s数组，包含a-h,每个字母是一个元素，删除d,e,将替换为m,在下标为2的位置插入元素z

<script>     var arr=['a','b','c','d','e','f','g','h'];console.log(arr.splice(3,2));console.log(arr.splice(3,1,'m'));console.log(arr.splice(2,0,'z'));console.log(arr);sort();对数组进行排序,默认是按照Unicode码进行从小到大发排序var arr=[0,5,6,8,3,4];var arr=[23,45,6,31];console.log(arr.sort(function(a,b){return a-b;//按照数字从小到大排序return b-a;//按照数字从大到小排序}));
</script>

push():往数组末尾添加元素，返回数组的长度

<script>  var arr=['a','b','c','d'];console.log(arr.push('e'));console.log(arr);
</script>

pop():删除数组末尾的元素，返回删除元素的元素

<script>var arr=['a','b','c','d'];console.log(arr.pop());console.log(arr);
</script>

unshift():往数组的开头添加元素，返回数组的长度

<script>var arr=['a','b','c','d'];console.log(arr.unshift('z'))
</script>

shift():删除数组开头的元素，返回数组的与元素

<script>var arr=['a','b','c','d'];console.log(arr.shift('z'))console.log(arr);
</script>

2.二维数组

二维数组：数组中的每个元素也是数组

<script> var city=[['海淀区','东城区','西城'],['杭州市','宁波市','嘉兴市','金华市'],['唐山','保定','秦皇岛','廊坊'],['兰州市','威武市','嘉峪关','张掖市']];console.log(city[1][1]);
</script>

①二维数组访问:arr[下标][下标]
②包装对象：目的让原始类型像引用类型一样，具有属性和方法
③js提供三种包装对象：String,Number,Boolean
④String 将任意岛数据转为字符串
⑤new String(值)：返回对象，将字符串包装成对象

<script> var str='a';var str1=new String('a');console.log(str,typeof str);//string +1 a 1console.log(str1,typeof str1);//object +1console.log(str,typeof str+1);// a 1console.log(str1,typeof str1+1);//a 1var Str='Hello';//将引文字母转大写console.log(str.toUpperCase());console.log(str1.toLowerCase());
</script>

①初始化4个英文字母（有大小写），循环弹出提示框，输入四个字符（不区分大小写），如果输入正确结束循环

<script> var str='Word';while(true){var code=prompt('input code');if(str.toUpperCase() == code.toUpperCase()){break;}}
</script>

①字符串API
②charAt():获取下标对应的的字符
③ 遍历字符串javascript，获取a字符出现的次数

<script> var str='javascript';for(var i= 0,count=0;i<str.length;i++){//判断字符是否为aif(str.charAt(i)=='a'){count++;}}console.log(str.charAt(3));//下标对应的字符console.log(str.length);//获取字符的长度indexOf(value,start);//查找某个字符串的下标，value是要查找的字符串，start开始下标，默认是0，如果找不到返回-1var str='javascript';console.log(str.indexOf('s'));;//4lastIndexOf(value);//查找字符串最后一次岛下标，找不到返回-1console.log(str.lastIndexOf('m'));
</script>

练习：声明变量保存邮箱，检测是否为邮箱格式，如果是打印true，否则打印false

<script> var str='tom@163.com';if(str.indexOf('@') >=0) {console.log(true);}else{console.log(false);}slice(start,end);//start开始的下标，end是结束的下标（不包含end本身），end为空截取岛末尾，负数表示倒数var str='tom123@163.com';//分别截取用户名和服务器名称console.log(str.slice(0,3));console.log(str.slice(4,11));
</script>

分别截取年月日，打印1997年10月26日，性别男

<script> var s='1103333101012120901';var year= s.slice(6,10);var month= s.slice(11,12);var date= s.slice(12,14);var sex= s.slice(-2,-1);console.log(sex);sex=sex%2==0?'女':'男';console.log('年'+year+'月'+month+'日'+date+'性别'+sex);
</script>

3.截取字符串

①substr(start,count);
//start开始下标，count截取长度，如果count为空，截取到最后，start为负数表示倒数
② subString(start,end);
//start开始下标，end结束为空,end为空，截取到最后，如果下标为负数，自动转为0

<script> var s='110121212342315678';split(step);//将字符串按照制定的字符分割成数组，step指定字符，返回数组var str ='tom@tedu.cn';var arr=str.split('@');console.log(arr[0],arr[1]);
</script>

<script>
// 匹配模式：用于查找，替换字符串
//search(value)//用于查找满足条件的第一个下标，iindexOf,如果找不到就返回-1
//replace(value1,value2)查找并替换，value1是要查找的字符串，value2是要替换的字符串var str='China是世界上人口最多的国家，China的互联网高速发展，China有好多程序员，欢迎来到China';
//所有China替换成中国
//i--ignore 忽略大小写
//g--global 全局查找console.log(str.replace('/China/ig','中国'));
</script>

二.math对象

<script>
//Math对象：不需要创建，可以直接使用
//    console.log(Math.pi);//圆周率
//    console.log(Math.abs(1-2));//绝对值
//    console.log(Math.floor(3.5));//向下取整
//    console.log(Math.ceil(3.1));//向上取整
//    console.log(Math.round(5.6));//四舍五入取整
//    console.log(Math.max(1,2,3));
//    console.log(Math.min(1,2,3));
//    console.log(Math.pow(10,3));//获取x的y次幂
//    console.log(Math.random());//获取随机数
//    练习：创建数组，包含多个字母，每次运行，随机取一个元素
//    var arr=['a','b','c'];
//    var index=Math.floor(Math.random()*arr.length);
//    console.log(arr[index]);//练习：随机获取a-z之间的4个字母,组成一个新数组（push）var arr=[];for(var i=97;i<=122;i++){arr.push(String.fromCharCode(i));}var arr1=[];for(var i=0;i<4;i++){var index=Math.floor(Math.random()*arr.length);console.log(index);arr1.push(arr[index]);}document.write(arr1);
</script>

三.Date对象

<script> var d1=new Date('2019/9/19 16:38:00' );
//    var d2=new Date();//系统当前时间
//     var d3=new Date(24*60*60*1000).getTime();//存储距离计算机元年的毫秒数
//     console.log(d3);//获取存储的日期时间
//            getFullYear,
//            getMonth,
//            getDate,
//            getHours,
//            getMinutes,
//            getSeconds,
//             getDay
// 打印出2019年3月17日 10点39分50秒var d1=new Date('2019/3/17 10:39:50');var year=d1.getFullYear();var month=d1.getMonth()+1;var date=d1.getDate();var hour=d1.getHours();var mon=d1.getMinutes();var seconds=d1.getSeconds()console.log(year+month+date+hour+mon+seconds);
</script>

四.数学

1.计算平方

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>计算平方</title><script>function pf(){console.log(1);//根据id获取文本框//通过id找到相应的元素，获取值，或者修改元素的值，让静态网页动起来var input=document.getElementById("num");console.log(input);//获取文本框的值var n=input.value;console.log(n);//获取spanvar span=document.getElementById("result");console.log(span);//判断文本框的值是否为数字if(isNaN(n)) {//不是数字，向span写入提示信息span.innerHTML = "请输入数字";}else{//是数字，计算平房并写入span.innerHTML=n*n;}}</script>
</head>
<body>
<input type="text" id="num"/>
<input type="button" value="平方" onclick="pf();"/>
<span id="result"></span>
</body>
</html>

3.计算阶乘

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>计算阶乘</title><script type="text/javascript">function jc(n){var input=document.getElementById("num");var n=input.value;if(isNaN(n)) {//不是数字p = document.getElementById("result").innerHTML = "请您输入数字";}else{if(n<0) {var  p=document.getElementById("result").innerHTML="没有阶乘";}else if(n>=1){for(var i= 1,r=1;i<=n;i++){r=r*i;}p = document.getElementById("result").innerHTML = r;}else if(n==0){p = document.getElementById("result").innerHTML = "1";}}}</script>
</head>
<body>
<input type="text" id="num">
<input type="button" value="计算"onclick="jc();"><p id="result"></p></body>
</html>

五.正则表达式

<script> //4.RegExpvar str="no zuo no die,no can no bb.";var reg=/no/;//正则对象的方法//reg.test(str)//检测str中是否包含reg匹配的子串.console.log(reg.test(str));
</script>

六.网络和谐语

<script> var str="sb cb wqnmlgb gun ccc";//多个敏感词汇以|，gi:全局替换并不区分大小写var reg=/s|cb|wqnmlgb|gun/gi;console.log(str.replace(reg,"*"));
</script>

七.jQuery选择器

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>jQuery选择器</title><!--引入jQuery框架必须在所有的js之前--><script src="js/jquery-3.4.1.js"> </script><script>//点击+将所有的p标签，返回值为数组，哪怕只有一个p标签，返回值也是数组function bigger(){console.log(1);// 获取第一个p标签console.log($("p")[0]);//获取第一个p标签的文本console.log($("p")[0]).innerHTML;//获取第二个input标签的value属性的值console.log($("input")[1].value);//获取p的原始字号var size=$("p").css("font-size");console.log(size);//将16px转换成16size=size.replace("px","");console.log(size);//字号+1，再设置给所有的p$("p").css("font-size",++size+"px");console.log(size);}</script>
</head>
<body><input type="button" value="+" onclick="bigger();"/><p>jQuery框架是轻重级的js框架</p><p>jQuery对DOM操作提供了支持</p><p>jQuery对动画提供了支持</p><input value="jQuery对动画提供了支持"/>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>jQuery选择器</title><script src="js/jquery-3.4.1.js"></script><script>//传入的this就是img对象function chg(img){console.log(1);//如果img的属性的值是218console.log($(img));if($(img).width()==218){$(img).width("250px").height("250px");}else{$(img).width("218px").height("218px");}}</script>
</head>
<body>
<img src="img/images/01.jpg" width="218px" height="218px"onclick="chg(this);"/>
</body>
</html>

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title>jQuery选择器</title><script src="js/jquery-3.4.1.js"></script><script>//当页面加载完成后自动执行$(function(){//1.id选择器console.log($("#nb"));//2.class选择器console.log(".city");//以上都是基本选择器//层次选择器，通过DOM元素之间的层次关系取特定元素console.log($("#nb+"));//4.过滤选择器//4.1基本过滤//获取第一个liconsole.log($("li:first"));//获取下标奇数的liconsole.log($("li:odd"))//获取前四个liconsole.log($("li:lt(4)"));//选取除了id为nb的liconsole.log($("li:not(#nb)"));//4.2内容过滤//选取带 京 的liconsole.log($("li:contains('京')"));//4.3可见性过滤//获取所有隐藏的元素console.log($("li:hidden"));//4.4属性过滤//获取所有带id属性的liconsole.log($("li[id]"));//4.5状态过滤//选择不可用状态的inputconsole.log($("input:disabled"));//选中只读的inputconsole.log($("input:read-only"));//选中checked的状态console.log($("input:checked"));//5.表单选择器//选中input标签中的属性为radio的标签console.log($("input:radio"));});</script>
</head>
<body>
<ul><li >北京</li><li class="city">上海</li><li class="city">广州</li><li>深圳</li><li id="nb">宁波</li><li class="city">厦门</li><li style="display: none">东莞</li><li>南京</li>
</ul>
<p>账号：<input type="text" disabled/>
</p>
<p>账号：<input type="password" readonly/>
</p>
<p><input type="radio" name="sex"/>男<input type="radio" name="sex"/>女
</p>
</body>
</html>

篇章

上一篇：JavaScript知识点3
下一篇：JavaScript知识点5-jQuery函数库

JavaScript知识点4相关推荐

呕心沥血 JavaScript知识点梳理大全，超详细建议收藏！！！
呕心沥血 JavaScript知识点梳理大全,超详细建议收藏!!! ✴️大家好,我是王同学,爆肝三天三夜王同学把JavaScript 知识点梳理了一遍,文章没有一点套路,只有满满的干货 ✴️如果对你 ...
JavaScript知识点9-案例大全
文章目录 1.购物车综合案例JQuery版本 2.购物车综合案例JavaScript版本 3.学子商城 public.css index.css 主页面 4.猜数字篇章 1.购物车综合案例JQuer ...
小白学小程序需要的JavaScript知识点
小白学微信小程序需要的JavaScript知识点文章目录小白学微信小程序需要的JavaScript知识点 1 js数据类型 Number 字符串布尔值数组对象 null和undefined ...
javascript知识点_一点点JavaScript知识是第1部分很危险的事情
javascript知识点几乎是一个数据库的奇怪故事 (The Strange Tale of the Almost-a-Database) 这不是教程,这是一个警告性的故事. (This is n ...
JavaScript知识点8
文章目录 1.事件绑定 2.事件 3.查找3个div 4.使用hover 5.百度一下 6.jQuery动画函数--显示隐藏动画 7.精简显示品牌 8.框架/js库篇章 1.事件绑定 <!DO ...
JavaScript知识点归纳之简介
简介: 参照学习菜鸟教程上例子所做本JavaScript知识点归纳之XXX. 1.JavaScript直接写入HTML输出流: <script> document.write(" ...
javaScript知识点和实例
javaScript知识点和实例一.最终显示效果:点击红色按钮,会有视屏弹出并带有遮罩层点击黄色区域可以关闭视频并回到最初的状态. 页面主要代码:main中主要包含一个a,控制显示的按钮.设置 ...
javascript php 性能,JavaScript知识点总结之如何提高性能_javascript技巧
JavaScript的性能问题不容小觑,这就需要我们开发人员在编写JavaScript程序时多注意一些细节,本文非常详细的介绍了一下JavaScript性能优化方面的知识点,绝对是干货. 先给大家巩固 ...
面试容易问的 JavaScript 知识点，你知道几个？
你是否也遇到这样的问题,学JavaScript不知从哪下手?学了一半不知道自己技巧掌握的如何?或者学完了想去面试,但是不知道自己掌握的知识是否熟练?今天达妹为各位准备了一些JavaScript面试技术 ...

JavaScript知识点4