jquery 层次选择器siblings与nextAll的区别介绍

jquery 层次选择器包括siblings与nextAll,本文为大家介绍下具体的使用方法,想学习的朋也可以参考下,希望对大家有所帮助
 

HTML代码:

复制代码 代码如下:

<div>
<div >1</div>
<div class="one">
2
<div>2_1
<div>2_1_1</div>
</div>
<div>2_2</div>
</div>
<div>3</div>
<div>4</div>
</div>
$(".one div").css("background","red") // .one之后所有DIV后代元素(后代:包括儿子和孙子.....)
$(".one > div").css("background","red") // .one之后的子元素。(子:儿子和女儿....)
$(".one + div").css("background","red") // .one之后相邻的元素。就是紧靠.one之后的兄弟元素。只有一个
$(".one").next().css("background","red") // 这个作用同上
$(".one ~ div").css("background","red") //.one之后的兄弟元素。不包括前面的
$(".one").nextAll().css("background","red") //作用同上
$(".one").siblings().css("background","red") // .one所有的兄弟元素,不管是后面的还是前面的。

时间: 2024-08-31 17:20:38

jquery 层次选择器siblings与nextAll的区别介绍的相关文章

jquery 层次选择器siblings与nextAll的区别介绍_jquery

HTML代码: 复制代码 代码如下: <div> <div >1</div> <div class="one"> 2 <div>2_1 <div>2_1_1</div> </div> <div>2_2</div> </div> <div>3</div> <div>4</div> </div> $(

jQuery层次选择器选择元素使用介绍_jquery

复制代码 代码如下: <html xmlns="http://www.w3.org/1999/xhtml"> <head> <!-- 1.层次选择器: 通过DOM元素间的层次关系获取元素,其主要的层次关系包括后代.父子.相邻.兄弟关系,通过其中基类关系可以方便快捷地定位元素 jQuery选择器详解 根据所获取页面中元素的不同,可以将jQuery选择器分为:基本选择器.层次选择器.过滤选择器.表单选择器四大类.其中,在过滤选择器中有可以分为:简单过滤选择器.

jQuery中的insertBefore(),insertAfter(),after(),before()区别介绍_jquery

insertBefore():a.insertBefore(b) a在前,b在后, a:是一个选择器,b:也是一个选择器 <!DOCTYPE html> <html> <head> <meta charset='UTF-8'> <title>jqu</title> <script type="text/javascript" src='jquery-2.2.0.min.js'></script&g

jquery层次选择器使用说明

  1.find():找到该元素的子元素以及孙子元素(及所有后代元素). $('#box').find('p').css('color', 'white');//id为box下所有的p标签的颜色改为白色     2.children():找到该元素的子元素. $('#box').children('p').css('color', 'white');//id为box的所有子元素为p标签的改颜色为白色    3.next():找到该元素同一级元素的下一个元素. $('#box').next('p'

Jquery绑定事件(bind和live的区别介绍)_jquery

Jquery中绑定事件有三种方法:以click事件为例 (1)target.click(function(){}); (2)target.bind("click",function(){}); (3)target.live("click",function(){}); 第一种方法很好理解,其实就和普通JS的用法差不多,只是少了一个on而已 第二.三种方法都是绑定事件,但是二者又有很大的不同,下面着重讲解一下,因为这个如果用到Jquery的框架的话是用的挺多的,尤其要

详解强大的jQuery选择器之基本选择器、层次选择器_jquery

jQuery允许开发者使用从CSS1到CSS3几乎所有的选择器,以及jQuery独创的高级而复杂的选择器.另外还可以加入插件使其支持XPath选择器,甚至开发者可以编写属于自己的选择器(即选择器插件,参考上篇:jQuery插件原来如此简单--jQuery插件的机制及实战).正是jQuery强大的选择器功能,让它很容易上手,吸引了大批的开发者,本文就来介绍一下强大的jQuery选择器. jQuery选择器类型 jQuery选择器主要分为四类: 1.基本选择器 2.层次选择器 3.过滤选择器 4.表

jQuery入门之层次选择器实例简析_jquery

本文实例分析了jQuery入门之层次选择器的使用方法.分享给大家供大家参考,具体如下: 这里简单介绍一下jQuery层次选择器中ancestor descendant与parent>child的区别. parent>child:根据父元素匹配所有的子元素,层次关系是父子关系. ancestor descendant:根据祖先元素匹配所有的后代元素,层次关系是祖先和后代. 编写代码,进行测试,以更加清楚的区分两者的区别: <div id="first">1 <

JQuery中层次选择器用法实例详解_jquery

本文实例讲述了JQuery中层次选择器用法.分享给大家供大家参考.具体如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head

Jquery中的层次选择器与find()的区别示例介绍

Jquery中的层次选择器与find()是有一定的区别,本文有个示例可以很好的说明,感兴趣的朋友可以参考下 代码如下: $("#anaylseBody tr").find("td:eq(" + $("#analyse th:contains(" + $(this).val() + ")").index() + ")").hide(); ("#anaylseBody tr") find作为