JQuery中的节点遍历

最新推荐文章于 2024-04-26 15:49:21 发布

在海底听雨

最新推荐文章于 2024-04-26 15:49:21 发布

阅读量634

点赞数 1

文章标签： jquery 前端 javascript

本文链接：https://blog.csdn.net/sunset_bo/article/details/125041706

版权

遍历子元素

children()方法可以用来获取元素的所有子元素

语法 $(selector).children([expr]);

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
p{
color: red;
}
</style>
</head>
<body>
<ul>
<li>
111
<p>1</p>
</li>
<li>
222
<p>2</p>
</li>
<li>
333
<p>3</p>
</li>
</ul>
<script src="../plugins/jQuery/jquery-3.6.0.js"></script>
<script>
$(function(){
//children方法只会选择当前元素的子元素(不包含子元素的子元素)
$('ul').children().css('color','blue')
})
</script>
</body>
</html>

遍历同辈元素

JQuery可以获取紧邻其后，紧邻其前和位于该元素前与后的所有同辈元素

next([expr]) 用于获取紧邻匹配元素之后的元素

prev([expr]) 用于获取紧邻匹配元素之前的元素

slibings([expr]) 用于获取位于匹配元素前面和后面的所有同辈元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<section>
<div>0.5</div>
<div>1</div>
<div>2</div>
<div>3</div>
<p>4</p>
</section>
<article>
<p>0.5</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</article>
<script src="../plugins/jQuery/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
//紧邻选择元素之后的元素(只会选择一个)
$('div:eq(2)').next().css('color','orange')
//紧邻选择元素之前的元素(只会选择一个)
$('div:eq(2)').prev().css('color','red')
//所有同父级的同级元素
$('div:eq(2)').siblings().css('color','pink')
})
</script>
</body>

遍历父级元素

parent() 获取元素的父级元素

parents() 元素元素的祖先元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>遍历父级元素</title>
</head>
<body>
<div>
<ul>
<li><span>span1</span><a href="">1</a></li>
<li><span id="span02">span2</span><a href="">2</a></li>
<li><span>span3</span><a href="">3</a></li>
</ul>
</div>
<script src="../plugins/jQuery/jquery-3.6.0.js"></script>
<script>
$(function(){
//只会选择当前元素的父元素
console.log($('#span02').parent())
//逐层往上查找当前元素的祖先元素
console.log($('#span02').parents())
})
</script>
</body>
</html>

遍历方法

each() 规定为每个匹配元素规定运行的函数

语法：$(selector).each(function(index,element));

index表示选择器的位置 element表示当前的元素

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>each方法</title>
</head>
<body>
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script src="../plugins/jQuery/jquery-3.6.0.js"></script>
<script>
$(function() {
var $divs = $('div')
var colors = ['red','orange','yellow','green']
// for (var i = 0; i < $divs.length; i++) {
// $($divs[i]).css('color',colors[i])
// }
//each方法参数是一个函数 函数中会提供两个形参 一个是索引 一个是当前元素(DOM元素)
$divs.each(function(i,el){
console.log(i)
console.log(el)
console.log($(el))
$(el).css('color',colors[i])
})
})
</script>
</body>
</html>

end方法

end() 结束当前链条中的最近的筛选操作，并将匹配的元素还原为之前的状态

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>end方法</title>
CSS-DOM
</head>
<body>
<section>
<div>0.5</div>
<div>1</div> <!-- red --> <!--#ccc背景-->
<div>2</div> <!-- blue -->
<div>3</div> <!-- orange -->
<p>4</p>
</section>
<article>
<p>0.5</p>
<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
</article>
<script src="../plugins/jQuery/jquery-3.6.0.js"></script>
<script type="text/javascript">
$(function(){
//end方法 结束最近的一次筛选 返回到上一个元素
$('div:eq(2)').next().css('color','orange')
.end()
.prev().css('color','red')
.next().css('color','blue')
.end()
.css('background','#ccc')
})
</script>
</body>
</html>

CSS-DOM

除css()外，还有获取和设置元素高度，宽度等样式的操作

css() 返回或设置匹配元素的样式属性

height([value]) 设置或返回匹配元素的高度

width([value]) 设置或返回匹配元素的宽度

offset[value]() 返回以像素为单位的top和left坐标，仅仅对可见元素有效

offsetParent() 返回最近的已定位的祖先元素

position() 返回第一个匹配元素相对于父元素的位置

scrollLeft([posttion]) 参数可选设置返回匹配元素相对滚动条左侧的偏移

scrollTop([posttion]) 参数可选设置或返回匹配元素相对滚动条顶部的偏移

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CSS-DOM</title>
<style>
*{
margin: 0;
padding: 0;
}
body{
height: 800px;
}
#selected{
width: 100%;
background: pink;
position: absolute;
height: 1000px;
}
div{
background: #ccc;
width: 200px;
height: 200px;
margin: 20px;
}
</style>
</head>
<body>
<div id="selected">
<div class="div01">
1
</div>
<div class="absoultediv">
<div>
2
</div>
</div>
</div>
<script src="../plugins/jQuery/jquery-3.6.0.js"></script>
<script>
$(function(){
// $(document).scroll(function(data){
// //console.log(data)
// //console.log($('#selected').children('.div01').scrollLeft())
// //console.log($('#selected').children('.div01').scrollTop())
// console.log( $(this).scrollLeft())
// console.log( $(this).scrollTop())
//
$('#selected').children('.div01').offset({left:$(this).scrollLeft(),top:$(this).scroll
Top()})
// })
$(document).mousemove(function(obj){
// console.log(obj.clientX)
// console.log(obj.clientY)
$('#selected').children('.div01').offset({left:obj.clientX,top:obj.clientY})
})
//console.log(
//设置或获取元素的宽度 支持 数字 文本 百分比
$('#selected').children('.div01').width('100')
//同理可得 height 方法一样
//)
//offset() //返回或设置当前元素的top和left值
//返回以像素为单位的top和left坐标。(当前浏览器窗口)
console.log($('#selected').children('.div01').offset())
//offsetParent()返回最近的已定位(position 是relative absolute fixed)祖先
元素
console.log($('#selected').children('.div01').offsetParent())
//返回第一个匹配元素相对于父元素的位置
console.log($('#selected').children('.div01').position())
//scrollLeft设置或返回匹配元素相对滚动条左侧的偏移
console.log($('#selected').children('.div01').scrollLeft())
})
</script>
</body>
</html