`
lyunabc
  • 浏览: 529851 次
  • 性别: Icon_minigender_2
社区版块
存档分类
最新评论

jQuery的层级关系

 
阅读更多

jQuery的层级关系

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

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

以以下的html代码为例：

<body>

<div>

<div id="one">

用户名：

<input type="text" id="name" />

<input type="button" id="" value="查询" />

</div>

<div id="tby">

用户名：

<input type="text" id="name" />

性别：

<input type="text" id="sex" />

密码：

<input type="text" id="pass" />

<div id="select">

用户名：

<input type="text" id="name" />

<input type="button" id="" value="查询" />

</div>

</div>

<div>

laowang

</div>

<div>

hello laowwang

</div>

</div>

</body>

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节点中的内容

});

分享到：
| jQuery对象和DOM对象的转换实例详解
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery层级选择器用法分析

    在HTML文档中，每个元素总是处于DOM节点树上的某个位置，文档层次结构中元素之间总是存在于某种层级关系，如父级和子级的关系等。 1. 子元素选择器 用于查找在给定的父元素下查找 这个父元素下的所有子元素，语法...

    jQuery层级选择器_动力节点节点Java学院整理

    因为DOM的结构就是层级结构，所以我们经常要根据层级关系进行选择。 层级选择器（Descendant Selector） 如果两个DOM元素具有层级关系，就可以用$(‘ancestor descendant’)来选择，层级之间用空格隔开。例如： &...

    jQueryAPI_CHM(1.3).CHM与语法总结

    　通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 　只有...

    最新jQuery常用技巧　超赞！

    通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery...

    jquery技巧总结

    通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery...

    jQuery技巧大放送

    通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery...

    jQuery核心语法

    通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery...

    HTML5 SVG可展开收起层级关系架构图代码.zip

    有兴趣刚需的可以自己下载，非常实用的特效代码，可以完美运行，有能力的还可以二次修改！

    Jquery 使用大全

    通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery...

    jQuery常见开发技巧详细整理

    1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom...

    jQuery实用技巧第1/2页

    1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom...

    jQuery常用语法

    jQuery常用语法 　通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。

    jQuery技巧大放送 学习jquery的朋友可以看下

    1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom...

    jQuery 技巧小结

    1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom...

    Jquery 常用方法经典总结

    1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom...

    jQuery 常见开发使用技巧总结

    1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom...

    jQuery的12招常用技巧分享

    1、关于页面元素的引用 通过jQuery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jQuery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom...

    jquery常用技巧及常用方法列表集合

    1、关于页面元素的引用 通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom...

    jQuery语法小结(超实用)

    　通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 　只有...

    全面详细的jQuery常见开发技巧手册

    通过jquery的$()引用元素包括通过id、class、元素名以及元素的层级关系及dom或者xpath条件等方法，且返回的对象为jquery对象（集合对象），不能直接调用dom定义的方法。 2、jQuery对象与dom对象的转换 只有jquery...

Magicbox
Global site tag (gtag.js) - Google Analytics