jquery选择器大全（2）

书接上回...

2. 内容过滤选择器
——2.1 :contains(text)（取包含text文本的元素）
// dd元素中包含"jQuery"文本的会变色
 $('dd:contains("jQuery")').css('color', '#f00');

Eg：下面的代码，第一个dd会变色

<dl>
    <dt>技术</dt>
    <dd>jQuery, .NET, CLR</dd>
    <dt>SEO</dt>
    <dd>关键字排名</dd>
    <dt>其他</dt>
    <dd></dd>
</dl>

如图：


——2.2 :empty（取不包含子元素或文本为空的元素）
 $('dd:empty').html('没有内容');

Eg：下面第三个dd会显示"没有内容"文本

<dl>
    <dt>技术</dt>
    <dd>jQuery, .NET, CLR</dd>
    <dt>SEO</dt>
    <dd>关键字排名</dd>
    <dt>其他</dt>
    <dd></dd>
</dl>

如图：


——2.3 :has(selector)（取选择器匹配的元素）
 // 为包含span元素的div添加边框
 $('div:has(span)').css('border', '1px solid #000');

Eg：即使span不是div的直系子元素，也会生效

<div>
    <h2>
        A        <span>B</span>
    </h2>
</div>

如图：


——2.4 :parent（取包含子元素或文本的元素）
 $('ol li:parent').css('border', '1px solid #000');

Eg：下面的代码，A和D所在的li会有边框

<ol>
    <li></li>
    <li>A</li>
    <li></li>
    <li>D</li>
</ol>

如图：


3. 可见性过滤选择器
——3.1 :hidden（取不可见的元素）

jQuery至1.3.2之后的:hidden选择器仅匹配display:none或<input type="hidden" />的元素，而不匹配visibility: hidden或opacity:0的元素。这也意味着hidden只匹配那些“隐藏的”并且不占空间的元素，像visibility:hidden或 opactity:0的元素占据了空间，会被排除在外。
Eg：下面的代码，先弹出"hello"对话框，然后hid-1会显示，hid-2仍然是不可见的。

    /* css代码 */
    <style type="text/css">
        div{
            margin: 10px;
            width: 200px;
            height: 40px;
            border: 1px solid #FF0000;
            display:block;
        }
        .hid-1 {
            display: none;
        }
        .hid-2{
            visibility: hidden;
        }
    <!-- html代码 -->
    <div class="hid-1">display: none</div>
    <div class="hid-2">visibility: hidden</div>
    <input type="hidden" value="hello"/>
    /* js代码 */
     $('div:hidden').show(500);
     alert($('input:hidden').val());

如图：


——3.2 :visible（取可见的元素）
$('div:visible').css('backgroundColor','orange');

Eg：下面的代码，最后一个div会有背景色。注意下面是有4个元素的。

<div class="hid-1" style="display:none;">display: none</div>
<div class="hid-2" style="visibility: hidden">visibility: hidden</div>
<input type="hidden" value="hello"/>
<div>jQuery选择器大全</div>

如图：


4. 属性过滤选择器
——4.1 [attribute]（取拥有attribute属性的元素）
     $('a[title]').css('text-decoration', 'none');

Eg：下面的代码，最后一个a标签没有title属性，所以它仍然会带下划线。

   <ul>
        <li><a href="#" title="DOM对象和jQuery对象" class="item">DOM对象和jQuery对象</a></li>
        <li><a href="#" title="jQuery选择器大全" class="item-selected">jQuery选择器大全</a></li>
        <li><a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a></li>
        <li><a href="#" title="基于jQuery的插件开发" class="item">基于jQuery的插件开发</a></li>
        <li><a href="#" title="Wordpress & jQuery" class="item">Wordpress & jQuery</a></li>
        <li><a href="#" class="item">其他</a></li>
    </ul>

如图：
——4.2 [attribute = value]和[attribute != value]（取attribute属性值等于value或不等于value的元素）
    $('a[class=item]').css('color', '#FF99CC');
    $('a[class!=item]').css('color', '#FF6600');

如图：


Eg：分别为class="item"和class!=item的a标签指定文字颜色

——4.3 [attribute ^= value], [attribute $= value]和[attribute *= value]（attribute属性值以value开始，以value结束，或包含value值）
    $('a[title^=jQuery]').css('font-weight', 'bold');
    $('a[title$=jQuery]').css('font-size', '24px');
    $('a[title*=jQuery]').css('text-decoration', 'line-through')

如图：


说明：在属性选择器中，^$符号和正则表达式的开始结束符号表示的含义是一致的，*模糊匹配，类似于sql中的like '%str%'。

——4.4 [selector1][selector2]（复合型属性过滤器，同时满足多个条件）
   $('a[title^=jQuery][class=item]').hide();

Eg：将title以"jQuery"开始，并且class="item"的a标签隐藏，那么<a href="#" title="jQuery事件大全" class="item">jQuery事件大全</a>会被隐藏.

5. 子元素过滤选择器
——5.1 :first-child和:last-child

说明：:first-child表示第一个子元素，:last-child表示最后一个子元素。
需要大家注意的是，:fisrst和:last返回的都是单个元素，而:first-child和:last-child返回的都是集合元素。举个 例子：div:first返回的是整个DOM文档中第一个div元素，而div:first-child是返回所有div元素下的第一个元素合并后的集 合。
这里有个问题：如果一个元素没有子元素，:first-child和:last-child会返回null吗？请看下面的代码：

  <body>
    <div>
        <div>
            <div></div>
        </div>
    </div>
</body>
<script src="jquery.js"></script>
<script>
    var len1 = $('div:first-child').length;
    var len2 = $('div:last-child').length;
</script>

也许你觉得这个答案，是不是太简单了？len1 = 2, len2 = 2。但实际确并不是，它们俩都等于3。
把上面的代码稍微修改一下：

<body>
    <div>
        <div>
            <div></div>
        </div>
    </div>
</body>
<script src="jquery.js"></script>
<script>
    var len1 = $('div:first-child').length;
    var len2 = $('div:last-child').length;
    $('div:first-child').each(function() {
        alert($(this).html());
     });
</script>
结果却是弹出三个alert，只不过最后一个alert里面是空白的。如图：
——5.2 :only-child

说明：当某个元素有且仅有一个子元素时，:only-child才会生效。请看下面的代码：

$('div:only-child').css('border', '1px solid #FF0000').css('width','200px');

Eg：这里:only-child也是三个元素，从最后一个很粗的红色边框（实际是两个元素的边框重叠了）也可以看出来。

 <div>123
        <div>456
            <div></div>
        </div>
    </div>

如图：


——5.3 :nth-child

说明：看到这个就想起英文单词里的，fourth, fifth, sixth……，nth表示第n个，:nth-child就表示第n个child元素。要注意的是，这儿的n不像eq(x)、gt(x)或lt(x)是从 0开始的，它是从1开始的，英文里好像也没有zeroth这样的序号词吧。

:nth-child有三种用法：

:nth-child有三种用法：

  1. :nth-child(x)，获取第x个子元素
  2. :nth-child(even)和:nth-child(odd)，从1开始，获取第偶数个元素或第奇数个元素
  3. :nth-child(xn+y)，x>=0，y>=0。例如x = 3, y = 0时就是3n，表示取第3n个元素（n>=0）。实际上xn+y是上面两种的通项式。（当x=0,y>=0时，等同于:hth- child(x)；当x=2,y=0时，等同于nth-child(even)；当x=2,y=1时，等同于:nth-child(odd)）
    下面的两个例子是针对2)和3)的，1)的例子我就不列举了。
    例2：
    Eg：这里:only-child也是三个元素，从最后一个很粗的红色边框（实际是两个元素的边框重叠了）也可以看出来。
 <table>
      <tr><td>1. NBA 2012季后赛</td></tr>
       <tr><td>2. NBA 2011季后赛</td></tr>
       <tr><td>3. NBA 2010季后赛</td></tr>
       <tr><td>4. NBA 2009季后赛</td></tr>
       <tr><td>5. NBA 2008季后赛</td></tr>
       <tr><td>6. NBA 2007季后赛</td></tr>
  </table>
  // 偶数行背景红色
 $('tr:nth-child(even)').css('background', '#FF0000');
  // 奇数行背景蓝色
   $('tr:nth-child(odd)').css('background', '#0000FF');

如图：


例3（html代码和例2是一样的）：

 $('tr:nth-child(3n)').css('background', '#0000FF');

如图：
6. 表单对象属性过滤选择器
——6.1 :enabled和:disabled（取可用或不可用元素）

说明：:enabled和:diabled的匹配范围包括input, select, textarea。请看下面的代码：

<body>
    <div>
        <input type="text" value="可用的文本框" />
    </div>
    <div>
        <input type="text" disabled="disabled" value="不可用的文本框" />
    </div>
    <div>
        <textarea disabled="disabled">不可用的文本域</textarea>
    </div>
    <div>
        <select disabled="disabled">
            <option>English</option>
            <option>简体中文</option>
        </select>
    </div>
</body>
<script src="jquery.js"></script>
<script>
    $(':enabled').css('border', '1px solid #FF0000');
    $(':disabled').css('border', '1px solid #0000FF');
</script>

如图：


——6.2 :checked（取选中的单选框或复选框元素）

说明：下面的代码，更改边框或背景色仅在IE下有效果，chrome和firefox不会改变，但是alert都会弹出来：

<body>
    <div>
        <input type="checkbox" checked="checked" value="must"/>必须勾选
    </div>
    <div>你现在工作的企业属于：
        <input type="radio" name="radio" checked="checked" value="外企"/>外企
        <input type="radio" name="radio" value="国企"/>国企
        <input type="radio" name="radio" value="民企"/>民企
    </div>
</body>
<script src="jquery.js"></script>
<script>
    $(':checked').css('background', '#FF0000').each(function() {
        alert($(this).val());
    });
</script>

如图：


——6.3 :selected（取下拉列表被选中的元素）

说明：下面的代码，更改边框或背景色仅在IE下有效果，chrome和firefox不会改变，但是alert都会弹出来：

<body>
    <select>
        <option value="外企">外企</option>
        <option value="国企">国企</option>
        <option value="私企">私企</option>
    </select>
</body>
<script src="jquery.js"></script>
<script>
    alert($(':selected').val());
</script>

如图：


最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 202,529评论 5赞 475
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 85,015评论 2赞 379
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 149,409评论 0赞 335
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 54,385评论 1赞 273
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 63,387评论 5赞 364
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 48,466评论 1赞 281
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 37,880评论 3赞 395
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 36,528评论 0赞 256
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 40,727评论 1赞 295
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,528评论 2赞 319
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,602评论 1赞 329
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 33,302评论 4赞 318
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 38,873评论 3赞 306
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,890评论 0赞 19
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,132评论 1赞 259
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 42,777评论 2赞 349
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 42,310评论 2赞 342

推荐阅读更多精彩内容

  • jQuery之六十一种选择器
    作为前端和后台最基础可靠的神器工具JQuery，你真的对她有足够了解么？ 亚非拉地区苦逼的前端er们，有时候不得不...
    扭了个妞阅读 375评论 0赞 0
  • jQuery基础(1)
    一、样式篇 第1章 初识jQuery （1）环境搭建 进入官方网站获取最新的版本 http://jquery.co...
    凛0_0阅读 3,350评论 0赞 44
  • jquery 权威指南 笔记
    第一章 入门 基本功能：访问和操作 dom 元素，控制页面样式，对页面的事件处理，与ajax完美结合，有丰富的插件...
    X_Arts阅读 1,023评论 0赞 2
  • 活在未来最好的典范
    昨天晚上，打开得到准备继续学习时，正巧碰到罗辑思维得到团队在举行每周的工作例会。先不谈该工作例会的新颖性，我只想...
    诗意悦读阅读 306评论 3赞 3
  • 2017.10.15 兰溪记
    这周末去兰溪，与禅武医的郭师兄交流。 师兄习武经历： 1999年开始在嵩山脚下习武，2000年秋季入少林寺慈云堂，...
    suntmei阅读 579评论 0赞 0