发表于： 2020-04-14 22:03:39
0 1506
一、今天完成的事情
<script>
window.onload = function () {
alert("真棒")
};//页面加载完成之后执行
alert("666");//先执行
</script>
</head>
<body>
<script>
/*
* DOM
* document object model文档对象模型
*
* 节点
* - Node，构成html文档最基本的单元，网页中的每一个部分都可以称为一个节点
* - 常用节点分为四类
* - 文档节点：整个html文档
* - 元素节点：html文档中的html标签
* - 属性节点：元素的属性
* - 文本节点：html标签中的文本内容
* */
/*
* 获取元素节点
* 通过document对象调用
* 1. getElementById（）
* - 通过id属性获取一个元素节点对象
* 2. getElementsByTagName（）
* - 通过标签名获取一组元素节点对象，这个方法会给我们返回一个类数组对象，所有查询到的元素都会封装到对象中
* - 及时查询到的元素只有一个，也会封装到数组中返回
* 3.getElementsByName（）
* - 通过name属性获取一组元素节点对象
* innerHTML用于获取元素内部的html代码的
* 对于自结束标签没有意义，比如input
* 如果需要读取元素节点属性，直接使用
* 元素.（点）属性名。比如：元素.id 元素.name 元素.value
* 但是注意：class属性不能采用这种方式
* 读取class属性时需要使用 元素.className
* */
</script>
<!--<button id="btn" ondblclick="alert('你点我干嘛！！！')">我是一个按钮</button>-->
<button id="btn">我是一个按钮</button>
<script>
/*
* 浏览器已经为我们提供文档节点对象 这个对象是window属性
* 可以在页面中直接使用，文档节点代表的是整个网页
* */
// console.log(document);
//获取到button对象
// var btn = document.getElementById("btn");
// console.log(btn);
//修改按钮的文字
// btn.innerHTML = "我不是";
</script>
<script>
/*
* 事件，就是文档或浏览器窗口中发生的一些特定的交互行为
* JavaScript与html之间的交互时通过事件完成的
* 比如：点击按钮，鼠标移动，关闭窗口
* */
/*
* 我们可以在事件对应的属性中设置一些JS 代码，这样当事件被触发时，这些代码将会执行
* onclick之类的，这种写法我们称为结构和行为耦合，不方便维护，不推荐使用
* */
var btn = document.getElementById("btn");
console.log(btn);
/*
* 可以为按钮的对应事件绑定处理函数的形式来响应事件
* 这样当事件被触发时，其对应的函数将会被调用
* */
//绑定一个单击事件
//像这种为单击事件绑定的函数，我们称之为单击响应函数
btn.onclick = function () {
alert("你还点!!");
}
/*
* 浏览器在加载一个页面时，是按照自上而下的顺序加载的
* 读取到一行就运行一行，如果将script标签写到页面的上边
* 在代码执行时，页面还没有加载，页面没有加载DOM对象也没有加载
* 会导致无法获取到DOM对象
* 将js代码编写到页面的下部就是为了，可以在页面加载完毕以后再执行js代码
* */
/*
* onload事件会在整个页面加载完成之后触发
* 为window绑定一个onload事件
* 该事件对应的响应函数将会在页面加载完成之后执行
* 这样可以确保我们的代码执行时所有的DOM对象已经加载完毕了
* */
// window.onload = function () {
// alert("真棒")
// }
</script>
<script>
/*
* 获取元素节点的子节点
* 通过具体的元素节点调用
* 1.getElementByTagName（）
* - 方法：返回当前节点的指定标签名后代节点
* 2.childNodes
* - 属性：表示当前节点的所有子节点，会获取包括文本节点在内的所有子节点，根据DOM标签间的空白也会当成文本节点
* 注意：在IE8及以下的浏览器中，不会将空白文本当成子节点，所以该属性在IE8 中只会返回去掉空白文本的子节点
* 3.firstChild（）
* - 属性：表示当前节点的第一个子节点（包括空白文本）
* 4.lastChild（）
* - 属性：表示当前节点的最后一个子节点
* 5.children
* - 属性：可以获取当前元素的所有子元素，不会包括空白文本，推荐使用,比childNodes好使
* 6.firstElementChild
* - 获取当前元素的第一个子元素，不支持IE8及以下的浏览器，如果需要兼容他们尽量不使用
* */
/*
* 获取父节点和兄弟节点
* 通过具体的节点调用
* 1.parentNode
* - 属性：表示当前节点的父节点
* 2.previousSibling
* - 属性，表示当前节点的前一个兄弟节点，也可能获取到空白的文本
* 3.nextSibling
* - 属性：表示当前节点的后一个兄弟节点
* 4. previousElementSibling
* - 属性：表示当前节点的前一个兄弟元素，不包括空白文本，但是IE8及以下不支持
* */
/*
* 定义一个函数，专门用来指定元素绑定单击响应函数
* 参数：
* idStr 要绑定单击响应函数的对象的id的属性值
* fun 事件的回调函数，当单击元素时，该函数将会被触发
* */
function myClick(idStr,fun) {
var btn = document.getElementById(idStr);
btn.onclick = fun;
}
myClick("btn",function () {
})
/*
* innerText
* - 该属性可以获取到元素内部的文本内容
* */
/*
* 文本框中的value属性值就是文本框中填写的属性值
* */
练习
图片轮换
<style>
*{
margin: 0;
padding: 0;
}
#outer{
width: 500px;
margin: 50px auto;
padding: 10px;
background-color: yellowgreen;
text-align: center;
/*
*设置文本居中
*/
}
img{
width: 300px;
}
</style>
<script>
window.onload = function () {
//点击按钮切换图片,要切换图片就是修改img的src
//获取两个按钮
var prev = document.getElementById("prev");
var next = document.getElementById("next");
//获取img标签
var img = document.getElementsByTagName("img")[0];
// alert(img[0]);
// 创建一个数组，用来保存图片的路径
var imgArr = ["1.jpg",'2.jpg','3.jpg'];
//创建一个变量，来保存当前正在显示的图片的索引
var index = 0;
//获取id为info的 p 标签
var info = document.getElementById("info");
//设置提示文字
// info.innerHTML = "一共3张图片，当前第张";
//分别为两个按钮绑定点击响应函数
prev.onclick= function () {
// alert("上一张");
/*
* 切换到上一张，索引自减
* */
index--;
//判断index是否小于0；当小于0时，图片不显示
if (index<0){
index = imgArr.length-1;
}
img.src = imgArr[index];
info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
};
next.onclick = function () {
// alert("下一张");
//切换图片就是修改img的src属性
//要修改一个元素的属性，属性 = 属性值
/*
* 切换到下一张，索引自增
* */
index++;
//判断index是否超出图片的数量，如果超出，图片无法显示
if (index>imgArr.length-1){
index = 0;
}
img.src = imgArr[index];
info.innerHTML = "一共"+imgArr.length+"张图片，当前第"+(index+1)+"张";
};
}
</script>
<body>
<div id="outer">
<p id="info">一共3张图片，当前第1张</p>
<img src="1.jpg" alt="自己">
<button id="prev">< 上一张</button>
<button id="next">下一张 ></button>
</div>
</body>
练习：全选框的点击
<script>
window.onload = function () {
/*
* 全选按钮
* - 点击按钮以后，四个多选框全都被选中
* */
var items = document.getElementsByName("items");
//1.#checkedAllBtn
//为id为checkedAllBtn的按钮绑定一个单击响应函数
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function () {
//获取四个多选框
//遍历items
for (var i = 0; i < items.length;i++){
//设置四个多选框变成选中状态
//通过多选框的checked属性可以来获取或者设置多选框的选中状态
// alert(items[i].checked);
items[i].checked = true;
}
//将全选/全不选设置为选中
checkedAllBox.checked = true;
};
//2.#checkedNoBtn
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function () {
//获取四个复选框，统一放在最上面，节省代码
// var items = document.getElementsByName("items");
//遍历items
for (var j = 0; j <items.length;j++){
//设置四个复选框变成全不选状态
////通过多选框的checked属性来获取或者设置多选框的选中状态
items[j].checked = false;
}
checkedAllBox.checked = false;
};
//3.#checkedRevBtn
//反选按钮：点击按钮之后选中的变成没选中，没选中的变成选中的
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function () {
for (var i = 0;i <items.length;i++){
// //判断多选框状态
// if (items[i].checked){
// //证明多选框已选中，则设置为没选中状态
// items[i].checked = false;
// }else{
// //证明多选框没选中，则设置为选中状态
// items[i].checked = true;
// }
items[i].checked = !items[i].checked;//与上面的判断语句效果一样，这里是选中直接取反
}
//在反选是也需要判断四个多选框是否全都选中
checkedAllBox.checked = true;
for (var j = 0;j<items.length;j++){
//只要有一个没选中就不是全选
if (!items[j].checked){
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked= false;
//一旦进入判断，则已经得出结果，不用再继续判断，对性能进行提升
break;
}
}
};
//4.#sendBtn
//提交按钮：点击按钮以后，将所有选中的多选框的value属性值弹出
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function () {
//遍历items
for (var i = 0;i<items.length;i++){
//判断多选框是否选中
if (items[i].checked){
alert(items[i].value);//选中之后，提交
}
}
};
//5.checkedAllBox
//全选/全不选多选框
//当它选中时，其余的也选中，当他取消时，其余的也取消
//在事件的响应函数中，事件是给谁绑定的this就是谁
//为checkedAllBox绑定单击响应函数
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function () {
//遍历复选框
for (var i = 0;i<items.length;i++){
// if (true){
// items[i].checked = checkedAllBox.checked;
// }else {
// items[i].checked = checkedAllBox.checked;
// }
// items[i].checked = checkedAllBox.checked;//比上面的判断语句简单的多
items[i].checked = this.checked;//更加简单，且用到了this
}
}
//6.items
/*
* 如果四个多选框全都选中，则checkedAllBox也应该选中
* 如果四个多选框没都选中，则checkedAllBox也不应该选中
* */
//为四个多选框分别绑定单击响应函数
for (var i = 0;i<items.length;i++){
items[i].onclick = function () {
//将checkedAllBox设置为选中状态
checkedAllBox.checked = true;
//判断四个多选框是否全选
for (var j = 0;j<items.length;j++){
//只要有一个没选中就不是全选
if (!items[j].checked){
//一旦进入判断，则证明不是全选状态
//将checkedAllBox设置为没选中状态
checkedAllBox.checked= false;
//一旦进入判断，则已经得出结果，不用再继续判断，对性能进行提升
break;
}
}
}
}
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox">全选/全不选
<br/>
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="乒乓球">乒乓球
<br/>
<input type="button" id="checkedAllBtn" value="全 选">
<input type="button" id="checkedNoBtn" value="全不选">
<input type="button" id="checkedRevBtn" value="反 选">
<input type="button" id="sendBtn" value="提 交">
</form>
</body>
二、遇到的困难
就是逻辑的理解问题
三、明天要做的事情
继续学习
四、收获
学习了dom的一系列知识，明天继续学习
返回列表
评论