Bom 对象和Dom树
2019-03-25 本文已影响0人
樊小勇
通过获取设备信息来进行跳转页面
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script>
function isMobile() {
var ua = navigator.userAgent;
var ipad = ua.match(/(iPad).*OS\s([\d_]+)/);
var isIphone = !ipad && ua.match(/(iPhone\sOS)\s([\d_]+)/);
var isAndroid = ua.match(/(Android)\s+([\d.]+)/);
return ipad || isIphone || isAndroid;
}
if (this.isMobile()) {
location.href = "phone.html";
} else {
location.href = "pc.html";
}
</script>
</head>
<body>
</body>
</html>
添加标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<ol></ol>
<button onclick="addEle();">添加li</button>
<script>
function addEle() {
var $ol = document.querySelector('ol');
// 1. 创建元素节点
var $li = document.createElement('li');
// 2. 给标签填充内容
$li.innerText = 222222;
// 3. 把$li标签添加到ol里面
$ol.appendChild($li);
}
</script>
</body>
</html>
- 删除标签
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<button>btn</button>
<script>
var $btn = document.querySelector('button');
$btn.remove();
</script>
</body>
</html>
- 修改标签的属性和class
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background: green;
}
.dsn {
visibility: hidden;
}
</style>
</head>
<body>
<div class="box">
我是div表亲啊
</div>
<button id="btn1">该内容</button>
<button id="btn2">显示或隐藏</button>
<button id="btn3">修改属性</button>
<script>
var $box = document.querySelector(".box");
// 修改内容
document.querySelector("#btn1").onclick = function () {
$box.innerHTML = "222222";
};
// 修改class
document.querySelector("#btn2").onclick = function () {
var className = $box.className;
console.log(className);
if (className === "box") {
$box.className = "box dsn";
} else {
$box.className = "box";
}
};
// 修改属性
document.querySelector("#btn3").onclick = function () {
$box.style.backgroundColor = "gray";
};
</script>
</body>
</html>
- jquery 实现显示或隐藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background: green;
}
.dsn {
visibility: hidden;
}
</style>
</head>
<body>
<div class="box">
我是div表亲啊
</div>
<button id="btn2">显示或隐藏</button>
<script>
$('#btn2').click(function () {
var $box = $('.box');
$box.toggleClass('dsn');
})
</script>
</body>
</html>
