JavaScript基础之BOM 个人笔记
2017-08-16 18:46
417 查看
SCREEN
LOCATION
HISTORY
CONFIRM
navigator
OPEN
定时器
getelement系列方法
Attribute
点符号法
行内样的获取
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Screen</title> </head> <body> </body> <script> console.log(screen.width);/*屏幕宽度*/ console.log(screen.height); console.log(screen.availWidth);/*屏幕可用宽度*/ console.log(screen.availHeight); </script> </html>
LOCATION
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>location</title>
</head>
<body>
<button onclick="assign()">加载新页面</button>
<button onclick="replace()">替换页面</button>
<button onclick="reload1()">刷新页面</button>
<button onclick="reload2()">彻底刷新页面</button>
</body>
<script>
function assign() {
/*可以返回老页面*/
location.assign("http://www.baidu.com");
}
function replace() {
/*不可以返回老页面*/
location.replace("http://www.baidu.com");
}
function reload1() {
location.reload();
}
function reload2() {
location.reload(true)
}
</script>
<!---->
<script>
console.log(location.href);
/*完整的url*/
console.log(location.protocol);
/*协议*/
console.log(location.port);
/*端口号*/
console.log(location.hostname);
/*主机名称*/
console.log(location.pathname);
/*路径名称*/
console.log(location.search);
/*？后的数据部分*/
</script>
</html>HISTORY
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>history</title> </head> <body> <h1>45</h1> <a href="Demo46.html">Demo46</a> <button onclick="forward()">下一个页面</button> </body> <script src="../../js/history.js"></script> </html>
CONFIRM
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>confirm</title>
</head>
<body>
</body>
<script language="javascript" type="text/javascript">
var flag = confirm("确认要删除此条信息吗？");
if (flag) {
alert("删除成功");
} else {
alert("取消删除");
}
</script>
</html>navigator
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Navigator</title>
</head>
<body>
<button onclick="close1()"></button>
</body>
&l
fed3
t;script>
console.log(navigator.appName);
console.log(navigator.appVersion);
console.log(navigator.userAgent);
console.log(navigator.platform);
function close1() {
window.close1();
}
</script>
</html>OPEN
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>OPEN</title>
</head>
<body>
<button onclick="openNewPage()">打开鲜花页面</button>
</body>
<script>
function openNewPage() {
window.open("Demo49.html", "xianhua", "height=300,width=500,left=50,top=100")
}
</script>
</html>定时器
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>定时器</title>
</head>
<body>
<button onclick="show()">五秒后显示helloworld</button>
<button onclick="cancelShow()">取消显示helloworld</button>
<button onclick="cancelShow2()">停止显示helloworld</button>
</body>
<script>
//setTimeout 默认情况下，只会执行一次
var hello;
function show() {
hello = setTimeout(function () {
alert("HelloWorld!");
}, 5000); //5000=5000ms
}
function cancelShow() {
clearTimeout(hello);
}
</script>
<script>
/*setinterval 根据指定的时间，循环执行*/
var hello2 = setInterval(function () {
console.log("HelloWorld!") //console在控制台看变化
}, 1000)
function cancelShow2() {
clearTimeout(hello2);
}
</script>
</html>getelement系列方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>getelement系列方法</title>
</head>
<body>
<p id="jereh">杰瑞集团</p>
<p name="jredu">杰瑞教育</p>
<p name="jredu">杰瑞教育</p>
<button onclick="change()">变字体颜色！！</button>
<button onclick="change2()">字体变大！！</button>
<button onclick="change3()">全部字体变大！！</button>
</body>
<script>
/*getElementById 通过id查找元素，只会返回一个匹配的元素*/
function change() {
document.getElementById("jereh").style.color = "red";
}
/*getElementByClassName 通过class查找元素，只会返回一个匹配的元素数组*/
/*function change2() {
var result = document.getElementsByClassName("jredu");
//用这个函数就把上边杰瑞教育name改成class
for (var i = 0; i < result.length; i++) {
result[i].style.fontSize = "40px";
}
}*/
/*getElementByName 通过name属性查找元素，只会返回一个匹配的元素数组*/
function change2() {
var result = document.getElementsByName("jredu");
for (var i = 0; i < result.length; i++) {
result[i].style.fontSize = "40px";
}
}
/*getElementByTagName 通过标签查找元素，只会返回一个匹配的元素数组*/
function change3() {
var result = document.getElementsByTagName("p");
for (var i = 0; i < result.length; i++) {
result[i].style.fontSize = "40px";
}
}
</script>
</html>Attribute
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Attribute</title>
</head>
<body>
<img src="../../../img/f3_Android1.png" alt="图片错误" id="img"><br>
<button onclick="getUrl()">获取图片路径信息</button>
<button onclick="changeUrl()">改变图片</button>
<button onclick="chan()">获取文本</button>
</body>
<script>
var img = document.getElementById("img");
function getUrl() {
// var src = img.getAttribute("src"); //相对路径 //与下面语句两者作用相同，所以存在一个就ok
var src = img.src; //绝对路径
console.log(src);
}
function changeUrl() {
img.setAttribute("src", "../../../img/f3_Android2.png");
// img.src= "../../../img/f3_Android2.png" //于上边函数一样，于上边语句的差别是相对绝对
}
</script>
</html>点符号法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
.ccy {
margin-top: 200px;
}
.yut {
text-align: center;
font-size: 30px;
color: red;
}
</style>
<title>点符号法</title>
</head>
<body>
<p id="school" class="ccy">青岛理工大学！</p>
<button onclick="change()">改变字体</button>
</body>
<script>
var p = document.getElementById("school");
function change() {
/*1:style方法，逐个去给元素添加样式，速度慢！*/
// p.style.color="red";
// p.style,textAlign="center";
// p.style.fontSize="40px";
/*2:className方法，直接给元素添加一个样式类，速度快
* 前提是样式类已经存在
* 元素已存在默认类的时候，再次添加样类需要使用+="(空格)类名称"*/
// document.getElementById("school").className="yut";
// p.className += " yut"; //这样写两个类可以同时显示
/*3:cssText 可以一次把多个样式写在样文本中*/
p.style.cssText += ";color:red;font-size:40px;text-align:center";
}
</script>
</html>行内样的获取
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
#yut {
color: red;
}
</style>
<title>行内样的获取</title>
</head>
<body>
<p id="yut" style="font-size: 40px">青岛理工大学</p>
</body>
<script>
var p = document.getElementById("yut");
// var style = p.style; /*.style 获取的全部为行内样式*/
/*var style = window.getComputedStyle(p); /!*W3C 获取元素的所有样式*!/
var style = p.currentStyle; /!*IE 获取元素的所有样式*!/*/
/*浏览器种类的区分不适用浏览器对象
* 尝试用的方法为判断浏览器特有的属性和方法*/
if (p.currentStyle){/*IE*/
var style = p.currentStyle; /*IE 获取元素的所有样式*/
}else{ /*W3C*/
var style = window.getComputedStyle(p); /*W3C 获取元素的所有样式*/
}
console.log(style.fontSize);
console.log(style.color); //没效果？因为只能获取行内样式
</script>
</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- JavaScript基础个人笔记
- javascript基础（二） 个人笔记
- 前端基础 JavaScript Function、BOM对象 笔记
- JavaScript个人笔记：js模块化开发seajs基础
- JavaScript基础笔记（六）BOM
- javascript基础笔记（十七）之js的bom对象
- JavaScript BOM基础笔记（2017/06/05）
- javascript基础（三） 个人笔记
- JavaScript基础Dom 个人笔记
- [学习笔记]JavaScript之BOM基础
- JavaScript基础（补充） 个人笔记
- 【JavaScript】BOM基础总结
- Java基础知识点个人笔记(2)
- JavaScript基础学习笔记（2014.12.8）
- 零基础入门-javaScript学习笔记之对象和不一样的this
- (转)[AGAL个人笔记]第一篇：AGAL基础（译）
- 【个人笔记重点，不作为参考】主题：javascript笔记
- [学习笔记]JavaScript基础
- GitHub基础教程(一) 个人笔记
- JavaScript-day20-个人学习笔记