作者:12sadad | 来源:互联网 | 2023-05-17 20:36
一、window
全局函数+动态跳转:window.location.href
<script text="text/Javascript">
//第一大作用
//1.1 所有全局的变量都是window的属性
//1.2 所有的全局函数都是window的方法
//全局的变量
var age = 17;
console.log(window.age);
//全局的函数
function Dog() {
var name = ‘张三‘;
console.log(name + ‘这是一条可爱的狗‘)
}
Dog();
window.Dog();
// window.alert(‘哈哈‘);
// window.console.log(‘Hello‘);//全局的
function Person() {
console.log(this);
}
Person();//window Window {postMessage: ?, blur: ?, focus: ?, close: ?, parent: Window, …}
new Person();//Person Person {}
//第二大作用
//1.动态的跳转
alert(0);//阻断
window.location.href = ‘http://www.baidu.com‘;
//2.交互
window.location.href = ‘HK://openCamera?user=123&pwd=000‘;
script>
二、document
2.1更改图片
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document的常用操作title>
<script text="text/Javascript">
function changeImage() {
//更改图片
//1.获取网页中的图像标签
//1.1 getElementsByClassName
var img = document.getElementsByClassName(‘icon‘)[0];
console.log(img);
//2.改变src 属性
img.src = ‘./image/icon_02.png‘;
}
script>
head>
<body>
<img class="icon" src="./image/icon_01.png" alt="">
<p>p>
<button onclick="changeImage();">更改图片button>
body>
html>
2.2设置标签的显示与隐藏
DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>document的常用操作2title>
head>
<body>
<img class="icon" src="./image/img_01.jpg" alt="">
<p id="word">这里风景很美p>
<p>p>
<button>隐藏button>
<script type="text/Javascript">
//1.1拿到所有要操作的标签
var icon = document.getElementsByClassName(‘icon‘)[0];
var p = document.getElementById(‘word‘);
var btn = document.getElementsByTagName(‘button‘)[0];
console.log(icon,p,btn);
//1.2监听按钮的点击
btn.onclick = function () {
if (btn.innerText == ‘隐藏‘) {
//隐藏 css 属性 display
p.style.display = ‘none‘;
icon.style.display = ‘none‘;
btn.innerText = ‘显示‘;
}else {
//隐藏 css 属性 display
p.style.display = ‘block‘;
icon.style.display = ‘inline-block‘;
btn.innerText = ‘隐藏‘;
}
}
script>
body>
html>
Javascript-05-内置对象window和document