Web开发之JavaScript知识点总结
Posted nuist__NJUPT
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Web开发之JavaScript知识点总结相关的知识，希望对你有一定的参考价值。
javascript(JS)是web上的脚本语言，JavaScrip和Java的关系就好比雷峰塔和雷锋之间的关系，哈哈。JS主要用于控制页面的特效展示，JS可以对html进行动态控制，可以对表单进行校验，也可以控制CSS样式。JS是脚本语言，不需要编译，浏览器直接解析就可以，JS必须嵌入到其它语言中，无法独立执行，JS的执行过程是从上到下依次执行的。JS主要包括三部分：ECMAScript规定了JS的语法和基本对象；DOM对象用于处理网页内容的方法和接口；BOM对象用于处理与浏览器交互的方法和接口。
目录
1、JS基本数据类型
5种基本数据类型，分别为number,string,boolean,null,undefined类型。引用数据类型如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的基本数据类型</title>
<script>
var s1 = "a" ;
var s2 = 'a' ;
var flag1 = true ;
var flag2 = false ;
var num1 = 1 ;
var num2 = -1.5 ;
var obj = null ;
var u = undefined ;
var str = new String() ;
var str1 = new String ;
</script>
</head>
<body>
</body>
</html>2、JS的运算符
JS的运算包括算术运算符和逻辑运算符，和常规的JAVA运算符基本差不多，稍有一些区别。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的基本数据类型</title>
<script>
var a = 1 ;
var b = '1' ;
alert(a==b) ;
alert(a===b) ; //全等,值和类型都要相等
alert(a!=b) //不相等
var c = true ;
var d = false ;
//逻辑运算符
alert(c && d) ;
alert(c || d) ;
alert(!c)
</script>
</head>
<body>
</body>
</html>3、JS中的正则对象
JS的中的正则对象以^开始，以$结束，一般使用正则对象.test(String)方法校验字符串是否匹配正则对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的正则对象</title>
<script>
var reg = /^\\s*$/ //表示0个至多个空格组成
var flag = reg.test(" ") ;
var flag1 = reg.test(" a ") ;
alert(flag) ;
alert(flag1) ;
</script>
</head>
<body>
</body>
</html>4、JS中数组对象的相关操作
包含数组的创建，以及数组中的常用方法的操作，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的数组对象</title>
<script>
//JS中数组对象的四种创建方式
var arr1 = [1,2,3] ;//数组中包含三个元素
var arr2 = new Array() ;//数组空间为0
var arr3 = new Array(4) ;//数组空间为4
var arr4 = new Array(1,2,3,'a',true) ; //数组元素为1，2，3，a，true
var len = arr1.length ;
var res1 = arr1.join("-") ;//将数组元素放入字符串,并用-分离
var res2 = arr1.reverse() ; //颠倒数组元素的顺序
var res3 = arr1.pop() ; //删除并返回数组的最后一个元素
var res4 = arr1.push("a") ; //向数组末尾添加一个元素,并返回新的长度
</script>
</head>
<body>
</body>
</html>5、全局函数和自定义函数
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的函数</title>
<script>
//计算JS的字符串,并当作脚本来执行
eval("var a = 2 ;") ;
alert(a) ;
var b = "3.7" ;
//解析一个字符串并返回整数和浮点数
alert(parseInt(b));
alert(parseFloat(b)) ;
//JS中没有方法重载之说,重名的函数只会覆盖点原来的
//自定义a和b的求和函数
function getSum(a, b)
return a + b ;
</script>
</head>
<body>
</body>
</html>6、自定义对象
JS中的对象创建方式和Java中对象创建方式很像，只不过Java是new的方式，而JS是用functon。另外JS也可以使用直接量的方式创建对象。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的自定义对象</title>
<script>
function Person()
this.name = "张三";
this.age = 18 ;
var p = new Person() ;
alert(p.name) ;
alert(p.age) ;
function Person1(name, age)
this.name = name ;
this.age = age ;
var p1 = new Person1("李四", 19) ;
alert(p1.name)
p1.name = "王五" ;
//直接量方式创建对象
var p2 = name : "张三", age : 19 ;
alert(p2.name) ;
alert(p2.age) ;
</script>
</head>
<body>
</body>
</html>7、BOM对象的使用
BOM对象是浏览器对象莫模型，用来执行浏览器的相关操作，例如：浏览器的消息弹出等。wndow代表了BOM对象，window是JS的内置对象，使用的时候一般可以省略window.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的BOM对象</title>
<script>
function run1()
alert("run1") ;
clearInterval(id) ; //取消循环定时器,只执行一次
function run2()
alert("run2")
var a = 1 ;
//弹出的提示框
alert(a) ;
//y有返回值的确认框
var falg =confirm("是否确认删除？") ;
var id = setInterval("run1()",2000) ; //每隔2秒执行一次run1()方法
setTimeout("run2()", 1000) ; //一次性定时器，1s后执行一次
var url = location.href ; //当前的url
</script>
</head>
<body>
</body>
</html>8、DOM对象的使用
DOM是文档对象模型，DOM将标记型文档的所有内容都标记为对象，通过操作对象的属性和方法，来达到操作或改变HTML展示效果的目的。HTML的每个标签都会被加载到DOM树的一个元素对象。一个HTML文档加载到内存中就会行成一个DOM对象。
DOM对象通过四种方式获取元素对象，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的DOM对象</title>
</head>
<body>
<input type="text" id = "id1"/>
<input type="checkbox" name="hobby" value="basketball"/> 篮球
<input type="checkbox" name="hobby" value="volleyball"/> 排球
<input type="checkbox" name="hobby" value="football"/>足球
<ul>
<li>选项1</li>
<li>选项2</li>
<li>选项3</li>
<li>选项4</li>
</ul>
<input type="radio" name="sex" value="man" class="h1"/>男
<input type="radio" name="sex" value="woman" class="h1"/>女
<script>
//获取元素对象的四种方式
//1.通过id获取元素对象
var t1 = document.getElementById("id1") ;
//2.通过name属性获取所有满足要求的对象
var t2 = document.getElementsByName("hobby") ;
//3.通过标签名获取所有的元素对象
var t3 = document.getElementsByTagName("li") ;
//4.通过class属性获取元素对象
var t4 = document.getElementsByClassName("h1") ;
alert(t1) ;
alert(t2.length) ;
alert(t3.length) ;
alert(t4.length) ;
</script>
</body>
</html>DOM对象中元素对象的常见属性如下：包括修改value，className，默认选中，以及内容体等属性，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的DOM对象</title>
<style>
.y1
color: red;
.y2
color: blue;
</style>
</head>
<body>
<input type="text" id = "id1" name="input" value="你好"/>
<span id = "id2" class="y1">Java之父</span>
<input type="checkbox" id="hobby">
<span id = "span1">这是内容体</span>
<script>
//更改value属性
var t1 = document.getElementById("id1") ;
t1.value = "我很好" ;
alert(t1.value) ;
//更改class属性
var t2 = document.getElementById("id2") ;
t2.className = "y2" ;
//设置默认选中
var t3 = document.getElementById("hobby") ;
alert(t3.checked)
t3.checked = true ;
//获取内容体与修改内容体
var t3 = document.getElementById("span1") ;
alert(t3.innerHTML) ; //获取对象的内容体
t3.innerHTML = "今天下雨了" ;
t3.innerHTML += ",今天很冷" ;
alert(t3.innerHTML)
</script>
</body>
</html>9、常见的JS事件
通过鼠标或热键的动作我们称之为事件，通过JS事件，我们可以完成页面的指定特效。
JS事件驱动机制包含三部分：事件源，事件，监听器；
下面的是点击事件：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的常见事件</title>
<script>
function run1()
alert("你点击了按钮") ;
</script>
</head>
<body>
<input type="button" name="button1" value="点击我" onclick="run1()"/>
</body>
</html>如下是焦点事件，分为获取焦点和失去焦点两种，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的常见事件</title>
<script>
function run1()
alert("你获取了焦点") ;
function run2()
alert("你失去了焦点") ;
</script>
</head>
<body>
<input type="text" onfocus="run1()" />
<input type="text" onblur="run2()">
</body>
</html>域内容改变事件，只要域内容改变就会触发相应的方法，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的常见事件</title>
<script>
function run1()
alert("域内容改变事件") ;
</script>
</head>
<body>
<select onchange="run1()">
<option value="beijing"> 北京 </option>
<option value="shanghai"> 上海 </option>
<option value="nanjing"> 南京 </option>
</select>
</body>
</html>页面加载完毕事件如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的常见事件</title>
<script>
function run1()
alert("页面加载完毕") ;
</script>
</head>
<body onload="run1()">
</body>
</html>表单提交事件，可以用于表单的校验：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的常见事件</title>
<script>
function run1()
alert("表单按钮被点击了") ;
//表单校验
return false ;
</script>
</head>
<body >
<form onsubmit="return run1()">
<input type="text" name="username"/><br/>
<input type="submit" value="提交">
</form>
</body>
</html>键位弹起事件和鼠标移入事件，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的常见事件</title>
<script>
function run1()
alert("触发了键位弹起事件") ;
function run2()
alert("触发了鼠标移入事件") ;
</script>
</head>
<body >
<input type="text" onkeyup="run1()"/>
<input type="text" onmousemove="run2()">
</body>
</html>10、JS事件的两种绑定方式
第一种方式：元素事件句柄绑定，开发快捷，传参方便，可以绑定多个函数，不过该方法使得JS和HTML代码糅合在一起，不利于分开开发，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的事件的两种绑定方式</title>
<script>
function run1() //绑定无参的
alert("run1") ;
function run2(str) //绑定带参的
alert(str) ;
function run3(obj) //绑定元素对象
alert(obj.value)
</script>
</head>
<body >
<input type="text" value="1111" onclick="run1()"/>
<input type="text" value="2222" onclick="run2('hello')">
<input type="text" value="3333" onclick="run3(this)">
<!--同时绑定多个事件,触发事件会从前向后依次执行-->
<input type="text" value="4444" onclick="run1(),run2('java'),run3(this)"/>
</body>
</html>第二种方式：使用DOM属性的方式绑定，可以使得HTML代码和JS代码份力，并且使用匿名函数的方式可以传参和一个事件可以绑定多个函数，具体如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JS的事件的两种绑定方式</title>
<script>
function run1()
alert("run1") ;
function run2()
alert("run2") ;
//当页面加载完毕,为对象t绑定两个事件
window.onload = function ()
var t = document.getElementById("id1") ;
t.onclick = function ()
run1() ;
run2() ;
</script>
</head>
<body >
<input type="text" id="id1"/>
</body>
</html>以上是关于Web开发之JavaScript知识点总结的主要内容，如果未能解决你的问题，请参考以下文章