jQuery_DOM学习之------遍历节点
一、children()方法
例子：
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<style>
.fa{
height:100px;
width:300px;
background:#b6b6b6;
}
.sss{
border:1px solid #FF0;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head> <body>
<h2>children方法()</h2> <div class="fa">
<div class="son">
<div class="sss">sss</div>
</div>
<div class="son">son2</div>
<div class="son">son3</div>
<div class="son">son4</div>
</div> <button id="bt1">children()无参数的用法</button>
<button id="bt2">children()加参数的用法</button> <script type="text/javascript">
$("#bt1").click(function() {
$('.fa').children().css('border', '1px solid red')
})
</script> <script type="text/javascript">
$("#bt2").click(function() {
//找到所有class=fa的元素
//只对符合条件的子元素加样式
$('.fa').children(':eq(3)').css('border', '1px solid blue')
})
</script> </body> </html>
说明：
.children()无参数
XX节点.children()，不加参数的情况时。会定位到该节点的所子元素，从上面的例子看出.children()在遍历时只会选定到子元素不会对孙子元素进行选定
.children()有参数
如果只想要对某个节点的子节点中的其中某一个进行操作时，可以用.children(':eq(3)')有参数的形式来遍历
二、find()方法
find（）和children（）的区别：
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<style>
.fa{
height:100px;
width:300px;
background:#b6b6b6;
}
.sss{
border:1px solid #FF0;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head> <body>
<h2>children方法()</h2> <div class="fa">
<div class="son">
<div class="sss">sss</div>
</div>
<div class="son">son2</div>
<div class="son">son3</div>
<div class="son">son4</div>
</div> <button id="bt1">.find()用法</button>
<script type="text/javascript">
$("#bt1").click(function() {
$('.fa').find('div').css('border', '1px solid red')
})
</script> </body> </html>
三、parent()方法
遍历找到该节点的父节点：
<!DOCTYPE html>
<html> <head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" href="imooc.css" type="text/css">
<style>
.fa{
height:200px;
width:300px;
background:#b6b6b6;
}
.sss{
border:1px solid #FF0;
}
.son{
margin-top:20px;
border:1px solid #F00;
}
</style>
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head> <body>
<h2>children方法()</h2> <div class="fa">
<div class="son">
<div class="sss">sss</div>
</div>
<div class="son">son2</div>
<div class="son">son3</div>
<div class="son">son4</div>
</div> <button id="bt1">parent()用法</button>
<script type="text/javascript">
$("#bt1").click(function() {
$('.sss').parent().css('border', '1px solid blue')
})
</script> </body> </html>
jQuery_DOM学习之------遍历节点的更多相关文章
- jQuery_DOM学习之------创建节点及节点属性
DOM创建节点及节点属性 一.创建新的节点并添加到dom中 dom 节点创建的过程(创建节点<元素.属性.文本等>.添加节点的属性.加入到文档中) jQuery创建元素节点的方法: 创建元 ...
- JS获取与遍历节点的兄弟父级
发布:脚本学堂/JavaScript 编辑:JB01 2014-01-23 15:40:11 [大 中 小] 介绍下js获取节点的兄弟.父级与子元素的方法,学习下js遍历节点的操作方法,有需要 ...
- 关于each()、find()、filter()遍历节点的操作方法
关于each().find().filter()遍历节点的操作方法 each语法: each(fn) ; 返回值:jQuery fn:代表对于每个匹配元素所要执行的函数 each()方法共有三种形式 ...
- jQuery_DOM学习之------clone()
jQuery_DOM学习之------clone() clone()---节点克隆: 方法: 1.clone()只克隆结构,事件将被丢弃 2.clone(true)结构和事件都将被克隆 例子: < ...
- jq的遍历节点
1.child()方法 该方法用于取得匹配元素的子元素集合 2.next() 该方法用于取得匹配元素后面紧邻的同辈元素, 3.prev() 该方法用于取得匹配元素前面紧邻的同辈元素 4.sibling ...
- mysql7笔记----遍历节点所有子节点
mysql遍历节点的所有子节点 DELIMITER // CREATE FUNCTION `getChildrenList`(rootId INT) ) BEGIN ); ); SET sTemp = ...
- jaxp的dom方式操作（查找、添加、修改、删除、遍历节点）
package cn.itcast.jaxptest; import java.io.IOException; import javax.xml.parsers.DocumentBuilder;imp ...
- [ActionScript 3.0] as3处理xml的功能和遍历节点
as3比as2处理xml的功能增强了N倍,获取或遍历节点非常之方便,类似于json对像的处理方式. XML 的一个强大功能是它能够通过文本字符的线性字符串提供复杂的嵌套数据.将数据加载到 XML 对象 ...
- 第二十六篇 jQuery 学习8 遍历-父亲兄弟子孙元素
jQuery 学习8 遍历-父亲兄弟子孙元素 jQuery遍历,可以理解为“移动”,使用“移动”还获取其他的元素. 什么意思呢?老师举一个例子: 班上30位同学,我是新来负责教这个班学生的老师 ...
随机推荐
- 将childNodes返回的数据转化维数组的方法
//将childNodes返回的数据转化为数组的方法 function convertToArray(nodes){ var array=null; try{ array=Array.prototyp ...
- 关于WPF的验证
1.ValidationRule 验证 ValidationRule:是通过ValidationRule中的的Validate方法来验证我们绑定的属性.所以我们的用法是继承ValidationRule ...
- uvalive 2965 Jurassic Remains
https://vjudge.net/problem/UVALive-2965 题意: 给出若干个由大写字母组成的字符串,要求选出尽量多的字符串,使得每个大写字母出现的次数是偶数. 思路: 如果说我们 ...
- jfinal使用配置文件注意事情
使用Popkit @Override public void configConstant(Constants me) { me.setViewType(ViewType.JSP); PropKit. ...
- Linux入门(10)——Ubuntu16.04使用pip3和pip安装numpy,scipy,matplotlib等第三方库
安装Python3第三方库numpy,scipy,matplotlib: sudo apt install python3-pip pip3 install numpy pip3 install sc ...
- Cocos 2d-X Lua 游戏添加苹果内购(一) 图文详解准备流程
事前准备 最近给游戏添加了苹果的内购,这一块的东西也是刚刚做完,总结一下,其实这里不管是游戏还是我们普通的App添加内购这一块的东西都是差不多的,多出来的部分就是我们Lua和OC的交互的部分,以前刚开 ...
- ALSA和Pulseaudio
小记一下,Deadbeef如果使用ALSA作为音频输出的话,会导致其他说有使用pulseaudio的程序[如Chrome]没声音.....[但是SMplayer使用ALSA的话不会...]
- Tomcat 笔记-目录简介
bin:启动和关闭tomcat的bat文件 conf:配置文件 server.xml该文件用于配置server相关的信息,比如tomcat启动的端口号,配置主机(Host) web.xml文件配置与w ...
- 浏览器缓存相关HTTP头部字段
1.Cache-Control/Pragma 2.Expires 3.Last-Modified/Etag
- IDEA-最简单的struts2项目 关于lib项目的默认位置
文件结构 struts.xml <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE struts ...