[jQuery-2] 选择集过滤和转移

柔情只为你懂 2022-11-26 06:52 85阅读 0赞

## 四、选择集过滤 ##

### 1. 选择集过滤的介绍 ###

选择集过滤就是在选择标签的集合里面过滤自己需要的标签

### 2. 选择集过滤的操作 ###

*  has(选择器名称)方法，表示选取包含指定选择器的标签
 *  eq(索引)方法，表示选取指定索引的标签

**has方法的示例代码:**

<script>
        $(function(){ 
            // has方法的使用
            var $div = $("div").has("#mytext");
            // 设置样式
            $div.css({ "background":"red"});
        });
    </script>
    
    <div>
        这是第一个div
        <input type="text" id="mytext">
    </div>
    
    <div>
        这是第二个div
        <input type="text">
        <input type="button">
    </div>

**eq方法的示例代码:**

<script>
        $(function(){ 
            // has方法的使用
            var $div = $("div").has("#mytext");
            // 设置样式
            $div.css({ "background":"red"});
    
            // eq方法的使用
            var $div = $("div").eq(1);
            // 设置样式
            $div.css({ "background":"yellow"});
        });
    </script>
    
    <div>
        这是第一个div
        <input type="text" id="mytext">
    </div>
    
    <div>
        这是第二个div
        <input type="text">
        <input type="button">
    </div>

## 五、选择集转移 ##

### 1. 选择集转移介绍 ###

选择集转移就是以选择的标签为参照，然后获取转移后的标签

### 2. 选择集转移操作 ###

*  $(’\#box’).prev(); 表示选择id是box元素的上一个的同级元素
 *  $(’\#box’).prevAll(); 表示选择id是box元素的上面所有的同级元素
 *  $(’\#box’).next(); 表示选择id是box元素的下一个的同级元素
 *  $(’\#box’).nextAll(); 表示选择id是box元素的下面所有的同级元素
 *  $(’\#box’).parent(); 表示选择id是box元素的父元素
 *  $(’\#box’).children(); 表示选择id是box元素的所有子元素
 *  $(’\#box’).siblings(); 表示选择id是box元素的其它同级元素
 *  $(’\#box’).find(’.myClass’); 表示选择id是box元素的class等于myClass的元素

**选择集转移的示例代码:**

<script>
        $(function(){ 
            var $div = $('#div01');
    
            $div.prev().css({ 'color':'red'});
            $div.prevAll().css({ 'text-indent':50});
            $div.next().css({ 'color':'blue'});
            $div.nextAll().css({ 'text-indent':80});
            $div.siblings().css({ 'text-decoration':'underline'})
            $div.parent().css({ 'background':'gray'});
            $div.children().css({ 'color':'red'});
            $div.find('.sp02').css({ 'font-size':30});
        });  
    </script>
    
    <div>
        <h2>这是第一个h2标签</h2>
        <p>这是第一个段落</p>
        <div id="div01">这是一个<span>div</span><span class="sp02">第二个span</span></div>
        <h2>这是第二个h2标签</h2>
        <p>这是第二个段落</p>
    </div>

发表评论取消回复

表情：

评论列表（有 0 条评论，85人围观）

还没有评论，来说两句吧...

相关阅读

相关 JQuery 基本过滤选择器

HTML页面结构: <a id="a1">first</a> <a id="a2">last</a> <a id="a3">not</a>

朱雀/ 2024年02月17日 18:09/ 0 赞/ 145 阅读

相关 JQuery 内容过滤选择器

HTML页面结构: <body> <a id="a1">contains(text)</a> <a id="a2">empty</a>

一时失言乱红尘/ 2024年02月17日 18:09/ 0 赞/ 79 阅读

相关 jQuery过滤选择器

一、过滤选择器的使用 <!DOCTYPE html> <html> <head> <meta charset="utf-8">

野性酷女/ 2023年10月10日 20:45/ 0 赞/ 91 阅读

相关【js】JQuery选择器、选择集过滤、选择集转移

1.选择器选择器的的作用就是选取元素，用法与css选择器差不多，大概有以下几种 <table> <thead> <tr> <th>选择器</th>

「爱情、让人受尽委屈。」/ 2022年11月27日 00:42/ 0 赞/ 117 阅读

相关 [jQuery-2] 选择集过滤和转移

四、选择集过滤 1. 选择集过滤的介绍选择集过滤就是在选择标签的集合里面过滤自己需要的标签 2. 选择集过滤的操作 has(选择器名称)方法，表示选

柔情只为你懂/ 2022年11月26日 06:52/ 0 赞/ 86 阅读

相关 jquery过滤选择器

过滤选择器学习要点： 1.基本过滤器 2.内容过滤器 3.可见性过滤器 4.子元素过滤器 5.其他方法过滤选择器简称：过滤器。它其实也是一种选择器

Dear 丶/ 2022年06月09日 00:44/ 0 赞/ 328 阅读

相关 jquery表单过滤选择器

1.1．表单过滤选择器表单过滤选择器是用于选取表单中的元素 :input 所有的表单元素。 :text 文本框 :password 密码框 :r

比眉伴天荒/ 2022年06月06日 06:25/ 0 赞/ 288 阅读

相关 jquery子元素过滤选择器，

1.1．子元素过滤选择器根据子元素顺序来获取。：nth-child（序号）；根据序号来选择，序号是从1开始,也可以设置odd even 根据奇偶来设置也

柔情只为你懂/ 2022年06月06日 06:25/ 0 赞/ 293 阅读

相关 jQuery--过滤选择器（可见性过滤选择器、属性过滤选择器）详解

可见性过滤选择器可见性过滤选择器是指根据元素的可见性来筛选元素的选择器。 <table> <thead> <tr> <th align="cente

曾经终败给现在/ 2021年08月14日 02:04/ 0 赞/ 483 阅读

相关 jQuery--过滤选择器（简单过滤选择器、内容过滤选择器）详解

过滤选择器基本选择器和层次选择器可以满足大部分页面元素的选取需求。在jQuery中还提供了功能更加强大的过滤选择器，根据特定的过滤规则来筛选出所有需要的页面元素。过滤选

绝地灬酷狼/ 2021年08月13日 23:46/ 0 赞/ 566 阅读