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 相关文章推荐
js 替换
Feb 19 Javascript
基于jquery的lazy loader插件实现图片的延迟加载[简单使用]
May 07 Javascript
jquery ajax对特殊字符进行转义防止js注入使用示例
Nov 21 Javascript
JS获得多个同name 的input输入框的值的实现方法
Jan 09 Javascript
AngularJS自定义指令之复制指令实现方法
May 18 Javascript
Vue中的slot使用插槽分发内容的方法
Mar 01 Javascript
使用jQuery动态设置单选框的选中效果
Dec 06 jQuery
使用 vue 实例更好的监听事件及vue实例的方法
Apr 22 Javascript
ES6 Object属性新的写法实例小结
Jun 25 Javascript
jQuery实现图片下载代码
Jul 18 jQuery
layer弹出层自适应高度,垂直水平居中的实现
Sep 16 Javascript
jquery轻量级数字动画插件countUp.js使用详解
Oct 17 jQuery
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 删除目录下N分钟前创建的所有文件的实现代码
2013/08/10 PHP
preg_match_all使用心得分享
2014/01/31 PHP
php自定义截取中文字符串-utf8版
2017/02/27 PHP
PHP实现的观察者模式实例
2017/06/21 PHP
Laravel使用swoole实现websocket主动消息推送的方法介绍
2019/10/20 PHP
javascript实现的动态添加表单元素input,button等(appendChild)
2007/11/24 Javascript
javascript 函数调用规则
2009/08/26 Javascript
jQuery 类twitter的文本字数限制带提示效果插件
2010/04/16 Javascript
jquery实现table鼠标经过变色代码
2013/09/25 Javascript
纯js分页代码(简洁实用)
2013/11/05 Javascript
js实现ifram取父窗口URL地址的方法
2015/02/09 Javascript
纯js实现重发验证码按钮倒数功能
2015/04/21 Javascript
JS模拟键盘打字效果的方法
2015/08/05 Javascript
JavaScript函数的一些注意要点小结及js匿名函数
2015/11/10 Javascript
详解JavaScript对象序列化
2016/01/19 Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
2016/09/09 Javascript
jquery插件treegrid树状表格的使用方法详解(.Net平台)
2017/01/03 Javascript
前端开发不得不知的10个最佳ES6特性
2017/08/30 Javascript
微信小程序登录时如何获取input框中的内容
2019/12/04 Javascript
浅谈Vue 自动化部署打包上线
2020/06/14 Javascript
JavaScript中EventBus实现对象之间通信
2020/10/18 Javascript
Python创建文件和追加文件内容实例
2014/10/21 Python
全面解析Python的While循环语句的使用方法
2015/10/13 Python
Pandas:DataFrame对象的基础操作方法
2018/06/07 Python
python opencv圆、椭圆与任意多边形的绘制实例详解
2020/02/06 Python
多个python文件调用logging模块报错误
2020/02/12 Python
Html5画布_动力节点Java学院整理
2017/07/13 HTML / CSS
全球最大的网上自行车商店:Chain Reaction Cycles
2016/12/02 全球购物
JAVA语言如何进行异常处理,关键字:throws,throw,try,catch,finally分别代表什么意义?在try块中可以抛出异常吗?
2013/07/02 面试题
迟到检讨书900字
2014/01/14 职场文书
大学校务公开实施方案
2014/03/31 职场文书
海洋科学专业求职信
2014/08/10 职场文书
大学团日活动新闻稿
2014/09/10 职场文书
房屋出租协议书范本(标准版)
2014/09/24 职场文书
退税申请报告怎么写
2015/05/18 职场文书
MySQL Innodb索引机制详细介绍
2021/11/23 MySQL