通過獲取設(shè)備信息來進(jìn)行跳轉(zhuǎn)頁面
<!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>
添加標(biāo)簽
<!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. 創(chuàng)建元素節(jié)點(diǎn)
var $li = document.createElement('li');
// 2. 給標(biāo)簽填充內(nèi)容
$li.innerText = 222222;
// 3. 把$li標(biāo)簽添加到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>
<!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">該內(nèi)容</button>
<button id="btn2">顯示或隱藏</button>
<button id="btn3">修改屬性</button>
<script>
var $box = document.querySelector(".box");
// 修改內(nèi)容
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 實(shí)現(xiàn)顯示或隱藏
<!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>
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
