JavaScript

最新推荐文章于 2021-10-06 08:40:07 发布

忘忧a

最新推荐文章于 2021-10-06 08:40:07 发布

阅读量154

点赞数

分类专栏：前端文章标签： js

本文链接：https://blog.csdn.net/weixin_45663614/article/details/118728475

版权

前端专栏收录该内容

5 篇文章 1 订阅

订阅专栏

一、JavaScript概述

1.1、概念

JavaScript是世界上最流行的脚本语言，不需要编译，直接就可以被浏览器解析执行了。

1.2、功能

可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。

二、入门基础

2.1、基本语法

<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
     <!--JS代码写在<script></script>里面 -->
    <script type="text/javascript"> //type="text/javascript" 可省略
      //JavaScript的语法和Java语言类似，每个语句以;结束(也可省略;)，语句块用 {...} 。
        document.write("<h1>初学JavaScript之我的第一个javaScript程序</h1>");
      //是一个完整的赋值语句 
        var name="忘忧";
        document.write("<h1>"+name+"</h1>");
    </script>
</body>
</html>

2.2、数据类型

number：数字。整数、小数、NaN(当无法计算结果时用NaN表示)
string：字符串。字符串 “abc”、“a”、 ‘忘忧’
boolean: 布尔类型。true 和false
null：一个对象为空的占位符
undefined ：表示值未定义。如果一个变量没有给初始化值，则会被默认赋值为undefined
数组：是一组按顺序排列的集合，集合的每个值称为元素。JavaScript的数组可以包括任意数据类型。例:([1, 2, 3.14, ‘JavaScript’, null, false])

2.3、字符串

length 返回字符串长度
toUpperCase( ) 把一个字符串全部变为大写
toLowerCase( ) 把一个字符串全部变为小写
indexOf( ) 会搜索指定字符串出现的位置
substring( ) 返回指定索引区间的子串
includes( ) 是否包含返回true 或者false

2.3.1、字符串示例

//length 返回字符串长度
    var name="忘忧";
    document.write(name.length)    

//toUpperCase() 把一个字符串全部变为大写
    var wy="Lotus";
    document.write(wy.toUpperCase());
    
//toLowerCase() 把一个字符串全部变为小写
    var wy2="LOTUS";
    document.write(wy2.toLowerCase());
  
//indexOf() 会搜索指定字符串出现的位置
   var wy3="LOTUS";
   document.write(wy3.indexOf('O'));
   
//substring() 返回指定索引区间的子串
   var wy5="LOTUS";
   document.write(wy5.substring(0,1));//从0开始到1结算
 
//includes() 是否包含 
  document.write(wy5.includes('L'));

2.4、数组

2.4.1、数组语法定义

申明的同时进行赋值
var arr=new Array(1,2,3);
var arr = [1, 2, 3.14, ‘lotus’, null, true];
先申明再赋值
var arr = new Array(2);
arr[0] = ‘a’;
arr[1] = ‘b’;

2.4.2 、数组函数

length 设置或返回数组中元素的数目
join( ) 把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
sort( ) 对数字(第一个开头数字)或字母升序排序
push( ) 向数组末尾添加一个或更多元素
pop( ) 删除并返回数组的最后一个元素
unshift( ) 向数组头部添加一个或更多元素
shift( ) 删除并返回数组的第一个元素
concat( ) 把当前数组和另一个数组连接起来，返回一个新数组
reverse( ) 把数组顺序颠倒
toString( ) 把数组转为字符串
slice( ) 截取数组部分元素
splice( ) 从指定的索引开始删除元素，然后再从该位置添加元素

2.4.3 、数组函数示例

<script>

var arr = ['Microsoft', 'Apple', 'Yahoo', 'AOL', 'Excite', 'Oracle'];

//length设置或返回数组中元素的数目
document.write(arr.length); 

//join( )把数组的所有元素放入一个字符串，通过一个的分隔符进行分隔
document.write(arr.join('-'));

//sort( )对数字(第一个开头数字)或字母升序排序
document.write(arr.sort());

//push( )向数组末尾添加一个或更多元素
arr.push('wy')
document.write(arr);
//pop( ) 删除数组的最后一个元素
document.write(arr.pop());

//unshift( )向数组头部添加一个或更多元素
document.write(arr.unshift('AA')) // 返回数组新的长度: 7
document.write(arr);
document.write("<br/>")
//shift( )删除并返回数组的第一个元素
document.write(arr.shift());

//concat( )连接多个数组
var arr2=['A', 'B', 'C'];
var arr3=arr.concat(arr2);
document.write(arr3);

//reverse( )把数组顺序颠倒
document.write(arr3.reverse());

//toString( )把数组转为字符串
document.write(arr3.toString());

//slice( )截取数组部分元素
document.write(arr3.slice(0,4));  //从索引0开始，到索引4结束，但不包括索引4:
document.write("<br/>")

//splice( )从指定的索引开始删除元素，然后再从该位置添加元素
arr.splice(1, 2, '忘忧', 'HAHAHA');
document.write(arr);
//只删除不添加
arr.splice(2,3)
//只添加,不删除
arr.splice(3, 0, '忘忧', 'HAHAHA');
</script>

2.5、对象

JavaScript的对象是一种无序的集合数据类型，它由若干键值对组成

<script>
//定义语法
var 对象名 = { 
    key: 'value', 
    key: 'value', 
    key: 'value' 
  }
//示例
document.write("<br/>")
var student = {
    name: 'wy',
    age:  20,
    height: 1.73
}    
//获取对象的属性 通过对象.属性获取
document.write(student.age);
</script>

2.6、Map

JavaScript的对象的键必须是字符串，但实际上Number或者其他数据类型作为键也是合理的。为了解决这个问题，最新的ES6规范引入了新的数据类型 Map 。

<script>
 var map=new Map();
 map.set(1,'忘忧');
 map.set(2,"Lotus");
 map.set(3,"张三");
 
 document.write(map.get(1));//通过键获取值
//使用iterable内置的forEach方法遍历，
 map.forEach(function (value, key, map) { 
    document.write(value);
 });
</script>

2.7、运算符

类型	运算符
算术运算符	*+ - / % ++ –**
赋值运算符	= += -=
比较运算符	> < >= <= == != ===
逻辑运算符	&& \|\| !

2.8、逻辑控制语句

2.8.1、if 判断

<script>
 var score='A';
 if(score=='A') {
  alert('中奖了');
} else if(score=='B') {
  alert('奖励100元');
} else {
  alert('大奖擦肩而过');
}
</script>

2.8.2、switch 分支

 var num=1;
 switch(num) {
   case 1:
	 alert('HAHA');
     break;
   case 2:
     alert('HIHI');
	 break;
   default:
     alert('KAKA')
}
//break:跳出整个循环，继续执行js后续代码
//continue:跳出当前本次循环，继续下一次循环

2.8.3、for循环

for(var i = 0;i < 10;i++) {
	console.info(i);
}

2.8.4、while循环

var num = 8;

 while(num > 1){
     num--;
	 console.info(num);
}

2.8.5、for in循环

var arr = new Array('a','b','c','d');

 for(var i in arr) {

  document.write(arr[i]);

}

三、函数

3.1、自定义函数

类似于Java中的方法，是完成特定任务的代码语句块
可以定义有参函数或者无参函数
定义函数可以return返回值

function 函数名( 参数1,参数2,参数3,… ){
     //JavaScript语句
     [return 返回值]
}
示例:
   function wy(a){
      if(a>=0){
        return a;
      }else{
        return -a;
      }
    }
   document.write(wy(10));//调用函数

3.2、方法

在一个对象中绑定函数，称为这个对象的方法。

 var student = {
   name: 'wy',
   height: 1.73,
   birth: 2000,
   age: function () {
      var n = new Date().getFullYear(); 
      return n - this.birth; 
     }
  }    
  document.write(student.age());//在页面打印出21

3.3、JS常用事件

名称	说明
onload	一个页面或一幅图像完成加载
onlick	鼠标单击某个对象
ondblclick	鼠标双击某个对象
onmouseover	鼠标指到某元素上
onkeydown	某个键盘按键被按下
onchange	域的内容被改变
onmouseout	用户从元素上移开鼠标触发
onblur	光标移出该元素时触发
onselect	文本被选中
onsubmit	确认按钮被点击
onreset	重置按钮被点击

3.3.1示例：

<body>
  <button onclick="clicks()">点击</button>

  <div onmouseover="overs()">指到这个</div>

   <script>
   function clicks(){
     alert("点击了")
   }
  
   function overs(){
     alert("指到这个")
   }

   </script>
</body>

3.4、JS标准对象

3.4.1、标准对象

JavaScript中的对象是有着属性和方法的一种特殊数据类型。常见的对象有数字Number，字符串String，日期Date，数组Array等

数字对象

 var num = new Number(12.223);
//通过对象名 .方法名，方法参数是保留多少为小数，参数区间0-100；
num.toFixed(2); //12.22

字符串对象

关键字	简介
new String( )	创建字符串对象
属性 length	字符串长度
concat( )	字符串拼接
localeCompare()	比较两段字符串对象是否相同，0:表示相同，1:代表不相同
substring()	截取一段子字符串
split()	根据分隔符，把字符串转换为数组
replace()	替换子字符串
replaceAll()	替换所有需要替换字符

3.4.2、字符串示例

//创建字符串对象
     var lotus=new String();
     lotus="abcdefga";

     //字符串长度
     document.write(lotus.length)

     //字符串拼接
     var lotus2 =new String('lotus');
     document.write(lotus2.concat(lotus))

     //比较两段字符串对象是否相同，0:表示相同，1:代表不相同
     document.write(lotus.localeCompare(lotus2)); //-1 表示不相同
     document.write("<br/>")

      //根据分隔符，把字符串转换为数组
      var lotus3=new Array();
      lotus3=lotus.split('')
      document.write(lotus3);

      //替换子字符串
      document.write(lotus.replace('a','A'));//Abcdefga

      //替换所有需要替换字符
      document.write(lotus.replaceAll('a','A'));//AbcdefgA

3.4.3、日期对象

方法	说明
getDate()	返回Date对象的一个月中的每一天，其值介于1～31之间
getDay()	返回Date对象的星期中的每一天，其值介于0～6之间
getHours()	返回Date对象的小时数，其值介于0～23之间
getMinutes()	返回 Date 对象的分钟数，其值介于0~59之间
getSeconds()	返回 Date 对象的秒数，其值介于0～59之间
getMonth()	返回 Date 对象的月份，其值介于0～11之间
getFullYear()	返回 Date 对象的年份，其值为4位数
getTime()	返回自某一时刻（1970年1月1日）以来的毫秒数
setFullYear / setMonth / setDate / setHours / setMinutes / setSeconds	自定义设置日期和时间

3.4.4、JSON

JSON是一种轻量级的数据存储格式，目前使用特别广泛。
采用完全独立于编程语言的文本格式来存储和表示数据。
易于人阅读和编写，同时也易于机器解析和生成，并有效地提升网络传输效率。

JSON对象:

var lotus = { "name": "忘忧", "sex": "男" };

JSON字符串:

var lotus2 = '{ "name": "忘忧", "sex": "男" }';

将JSON字符串转化为JSON对象,使用 JSON.parse() 方法：

var lotus = '{ "name": "忘忧", "sex": "男" }';
var lotus2=JSON.parse(lotus);
console.log(lotus2)

在这里插入图片描述

将JSON对象转化为JSON字符串,使用 JSON.stringify() 方法：

var lotus3 = { "name": "忘忧", "sex": "男" };
var lotus4 =JSON.stringify(lotus3);
console.log(lotus4)

在这里插入图片描述

四、window对象常用函数

方法名称	说明
prompt( )	显示可提示用户输入的对话框
alert( )	显示带有一个提示信息和一个确定按钮的警示框
confirm( )	显示一个带有提示信息、确定和取消按钮的对话框
close( )	关闭浏览器窗口
open( )	打开一个新的浏览器窗口，加载给定 URL 所指定的界面
setTimeout( )	在指定的毫秒数后调用函数或计算表达式
clearTimeout()	取消由 setTimeout() 方法设置的 timeout。
setInterval( )	按照指定的周期（以毫秒计）来调用函数或表达式
clearInterval()	取消由 setInterval() 设置的 timeout。
onload( )	onload 发生时运行的脚本。

4.1、window对象常用函数示例

<body>
  <div id="date"></div>
  
   <script>
    // var a=prompt('输入');

    //  alert('提示信息');
   
   // window.open('http://www.baidu.com')
    function times(){
      var date = new Date();
        var year = date.getFullYear();
        var month = date.getMonth();
        var day = date.getDate();
        var hours = date.getHours();
        var min = date.getMinutes();
        var ss = date.getSeconds();
        var nowDate = year + '-' + month + '-' + day + ' ' + hours + ':' + min + ':' + ss;
        document.getElementById("date").innerHTML=nowDate;
      }
     
   window.onload=setInterval(times,1000);

    </script>
</body>

五、操作DOM

由于HTML文档被浏览器解析后就是一棵DOM树，要改变HTML的结构，就需要通过JavaScript来操作DOM。
始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：

更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。

5.1、常用方法

名称	说明
getElementById()	返回对拥有指定id的第一个对象的引用
getElementsByName()	返回带有指定名称的对象的集合
getElementsByTagName()	返回带有指定标签名的对象的集合
write()	向文档写文本、HTML表达式或JavaScript代码

5.2、操作表单

5.2.1、获取输入框的值

<body>
  <input type="text" id="texts" placeholder="请输入" onchange="getValue()"> 
   <script>
     function getValue(){
         var values=document.getElementById("texts").value;
         document.write("获取的值为:"+values)
    }
 </script>
</body>

5.2.2、设置输入框的值

<body>
<input type="text" id="text1"> 
<input type="radio" id="radio1" value="男">
<div id="text2"></div>
    <script>
         var values="HAHAHA"
         document.getElementById("text1").value=values;
         document.getElementById("radio1").checked='true';//设置选中按钮
    </script>
</body>

5.3、更新DOM

5.3.1、innerHTML 属性

这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以
直接通过HTML片段修改DOM节点内部的子树：

<body>
  <div id="all"></div>
    <script>
      var div= document.getElementById('all'); 
      //div.innerHTML='innerHTML文本';
      div.innerHTML = '<h1>DOM节点内部的子树</h1>';
   </script>
</body>

在这里插入图片描述

5.3.2、innerText 属性

innerText 属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签

<body>
  <div id="all"></div>
    <script>
      var div= document.getElementById('all'); 
      div.innerText='innerHTML文本';
   </script>
</body>

5.4、创建DOM

5.4.1、Document 方法

方法	描述
createAttribute()	创建一个属性节点
createComment()	创建注释节点
createElement()	创建元素节点
createTextNode()	创建文本节点

5.4.2、DOM节点示例

<body>
  <div id="all"></div>

    <script>  
    //创建一个父节点div标签;
     var div=document.createElement("div");

     //给父节点设置一个id属性并赋值
     div.setAttribute('id','fa');

     //获取总上一级节点
     var all=document.getElementById('all');

     var comment=document.createComment('把父节点放到祖节点里面'); //注释

     all.appendChild(comment);//把注释放到祖节点里面
     all.appendChild(div);
     
     //创建一个a标签
     var a= document.createElement('a');

     //给a标签设置href属性并赋值
     a.setAttribute('href','https://blog.csdn.net/weixin_45663614');

     //把a标签放到id为fa的div中
     div.appendChild(a);

     //给a标签设置文本节点
     var aText=document.createTextNode("CSDN");
     
     //文本节点放到a标签里面
     a.appendChild(aText);
   </script>

</body>

在这里插入图片描述

5.5、删除DOM

要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的 removeChild( ) 把自己删掉

 //删除id为fa的父节点里面的子节点a
 div.removeChild(div.children[0]);

忘忧a

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JavaScript

一、JavaScript概述1.1、概念JavaScript是世界上最流行的脚本语言，不需要编译，直接就可以被浏览器解析执行了。1.2、功能可以来增强用户和html页面的交互过程，可以来控制html元素，让页面有一些动态的效果，增强用户的体验。二、入门基础2.1、基本语法<!DOCTYPE html><html lang="en"><head></head><body> <!--JS代码写在<script
复制链接

扫一扫