内嵌式：
理论上js可以书写在页面的任意位置。
<script>
alert("内嵌式")
</script>
外链式：
首先新建一个文件类型为.js的文件，然后在该文件中写js语句，通过script标签对引入到html页面中。
<script src="js文件路径地址">这里不能写js语句</script>
function 函数名(形式参数){函数体}
调用函数：函数名(实际参数);
轮播图：window.setInterval(匿名函数, 时间毫秒数);
在指定的时间毫秒数间隔，不断地调用第一个参数传入的函数
1. 由于js中的小数和整数都是number类型，不存在类似整数除以整数还是整数的结论。
2. 字符串和其他的数据使用+号运算，会连接成一个新的字符串。
3. 字符串使用除了+以外的运算符：如果字符串本身是一个数字，那么会自动转成number进行运算
，否则就会返回一个NaN的结果，表示这不是一个数字。NaN：not a number
4. == 仅仅对内容进行比较，=== 比较内容的同时还对数据类型进行比较
<script>
alert(1234 / 1000 * 1000); // 1234
var s = "12";
s -= 10;
alert(s); // 2
var s = "aa";
s -= 10;
alert(s); // NaN Not a Number 不是一个数字
var s = "12";
s += 10;
alert(s); // 因为使用的是+号运算符，所以是将字符串进行连，连接成为：1210
</script>
onload 某个页面或者图像被加载完成
onsubmit 表单被提交时触发，事件源是form
onclick 鼠标点击某个对象
onblur 元素失去焦点，通常针对表单元素
onfocus 元素获得焦点，通常针对表单元素
onchange 用户改变域的内容，通常针对表单元素
onmouseover 鼠标被移动到某元素上
onmouseout 鼠标从某元素上移开
使用字面量方式创建Object
var box = { //字面量方式
name : '李四', //创建属性字段
age : 28
};
h1[0].innerHTML = arr[index];将h1标签处改为arr[index]
随机点名
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>随机点名</title>
<style>
body{
text-align: center;
}
</style>
<script>
// 页面加载完成入口
window.onload = function () {
// 1. 获取标签 (数组)
var inputs = document.getElementsByTagName("input");
var h1 = document.getElementsByTagName("h1");
// 1.2 提供一个数组, 存储人名
var arr = ["张三", "李四", "王五", "赵六", "田七", "大八", "九九"];
// 定义一个 timer 变量
var timer;
// 2. 给 `走你` 按钮绑定单击事件
inputs[0].onclick = function () {
// 定时器的 bug, 开启新定时器之前, 必须先关闭就定时器.
window.clearInterval(timer);
// 3. 循环定时器
timer = window.setInterval(function () {
// 4. 生成一个随机下标
var index = window.parseInt(Math.random() * arr.length + "");
// 5. 根据下标取出对应的名称, 更换 h1 标签中的内容.
h1[0].innerHTML = arr[index];
}, 30);
}
// 给 `停止` 按钮绑定单击事件
inputs[1].onclick = function () {
window.clearInterval(timer);
}
}
</script>
</head>
<body>
<input type="button" value="走你！" />
<input type="button" value="停止！" />
<h1>等待抽奖！</h1>
</body>
</html>
1.转换函数
window.parseInt将一个字符串类型，转换成一个整型，如果一个字符串包含非数字部分，那么parseInt函数会从首字母开始读取数字字符，一旦发现非数字字符，马上停止或区内容
window.parseFloat将一个字符串转换成小数
window.isNaN在转换前判断字符串是否是一个数字
2.编码解码函数
window.encodeURI(URIstring),可以将字符串作为URI进行编码
window.decodeURI(URIstring),可对encodeURI编码过的函数进行解码
1.bom对象：
Screen对象：里面存放着有关显示浏览器屏幕的信息。
Window对象：表示一个浏览器窗口或一个框架。
Navigator对象：包含的属性描述了正在使用的浏览器。
History对象：保存浏览器历史记录信息。
Location对象：Window对象的一个部分，可通过window.location属性来访问。
2.window对象:
bom的核心对象是window，它表示浏览器的一个实例，window对象处于js结构的最顶层，对于每个打开的窗口，系统都会自动为其定义window对象
3.结构：
最顶层：window
第二层：document、frames、history、location、navigator、screen
第三层(属于document)：anchors、forms、images、links、location
4.
警告框alert()
<script>
alert("Hello World!");
</script>
确认框confirm()
<script>
var result = window.confirm("亲爱的,你真的决定要离开我吗?");
window.alert("result = " + result);
</script>
提示框prompt()
<script>
var result = window.prompt("请输入您的姓名");
window.alert("result = " + result);
</script>
5. history对象
<h1>a页面</h1>
<a href="b.html">b页面</a>
<input type="button" value="前进" οnclick="window.history.forward()">
<h1>b页面</h1>
<a href="c.html">c页面</a>
<input type="button" value="后退" οnclick="window.history.back();">
<body>
<h1>c页面</h1>
<input type="button" value="回到a页面" οnclick="window.history.go(-2);">
1. 概述
html文档加载到浏览器内存后，我们认为形成了一颗DOM树、而任何一个html标签、标签属性、和文本都是这个树上的节点元素
2. 获取id
document.getElementById("ID名");
3. 获取name值
document.getElementsByName("name名"); 返回指定name值的对象集合
4. 获取类名
document.getElementsByClassName("class名"); 返回指定class名的对象集合
5. 获取标签名
document.getElementsByTagName("标签名"); 返回指定标签名的对象集合
6. 获取标签内容
element.innerHTML; 获取标签内部的所有内容，包含格式
element.innerText; 获取标签内部的文本内容
7. 节点/元素的操作：
hasChildNodes(); 判断是否含有子节点，返回true或false
remove(); 删除当前标签对象，等同于自杀
removeChild(childElement); 通过父标签对象删除子标签对象
parentElement 父标签对象
replaceChild(newChild, oldChild)替换父节点下的子节点，注意：需要使用父节点对象调用该方法
document.createElement("tagName"); 创建标签对象
appendChild(newChild); 向父标签内部末尾处追加子节点
element.getAttribute("name") 或者 element.属性名 :获得属性的值
element.setAttribute("name","value")：设置属性的值。以直接采用element.属性名通过单等号来赋值
element.removeAttribute("name"); 删除某个属性
<body>
<table id="table" border="1" width="100%" align="center" style="text-align: center;">
<tr>
<td colspan="5" align="left">
<input id="uncheckBtn" type="button" value="全不选" />
<input id="reverseBtn" type="button" value="反选" />
</td>
</tr>
<tr>
<th>全选<input id="all" type="checkbox" /></th>
<th>分类ID</th>
<th>分类名称</th>
<th>分类描述</th>
<th>操作</th>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect" /></td>
<td>1</td>
<td>手机数码</td>
<td>手机数码类商品</td>
<td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect" /></td>
<td>2</td>
<td>电脑办公</td>
<td>电脑办公类商品</td>
<td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect" /></td>
<td>3</td>
<td>鞋靴箱包</td>
<td>鞋靴箱包类商品</td>
<td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
</tr>
<tr>
<td><input type="checkbox" class="itemSelect" /></td>
<td>4</td>
<td>家居饰品</td>
<td>家居饰品类商品</td>
<td><a href="javascript:;">修改</a>|<a href="javascript:;">删除</a></td>
</tr>
</table>
</body>
<script>
window.onload = function () {
// 需求 : 全选
// 1.1 获取全选按钮的选择框元素
var all = document.getElementById("all");
// 1.2 获取所有的 itemSelect 标签
var itemSelects = document.getElementsByClassName("itemSelect");
// 2. 给全选按钮绑定单击事件
all.onclick = function () {
// 3. 获取全选按钮的当前状态属性值
// var checked = all.getAttribute("checked"); 不适用
var checked = all.checked;
// alert("checked = " + checked);
// 4. 遍历 itemSelects 数组
for (var i = 0; i < itemSelects.length; i++) {
itemSelects[i].checked = checked;
}
}
// 需求 : 全不选
var uncheckBtn = document.getElementById("uncheckBtn");
uncheckBtn.onclick = function () {
for (var i = 0; i < itemSelects.length; i++) {
itemSelects[i].checked = false;
}
all.checked = false;
}
// 需求 : 反选
var reverseBtn = document.getElementById("reverseBtn");
reverseBtn.onclick = function () {
// 定义一个 count 计算器
var count = 0;
// 遍历 itemSelects 数组
for (var i = 0; i < itemSelects.length; i++) {
// 方式一 : 判断
if (itemSelects[i].checked == true) {
itemSelects[i].checked = false;
} else {
itemSelects[i].checked = true;
// 计算为 true 的数量
count++;
}
// 方式二 : 取反
// itemSelects[i].checked = !itemSelects[i].checked;
// 方式三 : 让 checkbox 被点击一下. 方法: click();
// itemSelects[i].click();
}
// 遍历结束后, 实现判断
if (count == itemSelects.length) {
all.checked = true;
} else {
all.checked = false;
}
}
}
</script>
<script>
window.onload = function () {
// getElementsByTagName(tr标签);
// 1. 获取所有的 tr 标签
var trs = document.getElementsByTagName("tr");
// alert("trs.length = " + trs.length);
// 定义一个 color 属性
var color;
// 2. 遍历 trs 数组
for (var i = 2; i < trs.length; i++) {
// 3. 判断
if (i % 2 == 0) {
trs[i].style.backgroundColor = "yellow";
} else {
trs[i].style.backgroundColor = "skyblue";
}
// 4. 为每一行绑定一个 `鼠标移入 onmouseover` 事件
trs[i].onmouseover = function () {
// 记录当前行颜色
color = this.style.backgroundColor;
// trs[i].style.backgroundColor = "#ccc"; // 行不通. (在函数内部不能使用循环变量 i)
// 当前行实现变色
this.style.backgroundColor = "#ccc";
}
// 5. 为每一行绑定一个 `鼠标移出 onmouseout` 事件
trs[i].onmouseout = function () {
this.style.backgroundColor = color;
}
}
}
</script>
<body>
<select id="province">
<option value="none">--请选择省--</option>
<option value="0">北京市</option>
<option value="1">上海市</option>
<option value="2">广州市</option>
</select>
<select id="city">
<option value="none">--请选择市--</option>
</select>
</body>
<script>
window.onload = function () {
// 1. 先准备区县的数组
var cities = [
["朝阳区", "海淀区", "丰台区", "昌平区", "西城区", "东城区", "通州区", "大兴区"],
["浦东新区", "闵行区", "静安区", "徐汇区", "杨浦区", "嘉定区", "黄埔区"],
["白云区", "天河区", "花都区", "番禺区"]
];
// 2. 获取 `省` 和 `市` 的标签
var province = document.getElementById("province");
var city = document.getElementById("city");
// 3. 监听省份发生更改事件
province.onchange = function () {
// 注意: 清除 `区县` 信息
city.innerHTML = "<option value=\"none\">--请选择市--</option>";
// 4. 获取 `省份` 对应的value数值
var index = province.value;
// 5. 根据获取的 index, 遍历 cities 二维数组中对应的 `一维数组`.
for (var i = 0; i < cities[index].length; i++) {
// 方式一 : innerHTML
city.innerHTML += "<option value=\"none\">"+ cities[index][i] +"</option>";
}
}
}
</script>
<img src="../img/top_banner.jpg" width="100%" id="img" style="display: none;"/>
(注意: 图片直接设置单次定时器, 无需绑定事件)
<script>
window.onload = function () {
// 需求 : 获取 img 标签, 修改 display 属性. (none 不显示 / block 显示)
// 1. 获取 img 标签
var img = document.getElementById("img");
// 2. 单次定时器
window.setTimeout(function () {
// 3. 修改 img 的 display 属性
img.style.display = "block";
// 嵌套一个单次定时器
window.setTimeout(function () {
img.style.display = "none";
}, 2000);
}, 2000);
}
</script>
<body>
<form action="#" method="get" id="myForm">
用户名: <input type="text" name="username" id="username"/> <br />
密码: <input type="password" name="password" id="password" /> <br />
<input type="submit" value="提交"/>
</form>
</body>
说明: 需要为 form 表单绑定提交事件. form.onsubmit 事件
alert("用户名不能为空.");
alert("密码不能为空.");
alert("密码长度不能小于8位.");
<script>
window.onload = function () {
// 说明 : 表单是否能够被提交, 取决于 onsubmit 事件, 该事件默认值为 true.
// 1. 获取表单元素
var myForm = document.getElementById("myForm");
// 1.2 获取用户名和密码标签
var username = document.getElementById("username");
var password = document.getElementById("password");
// 2. 给表单绑定 `onsubmit` 事件
myForm.onsubmit = function () {
// alert(username.value + " : " + password.value);
// 判断
if (username.value.trim() == "") {
alert("用户名不能为空.");
} else if (password.value.trim() == "") {
alert("密码不能为空.");
} else if (password.value.trim().length < 8) {
alert("密码长度不能小于8位.");
} else {
return true;
}
return false;
}
}
扫一扫
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
