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 相关文章推荐
jQuery+pjax简单示例汇总
Apr 21 jQuery
jquery中封装函数传递当前元素的方法示例
May 05 jQuery
jQuery扩展_动力节点Java学院整理
Jul 05 jQuery
jquery动态赋值id与动态取id方法示例
Aug 21 jQuery
jQuery实现对网页节点的增删改查功能示例
Sep 18 jQuery
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
基于jQuery的$.getScript方法去加载javaScript文档解析
Nov 08 jQuery
jQuery创建及操作xml格式数据示例
May 26 jQuery
jQuery实现炫丽的3d旋转星空效果
Jul 04 jQuery
jQuery实现购物车的总价计算和总价传值功能
Nov 28 jQuery
基于Bootstrap和JQuery实现动态打开和关闭tab页的实例代码
Jun 10 jQuery
jQuery实现html可联动的百分比进度条
Mar 26 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
复杂检索数据并分页显示的处理方法
2006/10/09 PHP
php基础知识:类与对象(1)
2006/12/13 PHP
PHP获取客户端真实IP地址的5种情况分析和实现代码
2014/07/08 PHP
PHP实现的简单网络硬盘
2015/07/29 PHP
使用phpexcel类实现excel导入mysql数据库功能(实例代码)
2016/05/12 PHP
PHP实现根据数组的值进行分组的方法
2017/04/20 PHP
Laravel学习教程之本地化模块
2017/08/18 PHP
慎用 somefunction.prototype 分析
2009/06/02 Javascript
层序遍历在ExtJs的TreePanel中的应用
2009/10/16 Javascript
poshytip 基于jquery的 插件 主要用于显示微博人的图像和鼠标提示等
2012/10/12 Javascript
实现点击列表弹出列表索引的两种方式
2013/03/08 Javascript
jquery在IE、FF浏览器的差别详细探讨
2013/04/28 Javascript
JavaScript的RequireJS库入门指南
2015/07/01 Javascript
AngularJS中的Directive自定义一个表格
2016/01/25 Javascript
Angular的$http与$location
2016/12/26 Javascript
js获取文件里面的所有文件名(实例)
2017/10/17 Javascript
JavaScript创建对象的常用方式总结
2018/08/10 Javascript
vue.js 双层嵌套for遍历的方法详解, 类似php foreach()
2018/09/07 Javascript
python实现堆栈与队列的方法
2015/01/15 Python
Python基础教程之tcp socket编程详解及简单实例
2017/02/23 Python
Python实现嵌套列表去重方法示例
2017/12/28 Python
Python实现定时备份mysql数据库并把备份数据库邮件发送
2018/03/08 Python
Python 实现将数组/矩阵转换成Image类
2020/01/09 Python
使用TensorFlow搭建一个全连接神经网络教程
2020/02/06 Python
python基于openpyxl生成excel文件
2020/12/23 Python
英国领先的大码时装品牌之一:Elvi
2018/08/26 全球购物
后勤人员自我评价怎么写
2013/09/19 职场文书
医药专业应届毕业生求职信范文
2014/01/01 职场文书
大学生职业生涯规划书范文
2014/01/04 职场文书
小学生暑假感言
2014/02/06 职场文书
农村党员一句话承诺
2014/05/30 职场文书
工会主席事迹材料
2014/06/03 职场文书
放飞梦想演讲稿200字
2014/08/26 职场文书
学校团代会开幕词
2016/03/04 职场文书
判断Python中的Nonetype类型
2021/05/25 Python
SpringDataJPA在Entity中常用的注解介绍
2021/12/06 Java/Android