首页> 基础笔记 >JS/JQ基础学习 >Jquery Jquery
JQuery中的Dom操作-查找元素节点
作者：小萝卜 2023-03-24 【 jquery 】 浏览 223
简介JQuery中的Dom操作-查找元素节点
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery获取节点</title>
<style type="text/css">
*{
/*padding:0px;
margin:0px;*/
list-style:none;
text-decoration:none;
font-family:microsoft yahei;
}
#all{
padding:10px;
width:800px;
height:auto;
border:solid 1px #333;
margin:0 auto;
}
#menu a{font-size:14px;}
#header{width:97%;height:80px;border:solid 1px #444;margin:10px;}
#section{width:97%;height:auto;border:solid 1px #444;margin:10px;}
#footer{width:97%;height:50px;border:solid 1px #444;margin:10px;}
#header ul{height:auto;overflow:hidden;padding-left:100px;}
#header ul li{width:60px;height:30px;float:left;border:solid 1px #456;text-align:center;line-height:30px;}
#logo{width:200px;height:auto;float:left;position:relative;}
#logo img{margin-top:-40px;}
#section ul{height:auto;overflow:hidden;padding:20px;}
#section li{width:200px;height:150px;float:left;border:solid 2px pink;padding:10px;margin-right:21px;margin-bottom:21px;}
#img{width:100px;float:left;}
#copy{height:auto;overflow:hidden;padding-left:100px;}
#move{width:80px;height:40px;background:pink;position:fixed;right:0px;top:100px;cursor:pointer;font-family:courier;line-height:40px;}
#allmove{width:80px;height:40px;background:pink;position:fixed;right:0px;top:200px;cursor:pointer;font-family:courier;line-height:40px;}
#recovery{width:80px;height:40px;background:pink;position:fixed;right:0px;top:300px;cursor:pointer;font-family:courier;line-height:40px;}
</style>
<script type="text/javascript">
window.onload = function(){
var lis = images.getElementsByTagName('li');//获取所有的li
// for(var i=0;i<lis.length;i++){
// lis[i].style.transform = 'rotate('+(Math.ceil(Math.random()*90)-45)+'deg)';
// }
move.onclick = function(){
for(var i=0;i<lis.length;i++){
lis[i].style.transform = 'rotate('+(Math.ceil(Math.random()*90)-45)+'deg)';
}
return false;
}
allmove.onclick = function(){
var d = 0;
var inte = setInterval(function(){
document.body.style.transform = 'rotate('+d+'deg)';
d+=10;
if(d > 360){
clearInterval(inte);
}
},10)
}
recovery.onclick = function(){
for(var i=0;i<lis.length;i++){
lis[i].style.transform = 'rotate(0deg)';
}
return false;
}
}
</script>
</head>
<body>
<!-- 内容 start -->
<div id="all">
<!-- 头部 start -->
<div id="header">
<div id="logo"><img src="./sunli/logo.png" alt="" width="100%"></div>
<ul id="menu">
<li><a href="国内">国内</a></li>
<li><a href="国外">国外</a></li>
<li><a href="科技">科技</a></li>
<li><a href="生活">生活</a></li>
</ul>
</div>
<!-- 头部 end -->
<!-- 内容 start -->
<div id="section">
<ul id="images">
<li class="w"><a href=""><img src="./sunli/1.jpg" alt="" width="100%"></a></li>
<li class="w"><a href=""><img src="./sunli/2.jpg" alt="" width="100%"></a></li>
<li class="w"><a href=""><img src="./sunli/3.jpg" alt="" width="100%"></a></li>
<li><a href=""><img src="./sunli/4.jpg" alt="" width="100%"></a></li>
<li id="five"><a href=""><img src="./sunli/5.jpg" alt="" width="100%"></a></li>
<li love="iloveyou"><a href=""><img src="./sunli/6.jpg" alt="" width="100%"></a></li>
<li name="y"><a href=""><img src="./sunli/7.jpg" alt="" width="100%"></a></li>
<li name="y" love="iloveyou"><a href=""><img src="./sunli/8.jpg" alt="" width="100%"></a></li>
<li name="y"><a href=""><img src="./sunli/9.jpg" alt="" width="100%"></a></li>
</ul>
</div>
<!-- 内容 end -->
<!-- 底部 start -->
<div id="footer">
<div id="img"><img src="./sunli/logo.png" alt="" width="100%"></div>
<div id="copy">© Copyright 2014. All Rights Reserved.</div>
</div>
<!-- 底部 end -->
</div>
<!-- 内容 end -->
<div id="move">Image</div>
<div id="allmove">Body</div>
<div id="recovery">Recovery</div>
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<script type="text/javascript">
// $ is not defined 该错误证明当前页面是没有引入jquery
//通过id来获取元素 style
// console.log($('#logo'));
// $('#logo').css('border','solid 2px red');
//通过标签名来获取元素
// console.log($('li'));
// $('li').css('border','solid 5px black');
//通过class属性来获取元素
// console.log($('.w'));
// $('.w').css('background','orange');
//并列获取
// console.log($('#logo,.w'));
// $('#logo,.w').css('border','solid 2px black');
//层级获取
// $('#menu li').css('background','pink')//获取menu元素中所有的li标签
//获取第一个元素
// $('li:first').css('background','red');
//获取最后一个元素
// $('li:last').css('background','purple');
// $('#menu li:last').css('background','red');
//获取指定索引的元素
// var i = 5;
// $("li:eq("+i+")").css('border',"solid 2px black");
// $('li').eq(i).css('border',"solid 2px yellow");
// $('#images li:eq(4)').css('background','orange');
//获取包含指定文本的元素
// $('li:contains("国")').css('border',"solid 2px red");
//根据属性来作为帅选条件
// $('li[name=y]').css('border','dashed 3px red');
// $('li[name=y][love=iloveyou]').css('background','black');
//获取元素所有的子元素 (这里的children是一个方法 不是一个属性)
// var cs = $('#menu').children();
// $('#menu').children().css('background','red');
//获取第一个子元素
// console.log($('#images li:first-child'));
//获取指定位置的子元素
// $('#images li:nth-child(5)').css('background','cyan');
//获取最后一个子元素
// $('#images li:last-child').css('background','orange');
//获取上一个元素
// var i = $('#images li:eq(4)');
// console.log(i.prev());
$('#images li:eq(4)').prev().css('border','dashed 2px #999');//previous
//获取下一个元素
$('#images li:eq(4)').next().css('border','dashed 2px red');
//获取父级元素
// $('#images li:eq(4)').parent().css('border','dashed 2px #333');
// $('#five').parent().css('background','orange');
//获取所有的先辈元素
// $('#five').parents().css('border','solid 2px red');
//获取指定的先辈元素
// $('#five').parents("#all").css("border",'solid 2px red');
//获取同辈
// $('#five').siblings().css("border",'dashed 2px red');//z只能获取同辈元素 不包含自己
//在父辈元素中查找指定选择器的元素
$('#images').find('.w').css('border','dashed 2px blue') //find查找
</script>
</body>
</html>
很赞哦！ (0)
