jQuery选择器之子元素过滤选择器


Posted in jQuery onSeptember 28, 2017

本文实例为大家分享了jQuery子元素过滤选择器的具体代码,供大家参考,具体内容如下

<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>Untitled Document</title>
    <link rel="stylesheet" type="text/css" href="css/style.css" rel="external nofollow" >
        <style type="text/css">
      div, span, p {
        width: 140px;
        height: 140px;
        margin: 5px;
        background: #aaa;
        border: #000 1px solid;
        float: left;
        font-size: 17px;
        font-family: Verdana;
      }
      
      div.mini {
        width: 55px;
        height: 55px;
        background-color: #aaa;
        font-size: 12px;
      }
      
      div.hide {
        display: none;
      }      
    </style>
    <script type="text/javascript" src="jquery-1.7.2.js"></script>
    <script type="text/javascript">
      $(document).ready(function(){
        
        $("#btn1").click(function(){
          //选取子元素, 需要在选择器前添加一个空格. 
          $("div.one :nth-child(2)").css("background", "#ffbbaa");
        });
        $("#btn2").click(function(){
          $("div.one :first-child").css("background", "#ffbbaa");
        });
        $("#btn3").click(function(){
          $("div.one :last-child").css("background", "#ffbbaa");
        });
        
        $("#btn4").click(function(){
          $("div.one :only-child").css("background", "#ffbbaa");
        });
        
      });
    </script>
  </head>
  <body>    
    <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" value="123456789" size="8">
    </div>
    <div id="mover">正在执行动画的div元素.</div>
  </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

jQuery 相关文章推荐
关于JS与jQuery中的文档加载问题
Aug 22 jQuery
JS和jQuery通过this获取html标签中的属性值(实例代码)
Sep 11 jQuery
springmvc接收jquery提交的数组数据代码分享
Oct 28 jQuery
jquery ajaxfileupload异步上传插件
Nov 21 jQuery
jQuery与vue实现拖动验证码功能
Jan 30 jQuery
实现jquery放大镜的两种方法
Feb 22 jQuery
在vue项目中使用Jquery-contextmenu插件的步骤讲解
Jan 27 jQuery
jQuery实现的卷帘门滑入滑出效果【案例】
Feb 18 jQuery
jquery+ajax实现上传图片并显示上传进度功能【附php后台接收】
Jun 06 jQuery
jQuery 图片查看器插件 Viewer.js用法简单示例
Apr 04 jQuery
jquery实现有过渡效果的tab切换
Jul 17 jQuery
jquery实现鼠标悬浮弹出气泡提示框
Dec 23 jQuery
jQuery选择器之属性过滤选择器详解
Sep 28 #jQuery
jquery实现左右轮播图效果
Sep 28 #jQuery
JQuery 选择器、DOM节点操作练习实例
Sep 28 #jQuery
jQuery 利用ztree实现树形表格的实例代码
Sep 27 #jQuery
JavaScript实现离开页面前提示功能【附jQuery实现方法】
Sep 26 #jQuery
jQuery EasyUI Layout实现tabs标签的实例
Sep 26 #jQuery
jQuery EasyUI开发技巧总结
Sep 26 #jQuery
You might like
最新的php 文件上传模型,支持多文件上传
2009/08/13 PHP
php curl常见错误:SSL错误、bool(false)
2011/12/28 PHP
解析thinkphp中的导入文件标签
2013/06/20 PHP
ThinkPHP中的关联模型注意点
2014/06/16 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
PHP基于面向对象封装的分页类示例
2019/03/15 PHP
PHP获取php,mysql,apche的版本信息及更多服务器信息
2021/03/09 PHP
JavaScript静态的动态
2006/09/18 Javascript
一个tab标签切换效果代码
2009/03/27 Javascript
jquery form表单提交插件asp.net后台中文解码
2010/06/12 Javascript
javascript中String类的subString()方法和slice()方法
2011/05/24 Javascript
js 在定义的时候立即执行的函数表达式(function)写法
2013/01/16 Javascript
一个简单的弹性返回顶部JS代码实现介绍
2013/06/09 Javascript
JS for循环中i++ 和 ++i的区别介绍
2016/07/20 Javascript
js html5 css俄罗斯方块游戏再现
2016/10/17 Javascript
从组件封装看Vue的作用域插槽的实现
2019/02/12 Javascript
基于JS实现web端录音与播放功能
2019/04/17 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
2020/07/22 Javascript
JS实现小米轮播图
2020/09/21 Javascript
vue使用keep-alive实现组件切换时保存原组件数据方法
2020/10/30 Javascript
python 利用栈和队列模拟递归的过程
2018/05/29 Python
Python 从subprocess运行的子进程中实时获取输出的例子
2019/08/14 Python
pytorch 求网络模型参数实例
2019/12/30 Python
详解tensorflow2.x版本无法调用gpu的一种解决方法
2020/05/25 Python
CSS Grid布局教程之什么是网格布局
2014/12/30 HTML / CSS
html5新增的属性和废除的属性简要概述
2013/02/20 HTML / CSS
德国童装购物网站:NICKI´S.com
2018/04/20 全球购物
沃尔玛加拿大:Walmart.ca
2020/03/02 全球购物
什么是符号链接,什么是硬链接?符号链接与硬链接的区别是什么?
2014/01/19 面试题
2013年入党人员的自我鉴定
2013/10/25 职场文书
临床医学系毕业生推荐信
2013/11/09 职场文书
乐观大学生的自我评价
2014/01/10 职场文书
人力资源职位说明书
2014/07/29 职场文书
答谢酒会主持词
2015/07/02 职场文书
高中信息技术教学反思
2016/02/16 职场文书
SqlServer: 如何更改表的文件组?(进而改变存储位置)
2021/04/05 SQL Server