学习总结JavaScript
文章目录
- 1、JavaScript介绍
- 2、JavaScript和html代码的结合
- 2.1、通过script 引入外部的 js 文件来执行
- 2.2、script 标签直接定义 js 代码
- 3、JavaScript变量
- 4、关系运算符
- 5、数组
- 6、函数
- 6.1、函数的两种定义方式
- 6.1.1、使用function关键字
- 6.1.2、函数的第二种方式
- 6.2、函数的arguments隐形参数
- 7、js中的事件
- 7.1、onload加载事件
- 7.2、onclick 单击事件
- 7.3、onblur失去焦点事件（每次点击都会加一次）
- 7.4、onchange事件
- 7.5、onsubmit 表单提交事件
- 8、document对象
- 8.1、Document 对象中的方法介绍
- 8.1.2、getElementById方法
- 8.1.3、getElementsByName方法
- 8.1.4、getElementsByTagName
- 8.1.5、节点的常用属性和方法
1、JavaScript介绍
- Javascript 语言诞生主要是完成页面的数据验证。
- JS 是弱类型，Java 是强类型。
特点
-
交互性（信息的动态交互）
-
安全性（不允许直接访问本地硬盘）
-
跨平台性（只要是可以解释 JS 的浏览器都可以执行，和平台无关）
2、JavaScript和html代码的结合
2.1、通过script 引入外部的 js 文件来执行
src 属性专门用来引入 js 文件路径（可以是相对路径，也可以是绝对路径）
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script type="text/javascript" src="first.js">script>
head>
<body>
body>
html>
2.2、script 标签直接定义 js 代码
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script type="text/javascript">alert("瓦大西哇")script>
head>
<body>
body>
html>
3、JavaScript变量
JavaScript 的变量类型：
数值类型： number
字符串类型： string
对象类型： object
布尔类型： boolean
函数类型： function
JavaScript的特殊值
undefined 未定义
null 空值
NaN 非数字，非数值
JavaScript定义变量名格式
var 变量名；
var 变量名 = 值；
4、关系运算符
等于：== 比较字面值全等于：=== 比较字面值和两个变量的数据类型
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script type="text/javascript">var a="1";var b=1;alert(a == b);alert(a===b);script>
head>
<body>
body>
html>
5、数组
JavaScript中数组的定义。
var 数组名 = [] ; //空数组
var 数组名 = [1,‘ABC’,false] ; //定义数组并赋值
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script type="text/javascript">var arr1=[];// alert(arr1.length) //0arr1[0]=10;// alert(arr1.length) //1//在js的数组中，只要通过下标赋值，那么最大的下标值，就会自动的给数组做扩容//在这里我们跳过了arr[1],那么arr[1]的值就是未定义，也就是undefinedarr1[2]="德玛西亚";// alert(arr1.length)// alert(arr1[1]) //undefined//数组的遍历for (var i = 0; i <arr1.length ; i++) {alert(arr1[i]) //10 undefined 德玛西亚}script>
head>
<body>
body>
html>
6、函数
6.1、函数的两种定义方式
6.1.1、使用function关键字
格式：
function 函数名 （参数列表）{
函数体
}
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script type="text/javascript">//定义一个无参函数function fun1(){alert("无参函数被调用了")}// fun1(); //函数要调用才会执行function fun2(a,b){alert("有参函数被调用 a->"+a+",b->"+b)}// fun2(12,"abc")//定义带有返回值的函数function fun3(sum1,sum2){var result=sum1+sum2;return result;}alert(fun3(1,2));script>
head>
<body>
body>
html>
6.1.2、函数的第二种方式
格式
var 函数名 = function(形参列表){
函数体
}
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script type="text/javascript">var fun1= function (){alert("无参函数")}// fun1();var fun2 = function (a,b){alert("有参函数a="+a+",b="+b);}// fun2(10,20) //有参函数a=10,b=20var fun3 = function (sum1,sum2){return sum1+sum2;}alert(fun3(20,10));script>
head>
<body>
body>
html>
注意：在java中，函数是允许被重载的，但是在js中函数的重载会覆盖掉上一次的定义，也就是说，同名函数不管是有参还是无参，都只会呈现最后一次定义的函数内容。
6.2、函数的arguments隐形参数
在function函数中不需要定义，但是却可以直接获取全部参数的变量，就叫隐形参数
js的隐形参数就想java的可变长参数一样。
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script type="text/javascript">function fun(a, b, c) {alert(arguments.length);//可查看参数个数alert(arguments[0]);alert(arguments[1]);alert(arguments[2]);alert("a = " + a);for (var i = 0; i < arguments.length; i++) {alert(arguments[i]);}}fun(1,"ad",true);script>
head>
<body>
body>
html>
7、js中的事件
什么是事件？事件就是输入设备与页面进行交互的响应，称为事件
常见的事件有：
onload 加载完成事件 页面加载完成之后，常用于做页面 js 代码初始化
onclick 单击事件 用于按钮的点击响应
onblur 失去焦点事件 用于输入框失去焦点后验证其输入内容是否合法。
onchange 内容发生改变事件 用于下拉列表和输入框内
onsubmit 表单提交事件 用于表单提交
7.1、onload加载事件
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script type="text/javascript">//onload事件function onload_func(){alert('静态注册onload事件')}window.onload = function (){alert("动态注册onload事件")}// onload_func()script>
head>
<body>
body>
html>
静态注册：通过 html 标签的事件属性直接赋于事件响应
动态注册：先通过 js 代码得到标签的 dom 对象，然后再通过 dom 对象赋予事件响应
7.2、onclick 单击事件
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script type="text/javascript">//静态注册function onclick_func(){alert("静态注册onclick");}//动态注册window.onload = function (){var object = document.getElementById("btn");object.onclick=function (){alert("动态注册onclick")}}script>
head>
<body>
<button onclick="onclick_func();">静态注册按钮button>
<button id="btn">动态注册按钮button>
body>
html>
7.3、onblur失去焦点事件（每次点击都会加一次）
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script type="text/javascript">//静态注册失去焦点function onblur_func(){//console控制台对象//logconsole.log("静态注册失去焦点");}//动态注册失去焦点window.onload = function (){//获取标签对象var obj = document.getElementById("password");//标签对象.事件名称 = function(){};obj.onblur=function (){console.log("动态注册失去焦点")}}script>
head>
<body>
我爱你<input type="text" onblur="onblur_func();"><br/>
我恨你<input id="password" type="text"><br/>
body>
html>
7.4、onchange事件
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script type="text/javascript">function onchange_func(){alert("选择的球类发生改变")}window.onload = function (){//1、获取标签对象var obj = document.getElementById("btn")obj.onchange = function (){alert("选择的乐器发生改变")}}script>
head>
<body>
<select onchange="onchange_func()"><option>球类option><option>篮球option><option>排球option><option>足球option>
select>
<select id="btn"><option>乐器option><option>吉他option><option>口琴option><option>架子鼓option>
select>
body>
html>
7.5、onsubmit 表单提交事件
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script type="text/javascript">function onsubmit_func(){alert("静态注册表单提交")return false;}<!--return false可以阻止表单提交-->window.onload = function (){//1、获取标签对象var obj = document.getElementById("btn")obj.onsubmit = function (){alert("动态注册表单提交");return false;}}script>
head>
<body>
<form action="http://localhost:8088" method="get" onsubmit="return onsubmit_func()"><input type="submit" value="静态注册">
form>
<form action="http://localhost:8088" id="btn"><input type="submit" value="动态注册">
form>
body>
html>
8、document对象
通过可编程的对象模型，JavaScript 获得了足够的能力来创建动态的 HTML。
- JavaScript 能够改变页面中的所有 HTML 元素
- JavaScript 能够改变页面中的所有 HTML 属性
- JavaScript 能够改变页面中的所有 CSS 样式
- JavaScript 能够对页面中的所有事件做出反应
Document 对象的理解：
一：Document 它管理了所有的 HTML 文档内容。
二：document 它是一种树结构的文档。有层级关系
三：它让我们把所有的标签 都 对象化
四：我们可以通过 document 访问所有的标签对象。
什么是对象化？
比如在java中，一个简单的person类
class Person{private int age;private String name;private String sex;
}那在html中的对象化就是
<body>
<div id="password">密码div>
body>
8.1、Document 对象中的方法介绍
document.getElementById(elementId) 通过标签的 id 属性查找标签 dom 对象，elementId 是标签的 id 属性值
document.getElementsByName(elementName) 通过标签的 name 属性查找标签 dom 对象，elementName 标签的 name 属性值
document.getElementsByTagName(tagname) 通过标签名查找标签 dom 对象。tagname 是标签名
document.createElement( tagName) 方法，通过给定的标签名，创建一个标签对象。tagName 是要创建的标签名
比如：
document ： 文档
get: 获得
element: 元素
by： 通过
id: id
理解为：通过id获取文档中的元素
8.1.2、getElementById方法
getElementById是指定id来查找对象
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script type="text/javascript">function onclick_func(){//获取身份证元素var idcardobj=document.getElementById("idcard");//获取文本框的值var idcardText = idcardobj.value;//正则匹配var patt=/^\d{15}(\d{2}[A-Za-z0-9])?$/;if(patt.test(idcardText)){alert("身份证合法")}else{alert("身份证不合法")}}script>
head>
<body>
身份证：<input type="text" id="idcard" value="sfz"/>
span>
<button onclick="onclick_func()">校验button>
body>
html>
8.1.3、getElementsByName方法
getElementsByName是指定name属性来查找对象
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script type="text/javascript">//全选function checkall(){//让所有的复选框都选中var hobbyies = document.getElementsByName("hobby");for (var i = 0; i <hobbyies.length ; i++) {hobbyies[i].checked = true;}}//全不选function nocheck(){//让所有的复选框都不选中var hobbies = document.getElementsByName("hobby");for (var i = 0; i <hobbies.length ; i++) {hobbies[i].checked = false;}}//反选function checkReverse(){ var hobbies = document.getElementsByName("hobby");for (var i = 0; i <hobbies.length ; i++) {hobbies[i].checked = !hobbies[i].checked;}}script>
head>
<body>
爱好:
<input type="checkbox" name="hobby" value="篮球" checked="checked">篮球
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="排球">排球
<br/>
<button onclick="checkall()">全选button>
<button onclick="nocheck()">全不选button>
<button onclick="checkReverse()">反选button>
body>
html>
8.1.4、getElementsByTagName
document.getElementsByTagName 是按照指定标签名来查找对象
DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Titletitle><script type="text/javascript">//全选function checkall(){//让所有的复选框都选中//document.getElementsByTagName 是按照指定标签名来查找对象var inputs = document.getElementsByTagName("input");for (var i = 0; i <inputs.length ; i++) {inputs[i].checked = true;}}script>
head>
<body>
爱好:
<input type="checkbox" name="hobby" value="篮球" checked="checked">篮球
<input type="checkbox" name="hobby" value="足球">足球
<input type="checkbox" name="hobby" value="排球">排球
<br/>
<button onclick="checkall()">全选button>
body>
html>
8.1.5、节点的常用属性和方法
getElementsByTagName() 获取当前节点的指定标签名的子节点
appendChild( ChildNode ) 添加一个子节点
childNodes 属性，获取当前节点的所有子节点
firstChild 属性，获取当前节点的第一个子节点
lastChild 属性，获取当前节点的最后一个子节点
parentNode 属性，获取当前节点的父节点
nextSibling 属性，获取当前节点的下一个节点
previousSibling 属性，获取当前节点的上一个节点
className 用于获取或设置标签的 class 属性值
innerHTML 属性，表示获取/设置起始标签和结束标签中的内容
innerText 属性，表示获取/设置起始标签和结束标签中的文本
本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！