写在开头的链接:W3C,菜鸟教程。
关于JS的详细介绍和学习,可以进入W3C、菜鸟教程进行了解和学习,本篇文章仅对JS相关重要的、常用的几部分(它的主要语法、作用、DOM、BOM以及与Python语法的重要区别)作以介绍。
JavaScript 是互联网上最流行的脚本语言,这门语言可用于 HTML 和 web,更可广泛用于服务器、PC、笔记本电脑、平板电脑和智能手机等设备。JavaScript 是脚本语言:
JavaScript是一种属于网络的脚本语言,通常JavaScript脚本是通过嵌入在HTML中来实现自身的功能的。
注:总结其特性为:
JavaScript 是 web 开发者必学的三种语言之一:
(Web开发三剑客):
< script>标签
在HTML中,JavaScript代码必须位于< script>与< /script>标签之间
注: 那些老旧的实例可能会在 < script> 标签中使用 type=“text/javascript”。现在已经不必这样做了。JavaScript 是所有现代浏览器以及 HTML5 中的默认脚本语言。
JavaScript 能够以下不同方式“显示”数据:
使用一个变量前要先声明:
var x,y | //如何声明变量 |
---|---|
x=7;y=8 | //如何赋值 |
z=x+y | //如何计算值 |
var x=1;
var y=2;
var z=x+y;
算术运算符对数值(文字或变量)执行算术运算。
运算符 | 描述 |
---|---|
+ | 加法 |
- | 减法 |
* | 乘法 |
** | 幂 |
/ | 除法 |
% | 系数 |
++ | 递增 |
– | 递减 |
赋值运算符向 JavaScript 变量赋值。
运算符 | 例子 | 等同于 |
---|---|---|
= | x=y | x=y |
+= | x+=y | x=x+y |
-= | x-=y | x=x-y |
*= | x*=y | x=x*y |
/= | x/=y | x=x/y |
%= | x%=y | x=x%y |
<<= | x<<=y | x=x< |
>>= | x>>=y | x=x>>y |
>>>= | x>>>=y | x=x>>>y |
&= | x&=y | x=x&y |
^= | x^=y | x=x^y |
l= | x l=y | x=x l y |
**= | x**=y | x=x**y |
运算符 | 描述 |
---|---|
== | 等于 |
=== | 等值等型 |
!= | 不等于 |
!== | 不等值或不等型 |
> | 大于 |
< | 小于 |
>= | 大于或等于 |
<= | 小于或等于 |
? | 三元运算符 |
其中:
===:表示值相等并且类型相等
==:值相等
运算符 | 描述 |
---|---|
&& | 逻辑与 |
ll | 逻辑或 |
! | 逻辑非 |
字符串值,数值,布尔值,数组,对象(有点像字典)。而python支持的数据类型有数值类型、字符串、列表、元组、集合、字典等。
var length=7 | //数字 |
---|---|
var lastName=“Gates” | //字符串 |
var cars=[“Porsche”, “Volvo”, “BMW”] | //数组 |
var x={firstName:“Bill”,lastName:“Gates”}; | //对象(类似于字典) |
var a=3;
var name='hello'
var color=['red','blue','green']
var b={name:'lili',age:12}
JavaScript 函数是被设计为执行特定任务的代码块;
JavaScript 函数会在某代码调用它时被执行。
function name(参数1,参数2,参数3...){
要执行的代码;
return 返回值;
}
其中:
如:
<script>
function myFunction(p1,p2){
return p1 * p2;
}
document.getElementById("demo").innerHTML=myFunction(7,8);
</script>
简单的JS代码示例:
<!DOCTYPE HTML >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JavaScript</title>
<!--
引入JS:JavaScript 代码必须位于<script>与</script>标签之间
1.变量
2.JavaScript数据类型:数值类型、字符串、布尔值、数组、对象
3.JavaScript函数:
function myFunction(p1,p2) {
return p1 * p2 //该函数返回p1和p2的乘积
}
-->
<script>
<!-- -->
var info="打开成功"
alert(info)
</script>
</head>
<body>
这是一个JavaScript页面
</body>
</html>
JavaScript中的对象和python中的字典类似,这里就不在过多赘述,可以进入W3c网站进行查看学习。
在 JavaScript 中,我们可使用如下条件语句:
if(条件1){
条件1 为TRUE时执行点的代码块
}else if(条件2){
条件2 为false 而条件2为true时执行的代码块
}else {
条件1和条件2均为false时执行的代码块
}
for(var i=0;i<count;i++){
循环做的事
}
文档对象模型(Document Object Model,简称DOM),是W3C组织推荐的处理可扩展置标语言的标准编程接口。当网页被加载时,浏览器会创建页面的文档对象模型。
HTML DOM模型被结构化为对象树:
通过这个对象模型,HTML DOM可以进行获取、更改
添加或删除HTML元素。
HTML DOM方法是能够(在HTML元素上)执行的动作;
HTML DOM属性是能够设置或改变的HTML元素的值。
常用的方法和属性:
//方法:
document.getElementByName() //返回的是一个列表对象
document.getElementById() //返回的是一个元素对象
document.createTextNode() //创建文本节点
document.createElement() //创建元素节点
nodeobj.appendCgild() //添加子节点
//属性:
object.innerHTML //当前标签对象里面嵌套的HTML信息
object.value //用户输入的信息值
object.src //获取图片的路径,通过赋值方式可以实现修改图片路径
object.checked //判断当前多选框是否被选中
浏览器对象模型(Browser Object Model (BOM))允许 JavaScript 与浏览器对话。
BOM(Browser Object Model) 是指浏览器对象模型,是用于描述这种对象与对象之间层次关系的模型,浏览器对象模型提供了独立于内容的、可以与浏览器窗口进行互动的对象结构。BOM由多个对象组成,其中代表浏览器窗口的Window对象是BOM的顶层对象,其他对象都是该对象的子对象。
HTML 事件是发生在 HTML 元素上的“事情”,可以是浏览器或用户做的某些事情。
当在 HTML 页面中使用 JavaScript 时,JavaScript 能够“应对”这些事件。
下面是HTML事件的一些例子:
下面是一些常见的HTML事件:
事件 | 描述 |
---|---|
onchange | HTML元素已被改变 |
onclick | 用户点击了HTML元素 |
onmouseover | 用户把鼠标移动到HTML元素上 |
onmouseout | 用户把鼠标移开HTML元素 |
onkeydown | 用户按下键盘按键 |
onload | 浏览器已经完成页面加载 |
另外,还有事件句柄(Event Handlers)
HTML 4.0 的新特性之一是能够使 HTML 事件触发浏览器中的行为,比如当用户点击某个 HTML 元素时启动一段 JavaScript。下面是一个属性列表,可将之插入 HTML 标签以定义事件的行为。
属性 | 此事件发生在何时… |
---|---|
onabort | 图像的加载被中断 |
onblur | 元素失去焦点 |
onchange | 域的内容被改变 |
onclick | 当用户点击某个对象时调用的事件句柄 |
ondblclick | 当用户双击某个对象时调用的事件句柄 |
onerror | 在加载文档或图像时发生错误 |
onfocus | 元素获得焦点 |
onkeydown | 某个键盘按钮被按下 |
onkeypress | 某个键盘按键按下并松开 |
onkeyup | 某个键盘按键被松开 |
onload | 一张页面或一幅图像完成加载 |
onmousedown | 鼠标按钮被按下 |
onmousemove | 鼠标被移动 |
onmouseout | 鼠标从某元素移开 |
onmouseover | 鼠标移到某元素上 |
onmouseup | 鼠标按键被松开 |
onreset | 重置按钮被点击 |
onresize | 窗口或框架被重新调整大小 |
onselect | 文本被选中 |
onsubmit | 确认按钮被点击 |
onunload | 用户退出页面 |
onsubmit事件:提交事件,onsubmit 事件会在表单中的确认按钮被点击时发生。
案例:实现简单的用户登录校验:
<!DOCTYPE HTML >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录校验</title>
<script>
function checkForm(){
//获取当前提交的用户名,默认情况下getElementsByNamed返回列表对象,.value获取对象里面的值
var username=document.getElementsByName("username")[0].value;
//判断用户名是否为空,如果为空,报错
if (username===''){
// ==:'5'==5 true 只比较值是否相等
// === '5'===5 false 比较值和类型是否相等
alert('用户名为空');
}
var password=document.getElementById('pwd').value;
var passwd_length=password.length;
if (passwd_length<6){
alert('密码长度小于6位');
}
}
</script>
</head>
<body>
<div class="login">
<h1>用户登录</h1>
<!-- onsubmit当提交登录信息的时候,执行函数checkForm()实现用户的校验-->
<!-- 第一个事件类型:onsubmit-->
<form action="#" method="get" onsubmit="return checkForm()">
<input type="text" name="username" placeholder="用户名"><br/>
<input type="password" name="password" placeholder="密码" id="pwd"><br/>
<input type="submit" value="登录">
</form>
</div>
</body>
</hmtl>
onfocus事件: 聚焦事件,onfocus 事件在对象获得焦点时发生。
onblur事件: 离焦事件,onblur 事件会在对象失去焦点时发生。
我们在平常的登录过程当中,用户名和密码栏后面一般会有与输入内容相关的要求和提示,并不总是跳出警示框,这种需求该如何实现呢?那就需要用到聚焦和离焦事件。
案例:优化版简单的用户登录校验
<!DOCTYPE HTML >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>用户登录校验</title>
<script>
function showUserTips() {
//innerHTML:给usertips中添加一些文本信息
var usertipsObj=document.getElementById('usertips');
var info="用户名不能为空";
usertipsObj.innerHTML=info;
}
function checkuser() {
//获取当前提交的用户名,默认情况下getElementsByNamed返回列表对象,.value获取对象里面的值
var username=document.getElementsByName("username")[0].value;
//判断用户名是否为空,如果为空,报错
var usertipsObj=document.getElementById('usertips');
if (username.length<=2) {
// ==:'5'==5 true 只比较值是否相等
// === '5'===5 false 比较值和类型是否相等
usertipsObj.innerHTML = "用户名长度不大于2";
}else {
usertipsObj.innerHTML="ok";
}
}
</script>
</head>
<body>
<div class="login">
<h1>用户登录</h1>
<!-- onsubmit当提交登录信息的时候,执行函数checkForm()实现用户的校验-->
<!-- 第一个事件类型:onsubmit-->
<form action="#" method="get" >
<!-- onfocus聚焦事件,如果聚焦,执行showUserTips()-->
<input type="text" name="username" placeholder="用户名" id="user" onfocus="showUserTips()" onblur="checkuser()">
<span id="usertips">tips</span><br/>
<input type="password" name="password" placeholder="密码" id="pwd"><br/>
<input type="submit" value="登录">
</form>
</div>
</body>
</html>
点击事件
onclick事件:onclick 事件会在对象被点击时发生。
实现点击图片,切换图片
代码:
<!DOCTYPE HTML >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
var count=1;
function changeImg() {
count += 1;
// 通过for循环实现图片的切换
// 1.获取图片对象
var Obj=document.getElementById('img');
Obj.src='./img/'+count+'.jpg';
//如果轮播图片结束,我们就从头开始显示图片
if (count===5){
count=0;
}
}
</script>
</head>
<body>
<div class="box">
<img src="./img/1.jpg" id="img"><br/>
<!-- 当前用户点击按钮时,切换图片到下一页-->
<input type="submit" value="下一页" onclick="changeImg()">
</div>
</body>
</html>
点击左上角按钮,全选,或全不选
代码:
<!DOCTYPE HTML >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实现表格全选或不全选</title>
<script>
function checkAll() {
// 1.获取全选框对象
var checkAllEle=document.getElementById('checkAll');
// 获取当前的状态,如果返回true,则代表选中,否则未选中;
// alert(checkAllEle.checked);
// 获取所有叫checkOne的对象
var checkOnes=document.getElementsByName('checkOne');
if (checkAllEle.checked){
for (var i=0;i<checkOnes.length;i++){
checkOnes[i].checked=true;
}
}else{
for (var i=0;i<checkOnes.length;i++){
checkOnes[i].checked=false;
}
}
}
</script>
</head>
<body>
<table style="width: 600px;margin: 0 auto;margin-top: 50px;text-align: center;"border="1px" >
<th style="text-align: center;" colspan="5">
<input type="button" value="添加">
<input type="button" value="删除">
</th>
<tr>
<th><input type="checkbox" id="checkAll" onclick="checkAll()"></th>
<th>编号</th>
<th>姓名</th>
<th>性别</th>
<th>年龄</th>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>2</td>
<td>1</td>
<td>2</td>
<td>2</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>3</td>
<td>3</td>
<td>3</td>
<td>1</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>4</td>
<td>4</td>
<td>1</td>
<td>4</td>
</tr>
<tr>
<td><input type="checkbox" name="checkOne"></td>
<td>5</td>
<td>5</td>
<td>1</td>
<td>5</td>
</tr>
</table>
</body>
</html>
输入城市点击添加城市,会添加到下面的城市列表中。
代码:
<!DOCTYPE HTML >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>动态添加城市</title>
<script>
function addCity() {
// 1.获取要添加的城市的名字
var city=document.getElementById('city').value;
// 2.判断城市是否有值,如果有,则添加到列表中
if (city){
// 3.创建一个关于城市的文本节点
var textnode=document.createTextNode(city); //广州
// 4.创建一个li节点
var liEleNode=document.createElement('li');
// 5.将城市信息添加到li标签里:<li>城市名称</li>
liEleNode.appendChild(textnode);
// 6.将城市列表标签添加到ul标签中
var ulEleNode=document.getElementById('city_ul');
ulEleNode.appendChild(liEleNode);
}else{
alert('城市为空');
}
}
</script>
</head>
<body>
<div class="content">
<form>
<!-- placeholder为提示语-->
<input type="text" name="city" id="city" placeholder="请输入城市">
<input type="button" value="添加城市" onclick="addCity()">
</form>
<!--1.比如要添加深圳到列表中,首先加到li列表中,再添加到ul列表中-->
<ul id="city_ul">
<li>西安</li>
<li>成都</li>
<li>上海</li>
</ul>
</div>
</body>
</html>
onchange 当对象信息改变时执行的内容。
案例:onchange实现省市信息二级联动
第一次选择省份之后,后面选择省份对应的城市
代码:
<!DOCTYPE HTML >
<html lang="en">
<head>
<meta charset="UTF-8">
<title>省市信息二级联动</title>
<script>
function changeCity() {
// 1.如何存储省份和城市之间的关系
// provinces=[['西安’,‘渭南’,‘宝鸡'],['太原','大同','吕梁'],['桂林','南宁']]
var provinces=new Array(3);
provinces[0]=new Array('西安','渭南','宝鸡');
provinces[1]=new Array('太原','大同','吕梁');
provinces[2]=new Array('桂林','南宁');
// 2.获取用户选择的省份
var choiceProvince=document.getElementById('province').value;
// alert(choiceProvince);
// 3.遍历用户选择省份对应的所有城市;
var citys=provinces[choiceProvince];
//先获取到城市,如果之前选择过省份,对多选框中的内容进行清空,即可以直接将长度置为0
var selectcityObj=document.getElementById('city');
selectcityObj.length=0;
// 4.添加所有的城市到select中
for(var i=0;i<citys.length;i++){
// 创建城市的文本节点
var textnode=document.createTextNode(citys[i]);
// 创建option节点对象
var optObj=document.createElement('option');
// 将文本节点添加到option节点中
optObj.appendChild(textnode);
// 获取select节点对象
var selectobj=document.getElementById('city');
selectobj.appendChild(optObj);
}
}
</script>
</head>
<body>
<div class="content">
<form action="#" method="get">
<span>籍贯</span>
<!-- select表示下拉列表-->
<select id="province" onchange="changeCity()"> <!--修改省份时,就会触发并执行函数changeCity的内容-->
<option>...选择省份...</option>
<option name="province" value="0">陕西</option>
<option name="province" value="1">山西</option>
<option name="province" value="2">广西</option>
</select>
<select id="city">
<option>...选择城市...</option>
</select>
</form>
</div>
</body>
</html>
1.基本语法
1)定义变量:var 变量名=''value;
2)判断相等:
==:值是否相等
===:值和类型是否相等
3)判断语句
if(条件){
满足条件做的事情
}else{
不满足条件做的事情
}
4)for循环
for(var i=0;i<count;i++){
循环做的事情
}
5)函数定义
function 函数名(形参1,形参2){
return 返回值;
}
**********js事件
onsubmit-----提交事件
onclick-----点击事件
onfocus------聚焦事件
onblur-----离焦事件
onchange-----当对象信息改变时执行的内容
2.DOM(document object model)
document.getElementByName()--- 返回的是一个列表对象
document.getElementById()---返回的是一个元素对象
document.createTextNode---返回一个文本节点
document.createElement---返回元素
NodeObj.appendChild()---将一个节点对象添加到()中
标签对象的属性信息:
innerHTML---当前标签对象里嵌套的HTML信息
value---用户输入的信息值
checked---判断当前多选框是否被选中
src---获取图片的路径,通过赋值方式实现修改图片路径