收藏
批改状态：合格
老师批语：
parent()方法：直接返回被选元素的父元素
parents()方法，直接返回被选元素的所有祖先元素，括号内输入参数，可以根据要求精确查找所选元素的所有祖先元素。
parentsUntil()方法，可以查找所选元素与括号元素之间的所有祖先元素。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery-遍历-parent()方法</title>
<script src="../jquery-3.3.1.js" type="javascript"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
div {
text-align: center;
}
.box, ul, li {
border: 1px solid #ccc;
margin: 0 auto;
margin-top: 20px;
text-align: center;
}
.box {
width: 400px;
height: 400px;
}
.box ul {
width: 350px;
height: 350px;
}
.box ul li {
width: 300px;
height: 300px;
list-style: none;
line-height: 300px;
}
</style>
</head>
<body>
<div class="box">
<ul>
<li><span>欢迎来到</span><a href="">php中文网</a>!</li>
</ul>
</div>
<div>
<button class="btn0">屏幕刷新</button>
<br>
<button class="btn1">改变a标签的直接父元素，使用parent()方法遍历</button>
<br>
<button class="btn2">改变a标签的所有祖先元素，使用parents()方法遍历</button>
<br>
<button class="btn3">使用parents('li')方法改变a标签的所有li祖先元素</button>
<br>
<button class="btn4">使用parents('li')方法改变a标签的所有li祖先元素</button>
</div>
<script>
$(function () {
$('.btn0').click(function () {
window.location.reload();
});
//parent()方法，直接返回被选元素的父元素
$('.btn1').click(function () {
$('a').parent().css('color', 'red');
});
//parents()方法，直接返回被选元素的所有祖先元素
$('.btn2').click(function () {
$('a').parents().css('border', '2px solid red');
});
//parents()方法，括号内输入参数，可以根据要求精确查找所选元素的所有祖先元素。
$('.btn3').click(function () {
$('a').parents('li').css('border', '2px solid red');
});
//parentsUntil()方法，可以查找所选元素与括号元素之间的所有祖先元素。
//就是a标签到div标签之间的所有元素
$('.btn4').click(function () {
$('a').parentsUntil('div').css('border', '2px solid red');
});
})
</script>
</body>
</html><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="../jquery-3.3.1.js" type="javascript"></script>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<title>JQuery-CSS样式</title>
<style>
html {
height: 100%;
}
body {
margin: 0;
padding: 0;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
}
div {
width: 400px;
height: 400px;
background: #ffcccc;
display: flex;
text-align: center;
justify-content: center;
align-items: center;
border-radius: 50%;
}
.shadow {
box-shadow: 0 0 30px rgba(227, 0, 42, 0.8);
}
.text {
font-size: 22px;
font-weight: bold;
color: #fff;
text-shadow: 0 0 2px red;
}
</style>
</head>
<body>
<div id="box">做工时努力工作，数钱时自有钱数！<br>(鼠标划过或是点击试试)</div>
<script>
$(function () {
$('#box').mouseover(function () {
$(this).addClass('shadow text');
/*addClass()给元素添加样式，类样式不需要加点，如果有多个样式，可以在样式之间空格*/
});
$('#box').mouseleave(function () {
$(this).removeClass('shadow text');
/*removeClass()删除元素样式*/
});
$('#box').click(function () {
$(this).toggleClass('shadow text');
/*removeClass()删除元素样式*/
});
});
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
addClass( )：给元素添加样式，类样式不需要加点，如果有多个样式，可以在样式之间空格
removeClass( )：删除元素样式
toggleClass( ) ：对被选元素进行添加/删除类的切换操作
mouseover( )：鼠标滑入事件
mouseleave ( )：鼠标滑出事件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JQuery-顶栏滚动隐藏</title>
<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
<script src="../jquery-3.3.1.js" type="javascript"></script>
<script src="//at.alicdn.com/t/font_1030938_zf9medc8hn9.js"></script>
<link rel="stylesheet" href="//at.alicdn.com/t/font_1030938_225hv4705d2.css">
</head>
<style>
* {
padding: 0;
margin: 0;
}
body {
height: 2000px;
}
.top {
background: rgba(0, 0, 0, 0.8);
width: 100%;
height: 45px;
position: fixed;
top: 0px;
}
.banner {
background: #ffcccc;
height: 450px;
display: flex;
justify-content: center;
align-items: center;
}
.banner i {
font-size: 80px;
}
.banner .icon-huaban {
color: red;
}
.icon {
width: 5em;
height:auto;
vertical-align: -0.15em;
fill: currentColor;
overflow: hidden;
}
</style>
<body>
<div class="top"></div>
<div class="banner">
<i class="iconfont icon-badminton "></i>
<i class="iconfont icon-huaban "></i>
<i class="iconfont icon-jichuguanli"></i>
<svg class="icon" aria-hidden="true">
<use xlink:href="#icon-badminton-copy"></use>
</svg>
</div>
<script>
$(function () {
$(window).scroll(function () {
console.log('滚动条动了');
//滚动事件，当页面滚动条滚动时触发
if ($(window).scrollTop() > 45) {
// $('.top').css('display', 'none');
$('.top').fadeOut();
} else {
// $('.top').css('display', 'block');
$('.top').fadeIn();
}
})
})
</script>
</body>
</html>点击 "运行实例" 按钮查看在线实例
window.scroll( )：滚动条事件
window.scrollTop( )：滚动条的垂直位置
补充：阿里巴巴矢量图标库引用！
阿里巴巴矢量图标网址：https://www.iconfont.cn
阿里巴巴矢量图标引用教程：点这里
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
