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 相关文章推荐
JavaScript 开发中规范性的一点感想
Jun 23 Javascript
JavaScript中使用正则匹配多条,且获取每条中的分组数据
Nov 30 Javascript
js TextArea的选中区域处理
Dec 28 Javascript
js特效,页面下雪的小例子
Jun 17 Javascript
js实现select跳转功能代码
Oct 22 Javascript
jquery实现滑动特效代码
Aug 10 Javascript
jQuery基础知识点总结(DOM操作)
Jun 01 Javascript
jQuery学习笔记之回调函数
Aug 15 Javascript
Angularjs使用过滤器完成排序功能
Sep 20 Javascript
vue实现可视化可拖放的自定义表单的示例代码
Mar 20 Javascript
使用layer弹窗提交表单时判断表单是否输入为空的例子
Sep 26 Javascript
JavaScript构造函数原理及实现流程解析
Nov 19 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 header函数分析详解
2011/08/06 PHP
PHP的autoload机制的实现解析
2012/09/15 PHP
php中的观察者模式简单实例
2015/01/20 PHP
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
PHP实现获取url地址中顶级域名的方法示例
2019/06/05 PHP
提高javascript效率 一次判断,而不要次次判断
2012/03/30 Javascript
js 显示base64编码的二进制流网页图片
2014/04/04 Javascript
javascript函数式编程实例分析
2015/04/25 Javascript
jqGrid表格应用之新增与删除数据附源码下载
2015/12/02 Javascript
如何使用Bootstrap的modal组件自定义alert,confirm和modal对话框
2016/03/01 Javascript
jquery表单插件Autotab使用方法详解
2016/06/24 Javascript
浅析Javascript ES6中的原生Promise
2016/08/25 Javascript
微信小程序中实现一对多发消息详解及实例代码
2017/02/14 Javascript
JavaScript实现的浏览器下载文件的方法
2017/08/09 Javascript
Vue编写多地区选择组件
2017/08/21 Javascript
Vue父组件调用子组件事件方法
2018/02/23 Javascript
小程序getLocation需要在app.json中声明permission字段
2019/04/04 Javascript
Layui 带多选框表格监听事件以及按钮自动点击写法实例
2019/09/02 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
JavaScript 几种循环方式以及模块化的总结
2020/09/03 Javascript
[45:25]完美世界DOTA2联赛循环赛 PXG vs IO 第一场 11.06
2020/11/09 DOTA
Python类的专用方法实例分析
2015/01/09 Python
用Python实现一个简单的能够上传下载的HTTP服务器
2015/05/05 Python
详解Python字符串对象的实现
2015/12/24 Python
Python3学习笔记之列表方法示例详解
2017/10/06 Python
python dataframe向下向上填充,fillna和ffill的方法
2018/11/28 Python
python爬虫开发之PyQuery模块详细使用方法与实例全解
2020/03/09 Python
使用Pycharm在运行过程中,查看每个变量的操作(show variables)
2020/06/08 Python
CSS3正方体旋转示例代码
2013/08/08 HTML / CSS
HTML5 SEO优化的一些建议
2020/08/27 HTML / CSS
医德医风演讲稿
2014/05/20 职场文书
党在我心中演讲稿
2014/09/02 职场文书
教师自我剖析材料
2014/09/29 职场文书
大学生暑假实习总结
2015/07/13 职场文书
大学生军训感言
2015/08/01 职场文书