王庆召_20210115 王庆召
一、知识点总结
1、BOM编程
1.1 概念
BOM：Browser Object Model 浏览器对象模型
1.2 BOM常用的对象
<div id="box" class="box" name="box">我是网页内容</div>
<div id="box" class="box" name="box">我是网页内容111</div>
<script type="text/javascript">
// 获取元素 document 网页
// 根据 id 获取一个元素
var box = document.getElementById("box");
// 根据 class 获取元素, 只要 class 包含即可
var divs = document.getElementsByClassName("box");
// 根据 name 获取元素
var names = document.getElementsByName("box");
// 根据标签名 获取元素
var div = document.getElementsByTagName("div");
// 根据 选择器 选择 一个元素
var element = document.querySelector("#box");
// 根据 选择器 选择 所有元素, 返回的一定是数组
var elements = document.querySelectorAll(".box");
1.3 location 对象
1.3.1 常用属性
- 获取href属性，获得当前地址栏访问的地址
- 设置href属性，用于页面的跳转，跳转到一个新的页面
1.3.2 location方法
代表浏览器的地址栏对象
1.4 查找结点的方法
ody>
<input type="button" value="(通过标签名)给a链接添加地址" id="b2" />
<input type="button" value="(通过name属性)给div设值" id="b3" />
<input type="button" value="(通过类名)给div设值" id="b4" />
<hr />
<a>百度一下</a><br />
<a>百度一下</a><br />
<a>百度一下</a><br />
<hr />
<div name="one"></div>
<div name="one"></div>
<div name="one"></div>
<hr />
<div class="two"></div>
<div class="two"></div>
<div class="two"></div>
<script type="text/javascript">
window.onload = function() {
//根据标签名找元素
var b2 = document.getElementById("b2");
b2.onclick = function() {
//返回的是一个数组对象
var aNodes = document.getElementsByTagName("a");
for (var index = 0; index < aNodes.length; index++) {
aNodes[index].href = "http://www.baidu.com";
}
}
//根据name的属性值找
var b3 = document.getElementById("b3");
b3.onclick = function() {
//根据name的属性值找元素，返回一个数组对象
var divs = document.getElementsByName("one");
for (var index = 0; index < divs.length; index++) {
divs[index].innerHTML = "<a href='#'>我是一个程序员</a>";
}
}
1.5 创建元素结点的方法
1.6 js操作CSS样式
1.6.1方式一
.style.样式名 = "样式值"
1.6.1方式二
.className = "类名";
1.7表单校验
String对象是JavaScript中最常见的对象之一。用户在表单中输入的数据默认都是String类型。 JavaScript对String类型的数据提供了丰富的操作API。下表是String类常用的方法，字符串以“I Love This Game！！！”为例：
1.8 正则表达式
1.8.1 元字符
元字符是构成正则表达式最基本的部分，主要的元字符如下表所示
1.8.2 重复(量词)
正则表达式验证字符出现的次数，是通过重复限定符来实现的。常用的重复限定符如下表所示
1.8.3 范围
方括号用于查找某个范围内的字符
1.8.4修饰符
修饰符用于执行区分大小写和全局匹配:
1.9 实例代码 选择
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<input type="checkbox" name="item" value="99">a
<input type="checkbox" name="item" value="66">b
<input type="checkbox" name="item" value="250">c
<input type="checkbox" name="item" value="9.9">d
<input type="checkbox" name="item" value="996">e
<hr />
<input type="checkbox" id="sel" onclick="checkAll()" >全选/全不选
<button onclick="choic()">反选</button>
<button onclick="clearCount()">结算</button>
<br />
结算：<span class="count">0</span>元
<script type="text/javascript">
var check = document.querySelectorAll("[name=item]");
var checkal = document.querySelector("#sel")
var k = 0;
function checkAll(){
for (var i = 0; i < check.length; i++) {
check[i].checked = checkal.checked;
}
}
function choic(){
for (var i = 0; i < check.length; i++) {
check[i].checked = !check[i].checked;
}
}
function clearCount(){
var sum = 0
var sp = document.querySelector(".count")
for (var i = 0; i < check.length; i++) {
if (check[i].checked == true) {
var sumCount = Number(check[i].value);
sum = sum + sumCount ;
}
}
sp.innerText = sum;
}
</script>
</body>
</html>
1.10 实例代码 鼠标单击事件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
.bg {
background-color: #16c79a;
}
.cg{
background-color: #96bb7c;
}
/* table tr:nth-child(even) {
background: #ccc;
} */
tr{
text-align: center;
}
</style>
</head>
<body>
<button onclick="addClass()">添加样式</button>
<table border="1" cellspacing="0" cellpadding="0" class="a" width="500px">
<tr>
<th>序号</th>
<th>姓名</th>
<th>性别</th>
</tr>
<tr>
<td>1</td>
<td>张三</td>
<td>男</td>
</tr>
<tr>
<td>2</td>
<td>李四</td>
<td>男</td>
</tr>
</table>
<script>
// 获取到元素
var table = document.querySelector("table");
var str = document.querySelector("table").querySelectorAll("tr")
for (var i = 0; i < str.length; i++) {
if (i != 0) {
str[i].onmouseover = function() {
this.className = this.className + 'bg'
}
str[i].onmouseout = function() {
this.className = ''
}
}
}
function addClass() {
table.className = table.className + " cg";
console.log(table.className);
}
</script>
</body>
</html>
1.11 鼠标点击特效
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript">
var html = document.querySelector("html")
window.addEventListener("click", heart, false);
function heart(e) {
var fontsize = 16;
// 确定显示的位置,
var left = e.clientX - fontsize / 2;
var top = e.clientY - fontsize / 2;
// 向页面添加元素
var b = document.createElement("b")
// 向元素中添加要显示的内容
var a = new Array("富强","民主","文明","和谐","自由","平等","公正","法治","爱国","敬业","诚信","友善")
var cont = Math.floor((Math.random()*12)+0);
// b.innerText = "♥";
b.innerText = "♥"+a[cont] +"♥";
b.style = "font-size:"+fontsize+"px;color:"+randColor()+";position:absolute;left:"+
left+"px;top:"+top+"px;opacity:1";
document.body.appendChild(b);
var timer = setInterval(function(){
var top = b.style.top.replace("px","");
b.style.top = top - 1 + "px";
b.style.opacity -= 0.05;
if (b.style.opacity < 0) {
document.body.removeChild(b);
clearInterval(timer);
}
}, 100)
}
function randColor(){
//~~的作用是去掉小数部分
return "rgb(" + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + "," + ~~ (255 * Math.random()) + ")";
}
</script>
</body>
</html>
二、心得体会
- JavaScript的学习需要多多练习和多多的运用；
- js这块知识也需要对于一些属性和方法去记忆，以便更灵活的应用；
- 在写代码的时候，要利用好浏览器的调试窗口，去调试代码。
点赞
评论