`
KAXU
  • 浏览: 267227 次
  • 性别: Icon_minigender_1
  • 来自: 武汉
社区版块
存档分类
最新评论

jquery 选择器 :only-child

jQueryCSSHTML 
阅读更多

:only-child

匹配集合中子集里仅仅只有一个元素的元素。返回匹配元素集合

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
  
  <script>
  $(document).ready(function(){
    $("div button:only-child").text("Alone").css("border", "2px blue solid");
  });
  </script>
  <style>
  div { width:100px; height:80px; margin:5px; float:left; background:#b9e }
  </style>
</head>
<body>
  <div>
    <button>Sibling!</button>
    <button>Sibling!</button>
  </div>
  <div>
    <button>Sibling!</button>
  </div>
  <div>
    None
  </div>
  <div>  
    <button>Sibling!</button>
    <button>Sibling!</button>
    <button>Sibling!</button>
  </div>
  <div>
    <button>Sibling!</button>
  </div>
</body>
</html>

 

$("div button:only-child").text("Alone").css("border", "2px blue solid");

匹配div中包含button元素的button元素集合，且该集合里面只有一个元素的button集合。以下是匹配元素集合

<button>Sibling!</button>
<button>Sibling!</button>

分享到：
| jquery 选择器 :last-child
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    jQuery中:only-child选择器用法实例

    本文实例讲述了jQuery中:only-child选择器用法。分享给大家供大家参考。具体分析如下： 此选择器将匹配父元素的唯一子元素。如果其父元素中含有其他元素，那将不会被匹配。 语法结构: 代码如下:$(“:only-child”) ...

    jquery子元素过滤选择器使用示例

    代码如下: :nth-child(‘索引值’)//获取指定元素下的某个子元素的位置，索引从1开始； //偶数行 //$(‘li:nth-child(even)’).addClass(‘class1’);... //只有1个子元素 $(‘li:only-child’).addClass(‘class1’);

    css选择器apolo

    * 参考： jquery css选择器 * 目前实现 * #id 根据给定的ID匹配一个元素 * tagName 匹配给定的元素名的所有元素 * .class 匹配class=class的所有元素 //非IE下，可以直接find * selector1,selector2 将每一个...

    jQuery Selectors(选择器)的使用(七、子元素篇)

    本篇讲解：:nth-child(index/even/odd/equation),:first-child,:last-child,:only-child的用法。 您对本系列文章有任何建议或意见请发送到邮箱：sjzlgt@qq.com 由于是第一次写技术性系列文章，难免会出错或代码BUG...

    简单讲解jQuery中的子元素过滤选择器

    子元素过滤器的过滤规则是通过父元素和子元素的...$('li:only-child').css('background', '#ccc'); //每个父元素只有一个li 元素 $('li:nth-child(odd)').css('background', '#ccc'); //每个父元素奇数li 元素 $('li

    详细介绍CSS中的伪选择器

     我们知道在jquery中有一种选择器叫做“子类选择器”，对应的有:nth-child，:first-child，:last-child，:only-child，这回在CSS中同样 可以办到，可以说一定程度上缓解了jquery的压力，下面简单举个例子。&lt;head...

    JQuery新版中文手册

    选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent &gt; child prev + next prev ~ siblings 基本 :first :last :not(selector) :even :odd :eq...

    Jquery 表单取值赋值的一些基本操作

    E:root:类型为E,并且是文档的根元素 E:nth-child(n):是其父元素的第n个类型为E的子元素 ,基数从1开始 E:first-child:是其父元素的第1个类型为E的子元素 E:last-child:是其父元素的最后一个类型为E的子元素 E:only

    jQuery子属性过滤选择器用法分析

    主要介绍了jQuery子属性过滤选择器用法,实例分析了:first-child、:last-child、:nth-child、:only-chilid等子属性过滤选择器使用技巧,需要的朋友可以参考下

    jquery1.11.0手册

    选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent &gt; child prev + next prev ~ siblings 基本 :first :not(selector) :even :odd :eq(index) :...

    jQuery完全实例.rar

    这个函数接收一个包含 CSS 选择器的字符串，然后用这个字符串去匹配一组元素。 jQuery 的核心功能都是通过这个函数实现的。 jQuery中的一切都构建于这个函数之上，或者说都是在以某种方式使用这个函数。这个函数最...

    Jquery 1.3 简体中文手册

    选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent &gt; child prev + next prev ~ siblings 基本 :first :last :not :even :odd :eq :gt :lt :...

    JQuery 1.3 中文参考手册

    选择器 基本 #id element .class * selector1,selector2,selectorN 层级 ancestor descendant parent &gt; child prev + next prev ~ siblings 基本 :first :last :not :even :odd :eq :gt :lt :...

    jQuery1.4 API

    ) scrollLeft( [val] ) 尺寸 height( [val] ) width( [val] ) innerHeight() innerWidth() outerHeight(options) outerWidth(options) 选择器基本 #id element .class * selector1,selector2,selectorN 层级 ...

    jquery-1.1.3 效率提高800%

    在 jQuery 1.2中，可以在URL参数中指定一个jQuery选择器，这会过滤返回的HTML文档，只取得文档中匹配选择器的元素。此语法类似于"url #some &gt; selector"。 实例 载入文档的sidebar的导航部分到一个无序列表...

    jQuery 1.4.1 中文参考

    3. 选择器 37 3.1 基本 37 3.1.1 #id 37 3.1.2 element 38 3.1.3 .class 38 3.1.4 * 39 3.1.5 selector1,selector2,selectorN 39 3.2 层级 40 3.2.1 ancestor descendant 40 3.2.2 41 3.2.3 prev + next 41 3.2.4 ...

Magicbox
Global site tag (gtag.js) - Google Analytics