JavaScript基础知识点整理

最新推荐文章于 2023-08-18 13:35:32 发布

Taciturn_志锴

最新推荐文章于 2023-08-18 13:35:32 发布

阅读量254

点赞数 3

本文链接：https://blog.csdn.net/qq_43596152/article/details/108327607

版权

*一、JavaScript的简介**

JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。

基于对象：JavaScript中所有的操作都是针对于对象的操作，而这个对象可以是浏览器为我们提供的，也可以是我们自己创建的
事件驱动：当使用鼠标或键盘在页面中做了某个动作之后所实现的一系列的效果
具有安全性能：JavaScript的效果，不能以其他的手段进行改变，只能改变源代码的方式改变其效果
脚本语言：JavaScript是由浏览器中的JavaScript引擎直接解释执行

二、JavaScript的相关语法

1.JavaScript是一种弱类型脚本语言，一般应用于客户端

JavaScript中的注释格式为：

单行注释：//

多行注释：/*  */

3.JavaScript的数据类型

* JavaScript中的数据类型分为：基本数据类型、复合数据类型、特殊数据类型
* 基本数据类型：字符串、数值、布尔
* 复合数据类型：对象
* 特殊数据类型：null，undifined（未定义）

4.JavaScript中的变量

JavaScript中的变量统一使用var声明，var不代表数据类型，仅仅就是声明变量的关键字

JavaScript中变量的数据类型由所赋的值决定，所赋的值是什么类型，此变量的类型就是什么

JavaScript中变量的命名规则：

A：变量名由数字字母下划线以及$组成

B：不能以数字开头

C：不能使用关键字

D：严格区分大小写

    //变量声明
	var a=123;
	a="hello";
	a=false;
	a=new Date();

5.JavaScript中的函数

JavaScript中函数的定义：function 函数名(参数列表){函数体}

JavaScript中的函数分为两种：

A：普通函数，指具有完整结构的函数，可通过函数名调用函数的执行

function  test1() {
	    alert("测试函数")

    }
    function  test2(a,b) {
	    alert(a/b);

    }
    function  test3(a,b,c) {
	    return a+b+c;

    }

B：匿名函数，指没有名字的函数，一般结合事件来使用，当触发事件时自动执行

    //匿名函数不能单独使用，可以通过变量来表示此函数
	var test=function () {
        alert("hello");
    };
    test();//此时变量名就相当于函数名
    //匿名函数
    var test1=function () {
        alert("world");
    };
    test1();

注：JavaScript中的函数也属于复合数据类型

6.JavaScript中的数组声明与遍历

 //声明数组的两种方式
        var arr=new Array(5);
        var arr1=[1,2,3,4,5];
        arr[0]=1;
        arr[1]=2;
        arr[2]=3;
        arr[3]=4;
        //第一种遍历方式不会过滤undefined的元素，未赋值的元素类型为undefined
      for (var i = 0; i < arr.length; i++) {
          alert(arr[i]);
      }
      //在第二种方式中，这里的i得到的是指数组的下标，并且在遍历时会过滤掉undefined的元素
      for(var i in arr){
          alert(arr[i])
      }

7.JavaScript的三种弹出框

//三种框都会阻塞程序的执行，并且强制聚焦
         //1.警告框
        alert(123);
        //提示确认框
        confirm("确认删除吗");
        //提示输入框（提示信息，默认值）
        prompt("请输入要购买的数量",0);
        prompt("","请输入要购买的数量");

通过提示确认框来完成一个删除例子：

首先写一个删除成功的页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1>删除成功</h1>
</body>
</html>

其次写一个测试页面

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function () {
            var deleteA=document.getElementById("deleteA");
            deleteA.onclick=function () {
               if(!confirm("您确认删除吗？")){
                   return false;
               }
            };
        };
    </script>
</head>
<body>
<a id="deleteA" href="delete_success.html">删除</a>
</body>
</html>

注意：超链接标签会默认转入下一个页面，在这里返回一个false会取消转入页面

三、事件

事件就是在页面中通过鼠标或键盘等做的某一个动作，一般要结合函数使用
由于事件非常多，在此只举几个例子进行展示

页面事件：
onload（页面加载事件）
onunload（页面卸载事件）

表单事件：
onbliur（失去焦点事件）
onfocus（获得焦点事件）
onchange（内容改变事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
       window.onload=function () {
           var test =document.getElementById("test");
           test.onblur=function () {
                alert("test")
           };
           test.onfocus=function () {
                alert("test")
           };
         test.onchange=function () {
            alert("test")
         }
       }
    </script>
</head>
<body>
<input type="text" id="test">
</body>
</html>

鼠标事件：
onclick（鼠标左键单击事件），ondblclick（鼠标左键双击事件），onmousemove（鼠标移动事件），onmouseover（鼠标移上事件），onmouseout（鼠标移出事件）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
        window.onload=function () {
            var btn=document.getElementById("btnId");
            btn.onclick=function () {
                alert("单击事件")
            };
           btn.ondblclick=function () {
            alert("双击事件")
           };
           btn.onmousemove=function () {
                alert("鼠标移动事件")
           }
        }
    </script>
</head>
<body>
<input type="button" value="点击" id="btnId">
</body>
</html>

键盘事件：
onkeydown（键按下事件），onkeyup（键抬起事件），onkeypress（键按下并抬起事件）

注意：需要借助window.onload事件,在这个页面加载完成后执行程序代码
因为代码是从上而下开始运行，一开始无法通过id获取对象

四、嵌入方式

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>load01</title>
	<script type="text/javascript">
		function test() {
			alert("hello");
		}
	</script>
</head>
<body>
	<!-- 1.写到标签的事件属性中：结构与行为相耦合，不建议使用 -->
	<button id="btnId" onclick="test()">SayHello</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>load02</title>
<!-- 2.写到script标签中，script标签放到head标签中，无法获取按钮对象 -->
<script type="text/javascript">
	var btn=document.getElementById("btnId");
	btn.onclick=function () {
	alert("hello");
	}
</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>load03</title>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>

<!-- 3.写到script标签中，script标签放到body标签后面，不符合我们的习惯 -->
<script type="text/javascript">
	var btn=document.getElementById("btnId");
	btn.onclick=function () {
		alert("hello");
	}
</script>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>load04</title>
<!-- 4.使用window.onload，完美解决此问题 -->
<script type="text/javascript">
	window.onload=function () {
var btn=document.getElementById("btnId");
btn.onclick =function () {
alert("hello");
}
	}
</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>load05</title>
<!-- 5.引入外部的js文件 src 里面写上外部文件的路径-->
	<script type="text/javascript" src="test.js">
	</script>
</head>
<body>
	<button id="btnId">SayHello</button>
</body>
</html>

外部文件，在外部文件中不需要加入script标签，因为标签属于HTML的语言，而在外部文件中写的是JavaScript语言。

window.onload=function () {
    var btn=document.getElementById("btnId");
    btn.onclick =function () {
        alert("hello");
    }
}

五.DOM操作

DOM：Document Object Model，文档对象模型

document ，指文档对象，包含了页面中所有可以获取并访问的元素，即整个HTML页面中的标签

DOM操作，即通过document获取页面中某个元素并操作

dom中的常用方法：

document.getElementById(“id”)：通过id获取页面中的唯一元素

document.getElementsByName(“name”)：通过name属性获取一个元素数组

document.getElementsByTagName(“标签名”)：通过标签名获取一个元素数组

1.DOM查询：元素篇

在整个文档范围内查询元素节点
1.根据id值查询【返回一个具体节点】:
document.getElementById(“id值”)
2.根据标签名查询【返回节点数组】:
document.getElementsByTagName(“标签名”)
3.根据name属性值查询【返回节点数组】:
document.getElementsByName(“name值”)

在具体元素节点范围内查找子节点
1.查找全部子节点【返回节点数组】:
element.childNodes
2.查找第一个子节点【返回节点对象】:
element.firstChild
3.查找最后一个子节点【返回节点对象】:
element.lastChild
4.查找指定标签名的子节点【返回节点数组】:
element.getElementsByTagName(“标签名”)
5.查找指定元素节点的父节点:
element.parentNode

查找指定元素节点的兄弟节点
1.查找前一个兄弟节点:
node.previousSibling
2.查找后一个兄弟节点:
node.nextSibling

2.DOM查询：文本篇

获取文本值三步曲

①获取文本节点父节点
②获取父节点的第一个子节点
parentEle.firstChild
③获取文本节点的节点值
parentEle.firstChild.nodeValue

例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>dom查询</title>
<link rel="stylesheet" type="text/css" href="style/css.css" />
<script type="text/javascript">
	window.onload = function(){
		//1.查找#bj节点
		var btnEle01 = document.getElementById("btn01");
		btnEle01.onclick = function(){
			var bj = document.getElementById("bj");
			//console.log(bj);//将内容以日志的形式打印到浏览器的控制台
		};
		//2.查找所有li节点
		var btnEle02 = document.getElementById("btn02");
		btnEle02.onclick = function(){
			var lis = document.getElementsByTagName("li");
			console.log(lis);
		};
		//3.查找name=gender的所有节点
		var btnEle03 = document.getElementById("btn03");
		btnEle03.onclick = function(){
			var genders = document.getElementsByName("gender");
			console.log(genders);
		};
		//4.查找#city下所有li节点
		var btnEle04 = document.getElementById("btn04");
		btnEle04.onclick = function(){
			var city = document.getElementById("city");
			var lis = city.getElementsByTagName("li");
			console.log(lis);
		};
		//5.返回#city的所有子节点
		var btnEle05 = document.getElementById("btn05");
		btnEle05.onclick = function(){
			var city = document.getElementById("city");
			console.log(city.childNodes);
		};
		//6.返回#phone的第一个子节点
		var btnEle06 = document.getElementById("btn06");
		btnEle06.onclick = function(){
			var phone = document.getElementById("phone");
			console.log(phone.firstChild);
		};
		//7.返回#bj的父节点
		var btnEle07 = document.getElementById("btn07");
		btnEle07.onclick = function(){
			var bj = document.getElementById("bj");
			console.log(bj.parentNode);
		};
		//8.返回#android的前一个兄弟节点
		var btnEle08 = document.getElementById("btn08");
		btnEle08.onclick = function(){
			var android = document.getElementById("android");
			console.log(android.previousSibling);
		};
		//9.读取#username的value属性值
		var btnEle09 = document.getElementById("btn09");
		btnEle09.onclick = function(){
			var username = document.getElementById("username");
			alert(username.value);
		};
		//10.设置#username的value属性值
		var btnEle10 = document.getElementById("btn10");
		btnEle10.onclick = function(){
			var username = document.getElementById("username");
			username.value = "你好";
		};
		//11.返回#bj的文本值
		var btnEle11 = document.getElementById("btn11");
		btnEle11.onclick = function(){
			var bj = document.getElementById("bj");
			alert(bj.innerHTML);
		};
	};
</script>
</head>
<body>
<div id="total">
	<div class="inner">
		<p>
			你喜欢哪个城市?
		</p>

		<ul id="city">
			<li id="bj"><i>北京</i></li>
			<li>上海</li>
			<li>东京</li>
			<li>首尔</li>
		</ul>

		<br>
		<br>

		<p>
			你喜欢哪款单机游戏?
		</p>

		<ul id="game">
			<li id="rl">红警</li>
			<li>实况</li>
			<li>极品飞车</li>
			<li>魔兽</li>
		</ul>

		<br />
		<br />

		<p>
			你手机的操作系统是?
		</p>

		<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
	</div>

	<div class="inner">
		gender:
		<input type="radio" name="gender" value="male"/>
		Male
		<input type="radio" name="gender" value="female"/>
		Female
		<br>
		<br>
		name:
		<input type="text" name="name" id="username" value="abcde"/>
	</div>
</div>
<div id="btnList">
	<div><button id="btn01">查找#bj节点</button></div>
	<div><button id="btn02">查找所有li节点</button></div>
	<div><button id="btn03">查找name=gender的所有节点</button></div>
	<div><button id="btn04">查找#city下所有li节点</button></div>
	<div><button id="btn05">返回#city的所有子节点</button></div>
	<div><button id="btn06">返回#phone的第一个子节点</button></div>
	<div><button id="btn07">返回#bj的父节点</button></div>
	<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
	<div><button id="btn09">返回#username的value属性值</button></div>
	<div><button id="btn10">设置#username的value属性值</button></div>
	<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>

Taciturn_志锴

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
JavaScript基础知识点整理

一、JavaScript的简介*JavaScript是一种基于对象和事件驱动并具有安全性能的脚本语言。基于对象：JavaScript中所有的操作都是针对于对象的操作，而这个对象可以是浏览器为我们提供的，也可以是我们自己创建的事件驱动：当使用鼠标或键盘在页面中做了某个动作之后所实现的一系列的效果具有安全性能：JavaScript的效果，不能以其他的手段进行改变，只能改变源代码的方式改变其效果脚本语言：JavaScript是由浏览器中的JavaScript引擎直接解释执行二...
复制链接

扫一扫