jQuery的层级关系

jQuery的层级关系

jQuery层级关系分为祖先关系、父子关系、兄弟关系

下面来一一介绍如何表示这些关系

以以下的html代码为例：

"one">

用户名：

"text" id="name" />

"button" id="" value="查询" />

"tby">

用户名：

"text" id="name" />

性别：

"text" id="sex" />

密码：

"text" id="pass" />

"select">

用户名：

"text" id="name" />

"button" id="" value="查询" />

laowang

hello laowwang

1． 祖先关系：

//获取id=tby里面的所有的input元素

var $ipts = $("#tby input");//祖先关系

注：#tby和input之间是空格代表是祖先关系，也就是把id为tby的的下面的标签为input的得到，当然也可以下为：var $divs = $("body div");

2． 父子关系

$ipts = $("#tby>input");

注：#tby和input之间是>,表示获取到id为tby的标签为input的子标签。

3． 兄弟关系

（1）var $x = $("#tby+div");

注：兄弟关系 弟弟必须是div紧跟着的div中的htm内容

（2）$x = $("#tby~div");

注：#tby和input之间是 ~ ,表示获取到的是id为tby的下面的所有的div，可以用for循环输出

$x.each(function(i, domDiv) {

var $div = $(domDiv);

alert($div.html());//得到dom节点中的内容

});