jQuery选择器--基础选择器、隐式迭代、筛选选择器、筛选方法以及排他思想、下拉菜单案例

迷南。 2023-01-02 10:29 148阅读 0赞

jQuery选择器

### jQuery基础选择器 ###

$("选择器") //里面选择器直接写CSS选择器即可，注意加引号

<table> 
 <thead> 
  <tr> 
   <th>名称</th> 
   <th>用法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>ID选择器</td> 
   <td>$("#id");</td> 
   <td>获取指定ID的元素。</td> 
  </tr> 
  <tr> 
   <td>全选选择器</td> 
   <td>$("*");</td> 
   <td>获取所有的元素。</td> 
  </tr> 
  <tr> 
   <td>类选择器</td> 
   <td>$(".class");</td> 
   <td>获取同一类的元素。</td> 
  </tr> 
  <tr> 
   <td>标签选择器</td> 
   <td>$(“div”);</td> 
   <td>获取统一标签的元素。</td> 
  </tr> 
  <tr> 
   <td>并集选择器</td> 
   <td>$(“div,span,p”);</td> 
   <td>获取多个元素。</td> 
  </tr> 
  <tr> 
   <td>交集选择器</td> 
   <td>$(“li.current”);</td> 
   <td>获取交集元素。</td> 
  </tr> 
  <tr> 
   <td>子代选择器</td> 
   <td>$(“ul&gt;li”);</td> 
   <td>使用&gt;号，获取亲儿子层级元素，不包括孙子层级元素。</td> 
  </tr> 
  <tr> 
   <td>后代选择器</td> 
   <td>$(“ul li”);</td> 
   <td>使用空格，获取ul下所有的li。</td> 
  </tr> 
 </tbody> 
</table>

### 隐式迭代 ###

隐式迭代就是把匹配的元素内部进行遍历循环，给每一个元素添加相应的方法。

例如：

$("div").css("background","pink");//将所有的div的背景颜色改为粉红色。

### 筛选选择器 ###

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>用法</th> 
   <th>描述</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>:first</td> 
   <td>$(‘li:first’)</td> 
   <td>获取第一个li元素</td> 
  </tr> 
  <tr> 
   <td>:last</td> 
   <td>$(‘li:last’)</td> 
   <td>获取最后一个li元素</td> 
  </tr> 
  <tr> 
   <td>:eq(index)</td> 
   <td>$(‘li:eq(2)’)</td> 
   <td>获取到的li元素中，选择索引号为2的元素，索引号index从0开始</td> 
  </tr> 
  <tr> 
   <td>:odd</td> 
   <td>$(“li:odd”)</td> 
   <td>获取到的li元素中，选择索引号为奇数的元素</td> 
  </tr> 
  <tr> 
   <td>:even</td> 
   <td>$(“li:even”)</td> 
   <td>获取到的li元素中，选择索引号为偶数的元素</td> 
  </tr> 
 </tbody> 
</table>

### 筛选方法 ###

<table> 
 <thead> 
  <tr> 
   <th>语法</th> 
   <th>用法</th> 
   <th>说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td>parent()</td> 
   <td>$(“li”).parent();</td> 
   <td>查找父级</td> 
  </tr> 
  <tr> 
   <td>children(selector)</td> 
   <td>$(“ul”).children(“li”);</td> 
   <td>相当于$(“ul&gt;li”),最近一级（亲儿子）</td> 
  </tr> 
  <tr> 
   <td>find(selector)</td> 
   <td>$(“ul”).find(“li”);</td> 
   <td>相当于$(“ul li”),后代选择器</td> 
  </tr> 
  <tr> 
   <td>siblings(selector)</td> 
   <td>$(".first").siblings(“li”);</td> 
   <td>查找兄弟节点，不包括自己本身</td> 
  </tr> 
  <tr> 
   <td>nextAll([expr])</td> 
   <td>$(".first").nextAll();</td> 
   <td>查找当前元素之后所有的同辈元素</td> 
  </tr> 
  <tr> 
   <td>prevtAll([expr])</td> 
   <td>$(".first").prevAll();</td> 
   <td>查找当前元素之前所有的同辈元素</td> 
  </tr> 
  <tr> 
   <td>hasClass(class)</td> 
   <td>$(‘div’).hasClass(“protected”)</td> 
   <td>查找当前的元素是否含有某个特定的类，如果有则返回true</td> 
  </tr> 
  <tr> 
   <td>wq(index)</td> 
   <td>$(“li”).eq(2);</td> 
   <td>相当于$(“li:eq(2)”),index从0开始</td> 
  </tr> 
 </tbody> 
</table>

###### 案例时刻 ######

用jQuery实现下拉菜单，鼠标放在消息上面出现下拉菜单，鼠标离开消失。

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery隐藏</title>
        <script src="jquery.js"></script>
        <style>
            *{
         
                margin: 0;
                padding: 0;
            }
            div{
         
                position: relative;
                left: 500px;
                top: 200px;
            }
            li{
         
                list-style: none;
                float: left;
                border:solid 1px black;
            }
            .head{
         
                float: left;
                width: 60px;
                height: 30px;
                position: relative;
                text-align:center;
            }
            div ul {
         
                position: absolute;
                display: none;
                top: 30px;
            }
            div ul li{
         
                float: left;
                width: 60px;
                height: 30px;
                background-color: pink;
            }
    
        </style>
        <script src="jquery.js"></script>
    </head>
    <body>
        <div>
            <li class="head">
                <a>消息</a>
                <ul>
                    <li><a>@我</a></li>
                    <li><a>私信</a></li>
                    <li><a>点赞</a></li>
                </ul>
            </li>
            <li class="head">
                <a>消息</a>
                <ul>
                    <li><a>@我</a></li>
                    <li><a>私信</a></li>
                    <li><a>点赞</a></li>
                </ul>
            </li>
            <li class="head">
                <a>消息</a>
                <ul>
                    <li><a>@我</a></li>
                    <li><a>私信</a></li>
                    <li><a>点赞</a></li>
                </ul>
            </li>
            <li class="head">
                <a>消息</a>
                <ul>
                    <li><a>@我</a></li>
                    <li><a>私信</a></li>
                    <li><a>点赞</a></li> 
                </ul>
            </li>
        </div>
        <script>
            $(".head").mouseover(function(){
         
                $(this).children("ul").show();
            })
            $(".head").mouseout(function(){
         
                $(this).children("ul").hide();
            })
        </script>
    </body>
    </html>

--------------------

2021.1.6更新下拉菜单代码,将script中的代码更待为如下代码，实现下拉菜单的滑动效果。

### 排他思想 ###

点击不同的按钮，该按钮背景颜色变为蓝色，其他的按钮无背景颜色。

因为jQuery有隐式迭代，所以可以不用for循环，直接用隐式迭代以及兄弟元素更改背景颜色。

##### 案例时刻 #####

![在这里插入图片描述][2021010516323925.png_pic_center]

程序实现：

<!DOCTYPE html>
    <html lang="zh-CN">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>jQuery排他思想</title>
        <script src="jquery.js"></script>
    </head>
    <body>
        <button>按钮1</button>
        <button>按钮2</button>
        <button>按钮3</button>
        <button>按钮4</button>
        <button>按钮5</button>
        <button>按钮6</button>
        <button>按钮7</button>
        <button>按钮8</button>
    </body>
    <script>
        $("button").click(function(){
         
            //当前按下的按钮颜色变为蓝色
            $(this).css("background","skyblue");
            //取消当前按钮的兄弟按钮的背景颜色
            $(this).siblings("button").css("background","");
        })
    </script>
    </html>

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjU3OTM0OA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221119/dec921b6a47649ca81997c9ef7c5061e.png
[2021010516323925.png_pic_center]: /images/20221119/f538ec1d71674217a628d38a7360f8ab.png