JavaScript-学习笔记（三）
目录：
1.认识JavaScript与JavaScript基础
2.JavaScript对象（自定义对象与内置对象）
3.浏览器对象（BOM）文档对象模型(DOM)
4.JavaScript事件以及应用
5.JavaScript面对对象与闭包
浏览器对象（BOM）文档对象模型(DOM)
掌握：
- BOM对象的使用
- window-setInterval(定时器)
- window-setTimeout(延时器)
- DOM-查询元素
- DOM-操作元素
工具：
一：BOM对象的使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>BOM对象的使用</title>
</head>
<body>
<script type="text/javascript">
/*
// Bom:Brower Object Model(浏览器对象模型) ,使得Javascript与浏览 器交互的窗口
// 如:浏览器的主要包括 ,
/*
1、Screen(屏幕相关的信息)
2、Location(URL 页面重定向)
3、History(浏览器历史对象)
4、Navigator(浏览器相关信息)
*
* */
// 定义全局变量-可以理解window下的对象
var globalMsg = "hello,javaScript!";
console.log(window.globalMsg);
// 获得window屏幕的信息
console.log('innerWidth:' + window.innerWidth + '==innserHeigth:' + window.innerHeight);
// 获得window.screen信息
console.log('width:' + window.screen.width + '==height:' + window.screen.height);
// 打开新页面
function openPage(){
window.open("new.html","_blank","toolbar=yes, location=yes,directories=no,status=no, menubar=yes, scrollbars=yes, resizable=no");
}
// 跳转页面
function locationPage(){
window.location.href = "new.html";
//window.location.href = 'http://www.baidu.com';
//window.location.assign("http://www.baidu.com");
}
function locationPage2(){
// 重新加载页面
window.location.reload();
}
console.log('浏览器名称：' + window.navigator.appName + ' 浏览器的版本：' + navigator.appVersion + ' 浏览器的设置语言：');
console.log('浏览器的语言：' + navigator.language);
console.log('浏览器操作系统：' + navigator.platform);
console.log('浏览器的当前语言：' + navigator.browserLanguage);
console.log('user-userAgen:' + navigator.userAgent);
</script>
<input type="button" value="打开一个新页面" onclick="openPage()" />
<input type="button" value="跳转页面" onclick="locationPage()" />
<input type="button" value="刷新页面" onclick="locationPage2()" />
</body>
</html>
二：window-setInterval(定时器)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window-setInterval(定时器)</title>
</head>
<body>
<script type="text/javascript">
/*
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
1、随机点名任务
思路：
1、定义数组 把全部的名称保存到数组中 30
2、随机数1-30
* */
function showTime(){
var now = new Date();
var time = document.getElementById("time");
time.innerHTML = now.toLocaleTimeString();
}
// 启动
var timer;
function startClock(){
timer = window.setInterval(showTime,"1000");
}
// 停止
function stopClock(){
window.clearInterval(timer);
}
</script>
<p id="time">等待...</p>
<input type="button" value="开始" onclick="startClock();"/>
<input type="button" value="停止" onclick="stopClock();" />
</body>
</html>
三：window-setTimeout(延时器)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>window-setTimeout(延时器)</title>
</head>
<body>
<script type="text/javascript">
var timer;
function fun(){
timer = window.setTimeout("document.getElementById('time').innerHTML='我回来了!'",5000);
}
</script>
<p id="time">等待...</p>
<input type="button" value="5秒钟后启动延时器" onclick="fun();" />
<input type="button" value="停止" onclick="window.clearTimeout(timer);" />
</body>
</html>
四：DOM-查询元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>DOM-查询元素</title>
</head>
<body>
<script type="text/javascript">
/*
DOM:document Object Model(文档对象模型)--每一个页面加载时，浏览器都会创建页面对应的文档对象模型
始终记住DOM是一个树形结构。操作一个DOM节点实际上就是这么几个操作：
更新：更新该DOM节点的内容，相当于更新了该DOM节点表示的HTML的内容；
遍历：遍历该DOM节点下的子节点，以便进行进一步操作；
添加：在该DOM节点下新增一个子节点，相当于动态增加了一个HTML节点；
删除：将该节点从HTML中删除，相当于删掉了该DOM节点的内容以及它包含的所有子节点。
在操作一个DOM节点前，我们需要通过各种方式先拿到这个DOM节点。
最常用的方法是document.getElementById()和document.getElementsByTagName()，
以及CSS选择器document.getElementsByClassName()。
*/
console.log(window.document);
// 设置编号为H1的标题颜色
function setTextColor(){
document.getElementById("h1").style.color = "red";
}
// 设置h1标签的字体颜色为绿色
function setTextColor2(){
var nodeList = document.getElementsByTagName("h1");
for(var nodeElement of nodeList){
console.log(nodeElement); // 一个Element节点
nodeElement.style.color = "green";
}
}
// 设置class为one的标签字体颜色为橙色
function setTextColor3(){
var nodeList = document.getElementsByClassName("one");
for(var nodeElement of nodeList){
console.log(nodeElement); // 一个Element节点
nodeElement.style.color = "orange";
}
}
// setTextColor4
function setTextColor4(){
// 获得ul节点
var ulElement = document.getElementById("test-ul1");
var nodeList = ulElement.children;
for(var nodeElement of nodeList){
console.log(nodeElement); // 一个Element节点
nodeElement.style.color = "blue";
}
}
// setTextColor5
function setTextColor5(){
// 获得ul节点
var ulElement = document.getElementById("test-ul1");
var nodeElement = ulElement.firstElementChild;
console.log(nodeElement);
nodeElement.style.color = "red";
}
</script>
<div id="mainbox">
<h1 id="h1">标题1</h1>
<h1 class="one">标题2</h1>
<ul id="test-ul1">
<li><h1>标题3</h1></li>
<li><p>段落1</p> </li>
<li><p class="one">段落2</p>
<li><p class="one">段落2</p></li></li>
</ul>
</div>
<input type="button" value="设置编号为H1的标题颜色" onclick="setTextColor();" />
<input type="button" value="设置h1标签的字体颜色为绿色" onclick="setTextColor2();" />
<input type="button" value="设置class为one的标签字体颜色为橙色" onclick="setTextColor3();" />
<input type="button" value="设置ul下所有的子节点为蓝色" onclick="setTextColor4();" />
<input type="button" value="设置ul下第一个的子节点为红色" onclick="setTextColor5();" />
</body>
</html>
五：DOM-操作元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>DOM-操作元素</title>
</head>
<body>
<script type="text/javascript">
/*
更新DOM元素主要先获得此元素节点后,主要有两种方法:
1 一种是修改innerHTML属性，这个方式非常强大，不但可以修改一个DOM节点的文本内容，还可以直接通过HTML片段修改DOM节点内部的子树
2 第二种是修改innerText或textContent属性，这样可以自动对字符串进行HTML编码，保证无法设置任何HTML标签：
插入新的DOM元素，方法
1 如果这个DOM节点是空的，例如，<div></div>，那么，直接使用innerHTML = '<span>child</span>'就可以修改DOM节点的内容，相当于“插入”了新的DOM节点。
2 如果这个DOM节点不是空的，那就不能这么做，因为innerHTML会直接替换掉原来的所有子节点
2.1 appendChild
删除DOM元素
要删除一个节点，首先要获得该节点本身以及它的父节点，然后，调用父节点的removeChild把自己删掉：
*/
// 跟新节点
function updateCourse(){
var inputCourseName = document.getElementById("kcname").value;
if(inputCourseName == ""){
alert('请输入新课程的名称');
return false;
}
// 获得java课程对应节点
var javaliElement = document.getElementById("java");
console.log(javaliElement);
// 方法一:
//javaliElement.innerHTML = inputCourseName;
// 方法二：
//javaliElement.innerText = inputCourseName;
return true;
}
function addCourse(){
var inputCourseName = document.getElementById("kcname").value;
if(inputCourseName == ""){
alert('请输入新课程的名称');
return false;
}
// 根据课程名称创建一个li节点(空节点)
var newLiElement = document.createElement("li");
// 属性
newLiElement.id = inputCourseName;
//newLiElement.innerText = inputCourseName;
newLiElement.innerHTML = inputCourseName;
document.getElementById("kecheng").appendChild(newLiElement);
}
// 删除节点(问题代码)
function deleteCourse(){
// var self = document.getElementById("javaWeb");
// var father = self.parentElement;
// father.removeChild(self);
var inputs = document.getElementsByClassName("one");
console.log(inputs);
for(var i = 0;i < inputs.length;i++){
var inputElement = inputs[i];
if (inputElement.checked == true){
var delElement = inputElement.parentElement;
delElement.parentElement.removeChild(delElement);
i = -1;
}
}
}
// 全选
function selectAll(){
var inputs = document.getElementsByClassName("one");
for(inputElement of inputs){
inputElement.checked = document.getElementById("all").checked;
}
}
</script>
<ul id="kecheng">
<li> <input type="checkbox" id="all" onclick="selectAll();">全选</li>
<li id="java"><input type="checkbox" class="one">java</li>
<li id="MySQL"><input type="checkbox" class="one">MySQL</li>
<li id="javaScript"><input type="checkbox" class="one">javaScript</li>
<li id="javaWeb"><input type="checkbox" class="one">javaWeb</li>
</ul>
请输入课程名称：<input type="text" id="kcname" />
<input type="button" onclick="updateCourse();" value="修改java课程" />
<input type="button" onclick="addCourse();" value="添加新课程" />
<input type="button" onclick="deleteCourse();" value="删除课程" />
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
