编程 Javascript

jQuery层级选择器实例代码

Posted in Javascript onFebruary 06, 2017

本文实例为大家分享了jQuery层级选择器的具体代码，供大家参考，具体内容如下

<!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">
  <script src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>
</head>

<body>
  <h2>子选择器与后代选择器</h2>
  <div class="left">
    <div class="aaron">
      <p>div下的第一个p元素</p>
    </div>
    <div class="aaron">
      <p>div下的第一个p元素</p>
    </div>
  </div>
  <div class="right">
    <div class="imooc">
      <article>
        <p>div下的article下的p元素</p>
      </article>
    </div>
    <div class="imooc">
      <article>
        <p>div下的article下的p元素</p>
      </article>
    </div>
  </div>

  <script type="text/javascript">
    //子选择器
    //$('div > p') 选择所有div元素里面的子元素P
    $('div > p').css("border", "5px groove red");
  </script>

  <script type="text/javascript">
    //后代选择器
    //$('div p') 选择所有div元素里面的p元素
    $('div p').css("border", "9px groove green");
  </script>


  <h2>相邻兄弟选择器与一般兄弟选择器</h2>
  <div class="bottom">
    <div>兄弟节点div, +~选择器不能向前选择</div>
    <span class="prev">选择器span元素</span>
    <div>span后第一个兄弟节点div</div>
    <div>兄弟节点div
      <div class="small">子元素div</div>
    </div>
    <span>兄弟节点span,不可选</span>
    <div>兄弟节点div</div>
  </div>

  <script type="text/javascript">
    //相邻兄弟选择器
    //选取prev后面的第一个的div兄弟节点
    $(".prev + div").css("border", "3px groove blue");
  </script>

  <script type="text/javascript">
    //一般相邻选择器
    //选取prev后面的所有的div兄弟节点
    $(".prev ~ div").css("border", "3px groove blue");
  </script>

</body>

</html>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

jQuery层级选择器实例代码

- Author -

lijiao

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

javscript对象原型的一些看法

Sep 19 Javascript

汉化英文版的Dreamweaver CS5并自动提示jquery

Nov 25 Javascript

提升你网站水平的jQuery插件集合推荐

Apr 19 Javascript

使用JQuery和CSS模拟超链接的用户单击事件的实现代码

May 23 Javascript

js Array对象的扩展函数代码

Apr 24 Javascript

Jqgrid表格随窗口大小改变而改变的简单实例

Dec 28 Javascript

jQuery实现数秒后自动提交form的方法

Mar 05 Javascript

jQuery获得指定元素坐标的方法

Apr 14 Javascript

简单的JS时钟实例讲解

Jan 13 Javascript

js链表操作(实例讲解)

Aug 29 Javascript

详解vue如何使用rules对表单字段进行校验

Oct 17 Javascript

JavaScript实现跟随鼠标移动的盒子

Jan 28 Javascript

jQuery元素选择器实例代码

Feb 06 #Javascript

对称加密与非对称加密优缺点详解

Feb 06 #Javascript

jquery实现input框获取焦点的方法

Feb 06 #Javascript

jQuery表单元素选择器代码实例

Feb 06 #Javascript

Jquery鼠标放上去显示全名的实现方法

Feb 06 #Javascript

如何获取元素的最终background-color

Feb 06 #Javascript

a标签置灰不可点击的实现方法

Feb 06 #Javascript