javaScript
javascript：简称js，基于对象和事件驱动并且具有一定验证的在客户端运行的脚步语言(能够直接用记事本打开的)。对象：html中的标签（dom对象）
事件驱动：由html中的某个对象触发一个动作，完成某个特定的业务处理
客户端：由用户去访问服务器的电脑
脚步语言：不需要预编译，一遍编译一遍执行的语言
js是一个客户端的编程语言
作用:完成某些动态效果,可以减轻服务器的验证压力
语法
变量
<script type="text/javascript">
// js是一个弱类型的语言，java是强类型的语言（定义变量是需要指定变量的数据类型）
// 变量的声明
var name;
// 变量的赋值
name = "张三";
console.log(name);
// 变量初始化
var name = "李四";
console.log(name);
var age = 18;
var shengao = 180.2;
var flag = false;
var sex = '男女';
var aaa = null;
var bbb;
console.log("name:" + name + ",age:" + age + ",shengao:" + shengao + ",flag:" + flag + ",sex:" + sex)
// 获取变量的类型：typeof（NaN[不是数字]）
console.log("name:" + typeof(name)); // string
console.log("shengao:" + typeof(shengao)); // number
console.log("age:" + typeof(age)); // number
console.log("flag:" + typeof(flag)); // boolean
console.log("sex:" + typeof(sex)); // string
console.log("aaa:" + typeof(aaa)); // object
console.log("bbb:" + typeof(bbb)); // undefined:变量未赋值
</script>
运算符
<script type="text/javascript">
// 算数运算符:+、-、/、*、%
var number = 10;
var number2 = 20;
// 求和
var sum = number + number2;
console.log(number + "+" + number2 + "=" + sum);
// 赋值运算符：=、+=、-=、*=、/=
number += number2;
console.log("number=" + number);
// 比较运算符：==、>=、<=、!=、>、<、===
var aaa = null; // 未赋值，object
var bbb; // 未赋值，undefined
console.log(aaa == bbb); // 比较的内存中的值
console.log(aaa === bbb); // 比较的内存中的值、比较数据类型
var x = 12;
var y = "12";
console.log(x == y);
console.log(x === y);
// 逻辑运算符：&&、||、!
// 三元运算符
var sex = 'y';
var text = sex == 'm' ? "男" : "女";
console.log(text);
</script>
条件语句
js中的分支和java中语法一样(switch\if\for\while\do…while)
数组
<script type="text/javascript">
// 数组定义
var array = new Array(); //定义了一个数组，在js中不要给数组指定长度
// 给数组中的元素进行赋值
array[0] = "张三";
array[1] = 23;
array[2] = true;
array[7] = "李四";
// 获取数组的元素
console.log(array[0]);
console.log(array[1]);
console.log(array[2]);
console.log(array[7]);
console.log("=====================")
// 循环获取数组中的值
for (var i = 0; i < array.length; i++) {
console.log(array[i]);
}
console.log("=====================")
// index是下标，不是元素对象，过滤掉所有为undefined的元素
for (var index in array) {
console.log(index + "=====" + array[index]);
}
</script>
函数
<script type="text/javascript">
// 函数相当于java中的方法
/*
语法：
function 函数名([参数名,参数名2]){
[return 值;]
}
调用：
[var result =] 函数名([值,值2]);
*/
// 无参数无返回值的函数
// 定义的函数
function sum() {
console.log(1 + 2);
}
// 调用
sum();
// 在js中如果有两个函数名相同，后面的函数会将前面的函数覆盖（js中不存在方法的直接重载）
// 有参数无返回值的函数
// function sum(number, number2) {
// console.log(number + number2);
// }
// 有参数无返回值的函数
function sum2(number, number2) {
console.log(number + number2);
}
// 调用
sum2(12, 45);
// 有参数有返回值的函数
function sum3(number, number2) {
return number + number2;
}
// 调用
var result = sum3(45, 23);
console.log(result);
// 调用
var x = 12;
var u = 34;
var result = sum3(x, u);
console.log(result);
// 匿名函数(绑定事件)
var abc = function() {
return 234;
}
console.log(abc);
</script>
事件
事件：由页面的html对象触发某个动作，完成一个功能
事件的3要素：由谁去触发事件（html对象） 什么事件（事件的类型） 完成什么功能（一段js代码，一般为函数）
实现方式：
<标签名 onXXXX="函数名()" />
function 函数名(){
}
事件类型：
onclick：单击事件
onmouseover：鼠标移入
onmouseout：鼠标移除
onfocus：获得到光标
onblur：失去光标
onchange(select)
onsubmit(form)
<head>
<script type="text/javascript">
function showText() {
console.log("username获取到光标");
// 获取输入框（username） 的value
// document: dom对象
// getElementById()：通过标签的id值，获取标签对象
var userNameObject = document.getElementById("username"); // 数据类型：HTMLInputElement
// alert(userNameObject);
// userNameObject.value：获取输入框的value值
var userNameValue = userNameObject.value;
// alert(userNameValue);
if (userNameValue == "admin") {
// userNameObject.value在=的左边时，是将=右边的值赋给输入框的value
userNameObject.value = "";
}
}
function showText2() {
console.log("username失去光标");
// 如果输入框中的value为""，name给输入框赋一个默认值(admin)
// 1.获取输入框对象
var userNameObject = document.getElementById("username");
// 2.获取输入框的value
var userNameValue = userNameObject.value;
// 3.判断value的值
if (userNameValue == "") {
// 4.如果满足要求给输入框赋值
userNameObject.value = "admin";
}
}
function changeValue() {
// 获取下拉列表的值
var sheng = document.getElementById("sheng").value;
alert(sheng);
}
function showFrm() {
// 防止表单提交
// return false;// 返回false，表单不提交
// return true;// 返回true，表单提交
}
</script>
</head>
<body>
<!-- 当按钮点击时，弹出对话框 -->
<!-- <input type="button" value="按钮" οnclick="alert('单击事件');" /> -->
<!-- return showFrm():防止表单提交 -->
<form action="#" method="get" onsubmit="return showFrm()" id="myFrm">
<input type="button" value="按钮" onclick="show()" /><br>
<img src="img/img1.png" onmouseover="showImg()" onmouseout="showImg2()" /><br>
<input type="text" name="username" value="admin" id="username" onfocus="showText()" onblur="showText2()" /><br />
<input type="password" name="pwd" id="pwd" onfocus="showText()" onblur="showText2()" /><br />
<select name="sheng" id="sheng" onchange="changeValue()">
<option value="湖北">湖北</option>
<option value="湖南">湖南</option>
<option value="河南">河南</option>
</select><br />
<input type="submit" value="提交" />
</form>
</body>
正则
username是小写字母
内容是字母规则：[a-z]
^：正则表达式开始
：
正
则
表
达
式
结
束
n
：
正
表
达
式
规
则
匹
配
的
n
次
n
,
：
正
表
达
式
规
则
匹
配
的
n
次
到
无
限
次
n
,
m
：
正
表
达
式
规
则
最
少
匹
配
n
次
，
最
多
匹
配
m
次
∣
：
或
者
(
)
：
子
表
达
式
：
在
[
]
中
，
那
么
是
非
，
相
当
于
!
v
a
r
r
e
g
=
/
[
a
−
z
]
/
;
/
/
只
要
u
s
e
r
n
a
m
e
中
有
小
写
字
母
就
是
符
合
要
求
的
v
a
r
r
e
g
=
/
[
a
−
z
]
：正则表达式结束 {n}：正表达式规则匹配的n次 {n,}：正表达式规则匹配的n次到无限次 {n,m}：正表达式规则最少匹配n次，最多匹配m次 |：或者 ()：子表达式 ^：在[]中，那么^是非，相当于! var reg = /[a-z]/;// 只要username中有小写字母就是符合要求的 var reg = /^[a-z]
：正则表达式结束n：正表达式规则匹配的n次n,：正表达式规则匹配的n次到无限次n,m：正表达式规则最少匹配n次，最多匹配m次∣：或者()：子表达式：在[]中，那么是非，相当于!varreg=/[a−z]/;//只要username中有小写字母就是符合要求的varreg=/[a−z]/;//username的长度为1，内容要是小写的字母
var reg = /1{1,}KaTeX parse error: Undefined control sequence: \w at position 56: … var reg = /^\̲w̲{4}(com|cn)/;
验证
console.log(reg.test(username));
js对象组成
Ecmascript：基础语法、基础对象（Date、Math）
DOM对象：body中的html标签对象(html元素)
BOM对象：浏览器对象（window、history、location、dom），由大家使用的浏览器去实例化
location、hostory对象
Location：地址栏对象，就是window中的location属性
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function next() {
// history.forward();历史记录下一页
window.history.go(1);//go(-1)上一页
}
function getUrl() {
location.href = "2.2localhost、hostory.html";//跳转
}
function reload() {
// 刷新页面
location.reload();
}
</script>
</head>
<body>
<button onclick="reload()">刷新</button>
<a href="javascript:void(0)" onclick="getUrl()">2.2</a>
<a href="javascript:void(0)" onclick="next()">下一页</a>
</body>
Hostory：历史记录对象，是window中的hostory属性
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function backOne() {
// window.history.back(); // 上一页
window.history.go(-1);
}
</script>
</head>
<body>
<a href="javascript:void(0)" onclick="backOne()">上一页</a>
</body>
window常用方法
// 打开一个新的窗口
window.open(“1.弹框.html”,“open”,“height=300px,width=200px,top=20px,left=30px”);
// 关闭窗口
window.close();
document.write(“hello”);页面输出()中的内容
setTimeout：过多少秒调用一次方法
setInterval：间隔多少秒调用一次方法
clearTimeout：停止某个setTimeout方法
clearInterval：停止某个setInterval方法
function showTime() {
var date = new Date();//得到当前时间
var year = date.getFullYear();//年
var month = date.getMonth();//月
var day = date.getDate();//日
var hour = date.getHours();//时
var minutes = date.getMinutes();//分
var second = date.getSeconds();//秒
}
通过document获取对象
<script type="text/javascript">
function show() {
// 通过Id：获取单个的元素
var userName = document.getElementById("username");
// 获取元素的value值
var usernamevalue = userName.value;
alert("账号：" + usernamevalue);
// 通过name获取元素
var aihao = document.getElementsByName("aihao");
// alert(aihao[0].value);
for (var i = 0; i < aihao.length; i++) {
var ai = aihao[i];
if (ai.checked == true) {
alert(ai.value);
}
}
// 通过标签名获取元素
var inputes = document.getElementsByTagName("input");
for (var i = 0; i < inputes.length; i++) {
var input = inputes[i];
alert(input.value);
}
}
</script>
通过标签层次结构获取对象
<script type="text/javascript">
/**
*根据节点层次关系获取节点（属性 不是方法）
parentNode：返回节点的父节点
childNodes：返回子节点集合,childNodes[i]
firstElementChild：返回节点的第一个子节点，最普遍的用法是访问该元素的文本节点
lastElementChild： 返回节点的最后一个子节点
nextElementSibling：下一个节点
previousElementSibling：上一个节点
*/
function show() {
var li = document.getElementById("zhiling");
var parentNode = li.parentNode;
alert(parentNode);
}
</script>
操作dom对象的属性
function changerImg(type) {
// 1.获取img对象
var img = document.getElementById("image");
if (type == 0) { // 判断触发事件的按钮是哪一个,type=0==>我和狗狗一起活下来
// 2.给img对象设置src属性值
img.setAttribute("src", "img/dog.jpg");
img.setAttribute("alt", "我和狗狗一起活下来");
} else { // 判断触发事件的按钮是哪一个,type=1==>灰霾来了怎么办
// 2.给img对象设置src属性值
img.setAttribute("src", "img/mai.jpg");
img.setAttribute("alt", "灰霾来了怎么办");
// 2.获取img对象的alt属性
console.log(img.getAttribute("alt"));
}
}
节点操作
<script type="text/javascript">
function changeImg() {
// 1.创建img元素对象
// createElement("标签名"):是document
var img = document.createElement("img"); // createElement:属于document对象的方法
img.setAttribute("src", "img/dog.jpg");
// 2.将img元素对象追加到标签中,才会在浏览器中显示
// appendChild(元素对象):元素对象的函数,将创建的元素对象追加到元素对象的最后,不会覆盖之前的内容,创建的元素为元素对象的子元素
// document.getElementById("imgDiv").appendChild(img);
var div = document.getElementById("imgDiv");
// insertBefore(newnode,oldnode):oldnode的父级节点来调用insertBefore,将newnode插入到oldnode之前
div.parentNode.insertBefore(img, div);
}
</script>
<script type="text/javascript">
function del() {
var delNode = document.getElementById("first");
// remove():删除当前的节点对象
delNode.remove();
}
function rep() {
var newImg = document.createElement("img");
newImg.setAttribute("src", "img/f03.jpg");
var oldImg = document.getElementById("second");
// replaceChild(oldnode,newnode):给oldnode的父节点中的子节点（oldnode）替换节点对象(newnode)
oldImg.parentNode.replaceChild(newImg, oldImg);
}
</script>
操作table
<script type="text/javascript">
function insertTr() {//添加行
// HTMLTableElement
var table = document.getElementById("userTable"); // 获取id为userTable的HTMLTableElement对象
console.log(typeof(table) + table);
console.log(table);
// 获取table中所有的行
var trs = table.rows; // table.rows:tr的集合
console.log(trs);
// 获取table中某一行所有的单元格
var trCell = trs[0].cells;
console.log(trCell);
// 在table中添加一行
var tr = table.insertRow();
// 在tr中添加td(单元格)
tr.insertCell().innerHTML = "aaa";
tr.insertCell();
}
function deleteTr() {
// HTMLTableElement
var table = document.getElementById("userTable"); // 获取id为userTable的HTMLTableElement对象
// 删除第二行
table.deleteRow(1);
}
</script>
a-z ↩︎
1830
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
