jQuery层次选择器用法示例


Posted in Javascript onSeptember 09, 2016

本文实例讲述了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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>2-5</title>
<!--  引入jQuery -->
<script src="js/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="js/assist.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript">
$(document).ready(function(){
  //选择 body内的所有div元素.
  $('#btn1').click(function(){
    $('body div').css("background","#bbffaa");
  })
  //在body内的选择 元素名是div 的子元素.
  $('#btn2').click(function(){
    $('body > div').css("background","#bbffaa");
  })
  //选择 所有class为one 的下一个div元素.
  $('#btn3').click(function(){
    $('.one + div').css("background","#bbffaa");
  })
  //选择 id为two的元素后面的所有div兄弟元素.
  $('#btn4').click(function(){
    $('#two ~ div').css("background","#bbffaa");
  })
});
</script>
</head>
<body>
<h3>层次选择器.</h3>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/>
<label for="isreset">点击下列按钮时先自动重置页面</label>
<br />
<br />
<input type="button" value="选择 body内的所有div元素." id="btn1"/>
<input type="button" value="在body内,选择子元素是div的。" id="btn2"/>
<input type="button" value="选择 所有class为one 的下一个div元素." id="btn3"/>
<input type="button" value="选择 id为two的元素后面的所有div兄弟元素." id="btn4"/>
<br />
<br />
<!-- 测试的元素 -->
<div class="one" id="one" > id为one,class为one的div
  <div class="mini">class为mini</div>
</div>
<div class="one" id="two" title="test" > id为two,class为one,title为test的div.
  <div class="mini" title="other">class为mini,title为other</div>
  <div class="mini" title="test">class为mini,title为test</div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini"></div>
</div>
<div class="one">
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini">class为mini</div>
  <div class="mini" title="tesst">class为mini,title为tesst</div>
</div>
<div style="display:none;" class="none">style的display为"none"的div</div>
<div class="hide">class为"hide"的div</div>
<div> 包含input的type为"hidden"的div
  <input type="hidden" size="8"/>
</div>
<span id="mover">正在执行动画的span元素.</span>
</body>
</html>

效果图:

jQuery层次选择器用法示例

希望本文所述对大家jQuery程序设计有所帮助。

Javascript 相关文章推荐
javascript 对表格的行和列都能加亮显示
Dec 26 Javascript
javascript在网页中实现读取剪贴板粘贴截图功能
Jun 07 Javascript
javascript中undefined与null的区别
Aug 16 Javascript
jQuery中bind(),live(),delegate(),on()绑定事件方法实例详解
Jan 19 Javascript
Ajax分页插件Pagination从前台jQuery到后端java总结
Jul 22 Javascript
实现微信小程序的wxml文件和wxss文件在webstrom的支持
Jun 12 Javascript
JS实现仿微信支付弹窗功能
Jun 25 Javascript
微信小程序之裁剪图片成圆形的实现代码
Oct 11 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
Sep 05 Javascript
Vue实现剪贴板复制功能
Dec 31 Javascript
Vue实现手机计算器
Aug 17 Javascript
基于JavaScript实现随机点名器
Feb 25 Javascript
jQuery基本过滤选择器用法示例
Sep 09 #Javascript
jQuery可见性过滤选择器用法示例
Sep 09 #Javascript
javascript比较语义化版本号的实现代码
Sep 09 #Javascript
js防阻塞加载的实现方法
Sep 09 #Javascript
Vuejs第一篇之入门教程详解(单向绑定、双向绑定、列表渲染、响应函数)
Sep 09 #Javascript
微信+angularJS的SPA应用中用router进行页面跳转,jssdk校验失败问题解决
Sep 09 #Javascript
Vuejs第十三篇之组件——杂项
Sep 09 #Javascript
You might like
PHP中Date获取时间不正确怎么办
2008/06/05 PHP
php利用header函数实现文件下载时直接提示保存
2009/11/12 PHP
浅谈apache和nginx的rewrite的区别
2013/02/22 PHP
基于php在各种web服务器的运行模式详解
2013/06/03 PHP
PHP常用处理静态操作类
2015/04/03 PHP
php 解决substr()截取中文字符乱码问题
2016/07/18 PHP
php基于SQLite实现的分页功能示例
2017/06/21 PHP
对联广告js flash激活
2006/10/19 Javascript
js 遍历对象的属性的代码
2011/12/29 Javascript
ASP.NET MVC中EasyUI的datagrid跨域调用实现代码
2012/03/14 Javascript
推荐40款强大的 jQuery 导航插件和教程(上篇)
2012/09/14 Javascript
JS+CSS实现自动改变切换方向图片幻灯切换效果的方法
2015/03/02 Javascript
详解vue-router 2.0 常用基础知识点之导航钩子
2017/05/10 Javascript
浅谈node的事件机制
2017/10/09 Javascript
基于vue 实现token验证的实例代码
2017/12/14 Javascript
如何自动化部署项目?折腾服务器之旅~
2019/04/16 Javascript
小程序分页实践之编写可复用分页组件
2019/07/18 Javascript
JS多个异步请求 按顺序执行next实现解析
2019/09/16 Javascript
[02:42]岂曰无衣,与子同袍!DOTA2致敬每一位守护人
2020/02/17 DOTA
Python中使用SAX解析xml实例
2014/11/21 Python
Python 实现购物商城,含有用户入口和商家入口的示例
2017/09/15 Python
疯狂上涨的Python 开发者应从2.x还是3.x着手?
2017/11/16 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
Python面向对象之静态属性、类方法与静态方法分析
2018/08/24 Python
python+mysql实现教务管理系统
2019/02/20 Python
Atom Python 配置Python3 解释器的方法
2019/08/28 Python
Python学习之路安装pycharm的教程详解
2020/06/17 Python
python 浮点数四舍五入需要注意的地方
2020/08/18 Python
python实现自动打卡的示例代码
2020/10/10 Python
小车司机岗位职责
2013/11/25 职场文书
售后求职信范文
2014/03/15 职场文书
2014年十八届四中全会思想汇报范文
2014/10/17 职场文书
寒假安全保证书
2015/02/28 职场文书
冰雪公主观后感
2015/06/16 职场文书
Python深度学习之Pytorch初步使用
2021/05/20 Python
再次探讨go实现无限 buffer 的 channel方法
2021/06/13 Golang