收藏
批改状态：合格
老师批语：
1.jQuery parent()方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery常用选择器函数</title>
<style type="text/css">
.box,.child{
width: 300px;
height: 260px;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
</head>
<body>
<h2>1.jQuery parent()方法</h2>
<P>parent()方法返回被选元素的直接父元素</P>
<div class="box">
<ul>ul 祖父节点
<li>li 直接父节点
<span>span</span>
</li>
</ul>
</div>
</body>
</html>
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".box span").parent().css({"color":"red","border":"2px solid green"});
})
</script>点击 "运行实例" 按钮查看在线实例
2.jQuery children()方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".descendants p").children().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<h2>2.jQuery children()方法</h2>
<p>children()方法返回备选元素的所有直接子元素</p>
<div class="descendants" style="width:500px;">div (当前元素)
<p>p (儿子元素)
<span>span (孙子元素)<a href="">从孙子链接</a></span>
</p>
<p>p (儿子元素)
<span>span (孙子元素)</span>
</p>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
3.jQuery find() 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".descendants p").children().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<h2>2.jQuery children()方法</h2>
<p>children()方法返回备选元素的所有直接子元素</p>
<div class="descendants" style="width:500px;">div (当前元素)
<p>p (儿子元素)
<span>span (孙子元素)<a href="">从孙子链接</a></span>
</p>
<p>p (儿子元素)
<span>span (孙子元素)</span>
</p>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
4.jQuery siblings() 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".descendants h3").siblings().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<h2>4.jQuery siblings() 方法</h2>
<p>siblings() 方法返回被选元素的所有同胞元素。
</p>
<div class="descendants" style="width:500px;">div (当前元素)
<p>p (P元素)</p>
<p>p (P元素 含有子孙)
<span>span (孙子元素)<a href="">从孙子链接</a></span>
</p>
<h3>H3元素</h3>
<span>span</span>
<h2>h2</h2>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
5.jQuery next() 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".descendants h3").next().css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<h2>5.jQuery next() 方法</h2>
<p>next() 方法返回被选元素的下一个同胞元素。
</p>
<div class="descendants" style="width:500px;">div (当前元素)
<p>p (P元素)</p>
<p>p (P元素 含有子孙)
<span>span (孙子元素)<a href="">从孙子链接</a></span>
</p>
<h3>H3元素</h3>
<span>span</span>
<h2>h2</h2>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
6.jQuery slice() 方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<style>
.descendants *
{
display: block;
border: 2px solid lightgrey;
color: lightgrey;
padding: 5px;
margin: 15px;
}
</style>
<script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$(".descendants ul li").slice(2,5).css({"color":"red","border":"2px solid red"});
});
</script>
</head>
<body>
<h2>6.jQuery slice() 方法</h2>
<p>slice() 方法选取基于索引的元素的子集。
</p>
<div class="descendants" style="width:500px;">div (当前元素)
<ul>
<li>01</li>
<li>02</li>
<li>03</li>
<li>04</li>
<li>05</li>
<li>06</li>
<li>07</li>
<li>08</li>
<li>09</li>
<li>10</li>
</ul>
</div>
</body>
</html>点击 "运行实例" 按钮查看在线实例
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
