文章目录
1 数据类型
什么是变量?变量是可以存放某些值的内存的命名。
JavaScript的变量类型:
- 数值类型:number
- 字符串类型:string
- 对象类型:object
- 布尔类型:boolean
- 函数类型:function
JavaScript里特殊的值:
- undefined:未定义,所有js变量未赋初始值的时候,默认值都是undefined
- null空值
- NAN:全称是Not a Number。非数字,非数值的意思。
<script type="text/javascript">
var i;
alert(i);//undefined
i=12;
alert(i);//number
var a = 30;
var b="abc";
alert(typeof(b));//String
alert(a * b);//NAN
</script>
2 运算符
2.1 关系(比较)运算符
等于:==
- 等于是简单的做字面值的比较
全等于:===
- 除了做字面值的比较之外,还会比较两个变量的数据类型
var a="12";
var b=12;
alert(a == b);//true
alert(a === b)//false
2.2 逻辑运行符
且运算:&&
或运算:||
取反运算:!
在Javascript语言中,所有的变量,都可以做为一个boolean类型的变量去使用。
- 0、null、undefined、""(空串)都认为是false
- 其余所有类型的变量,只要有值,都为true
var a = 0;
if (a) {
alert("0为真")//不执行
} else {
alert("0为假")//执行
}
var b = null;
if (b) {
alert("null为真")//不执行
} else {
alert("null为假")//执行
}
var c = 20;
if (c) {
alert("20为真")//执行
} else {
alert("20为假")//不执行
}
var d="";//d为假
var f=" ";//f为真
3 数组
JS中数组的定义:
- var 数组名 = [];//空数组
- var 数组名 = [1, ‘abc’, true];//定义数组同时赋值元素。数组中的元素类型可以不同
// 1 数组的定义
var arr = [];//定义一个空数组
alert(arr.length);//0
arr[0]=12;
alert(arr[0]);//12
alert(arr.length);//1
//javascript语言中的数组,只要我们通过数组下标障值,那么最大的下标值,就会自动的给数组做扩容操作。
arr[2] = true;
alert(arr.length);//3
alert(arr[1]);//undefined
// 2 数组的遍历
for(var i = 0; i < arr.length; i++) {
alert(arr[i]);
}
4 函数
4.1 函数定义
函数的两种定义方式:
1、方式一
function 函数名(形参列表){
函数体
return xxx;//若函数没有返回值,则省略return语句
}
2、方式二
var 函数名 = function(形参列表) {
函数体
return xxx;
}
// 1 定义无参函数
function a_fun(){
alert("无参函数");
}
a_fun();//先定义函数,再执行函数
// 2 定义有参函数。参数只写名字即可,不用写类型
function b_fun(a, b){
alert(a+b);
}
b_fun(100, 800);
// 3 定义带返回值的函数
function c_fun(a, b){
var sum = a + b;
return sum;
}
alert(c_fun(100, 200));
// 1 定义无参函数
var a_fun = function (){
alert("无参函数");
}
a_fun();
// 2 定义有参函数。参数只写名字即可,不用写类型
var b_fun = function (a, b){
alert(a+b);
}
b_fun(100, 800);
// 3 定义带返回值的函数
var c_fun = function (a, b){
var sum = a + b;
return sum;
}
alert(c_fun(100, 200));
4.2 函数重载
在Java中函数允许重载。但是在JS中函数的重载会直接覆盖掉上一次的定义
function fun(){
alert("无参函数");
}
function fun(a, b){
alert("有参函数");
}
fun();//输出 有参函数
function fun(a, b){
alert("有参函数");
}
function fun(){
alert("无参函数");
}
fun(1, 3);//输出 无参函数
4.3 函数的参数列表
传到一个函数中的所有参数被存进一个arguments数组中,它也被称为函数的隐形参数(只在function函数内)。所谓隐形参数,就是在function函数中不需要定义,但却可以直接用来获取所有参数的变量。
function fun() {
alert(arguments.length);//3
alert(arguments[0]);//11
alert(arguments[1]);//22
alert(arguments[2]);//33
}
fun(11, 22, 33);//传进函数的实参个数,可以和定义函数时规定的形参个数不同
//计算数字之和
function sum(num1, num2) {
var res = 0;
for(var i = 0; i < arguments.length; i++) {
res += arguments[i];
}
return res;
}
alert(sum(1, 2, 3, 4));//10
alert(sum(1, 2, "abc", 3, 4));//3abc34
function sum_1(num1, num2) {
var res = 0;
for(var i = 0; i < arguments.length; i++) {
if(typeof(arguments[i]) == "number") {
res += arguments[i];
}
}
return res;
}
alert(sum(1, 2, "abc", 3, 4));//10
5 对象
定义对象的两种方式:
1、 Object形式的自定义对象
var 对象名 = new Object();//定义空对象
对象名.属性名 = 值; //为对象定义一个属性
对象名.函数名 = function(){ //为对象定义一个函数
函数体
return xxx;
}
对象名.属性名; //访问对象的属性
对象名.函数名(); //执行对象的函数
var obj = new Object();
obj.name = "jack";
obj.age = 20;
obj.fun = function() {
alert("姓名:" + this.name + ", 年龄:" + this.age)
}
obj.fun();
alert(obj);//object
2、{}花括号形式的自定义对象
var 对象名 = {}; //定义空对象
var 对象名 = { //定义非空对象。每个属性及函数之间用逗号隔开
属性名 : 值, //为对象定义一个属性
属性名 : 值, //为对象定义一个属性
函数名 : function(){ //为对象定义一个函数
函数体;
return xxx;
}
}
对象名.属性名; //访问对象的属性
对象名.函数名(); //执行对象的函数
var obj = {
name : "jack",
age : 20,
fun : function() {
alert("姓名:" + this.name + ", 年龄:" + this.age)
}
}
alert(obj.name);
obj.fun();
6 事件
js中的事件是什么?事件是电脑输入设备与页面进行交互的响应。我们称之为事件。常用的事件有:
- onload加载完成事件:页面加载完成之后,常用于做页面js代码初始化操作
- onclick单击事件:常用于按钮的点击响应操作
- onblur失去焦点事件:常用于输入框失去焦点后验证其输入内容是否合法
- onchange 内容发生改变事件:常用于下拉列表和输入框内容发生改变后操作
- onsubmit 表单提交事件:常用于表单提交前,验证所有表单项是否合法
事件注册
什么是事件的注册(绑定)?其实就是告诉浏览器,当事件响应后要执行哪些操作代码,叫事件注册或事件绑定。
事件的注册又分为静态注册和动态注册两种:
1、静态注册事件:通过html标签的事件属性直接赋于事件响应后的代码,这种方式我们叫静态注册。
2、动态注册事件:是指先通过js代码得到标签的dom 对象,然后再通过 dom对象.事件名 = function(){}
这种形式赋于事件响应后的代码,叫动态注册。动态注册基本步骤:
- 获取标签对象
- 标签对象.事件名 = function(){}
6.1 onload
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
// onload事件静态注册
function onload_fun() {
alert("静态注册的onload事件");
}
// onload事件动态注册。是固定写法
window.onload = function () {
// alert("动态注册的onload事件");
console.log("动态注册的onload事件");
}
</script>
</head>
<body onload="onload_fun()">
</body>
</html>
6.2 onclick
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function onclickFun() {
alert("onclick事件静态注册");
}
window.onload = function () {
// 1 获取对象标签
let btnObj = document.getElementById("btn");
// 2 通过 对象.事件名 = function(){}
btnObj.onclick = function () {
alert("onclick事件动态注册");
}
}
</script>
</head>
<body>
<button onclick="onclickFun();">静态onclick</button>
<button id="btn">动态onclick</button>
</body>
</html>
6.3 onblur
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function onblurFun() {
console.log("onblur事件静态注册")
}
window.onload = function () {
// 1 获取对象标签
var btnObj = document.getElementById("password");
// 2 通过 对象.事件名 = function(){}
btnObj.onblur = function () {
console.log("onblur事件动态注册")
}
}
</script>
</head>
<body>
用户名:<input type="text" onblur="onblurFun();"></input><br>
密码:<input type="text" id="password"></input>
</body>
</html>
6.4 onchange
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function onchangeFun() {
console.log("水果已经改变")
}
window.onload = function () {
// 1 获取对象标签
var obj = document.getElementById("select2");
// 2 通过 对象.事件名 = function(){}
obj.onchange = function () {
console.log("数字已经改变")
}
}
</script>
</head>
<body>
请选择:
<select onchange="onchangeFun()">
<option>--水果--</option>
<option>苹果</option>
<option>香蕉</option>
</select>
请选择:
<select id="select2" onchange="onchangeFun()">
<option>--数字--</option>
<option>100</option>
<option>200</option>
</select>
</body>
</html>
6.5 onsubmit
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript">
function onsubmitFun() {
alert("表单信息不合法,阻止提交");
return false;
// alert("表单信息合法,允许提交");
// return true;
}
window.onsubmit = function () {
// 1 获取对象标签
var btnObj = document.getElementById("form1");
// 2 通过 对象.事件名 = function(){}
btnObj.onblur = function () {
alert("表单信息合法,运行提交")
}
return true;
// return false;
}
</script>
</head>
<body>
<!--return false 阻止表单提交;return true允许表单提交-->
<form action="http://localhost:8080" method="get" onsubmit="return onsubmitFun()">
<input type="submit" value="静态onsubmit">
</form>
<form action="http://localhost:8080" id="form1">
<input type="submit" value="动态onsubmit">
</form>
</body>
</html>
7 DOM模型
DOM全称是Document Object Model ,即文档对象模型。就是把文档中的标签,属性,文本,转换成为对象来管理。
Document 对象的理解:
1、Document 它管理了所有的HTML文档内容
2、document 它是一种树结构的文档。有层级关系
3、它让我们把所有的标签都对象化
4、我们可以通过document访间所有的标签对象
Document对象中的主要方法
- document.getElementById(elementId)返回对拥有指定id 的第一个对象的引用
- document.getElementsByName(elementName)返回带有指定名称的对象集合,elementName 标签的name属性值
- document.getElementsByTagName(tagname)返回带有指定标签名的对象集合,tagname是标签名
- document.createElement(tagName)通过给定的标签名,创建一个标签对象。tagName是要创建的标签名
节点(标签对象)常用的方法和属性
1、方法:
- getElementsByTagName()获取当前节点的指定标签名孩子节点
- appendChild(ochildNode)方法,可以添加一个子节点,oChildNode是要添加的孩子节点
2、属性:
- childNodes属性,获取当前节点的所有子节点
- firstChild属性,获取当前节点的第一个子节点
- lastChild属性,获取当前节点的最后一个子节点
- parentNode属性,获取当前节点的父节点
- nextSibling属性,获取当前节点的下一个节点
- previousSibling属性,获取当前节点的上一个节点
- className用于获取或设置标签的class属性值
- innerHTML属性,表示获取/设置起始标签和结束标签中的内容
- innerText属性,表示获取/设置起始标签和结束标签中的文本
8 正则表达式
语法:var patt=new RegExp(pattern,modifiers);
或var patt=/pattern/modifiers;
- pattern(模式) 描述了表达式的模式
- modifiers(修饰符) 用于指定全局匹配、区分大小写的匹配和多行匹配
注意:当使用构造函数创造正则对象时,需要常规的字符转义规则(在前面加反斜杠 \)。比如,以下是等价的
var re = new RegExp("\\w+");
var re = /\w+/;
8.1 修饰符
修饰符用于执行区分大小写和全局匹配:
修饰符 | 描述 |
---|---|
i | 执行对大小写不敏感的匹配。 |
g | 执行全局匹配(查找所有匹配而非在找到第一个匹配后停止)。 |
m | 执行多行匹配。 |
8.2 方括号
方括号用于查找某个范围内的字符:
表达式 | 描述 |
---|---|
[abc] | 查找方括号之间的任何字符。 |
[^abc] | 查找任何不在方括号之间的字符。 |
[0-9] | 查找任何从 0 至 9 的数字。 |
[a-z] | 查找任何从小写 a 到小写 z 的字符。 |
[A-Z] | 查找任何从大写 A 到大写 Z 的字符。 |
[A-z] | 查找任何从大写 A 到小写 z 的字符。 |
[adgk] | 查找给定集合内的任何字符。 |
[^adgk] | 查找给定集合外的任何字符。 |
(red|blue|green) | 查找任何指定的选项。 |
8.3 元字符
元字符(Metacharacter)是拥有特殊含义的字符:
元字符 | 描述 |
---|---|
. | 查找单个字符,除了换行和行结束符。 |
\w | 查找数字、字母及下划线。 |
\W | 查找非单词字符。 |
\d | 查找数字。 |
\D | 查找非数字字符。 |
\s | 查找空白字符。 |
\S | 查找非空白字符。 |
\b | 匹配单词边界。 |
\B | 匹配非单词边界。 |
\0 | 查找 NULL 字符。 |
\n | 查找换行符。 |
\f | 查找换页符。 |
\r | 查找回车符。 |
\t | 查找制表符。 |
\v | 查找垂直制表符。 |
\xxx | 查找以八进制数 xxx 规定的字符。 |
\xdd | 查找以十六进制数 dd 规定的字符。 |
\uxxxx | 查找以十六进制数 xxxx 规定的 Unicode 字符。 |
8.4 量词
量词 | 描述 |
---|---|
n+ | 匹配任何包含至少一个 n 的字符串。例如,/a+/ 匹配 “candy” 中的 “a”,“caaaaaaandy” 中所有的 “a”。 |
n* | 匹配任何包含零个或多个 n 的字符串。例如,/bo*/ 匹配 “A ghost booooed” 中的 “boooo”,“A bird warbled” 中的 “b”,但是不匹配 “A goat grunted”。 |
n? | 匹配任何包含零个或一个 n 的字符串。例如,/e?le?/ 匹配 “angel” 中的 “el”,“angle” 中的 “le”。 |
n{X} | 匹配包含 X 个 n 的序列的字符串。例如,/a{2}/ 不匹配 “candy,” 中的 “a”,但是匹配 “caandy,” 中的两个 “a”,且匹配 “caaandy.” 中的前两个 “a”。 |
n{X,} | X 是一个正整数。前面的模式 n 连续出现至少 X 次时匹配。例如,/a{2,}/ 不匹配 “candy” 中的 “a”,但是匹配 “caandy” 和 “caaaaaaandy.” 中所有的 “a”。 |
n{X,Y} | X 和 Y 为正整数。前面的模式 n 连续出现至少 X 次,至多 Y 次时匹配。例如,/a{1,3}/ 不匹配 “cndy”,匹配 “candy,” 中的 “a”,“caandy,” 中的两个 “a”,匹配 “caaaaaaandy” 中的前面三个 “a”。注意,当匹配 “caaaaaaandy” 时,即使原始字符串拥有更多的 “a”,匹配项也是 “aaa”。 |
n$ | 匹配任何结尾为 n 的字符串。 |
^n | 匹配任何开头为 n 的字符串。 |
?=n | 匹配任何其后紧接指定字符串 n 的字符串。 |
?!n | 匹配任何其后没有紧接指定字符串 n 的字符串。 |