jQuery过滤、遍历同级元素、向上遍历、向下遍历

话不多说，直接贴代码（我只是希望能在温习原生js的同时，发现一些有趣的东西！）

.html:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<style type="text/css">
#sibling *{
display: block;
border: 2px dashed gray;
color: grey;
padding: 5px;
margin: 5px;
}
</style>
</head>
<script type="text/javascript" src="js/jquery-3.1.0.js"></script>
<script type="text/javascript" src="js/jQueryFilter.js"></script>
<link type="text/css" href="css/jQueryFilter.css" rel="stylesheet"/>
<body>
<div id="filter">
<p>p1</p>
</div>
<div>
<p class="cla">p1</p>
</div>
<div>
<p class="cla">p1</p>
</div>
<div>
<h3>p1</h3>
</div>
<div>
<h1>p1</h1>
</div>

<div id="toDown1">div1
<div id="toDown2">div2
<p id="pid">p
<a>
Hello!
</a>
</p>
</div>
</div>
</body>
</html>

//下图代码块用于向上及向下遍历

// go on

.js:

$(document).ready(function(){
// filterElement()
// siblingElement();
// toDown();
toUp();
})

function filterElement(){
/*
jQuery过滤
first()
last()
eq()
filter()
not()
*/
$("div p").first().css("background-color","red");//div下的p元素中的第一个
$("div p").last().css("background-color","blue");//最后一个
$("div p").eq(1).css({"background-color":"grey","color":"red"});
$("div p").filter(".cla").css("background-color","grey");//过滤div中的p元素，class为cla的
$("div p").not(".cla").css("background-color","red");//过滤div下的所有p元素，class不为cla的
}

.css:

#sibling {
margin-top: 10px;
background-color: none;
height:300px;
width: 48%;
float:left;
}

#sibling * {
display: block;
border: 2px dashed gray;
color: grey;
padding: 5px;
margin: 5px;
}

#toDown1{
width: 48%;
height:300px;
border: 2px solid chocolate;
float: left;
}

#toDown2{
width: 80%;
height:80%;
margin-top: 10px;
margin-left: 10px;
border: 2px solid chocolate;
}

#toDown2 p{
margin-left: 10px;
margin-top: 10px;
width: 50%;
height: 20%;
border: 2px solid chocolate;
vertical-align: middle;
line-height: 40px;
}

基础差的，有兴趣可以贴到编译器中玩一玩。大牛勿喷。

jQuery过滤、遍历同级元素、向上遍历、向下遍历相关推荐

linux下遍历目录树方法总结,linux下遍历目录树方法总结（下）
2.使用ftw调用遍历目录 2.1ftw函数族使用readdir函数等实现递归遍历目录树的方法比较原始,glibc2.1收录了ftw等函数,可以方便实现目录树的遍历. #include intftw ...
jquery笔记一：下载安装、语法、选择器、遍历选择元素的方法、jQuery动画
目前 jQuery 兼容于所有主流浏览器, 包括 IE 6!开发时常用 jquery.js,上线用 jquery.min.js. jq插件目前jQuery有三个大版本: (1)1.x.x: 兼容ie ...
jquery 遍历父元素、子元素、兄弟元素
寻找父元素 1. parent()方法,只返回被选元素的直接父元素,只遍历到上一级的父元素,返回的是一个元素. 2. parents()方法,返回被选元素的所有父元素,一直向上遍历,直到文档的根元素为 ...
jquery选择器之获取父级元素、同级元素、子元素
一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <divid="par_div"><aid="href_fir&qu ...
***jquery选择器之获取父级元素、同级元素、子元素
一.获取父级元素 1. parent([expr]): 获取指定元素的所有父级元素 <div id="par_div"><a id="href_fir& ...
jquery 选择器(name,属性,元素)大全
jQuery 选择器大体上可分为:基本选择器.层次选择器.过滤选择器.表单选择器. 其中过滤选择器可以分为:简单过滤选择器.内容过滤选择器.可见性过滤选择器.属性过滤选择器.子元素过滤选择器.表单对象 ...
jQuery——遍历DOM元素的后代元素
任务描述本关任务:用 jQuery 向下遍历 DOM 节点.效果如下: 相关知识为了完成本关任务,你需要掌握:1.children(),2. find(). 向下遍历DOM节点基本的html结构 ...
jQuery——遍历DOM元素的兄弟元素
任务描述本关任务:用 jQuery 遍历 DOM 元素的兄弟元素.效果如下: 相关知识为了完成本关任务,你需要掌握:1.siblings(),2. next() , nextAll() 3. pr ...
jquery 获取同级元素_如何在jQuery中获取元素的同级
jquery 获取同级元素 In this post, we will discuss how to get the siblings of an HTML element in jQuery. jQ ...

jQuery过滤、遍历同级元素、向上遍历、向下遍历

jQuery过滤、遍历同级元素、向上遍历、向下遍历相关推荐

最新文章

热门文章