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>

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

Javascript 相关文章推荐
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
jquery form表单序列化为对象的示例代码
Mar 05 Javascript
js图片预加载示例
Apr 30 Javascript
动态读取JSON解析键值对的方法
Jun 03 Javascript
JavaScript实现动画打开半透明提示层的方法
Apr 21 Javascript
JS实现可关闭的对联广告效果代码
Sep 14 Javascript
jQuery插件datatables使用教程
Apr 21 Javascript
Angularjs中的验证input输入框只能输入数字和小数点的写法(推荐)
Aug 16 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
vue实现pdf导出解决生成canvas模糊等问题(推荐)
Oct 18 Javascript
Vue开发之封装分页组件与使用示例
Apr 25 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
You might like
php数组函数序列之end() - 移动数组内部指针到最后一个元素,并返回该元素的值
2011/10/31 PHP
PHP 基于文件头的文件类型验证类函数
2012/05/01 PHP
初识PHP中的Swoole
2016/04/05 PHP
JS实现浏览器菜单命令
2006/09/05 Javascript
fckeditor 获取文本框值的实现代码
2009/02/09 Javascript
屏蔽Flash右键信息的js代码
2010/01/17 Javascript
jQuery链式操作如何实现以及为什么要用链式操作
2013/01/17 Javascript
JavaScript中setAttribute用法介绍
2013/07/20 Javascript
使用js显示当前时间示例
2014/03/02 Javascript
JavaScript获取伪元素(Pseudo-Element)属性的方法技巧
2015/03/13 Javascript
jQuery实现文本框输入同步的方法
2015/06/20 Javascript
讲解JavaScript的Backbone.js框架的MVC结构设计理念
2016/02/14 Javascript
React Native之TextInput组件解析示例
2017/08/22 Javascript
React 源码中的依赖注入方法
2018/11/07 Javascript
Vue + ts实现轮播插件的示例
2020/11/10 Javascript
python中from module import * 的一个坑
2014/07/20 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
一个基于flask的web应用诞生 使用模板引擎和表单插件(2)
2017/04/11 Python
python+opencv实现阈值分割
2018/12/26 Python
Python实现合并两个有序链表的方法示例
2019/01/31 Python
详解Python匿名函数(lambda函数)
2019/04/19 Python
python如何制作缩略图
2019/04/30 Python
Django url,从一个页面调到另个页面的方法
2019/08/21 Python
python实现输出一个序列的所有子序列示例
2019/11/18 Python
使用 prometheus python 库编写自定义指标的方法(完整代码)
2020/06/29 Python
Html5中localStorage存储JSON数据并读取JSON数据的实现方法
2017/02/13 HTML / CSS
彪马日本官网:PUMA日本
2019/01/31 全球购物
AURALog面试题软件测试方面
2013/10/22 面试题
清华大学自主招生自荐信
2014/01/29 职场文书
冰淇淋店的创业计划书
2014/02/07 职场文书
幼儿园门卫岗位职责
2014/02/14 职场文书
聘用意向书范本
2014/04/01 职场文书
用Python简陋模拟n阶魔方
2021/04/17 Python
上帝为你开了一扇窗之Tkinter常用函数详解
2021/06/02 Python
OpenCV-Python模板匹配人眼的实例
2021/06/08 Python
使用Cargo工具高效创建Rust项目
2022/08/14 Javascript