前端 JQ操作
前端 JQ操作
jq创建文档
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq创建文档</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: orange;
float: left;
}
</style>
</head>
<body>
<h1>生成一个box</h1>
<!--<div class="box"></div>-->
<!--<div class="box"></div>-->
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
let randomNum = (min, max) => {
return parseInt(Math.random() * (max - min + 1) + min)
};
let getRandomColor = () => {
r = randomNum(0, 255);
g = randomNum(0, 255);
b = randomNum(0, 255);
return \'rgba(\' + r + \', \' + g + \', \' + b + \')\';
};
$(\'h1\').click(function () {
// 点击一下，生成一个box
// 1）创建一个标签节点
let box = $(\'<div class="box"></div>\');
// 2）设置标签节点（样式、内容、事件）
box.css(\'background\', getRandomColor()).click(function () {
console.log($(this).css(\'background-color\'))
});
// 3）将标签节点添加到页面指定位置
$(\'body\').append(box);
})
</script>
</html>
jq的文档操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>文档操作</title>
</head>
<body>
<b class="b1">加粗</b>
<p class="p1">
<span>原内容</span>
</p>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
// 父在最后加子
$(\'.p1\').append($(\'.b1\'));
// 父在最前加子
// $(\'.p1\').prepend($(\'.b1\'));
// 产生一个副本(本体就不参与操作)，添加到父的最前
// $(\'.b1\').clone().prependTo($(\'.p1\'));
// 添加后兄弟
// $(\'.p1\').after($(\'.b1\'));
// 添加前兄弟
// $(\'.p1\').before($(\'.b1\'));
$(\'.b1\').click(function () {
alert(1)
});
// 清空内部内容与子标签
// $(\'.p1\').empty();
// 不保留事件等的删除自身
// let $b1 = $(\'.b1\').remove();
// 保留事件等的删除自身
let $b1 = $(\'.b1\').detach();
$(\'.p1\').append($b1);
</script>
</html>
jq文档关系
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jq的文档关系</title>
</head>
<body>
<div class="wrap">
<p class="p0">0</p>
<p class="p1">1</p>
<p class="t">
<a href="">2</a>
<a href="">2</a>
</p>
<p class="p3">3</p>
<p class="p4">4</p>
</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
// 1）从一个含有多个js对象的jq对象中取出只装有一个js对象的jq对象
// $(\'p\')是三个p，只想拿第2个p
// console.log($(\'p\'));
// console.log($(\'p\').eq(1));
// console.log($(\'p.t\'));
let $p = $(\'p.t\');
console.log($p.children());
console.log($p.parent());
console.log($p.parents());
console.log($p.next());
console.log($p.nextAll());
console.log($p.prev());
console.log($p.prevAll());
console.log($p.siblings());
</script>
</html>
jq轮播图案例：包含定时器知识点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>布局案例</title>
<link rel="stylesheet" href="css/reset.css">
<style>
.scroll-view {
width: 1226px;
height: 460px;
background-color: orange;
margin: 50px auto 0;
position: relative;
}
.scroll-menu {
position: absolute;
background-color: rgba(0, 0, 0, 0.5);
width: 234px;
padding: 20px 0;
}
.scroll-menu a {
display: block;
/*height: 42px;*/
line-height: 42px;
color: white;
/*padding-left: 30px;*/
text-indent: 30px;
}
.scroll-menu a span {
/*参考的不是a，是ul*/
position: absolute;
right: 20px;
}
.scroll-menu a:hover {
background-color: red;
}
.scroll-menu-blank {
width: calc(1226px - 234px);
height: 460px;
background-color: red;
/*参考的是ul*/
position: absolute;
top: 0;
left: 234px;
display: none;
}
.scroll-menu li:hover ~ .scroll-menu-blank {
display: block;
}
.scroll-menu-blank:hover {
display: block;
}
</style>
<style>
.scroll-view {
width: 1226px;
position: relative;
}
.scroll-scroll {
width: 1226px;
height: 460px;
position: absolute;
}
.scroll-img li {
position: absolute;
}
.scroll-img a {
display: block;
}
.scroll-img a img {
width: 100%;
}
</style>
<style>
.scroll-btn div {
position: absolute;
width: 40px;
height: 70px;
font-size: 30px;
line-height: 70px;
text-align: center;
color: rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.scroll-btn div:hover {
background-color: rgba(0, 0, 0, 0.4);
color: white;
}
.scroll-btn-left {
top: calc(50% - 35px);
left: 234px;
}
.scroll-btn-right {
top: calc(50% - 35px);
right: 0;
}
</style>
<style>
.scroll-point {
width: 120px;
height: 40px;
/*background-color: orangered;*/
position: absolute;
right: 10px;
bottom: 0;
}
.scroll-point li {
float: left;
width: 10px;
height: 10px;
border-radius: 50%;
border: 2px solid rgba(0, 0, 0, 0.6);
margin-right: 10px;
cursor: pointer;
background-color: rgba(0, 0, 0, 0.3);
}
.scroll-point li:hover {
background-color: white;
}
</style>
<style>
.scroll-menu, .scroll-btn div, .scroll-point {
z-index: 2;
}
.scroll-img li {
opacity: 0;
/*transition: .5s;*/
}
.scroll-img li.active {
opacity: 1;
z-index: 1;
}
.scroll-point li.active {
background-color: white;
}
</style>
</head>
<body>
<div class="scroll-view">
<!--轮播图-->
<div class="scroll-scroll">
<ul class="scroll-img">
<li class="active">
<a href="https://www.baidu.com">
<img src="img/001.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="img/002.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="img/003.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="img/004.png" alt="">
</a>
</li>
<li>
<a href="">
<img src="img/005.png" alt="">
</a>
</li>
</ul>
<div class="scroll-btn">
<div class="scroll-btn-left"><</div>
<div class="scroll-btn-right">></div>
</div>
<ul class="scroll-point">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
<!--菜单栏-->
<ul class="scroll-menu">
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<li>
<a href="">
手机电话卡
<span>></span>
</a>
</li>
<div class="scroll-menu-blank">
</div>
</ul>
</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
let currentIndex = 0;
// 上一张
$(\'.scroll-btn-left\').click(function () {
console.log(\'上一张\');
currentIndex--;
if (currentIndex < 0) currentIndex = 4;
$(\'.scroll-point li\').eq(currentIndex).addClass(\'active\').siblings().removeClass(\'active\');
$(\'.scroll-img li\').eq(currentIndex).addClass(\'active\').siblings().removeClass(\'active\');
});
// 下一张
$(\'.scroll-btn-right\').click(function () {
console.log(\'下一张\');
currentIndex++;
if (currentIndex >= 5) currentIndex = 0;
$(\'.scroll-point li\').eq(currentIndex).addClass(\'active\').siblings().removeClass(\'active\');
$(\'.scroll-img li\').eq(currentIndex).addClass(\'active\').siblings().removeClass(\'active\');
});
// 第几张
$(\'.scroll-point li\').click(function () {
index = $(this).index();
console.log(\'第%d张\', index);
currentIndex = index;
$(this).addClass(\'active\').siblings().removeClass(\'active\');
$(\'.scroll-img li\').eq(index).addClass(\'active\').siblings().removeClass(\'active\');
})
</script>
<script>
// console.log(currentIndex);
// 一次性定时器：setTimeout(fn, 时间)
/*
setTimeout(function () {
currentIndex++;
if (currentIndex >= 5) currentIndex = 0;
$(\'.scroll-point li\').eq(currentIndex).addClass(\'active\').siblings().removeClass(\'active\');
$(\'.scroll-img li\').eq(currentIndex).addClass(\'active\').siblings().removeClass(\'active\');
}, 1000);
*/
// 持续性定时器
let timer = null;
function startScroll() {
timer = setInterval(function () {
currentIndex++;
if (currentIndex >= 5) currentIndex = 0;
$(\'.scroll-point li\').eq(currentIndex).addClass(\'active\').siblings().removeClass(\'active\');
$(\'.scroll-img li\').eq(currentIndex).addClass(\'active\').siblings().removeClass(\'active\');
}, 3500);
}
startScroll();
// 清除定时器
// clearInterval(timer);
// clearTimeout(timer);
function stopScroll() {
clearInterval(timer);
}
// 悬浮停止轮播
$(\'.scroll-view\').mouseover(function () {
stopScroll();
});
// 移开重新轮播
$(\'.scroll-view\').mouseout(function () {
startScroll();
});
</script>
</html>
jq菜单切换
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="css/reset.css">
<style>
.menu {
width: 1226px;
margin: 0 auto;
}
.menu-title {
width: 100%;
/*height: 40px;*/
background-color: #ccc;
}
.menu-title:after {
content: \'\';
display: block;
clear: both;
}
.menu-title .l {
float: left;
}
.menu-title .r {
float: right;
}
.menu-title .r li {
float: left;
margin-right: 20px;
/*line-height: 40px;*/
cursor: pointer;
padding-top: 10px;
}
.menu-title .r li:hover, .menu-title .r li.active {
color: orangered;
border-bottom: 2px solid orangered;
}
.menu-context {
width: 100%;
/*height: 220px;*/
background-color: pink;
}
.menu-context:after {
content: \'\';
display: block;
clear: both;
}
.menu-context li {
width: 50%;
float: left;
height: 220px;
border-radius: 50%;
background-color: cyan;
}
.menu-context li a {
display: block;
font: bold 60px/220px \'微软雅黑\';
text-align: center;
color: red;
}
</style>
</head>
<body>
<div class="menu">
<ul class="menu-title">
<li class="l">
<h1>电子产品</h1>
</li>
<li class="r">
<ul>
<li class="active">
<span>电视</span>
</li>
<li>
<span>手机</span>
</li>
<li>
<span>电脑</span>
</li>
</ul>
</li>
</ul>
<ul class="menu-context">
<li>
<a href="https://www.baidu.com">电视1</a>
</li>
<li>
<a href="https://www.baidu.com">电视2</a>
</li>
</ul>
</div>
</body>
<script src="js/jquery-3.4.1.min.js"></script>
<script>
data = [
[
{
ctx: \'电视1\',
url: \'https://www.baidu.com\'
},
{
ctx: \'电视2\',
url: \'https://www.baidu.com\'
},
],
[
{
ctx: \'手机1\',
url: \'https://www.sina.com.cn\'
},
{
ctx: \'手机2\',
url: \'https://www.sina.com.cn\'
},
],
[]
];
$(\'.menu-title .r li\').mouseover(function () {
$(this).addClass(\'active\').siblings().removeClass(\'active\');
let index = $(this).index();
let ul_data = data[index];
let as = $(\'.menu-context li a\');
// console.log(ul_data);
// console.log(as)
// a个数与数据中字典的个数一致，依次赋值
for (let i = 0; i < ul_data.length; i++) {
as.eq(i).attr(\'href\', ul_data[i].url).text(ul_data[i].ctx);
}
})
</script>
</html>
版权声明：本文为bladecheng原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。