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 相关文章推荐
js函数使用技巧之 setTimeout(function(){},0)
Feb 09 Javascript
javascript jscroll模拟html元素滚动条
Dec 18 Javascript
Bootstrap表单布局样式源代码
Jul 04 Javascript
利用BootStrap的Carousel.js实现轮播图动画效果
Dec 21 Javascript
原生js实现无缝轮播图效果
Jan 11 Javascript
微信小程序input框中加入小图标的实现方法
Jun 19 Javascript
ES6中异步对象Promise用法详解
Jul 31 Javascript
深入理解 TypeScript Reflect Metadata
Dec 12 Javascript
JS精确判断数据类型代码实例
Dec 18 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
JavaScript的一些小技巧分享
Jan 06 Javascript
Vue实现导入Excel功能步骤详解
Jul 03 Vue.js
老生常谈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边学边教》(01.开篇――准备工作)
2006/12/13 PHP
php 运行效率总结(提示程序速度)
2009/11/26 PHP
PHP无限分类(树形类)
2013/09/28 PHP
PHP中array_keys和array_unique函数源码的分析
2016/02/26 PHP
php简单实现sql防注入的方法
2016/04/22 PHP
YII分模块加载路由的实现方法
2018/10/01 PHP
Thinkphp5.0 框架视图view的比较标签用法分析
2019/10/12 PHP
js实现拖拽 闭包函数详细介绍
2012/11/25 Javascript
jQuery使用prepend()方法在元素前添加内容用法实例
2015/03/26 Javascript
动态JavaScript所造成一些你不知道的危害
2016/09/25 Javascript
解决vue打包之后静态资源图片失效的问题
2018/02/21 Javascript
angularjs使用div模拟textarea文本框的方法
2018/10/02 Javascript
jQuery实现提交表单时不提交隐藏div中input的方法
2019/10/08 jQuery
vue+iview实现分页及查询功能
2020/11/17 Vue.js
[01:10]为家乡而战!完美世界城市挑战赛全国总决赛花絮
2019/07/25 DOTA
Python中title()方法的使用简介
2015/05/20 Python
使用pandas批量处理矢量化字符串的实例讲解
2018/07/10 Python
python使用ddt过程中遇到的问题及解决方案【推荐】
2018/10/29 Python
解决PyCharm的Python.exe已经停止工作的问题
2018/11/29 Python
python实现桌面托盘气泡提示
2019/07/29 Python
Python如何省略括号方法详解
2020/03/21 Python
python 画条形图(柱状图)实例
2020/04/24 Python
Python根据指定文件生成XML的方法
2020/06/29 Python
关于探究python中sys.argv时遇到的问题详解
2021/02/23 Python
python爬虫破解字体加密案例详解
2021/03/02 Python
英国天然有机美容护肤品:Neal’s Yard Remedies
2018/05/05 全球购物
中国京东和泰国中央集团合资的网站:JD CENTRAL
2020/08/22 全球购物
节能环保演讲稿
2014/08/28 职场文书
小学班主任评语
2014/12/29 职场文书
现役军人家属慰问信
2015/03/24 职场文书
2015年六一儿童节活动方案
2015/05/05 职场文书
小学语文继续教育研修日志
2015/11/13 职场文书
七年级数学教学反思
2016/02/17 职场文书
Nginx设置HTTPS的方法步骤 443证书配置方法
2022/03/21 Servers
铁拳制作人赞《铁拳7》老头环Mod:制作精良 但别弄了
2022/04/03 其他游戏
Windows Server 2016 配置 IIS 的详细步骤
2022/04/28 Servers