一、先谈HTML
网页有架构，样式，行为三大组成
架构由html决定，样式由css决定，行为由JavaScript决定
html是超文本标记语言
DOCTYPE html5的声明
二、JavaScript
（一）书写js代码的两种方式：
1、js可以写在HTML中的script标签中
2、还可以通过script标签引入外部js文件，例如<script src="aaa.js"></script>
用于导入的script标签不能写js代码。
（二）JavaScript变量：
数值类型：number
value = 15;
字符串类型：string
value = “adfja”;
对象类型：object
value = new Object();
布尔类型：boolean
value = true;
函数类型：function
var value2 = function (){};
var可以接受任意数据类型
typeof函数用于查看js变量的数据类型
变量声名后未赋值会显示undefined，即未定义
（三）逻辑运算：&&
在js中，只有undefined，false，null ，0 四种情况下逻辑为假
与运算：
1、js的与运算，多个变量同时为true时，会取到最后者的值；
2、多个变量与运算时，一者为假时，取到为假的值。
3、两者同时为假时，会取到后者的值
或运算：||
从左到右判断变量是否为真，遇到真立即输出，若全部为假，则输出最后一个值。
取反运算：！
在变量前加！ ，取反
（四）数组定义方式
由于js是弱类型语言，所以js的数组可以存放不同类型的变量
格式1： var 数组名 = [] //空数组
格式2：:var 数组名 = [1，true，“fafa”] //定义数组并赋值
var array = [];
array[0] = 10;
//[object Object] 对象类型
array[10] = new Object();
赋值时，如上面代码，数组长度为最大下标值加1，即为11，中间未赋值的默认取defined。
（五）函数
函数的两种定义方式
1、function 函数名（）{} //无参函数
//无参函数
function get(){
alert("有参函数")
}
//调用函数
get();
function 函数名（直接写变量名，不用写数据类型）{} //有参函数
function get(num){
alert(num);
}
get("jfaj")
下面这个代码中，变量相加，如果变量都是数值类型，则相加，其他情况时则是字符串拼接。
function getMethod(num1,num2){
var num = num1 + num2;
alert(num);
}
getMethod(100,"agdfa");
如何给js函数指定返回值类型
直接在函数中写return
2、第二种函数定义方式
var fun1 = function (){
}
fun1();
文本就绪函数：浏览器加载页面完成，文本都解析完毕后执行的函数。执行顺序在最后 。因为浏览器解析HTML代码是一行一行往下解析的，所以需要获取标签对象的代码需要写在文本就绪函数中，不然获取不到。
//jquery版本的文本就绪函数
$(function(){
//执行的内容
});
$().ready(function(){
//执行的内容
});
$(document).ready(function(){
//执行的内容
});
在js中，不支持函数/方法的重载，如果定义了相同的方法，后者会将前者覆盖掉
有参函数调用时，可以不传参数，参数默认为defined。
无参函数调用时，也可以传参数，语法不会报错，能正常执行。这是因为js无参函数中有隐式参数arguments，是一个可变长的参数，存在于当前js函数的形参列表。如果想要调用传入的参数，就用数组形式。
//arguments js中的隐式参数，是一个可变长参数
var fun1 = function (){
alert(arguments[0]);
alert(arguments[1]);
alert(arguments[2]);
}
fun1(55,66,77);
（六）js中的事件
如何绑定js中的事件
1、静态绑定 指的是用html标签内部的事件属性进行事件的注册/绑定
2、动态绑定 一般是指先根据document对象获取标签对象，在根据标签对象操作对应的事件属性。
常用事件：
1）单击事件 onclick
2）失去焦点事件 onblur
3）内容发生改变事件 onchange 常用于下拉列表框（ `<select></select>` ）`<option></option>`是每一个下拉单元
4）表单提交事件 onsubmit 常用于验证表单提交前所有表单项是否合法。
页面加载完成事件的动态绑定
window 指的HTML内置对象
js版本的文本就绪函数
有些成员变量不用声明就可以在JSP页面的脚本（java程序片和Java表达式）中使用，这就是所谓的内置对象。
/* 页面加载完成事件的动态绑定
window 指的HTML内置对象
js版本的文本就绪函数
*/
window.onload = function (){
//动态注册单击事件 1、获取标签对象 2、操作标签对应的属性
//document 也是html内置对象 上下文文本对象
var onclick = document.getElementById("onclick");
//操作标签对应的属性
onclickTest.onclick = function (){//动态注册单击事件
//getMethod02();
}
}
动态注册失去焦点事件 1、获取标签对象 2、操作标签对应的属性
失去焦点事件（onblur）：常用于验证失去焦点后输入内容是否合法
失去焦点和获取焦点是一个鼠标行为，例如当点击数个输入框其中的一个使其处于编辑输入状态的时候就是获得可焦点，当点击其他输入框或者其他区域就会使这个输入框失去焦点
var onblurTest = document.getElementById("onblur");
//[object HTMLInputElement]
//alert(onblurTest)
onblurTest.onblur = function (){//动态注册失去焦点事件
getMethod03();
动态注册内容改变事件 1、获取标签对象 2、操作标签对应的属性
onchange 事件会在域的内容改变时发生。
onchange 事件也可用于单选框与复选框改变后触发的事件。
var onchangeTest = document.getElementById("onchange")
onchangeTest.onchange = function (){//动态注册内容改变事件
alert('内容发生改变');
}
表单提交事件动态绑定
function getMethod05(){
if (undefined){
return true
}else {
return false;
}
}
下面的代码写在<body></body>中
<div> 可定义文档中的分区或节（division/section）。<div> 标签可以把文档分割为独立的、不同的部分
id是唯一标识符，不允许有重复值可以通过它的值来获得对应的html标签对象。相当于人的身份证具有唯一性
id具有唯一性，name可以重复
<!--单击事件静态注册-->
<!--<input type="button" id="onclick" value="测试单击事件" onclick="getMethod02()">-->
<input type="button" id="onclick" value="测试单击事件" >
<div onclick="getMethod02()" style="color: red">
别的标签测试单击事件
</div>
<!--静态注册失去焦点事件-->
<!--测试失去焦点:<input type="text" id="onblur" onblur="getMethod03()">-->
测试失去焦点:<input type="text" id="onblur"><br/>
<!--静态绑定内容改变事件-->
测试内容改变事件:<input type="text" onchange="alert('内容改变事件已触发！！！')"><br/>
<select></select> 下拉列表框
<option></option>每一个下拉单元
<!--
<select></select> 下拉列表框
<option></option>每一个下拉单元
-->
请选出你心目中的男神:
//静态注册内容改变事件测试
<!--<select onchange="alert('内容已改变')" id="onchange">
<option>冯老师</option>
<option>杨靖宇</option>
<option>刘兴源</option>
<option>刘德华</option>
</select>-->
//用于动态所注册内容改变事件测试
<select id="onchange">
<option>冯老师</option>
<option>杨靖宇</option>
<option>刘兴源</option>
<option>刘德华</option>
</select><br>
表单提交事件
//用于静态测试
<!-- 测试表单提交事件:<form action="https://www.jd.com/" id="onsubmit" method="post" onsubmit="return false">
<input type="submit" value="提交">
</form>-->
//用于动态测试
测试表单提交事件:
<form action="https://www.jd.com/" id="onsubmit" method="post" onsubmit="return getMethod05()">
<input type="submit" value="提交">
</form>
6万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
