jQuery子元素过滤选择器用法示例


Posted in Javascript onSeptember 09, 2016

本文实例讲述了jQuery子元素过滤选择器用法。分享给大家供大家参考,具体如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<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(){
  //选取每个父元素下的第2个子元素
  $('#btn1').click(function(){
    $('div.one :nth-child(2)').css("background","#bbffaa");
  })
  //选取每个父元素下的第一个子元素
  $('#btn2').click(function(){
    $('div.one :first-child').css("background","#bbffaa");
  })
  //选取每个父元素下的最后一个子元素
  $('#btn3').click(function(){
    $('div.one :last-child').css("background","#bbffaa");
  })
  //如果父元素下的仅仅只有一个子元素,那么选中这个子元素
  $('#btn4').click(function(){
    $('div.one :only-child').css("background","#bbffaa");
  })
});
</script>
</head>
<body>
<button id="reset">手动重置页面元素</button>
<input type="checkbox" id="isreset" checked="checked"/>
<label for="isreset">点击下列按钮时先自动重置页面</label>
<h3>子元素过滤选择器.</h3>
<input type="button" value="选取每个class为one的div父元素下的第2个子元素." id="btn1"/>
<input type="button" value="选取每个class为one的div父元素下的第一个子元素." id="btn2"/>
<input type="button" value="选取每个class为one的div父元素下的最后一个子元素." id="btn3"/>
<input type="button" value="如果class为one的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 28 Javascript
jquery实现的一个文章自定义分段显示功能
May 23 Javascript
jQuery 过滤方法filter()选择具有特殊属性的元素
Jun 15 Javascript
JQuery中模拟image的ajaxPrefilter与ajaxTransport处理
Jun 19 Javascript
javascript简单实现滑动菜单效果的方法
Jul 27 Javascript
JavaScript html5 canvas绘制时钟效果(二)
Mar 27 Javascript
jQuery qrcode生成二维码的方法
Apr 03 Javascript
jQuery控制div实现随滚动条滚动效果
Jun 07 Javascript
JS代码实现百度地图 画圆 删除标注
Oct 12 Javascript
JS高阶函数原理与用法实例分析
Jan 15 Javascript
vue 设置 input 为不可以编辑的实现方法
Sep 19 Javascript
解决VUEX的mapState/...mapState等取值问题
Jul 24 Javascript
老生常谈JQuery data方法的使用
Sep 09 #Javascript
Vuejs第十一篇组件之slot内容分发实例详解
Sep 09 #Javascript
jQuery内容过滤选择器用法示例
Sep 09 #Javascript
Vue.js动态组件解析
Sep 09 #Javascript
JS判断form内所有表单是否为空的简单实例
Sep 09 #Javascript
jQuery查找节点并获取节点属性的方法
Sep 09 #Javascript
js控制文本框只能输入中文、英文、数字与指定特殊符号的实现代码
Sep 09 #Javascript
You might like
PHP判断是否连接上网络的方法
2015/07/01 PHP
基于PHP技术开发客服工单系统
2016/01/06 PHP
PHP实现原生态图片上传封装类方法
2016/11/08 PHP
php实现的简单数据库操作Model类
2016/11/16 PHP
PHP+MySQL使用mysql_num_rows实现模糊查询图书信息功能
2018/05/31 PHP
javascript 动态调整图片尺寸实现代码
2009/12/28 Javascript
ASP.NET中使用后端代码注册脚本 生成JQUERY-EASYUI的界面错位的解决方法
2010/06/12 Javascript
Javascript动态绑定事件的简单实现代码
2010/12/25 Javascript
js创建元素(节点)示例
2014/01/02 Javascript
完美兼容各大浏览器的jQuery插件实现图片切换特效
2014/12/12 Javascript
使用JavaScript实现连续滚动字幕效果的方法
2015/07/07 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
BootstrapTable加载按钮功能实例代码详解
2017/09/22 Javascript
浅谈angular4.0中路由传递参数、获取参数最nice的写法
2018/03/12 Javascript
通过封装scroll.js 获取滚动条的值
2018/07/13 Javascript
微信小程序新手教程之启动页的重要性
2019/03/03 Javascript
Node.js API详解之 dgram模块用法实例分析
2020/06/05 Javascript
解决VueCil代理本地proxytable无效报错404的问题
2020/11/07 Javascript
vue-resource 拦截器interceptors使用详解
2021/01/18 Vue.js
Python使用django框架实现多人在线匿名聊天的小程序
2017/11/29 Python
python 编码规范整理
2018/05/05 Python
python try except返回异常的信息字符串代码实例
2019/08/15 Python
python GUI库图形界面开发之PyQt5控件数据拖曳Drag与Drop详细使用方法与实例
2020/02/27 Python
Django web自定义通用权限控制实现方法
2020/11/24 Python
Python项目打包成二进制的方法
2020/12/30 Python
详解Django中的FBV和CBV对比分析
2021/03/01 Python
前端使用canvas生成盲水印的加密解密的实现
2020/12/16 HTML / CSS
Maisons du Monde德国:法国家具和装饰的市场领导者
2019/07/26 全球购物
财务工作个人求职的自我评价
2013/12/19 职场文书
抗震救灾标语
2014/06/26 职场文书
小学综合实践活动总结
2014/07/07 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
防火标语大全
2014/10/06 职场文书
初中生毕业评语
2014/12/29 职场文书
Mysql基础知识点汇总
2021/05/26 MySQL
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS