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 相关文章推荐
用RadioButten或CheckBox实现div的显示与隐藏
Sep 21 Javascript
深入剖析JavaScript中的枚举功能
Mar 06 Javascript
jQuery实现ajax调用WCF服务的方法(附带demo下载)
Dec 04 Javascript
在Linux系统中搭建Node.js开发环境的简单步骤讲解
Jan 26 Javascript
Node.js程序中的本地文件操作用法小结
Mar 06 Javascript
深入理解js promise chain
May 05 Javascript
Windows环境下npm install 报错: operation not permitted, rename的解决方法
Sep 26 Javascript
js canvas仿支付宝芝麻信用分仪表盘
Nov 16 Javascript
ReactNative短信验证码倒计时控件的实现代码
Jul 20 Javascript
深入理解JS的事件绑定、事件流模型
May 13 Javascript
Element Alert警告的具体使用方法
Jul 27 Javascript
用webAPI实现图片放大镜效果
Nov 23 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
调频问题解答
2021/03/01 无线电
PHP.MVC的模板标签系统(四)
2006/09/05 PHP
浅谈使用PHP开发微信支付的流程
2015/10/04 PHP
php中mkdir()函数的权限问题分析
2016/09/24 PHP
浅谈php数组array_change_key_case() 函数和array_chunk()函数
2016/10/22 PHP
PHP中使用jQuery+Ajax实现分页查询多功能操作(示例讲解)
2017/09/17 PHP
javascript实现动态CSS换肤技术的脚本
2007/06/29 Javascript
AJAX的跨域与JSONP(为文章自动添加短址的功能)
2010/01/17 Javascript
EXTJS内使用ACTIVEX控件引起崩溃问题的解决方法
2010/03/31 Javascript
js 判断js函数、变量是否存在的简单示例代码
2014/03/04 Javascript
Javascript基础教程之比较操作符
2015/01/18 Javascript
数据分析软件之FineReport教程:[5]参数界面JS(全)
2015/08/13 Javascript
自定义Angular指令与jQuery实现的Bootstrap风格数据双向绑定的单选与多选下拉框
2015/12/12 Javascript
关于 jQuery Easyui异步加载tree的问题解析
2016/12/06 Javascript
Vue学习笔记进阶篇之多元素及多组件过渡
2017/07/19 Javascript
图文介绍Vue父组件向子组件传值
2018/02/17 Javascript
js前端面试之同步与异步问题详解
2019/04/03 Javascript
vue组件化中slot的基本使用方法
2019/05/01 Javascript
原生Vue 实现右键菜单组件功能
2019/12/16 Javascript
在博客园博文中添加自定义右键菜单的方法详解
2020/02/05 Javascript
可拖拽组件slider.js使用方法详解
2020/12/04 Javascript
[47:03]完美世界DOTA2联赛PWL S3 Galaxy Racer vs Phoenix 第二场 12.10
2020/12/13 DOTA
pymongo实现多结果进行多列排序的方法
2015/05/16 Python
在Python中操作字典之fromkeys()方法的使用
2015/05/21 Python
使用Python实现从各个子文件夹中复制指定文件的方法
2018/10/25 Python
详解Python正则表达式re模块
2019/03/19 Python
python关于矩阵重复赋值覆盖问题的解决方法
2019/07/19 Python
Python 类,property属性(简化属性的操作),@property,property()用法示例
2019/10/12 Python
如何基于python把文字图片写入word文档
2020/07/31 Python
Canvas 文字碰撞检测并抽稀的方法
2019/05/27 HTML / CSS
公司营业员的自我评价
2014/03/04 职场文书
项目经理任命书范本
2014/06/05 职场文书
公司财务经理岗位职责
2015/04/08 职场文书
居委会工作总结2015
2015/05/18 职场文书
大学开学典礼新闻稿
2015/07/17 职场文书
Win11快速关闭所有广告推荐
2022/04/19 数码科技