jQuery常用API（一）

最新推荐文章于 2024-05-28 22:16:31 发布
最新推荐文章于 2024-05-28 22:16:31 发布
阅读量188 收藏 2
点赞数
文章标签： jquery javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_45659764/article/details/124702113
版权

1. jQuery选择器

1.1 jQuery基础选择器

原生JS获取元素方式很多很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准

$("选择器" ) //里面选择器直接写CSS选择器即可，但是需要加引号
名称用法描述
ID选择器$("#id")获取指定ID的元素
全选选择器$('*')匹配所有元素
类选择器$(".class")获取同一类class的元素
标签选择器$("div")获取同一类标签的所有元素
并集选择器$("div,p,li")选取多个元素
交集选择器$("li.current")交集元素

console.dir()显示DOM对象所有属性

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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($("div"));
        })
    </script>
</body>

</html>

 

 记得要引入jQuery

1.2 jQuery层级选择器

名称用法描述
子代选择器$("ul>li")使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器$("ul li")使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等

<script>
        $(function () {
            // console.dir($("div"));
            console.log($("ul li"));
            console.log($("ul>li"));
        })
    </script>

知识铺垫

jQuery设置样式

$('div').css('属性','值')
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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>
    </ul>
    <script>
        // 1. 获取四个div元素 
        console.log($("div"));
        // 2. 给四个div设置背景颜色为粉色 jquery对象不能使用style
        
        //问题：为什么不用遍历就给四个div都设置了背景颜色呢
        $("div").css("background", "pink");  
    </script> 
</body>

  

1.3 隐式迭代（重要）

遍历内部DOM元素（伪数组形式存储）的过程就叫做隐式迭代

简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用

上一段代码中的$(“div”)，将DOM元素获取过来之后，就在jQuery内部进行了隐式的循环遍历，给每个元素都添加了css方法，就不用我们再进行循环遍历了，前提：进行相同的操作

1.4 jQuery筛选选择器

语法用法描述
:first$('li:first')获取第一个li元素
:last$('li:last')获取最后一个li元素
:eq(index)$(li:eq(2)")获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd$("li:odd")获取到的li元素中，选择索引号为奇数的元素
:even$("li:even")获取到的li元素中，选择索引号为偶数的元素

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

<body>
    <ul>
        <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>
    </ol>
    <script>
        $('ul li:first').css('color', 'red');
        $('ul li:eq(2)').css('color', 'blue');
        $('ol li:odd').css('background', 'skyblue');
        $('ol li:even').css('background', 'pink');

    </script>
</body>

1.5 jQuery筛选方法（重点）

因为是方法，注意要加()

语法用法说明
parent()$("li").parent();查找父级，亲爹
children(selector)$("ul").children("li");相当于$("ul>li")，最近一级（亲儿子）
find(selector)$("ul").find("li"); 括号里如果为空，找所有的后代相当于$("ul li")，后代选择器
siblings(selector)$(".first").siblings("li");查找兄弟结点，不包括自己本身
nextAll([expr])$(".first").nextAll();查找当前元素之后的所有同辈元素
prevAll([expr])$(".last").prevAll();查找当前元素之前所有的同辈元素
hasClass(class)$('div').hasClass("protected")检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index)$("li").eq(2);相当于$("li:eq(2)")，index从0开始
<body>
    <div class="grandfather">
        <div class="father">
            <div class="son">儿子</div>
        </div>
    </div>
    <div class="nav">
        <p>我是屁</p>
        <div>
            <p>我是p</p>
        </div>
    </div>
    <script>
        // 注意一下都是方法 带括号
        $(function () {
            // 1. 父 parent()  选择到的是直接父级 亲爸爸
            console.log($(".son").parent());
            
        });
    </script>
</body>

<body>
    <div class="grandfather">
        <div class="father">
            <div class="son">儿子</div>
        </div>
    </div>
    <div class="nav">
        <p>我是屁</p>
        <div>
            <p>我是p</p>
        </div>
    </div>
    <script>
        // 注意一下都是方法 带括号
        $(function () {
            
            // 2. 子
            //选择直接子级，亲儿 相当于.nav>p
            // $(".nav").children("p").css("color", "red");
           
             // 可以选择所有的子级，包括儿子，儿子的儿子。。。 相当于后代选择器
            $(".nav").find("p").css("background", "red");
            
        });
    </script>
</body>


<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. 兄弟元素 除了自身以外的亲兄弟
            $("ol .item").siblings("li").css("background", "pink");
           

        });
    </script>
</body>


<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 () {
     
            // 2. 第n个元素
            // (1)利用选择器选择第n个元素
            $("ul li:eq(2)").css("background", "skyblue");
            // (2)利用选择方法选择第n个元素
            $("ul li").eq(2).css("background", "skyblue");
            

        });
    </script>
</body>

<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 () {
            
            // 3. 判断是否有某个类名
            console.log($("div:first").hasClass("current"));
            console.log($("div:last").hasClass("current"));

        });
    </script>
</body>

 

案例：新浪下拉菜单

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <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当前元素，在这里指.nav>li
                $(this).children("ul").show();
            });
            // 鼠标离开
            $(".nav>li").mouseout(function () {
                // show()显示元素 hide()隐藏元素
                $(this).children("ul").hide();
            });
        })
    </script>
</body>

</html>

1.6 jQuery里面的排他思想

想要多选一的效果，排他思想：当前元素设置样式，其余的兄弟元素清除样式

<body>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function () {
            // 隐式迭代 相当于给所有的button都绑定了点击事件
            $("button").click(function () {
                // 当前元素的背景元素设为粉色 隐式迭代
                $(this).css("background", "pink");
                // 其余兄弟去掉背景颜色 隐式迭代
                $(this).siblings("button").css("background", "");
            });
        })
    </script>
</body>

 案例：淘宝服饰精品案例

步骤：

  1. 隐式迭代给所有左侧的li绑定点击事件
  2. 获取当前点击的li的索引号
  3. 根据得到的索引号，把右侧相关索引号的div显示，其余的隐藏 

 注意：

1.有几个tab栏，就有几个div

<!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\(1\).gif);
        }

        #content {
            border-left: 1px solid pink;
            border-right: 1px solid pink;
        }
    </style>
    <script src="./jquery.min.js"></script>
    <script>
        $(function () {
            // 鼠标经过左侧的li
            $("#left li").mouseover(function () {
                // 得到当前li的索引号
                var index = $(this).index();
                // console.log(index);
                // 让有右侧图片相应的索引号显示出来
                $("#content div").eq(index).show();
                // 将其余图片（兄弟）隐藏
                $("#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.7 链式编程

链式编程时为了节省代码量，看起来更优雅

排他思想的代码

$(this).css('color','red').sibling().css('color','');

使用链式编程一定注意是哪个对象执行样式

<body>
    我是body的文字
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <button>快速</button>
    <script>
        $(function () {
            // 1. 隐式迭代 给所有的按钮都绑定了点击事件
            $("button").click(function () {
         
                // 链式编程
                // 我的颜色为红色，我的兄弟的颜色为空
                // $(this).css("color", "red").siblings().css("color", "");
                // 我的颜色不变，我的兄弟的颜色变为红色
                // $(this).siblings().css("color", "red");
                // 我兄弟的父级的颜色变为蓝色
                $(this).siblings().parent().css('color', 'blue');
            });
        })
    </script>
</body>

jQuery_api_for_dwcs5.rar_jquery_api_for
09-24
5. **快捷键（Shortcuts）**：可能还会提供jQuery常用操作的快捷键，进一步提升开发效率。 通过安装和使用这个插件，开发者可以更专注于逻辑实现，而不是记忆复杂的API，使得Dreamweaver CS5成为一个更强大的jQuery...
jQuery常用api手册大全
06-20
**jQuery API 大全** jQuery 是一款广泛应用于前端开发的JavaScript库，以其简洁的语法和强大的功能深受开发者喜爱。这个API手册大全包含了多个版本及专题的jQuery知识，旨在帮助开发者深入理解和熟练运用jQuery。 ...
jq API
05-06
本文档旨在帮助广大javascript爱好者快速了解jquery库，以及供广大应用jquery进行开发的人员 提供一个速查手册！ 　　本文档资源来自于jquery.org.cn,部分内容直接翻译或copy自jquery.com！感谢jquery框架开发者 John Resig及其所在的jQuery team.为我们提供这么好的javascript开发类库，感谢jquery.org.cn为 翻译做出的努力！
jQuery第二天学习总结—— jQuery 选择器（基础选择器、层级选择器、筛选选择器、隐式迭代、链式编程）
weixin_52819925的博客
08-20 225
jQuery 选择器 原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。 基础选择器 $("选择器") // 里面选择器直接写 CSS 选择器即可，但是要加引号 名称 用法 描述 ID选择器 $（"#id"） 获取指定ID的元素 全选选择器 $（"*"） 匹配所有元素 类选择器 $（".class"） 获取同一类class的元素 标签选择器 $（“div”） 获取同一类标签的所有元素 并集选择器 $（“
jQuery API
kxzhang1221的博客
03-13 341
jQuery API一 选择器$() -- 里面可以写css选择器、原生dom、jquery对象、null/undefined、函数function(){}、selector/content等。jQuery都是函数式（函数调用）。jquery和js的关系: 不能混用,但是可以一起存在——this。1.1 基本选择器* All selector .class getElementsByClass...
jqueryApi
weixin_51207199的博客
05-10 359
文章目录什么是jquery？jQuery的DOM操作添加或删除calss中的操作jquery中的事件jquery中的ajax遍历与选择常用的apijQuery 效果 什么是jquery？ jQuery 是一个 JavaScript 库。 jQuery 极大地简化了 JavaScript 编程 jquery插件里面提供一个全局的对象$和jQuery对象,本质是一个函数， $(document).ready(function(){ //预加载函数; //method }) $(function()
JQuery入门（二）JQuery选择器
jwang的博客
11-23 456
前言       本章讲解JQuery选择器的相关知识 方法 1.概念 通过前面的学习，我们把jquery的js文件下载了下来，当时下载的是一个压缩版，也就是项目上线用到的版本。这里我们为了说明方便我们下载一个开发版来进行学习。 jquery选择器，相信大家不会陌生css的选择器吧，其实道理是一样的，可以快速的定位html的元素对象，不再需要以前的document.getElementB...
jquery api 3.2.1
11-14
本文将深入探讨jQuery API 3.2.1版本中的关键知识点，帮助开发者更好地理解和利用这一强大的工具。 首先，jQuery的核心理念是“Write Less, Do More”，它通过封装JavaScript的DOM操作、事件处理、Ajax交互等，极大...
jQuery常用API操作.pptx
10-30
jQuery是一个轻量级的、兼容多浏览器的JavaScript库。 jQuery使用户能够更方便地处理HTML Document、Events、实现动画效果、方便地进行Ajax交互，能够极大地简化JavaScript编程。它的宗旨就是：“Write less, do ...
jQueryAPI中文手册3.1.rar
07-15
《jQuery API 中文手册 3.1》是一个针对jQuery库的详细参考文档，旨在帮助中文用户更好地理解和使用这个广泛应用于Web开发的JavaScript框架。jQuery以其高效、易用和丰富的功能特性，深受开发者喜爱。这份手册提供了...
jq1.7中文api
05-28
急需三个积分下载东西，希望大佬们给点帮助呀，很急很急
jQuery | 常用 API （ 选择器 + 样式操作 + 动画效果）
不爱吃菜的菜菜的博客
05-23 502
jQuery 选择器 jQuery 基础选择器 原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。 $(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号 $('.nav') jQuery 层级选择器 $('ul li') jQuery 设置样式 $('div').css('属性', '值') ...
jQuery—常用API（jQuery 选择器、jQuery 样式操作、 jQuery 效果）
m0_59030524的博客
03-16 443
目标： 能够写出常用的jQuery选择器 能够操作jQuery样式 能够写出常用的jQuery动画 能够操作jQuery属性 能够操作jQuery元素 能够操作jQuery元素尺寸、位置 1.jQuery 选择器 1.1jQuery 基础选择器 原生 JS 获取元素方式很多，很杂，而且兼容性情况不一致，因此 jQuery 给我们做了封装，使获取元素统一标准。 $('选择器'）//里面选择器直接写CSS选择器即可，但是要加引号 名称 用法 描述 ID 选择...
jqueryAPI
&&
10-21 546
jquery基础选择器和层次选择器
qq_45308912的博客
11-18 491
jquery的基本选择器和层级选择器和css规范一样，因此可以对比css选择器规范来学习
jquery 选择器的第二个参数
u010878154的博客
01-22 1754
测试代码： [code="html"] $(document).ready(function(){ $("#but").click(function(){ test(); }); }); function test(){ $("div").each(function(index){ var obj=$(this); var val=$("input",obj...
jQuery 常用API
最新发布
surx123456的博客
05-28 1981
1、语法用户自己给元素添加的属性，我们称为自定义属性。
深入解析jQuery常用API与源码
jQuery库封装了JavaScript的许多复杂操作，简化了Web开发过程，它通过一个统一的API，为各种浏览器提供了一个可靠的、跨浏览器的JavaScript代码。jQuery的核心理念可以简单归纳为“写得少，做得多”。 知识点二：...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值