jQuery常用的API----jQuery选择器

最新推荐文章于 2024-08-03 17:05:14 发布
最新推荐文章于 2024-08-03 17:05:14 发布
阅读量453 收藏
点赞数
分类专栏： JQuery 文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_46112274/article/details/122359475
版权

在这里插入图片描述

1、jQuey选择器

1.1、jQuery基础选择器

在这里插入图片描述

1.2、jQuery层级选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <div>我是div</div>
    <div class="nav">我是nav div</div>
    <p>我是p</p>
    <ol>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
        <li>我是ol 的</li>
    </ol>
    <ul>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
        <li>我是ul 的</li>
    </ul>
    <script>
        $(function(){
            console.log($(".nav"));
            console.log($("ul li"));
        })
    </script>
</body>
</html>

在这里插入图片描述

1.3、jQuery隐式迭代

1.3.1、jQuery设置样式

在这里插入图片描述
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <div>惊喜不，意外不</div>
    <ul>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
        <li>相同的操作</li>
    </ul>
    <script>
        // 1、获取四个div元素
        console.log($('div'));
        // 2、给四个div设置背景颜色为粉色 jquery对象不能使用style
        $("div").css("background","pink");
        // 3、隐式迭代就是把匹配的所有元素内部进行遍历，给每一个元素添加css这个方法
        $("ul li").css("color","red");
    </script>
</body>
</html>

1.4、jQuery筛选选择器

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <ul>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ul>
    <ol>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
        <li>多个里面筛选几个</li>
    </ol>
    <script>
        $(function(){
            $("ul li:first").css("color","red");
            $("ul li:eq(2)").css("color","blue");
            $("ol li:odd").css("color","skyBlue");
            $("ol li:even").css("color","pink");
        })
    </script>
</body>
</html>

1.5、jQuery中的筛选方法（重点）

在这里插入图片描述

  • 筛选方法1案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <div class="yeye">
        <div class="father">
            <div class="son">

            </div>
        </div>
    </div>
    <div class="nav">
        <p>我是谁</p>
        <div>
            <p>woshishui</p>
        </div>
    </div>
    <script>
        // 注意一下都是方法 带括号
        $(function(){
            // 1、父 parent() 返回的是 最近一级的父级元素 亲爸爸
            console.log($(".son").parent());
            // 2、子
            // (1) 亲儿子 children() 类似于选择器 ul>li
            $(".nav").children("p").css("color","red");
            // (2)可以选择里面所有的孩子 包括儿子和孙子 find()类似于后代选择器
            // $(".nav").find("p").css("color","pink");
            // 3、兄
        })
    </script>
</body>
</html>

在这里插入图片描述

  • 筛选方法2案例：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>

<body>
    <ol>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li class="item">我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ol>
    <ul>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
        <li>我是ol 的li</li>
    </ul>
    <div class="current">我有current</div>
    <div>我没有current</div>
    <script>
        // 注意一下都是方法 带括号
        $(function(){
            // 1、兄弟元素sinlings 除了自身元素之外的所有亲兄弟
            $("ol .item").siblings("li").css("color","red");
            // 2、第n个元素
            var index = 2;
            // (1)我们可以利用选择器方式选择
            // $("ul li:eq(2)").css("color","red");
            // $(ul li:eq("+index+")").css("color","blue");
            // (2)我们可以利用选择方法的方式选择 更推荐这种写法
            // $("ul li").eq(2).css("color","blue");
            $("ul li").eq(index).css("color","blue");
            // 3、判断某个类是佛具有类名
            console.log($("div:first").hasClass("current"));
            console.log($("div:last").hasClass("current"));
        });
    </script>
</body>
</html>

在这里插入图片描述

1.5.1、案例：新浪下拉菜单

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        li {
            list-style-type: none;
        }
        
        a {
            text-decoration: none;
            font-size: 14px;
        }
        
        .nav {
            margin: 100px;
        }
        
        .nav>li {
            position: relative;
            float: left;
            width: 80px;
            height: 41px;
            text-align: center;
        }
        
        .nav li a {
            display: block;
            width: 100%;
            height: 100%;
            line-height: 41px;
            color: #333;
        }
        
        .nav>li>a:hover {
            background-color: #eee;
        }
        
        .nav ul {
            display: none;
            position: absolute;
            top: 41px;
            left: 0;
            width: 100%;
            border-left: 1px solid #FECC5B;
            border-right: 1px solid #FECC5B;
        }
        
        .nav ul li {
            border-bottom: 1px solid #FECC5B;
        }
        
        .nav ul li a:hover {
            background-color: #FFF5DA;
        }
    </style>
    <script src="jquery.min.js"></script>
</head>

<body>
    <ul class="nav">
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
        <li>
            <a href="#">微博</a>
            <ul>
                <li>
                    <a href="">私信</a>
                </li>
                <li>
                    <a href="">评论</a>
                </li>
                <li>
                    <a href="">@我</a>
                </li>
            </ul>
        </li>
    </ul>
    <script>
        $(function(){
            // 鼠标经过事件
            $(".nav>li").mouseover(function(){
                // $(this) jQuery 当前元素 this不要加引号
                // show() 显示元素 hide() 隐藏元素
                $(this).children("ul").show();
            });
            // 鼠标离开
            $(".nav>li").mouseout(function(){
                $(this).children("ul").hide();
            })
        })
    </script>
</body>
</html>

1.6、排他思想

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jquery.min.js"></script>
</head>
<body>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <script>
        $(function(){
            // 1、隐式迭代，给所有按钮都绑定了点击事件
            $("button").click(function(){
                // 2、当前的元素变化背景颜色
                $(this).css("background","pink");
                // 3、其余的兄弟去掉背景颜色
                $(this).siblings("button").css("background","");
            })

        })
    </script>
</body>
</html>

在这里插入图片描述链式编程写法：
在这里插入图片描述

1.7、淘宝精品服饰案例

<!DOCTYPE html>
<html>

<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        * {
            margin: 0;
            padding: 0;
            font-size: 12px;
        }
        
        ul {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        .wrapper {
            width: 250px;
            height: 248px;
            margin: 100px auto 0;
            border: 1px solid pink;
            border-right: 0;
            overflow: hidden;
        }
        
        #left,
        #content {
            float: left;
        }
        
        #left li {
            background: url(images/lili.jpg) repeat-x;
        }
        
        #left li a {
            display: block;
            width: 48px;
            height: 27px;
            border-bottom: 1px solid pink;
            line-height: 27px;
            text-align: center;
            color: black;
        }
        
        #left li a:hover {
            background-image: url(images/abg.gif);
        }
        
        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="jquery.min.js"></script>
    <script>
        $(function(){
            // 1、鼠标经过左侧的小li
            $("#left li").mouseover(function(){
                // 2、得到当前小li的索引号
                var index = $(this).index();
                console.log(index);
                // 3、让右侧盒子相应索引号的图片显示出来
                $("#content div").eq(index).show();
                // 4、让其余图片（就是其他的兄弟）隐藏起来
                $("#content div").eq(index).siblings().hide();
            })
        })
    </script>
</head>

<body>
    <div class="wrapper">
        <ul id="left">
            <li><a href="#">女靴</a></li>
            <li><a href="#">雪地靴</a></li>
            <li><a href="#">冬裙</a></li>
            <li><a href="#">呢大衣</a></li>
            <li><a href="#">毛衣</a></li>
            <li><a href="#">棉服</a></li>
            <li><a href="#">女裤</a></li>
            <li><a href="#">羽绒服</a></li>
            <li><a href="#">牛仔裤</a></li>
        </ul>
        <div id="content">
            <div>
                <a href="#"><img src="images/女靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/雪地靴.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/冬裙.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/呢大衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/毛衣.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/棉服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/女裤.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/羽绒服.jpg" width="200" height="250" /></a>
            </div>
            <div>
                <a href="#"><img src="images/牛仔裤.jpg" width="200" height="250" /></a>
            </div>

        </div>


    </div>
</body>

</html>

在这里插入图片描述

1.8、链式编程

在这里插入图片描述
在这里插入图片描述

小码哥呀
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
jquery-ui-1.10.4.custom
10-30
首先，jQuery UI 1.10.4 是该框架的一个稳定版本，发布于2014年，它包含了多个组件和功能，如拖放(Drag and Drop)、日期选择器(Datepicker)、对话框(Dialog)、下拉菜单(Autoocomplete)、滑块(Slider)等。这些组件...
jQuery中:nth-child选择器用法实例
10-24
主要介绍了jQuery中:nth-child选择器用法,实例分析了:nth-child选择器功能、定义及匹配子元素或奇偶元素的技巧,具有一定参考借鉴价值,需要的朋友可以参考下
Jquery第二篇【选择器、DOM相关API、事件API】
3y
05-19 347
前言 前面已经介绍过了Jquery这门语言，其实就是一个javaScript的库…能够简化我们书写的代码….本博文主要讲解使用Jquery定位HTML控件【定位控件就是获取HTML的标签】，使用Jquery操作DOM的API 选择器 Jquery提供了九个选择器给我们用来定位HTML控件.. 目的：通过九类选择器，能定位web页面（HTML/JSP/XML）中的任何标签 （1）基...
jQuery 常用API ——— jQuery 选择器
weixin_41984072的博客
03-23 129
jQuery 选择器 1.jQuery基础选择器 原生js获取元素方式很多 ，很杂 ，而且兼容性情况不一样 ，因此jQuery做了封装，使元素统一标准 ＄（“选择器 ” ）//里面的选择器直接写css选择器即可，但还是要加引号 2.jQuery层级选择器 ...
jQuery常用API--选择器
JJ_Smilewang的博客
06-28 258
我们都知道，元素JS获取元素的方式很多，很杂，而且兼容性情况不一致，因此jQuery 给我们做了封装，使获取元素统一标准。常用的层级选择器就是子代选择器和后代选择器，其使用方法依旧和CSS选择器保持一致。在原生JS中我们如果想要给很多元素添加一样的样式或者绑定同一事件，往往都需要经过for循环遍历才可实现。而jQuery则把遍历内部DOM元素（伪数组形式存储）的过程叫做隐式迭代。简单的说就是把通过选择器或者筛选方法匹配到的所有元素进行循环遍历，执行相应的方法，这些操作是隐秘进行的，而我们只需要直接调用即可，
jQuery选择器和API方法介绍
东方
12-04 203
API方法
jQuery 常见的选择器，以及以下 api 的用法
wodekeaiduo的博客
09-08 102
.eq(index) 获取到指定index的jQuery对象，可以使用eq方法,如： $('div').eq(3); // 获取结果集中的第四个jQuery对象 兄弟元素获取 .next([selector]), .prev([selector]) next取得匹配的元素集合中每一个元素紧邻的后面同辈元素的元素集合。如果提供一个选择器，那么只有紧跟着的兄弟元素满足选择器时，才会返回此元素。prev...
jQuery基础----常用的选择器
u011863822的博客
07-20 1349
本篇就是列举了一些常用的jQuery选择器而匹配元素，当然如果学习过css会更好理解的。
jQuery UI -- 日历选择器
热爱思考、活力满满、开朗爱笑的年轻人
11-21 5320
用jQuery UI实现的日期选择器 　　在这之前，我们先来了解一下jQuery UI。jQuery UI 是以 jQuery 为基础的开源 JavaScript 网页用户界面代码库。包含底层用户交互、动画、特效和可更换主题的可视空间。我们可以直接用它来构建具有很好交互性的 web 应用程序。 　　本次采用的jQuery UI 的版本为:jquery-ui-1.10.3.custom.zip
JQuery EasyUI -- 日历选择器
热爱思考、活力满满、开朗爱笑的年轻人
12-23 3781
什么是 jQuery EasyUI jQuery EasyUI 是一组基于 jQuery 的 UI 插件集合，而 jQuery EasyUI 的目标就是帮助 Web 开发者更轻松的打造出功能丰富并且美观的 UI 界面，开发者不需要编写复杂的 JavaScript，也不需要对 CSS 样式有深入的了解，开发者需要了解的只有一些简单的 html 标签。
jQueryAPI-100214.zip_jQueryAPI-100214_javascript
09-24
1. **方法**：详尽解释了所有jQuery的核心方法，包括选择器（如 `:first`, `:last`, `:even`, `:odd` 等）、DOM操作方法（如 `.append()`, `.prepend()`, `.before()`, `.after()`）、事件处理方法（如 `.on()`, `....
jquery-easyui-1.7.0.zip官方文档
11-04
2. 新增组件：可能包含新添加的组件或原有组件的增强功能，如日期选择器（DatePicker）的改进等。 3. API调整：对部分API进行调整，以提升易用性和兼容性，同时也可能引入新的API来满足更多开发场景。 4. Bug修复...
SpringBoot+Vue图书(图书借阅)管理系统-附项目源码与配套文档
最新发布
m0_74283290的博客
08-03 528
本论文阐述了一套先进的图书管理系统的设计与实现，该系统采用Java语言，结合现代Web开发框架和技术，旨在为图书馆提供高效、灵活且用户友好的资源管理解决方案。系统利用Spring Boot框架为核心，整合MyBatis ORM工具，以及MySQL数据库，构建了一个高性能、可扩展的后端服务。前端界面则采用了Vue.js框架，以提供流畅的用户交互体验。论文首先进行了详尽的需求分析，确定了系统的核心功能，包括图书的添加、编辑、删除、查询，读者的注册、登录、个人信息管理，以及图书的借阅、归还、续借流程。
Function Call & ReACT，Agent应用落地的加速器--function calling和react有什么不同
Dove_1234的博客
08-03 616
探索智能体Agent的未来之路：Function Call与ReACT框架的较量，谁能引领未来？
VUE3自定义指令防止重复点击多次提交
MadSnail00的博客
07-30 298
vue3连续点击按钮重复提交，vue3自定义指令防止重复提交
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 907
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
Vue3中的pinia的使用及组合写法与普通写法的区别
m0_62626838的博客
07-30 233
1、首先pinia可以自己后面按需安装，也可在项目创建时去勾选安装（这里我使用的是项目创建时自动安装的，吃了点亏，忘记这里是组合写法了）按照这个写法是不需要添加pinia核心（state、actions、getters），但需要return！store文件夹中的counter.ts （名字任起）在组件中直接使用即可，如下图。2、自定义安装pinia。3、在组件中使用，如下图。
【Vue3】自定义组件
又言又语
07-30 444
本文介绍 Vue3 中如何自定义组件。页面组件：用于构建独立页面，通常存放在src/pages或src/views目录下。功能组件：将页面中一些独立的功能封装成独立组件，譬如：分页组件、日期时间组件等。功能组件通常存放在目录下。本文主要说明如何自定义功能组件。
jQuery Pocket Reference - David Flanagan
1. **选择器**：jQuery提供了丰富的选择器，如ID选择器(#id)，类选择器(.class)，元素选择器(element)，以及更复杂的组合选择器，用于高效地选取DOM元素。 2. **DOM操作**：jQuery提供了一系列方法来创建、插入、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值