当前位置:  编程技术>WEB前端

使用jquery选择器如何获取父级元素、同级元素、子元素

    来源: 互联网  发布时间:2014-08-25

    本文导语:  一、获取父级元素 1、 parent([expr]): 获取指定元素的所有父级元素 代码如下: href_fir href_sec href_thr href_fiv $(document).ready(function(){ $("a").parent().addClass('a_par'); }); firebug查看jquery parent效果 二、获取同级元素: 1、next([expr]): 获取...

一、获取父级元素

1、 parent([expr]):

获取指定元素的所有父级元素
代码如下:



href_fiv

$(document).ready(function(){
$("a").parent().addClass('a_par');
});

firebug查看jquery parent效果

二、获取同级元素:

1、next([expr]):
获取指定元素的下一个同级元素(注意是下一个同级元素哦)
代码如下:









  • list item 1

  • list item 2

  • list item 3

  • list item 4

  • list item 5




$('li.third-item').next().css('background-color', 'red');





这个例子的结果是,只有list item 4背景色变为红色

2、nextAll([expr]):

获取指定元素后边的所有同级元素
代码如下:

And Again

var p_nex = $("p").nextAll();
p_nex.addClass('p_next_all');

注意看最后一个”

”标签哦,也被加上了'p_next_all'这个类名哦~~

3、andSelf():

获取指定元素后边的所有同级元素,之后加上指定的元素

我感觉这个函数是最有意思的一个函数了,什么意思?直译过来就是”还有我“,”还有自己”,没错,还有自己。

代码如下:

Hello

Hello Again

And Again

var p_nex = $("p").nextAll().andSelf();
p_nex.addClass('p_next_all');

注意看第一个“

”标签啊,这句话的意思是选择p标签后面的所有同级标签,以及自己。。。

以下这两个不举具体的例子了,实际上就是next()和nextAll()的相反喽

4、prev():获取指定元素的上一个同级元素(是上一个哦)。

5、prevAll():获取指定元素的前边所有的同级元素。

三、获取子元素

1、查找子元素方式1:>

例如:var aNods = $("ul > a");查找ul下的所有a标签

2、查找子元素方式2:children()

3、查找子元素方式3:find()

这里再简单介绍以下children()和find()的异同:

1> children及find方法都用是用来获得element的子elements的,两者都不会返回 text node,就像大多数的jQuery方法一样。
2> children方法获得的仅仅是元素一下级的子元素,即:immediate children。
3> find方法获得所有下级元素,即:descendants of these elements in the DOM tree
4> children方法的参数selector 是可选的(optionally),用来过滤子元素,

但find方法的参数selector方法是必选的。

5> find方法事实上可以通过使用 jQuery( selector, context )来实现。即$('li.item-ii').find('li')等同于$('li', 'li.item-ii').

例:

代码如下:


  • I

  • II

    • A

    • B

      • 1

      • 2

      • 3



    • C



  • III



使用:$('ul.level-2').children().css('border', '1px solid green'); 的效果是:

使用 $('ul.level-2').find('li').css('border', '1px solid green'); 的效果是:

    
 
 

您可能感兴趣的文章:

  • 使用jquery prev()方法找到同级的前一个元素
  • 使用jQuery时Form表单元素ID和name命名大忌
  • jquery代码-如何使用.siblings()来选择同辈元素
  • php使用array_rand()函数从数组中随机选择一个或多个元素
  • 如何正确使用标题元素、段落和强制换行
  • 急求结果!!假设一个有两个元素的信号量集S,表示了一个磁带驱动器系统,其中进程1使用磁带机A,进程2同时使用磁带机A和B,进程3使用磁带机B。
  • python中使用enumerate函数遍历元素实例
  • python使用win32com在百度空间插入html元素示例
  • jquery移除、绑定、触发元素事件使用示例详解
  • JQuery对表单元素的基本操作使用总结
  • 使用JDOM怎么生成根元素以外的东西
  • PHP使用DOMDocument类生成HTML实例(包含常见标签元素)
  •  
    本站(WWW.)旨在分享和传播互联网科技相关的资讯和技术,将尽最大努力为读者提供更好的信息聚合和浏览方式。
    本站(WWW.)站内文章除注明原创外,均为转载、整理或搜集自网络。欢迎任何形式的转载,转载请注明出处。












  • 相关文章推荐
  • linux不用命令方式读文件获取网络流量,如何使用C函数调用获取网络流量信息?
  • 急,,,怎样获取远程系统的CPU和内存使用率
  • curl不使用文件存取cookie php使用curl获取cookie示例
  • 怎么写个CGI程序获取远程linux主机的信息,如cpu使用率,内存使用等?
  • 如何获取客户端浏览器所使用的语言,特别是要区分简繁体!
  • 使用ps命令,如何使用系统命令根据进程名称获取进程和子进程的ID?除了ps,还有其它系统命令的办法吗?谢谢。
  • 使用Jquery获取带特殊符号的ID 标签的方法
  • sql server 使用ntile获取数据的例子
  • c语言在unix系统下,如何获取cpu使用率
  • hp_ux下如何使用java获取top信息
  • 怎样使用FTP递归获取文件夹下的所有文件及子文件夹?
  • [求助]如何获取一个程序所使用的系统调用和参数?
  • jquery使用$(element).is()来判断获取的tagName
  • ASP.NET使用Subtract方法获取两个日期之间的天数
  • 操作系统 iis7站长之家
  • 多网卡多IP情况下如何通过脚本获取当前登录终端使用的ip?
  • 使用标准SAX解析XML文档如何获取文档编码信息及约束它的dtd文件路径.
  • linux中,获取系统的CPU、内存、硬盘使用情况该用什么函数?
  • 如何使用c语言获取当前系统的时间,就是那个秒数?
  • 请问,怎样通过程序方式,获取AIX系统当前的CPU, 内存使用情况?
  • C++ I/O 成员 tellg():使用输入流读取流指针
  • 在测试memset函数的执行效率时,分为使用Cash和不使用Cash辆种方式,该如何控制是否使用缓存?
  • C++ I/O 成员 tellp():使用输出流读取流指针
  • 求ibm6000的中文使用手册 !从来没用过服务器,现在急需使用它,不知如何使用! 急!!!!!
  • Python不使用print而直接输出二进制字符串
  • 请问:在使用oracle数据库作开发时,是使用pro*c作开发好些,还是使用库函数如oci等好一些啊?或者它们有什么区别或者优缺点啊?
  • Office 2010 Module模式下使用VBA Addressof
  • c#中SAPI使用总结——SpVoice的使用方法
  • windows下tinyxml.dll下载安装使用(c++解析XML库)
  • 使用了QWidget的程序,如何使用后台程序启动它?
  • tcmalloc内存泄露优化c++开源库下载,安装及使用介绍


  • 站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3