jQuery | 常用 API （选择器 + 样式操作 + 动画效果）

不爱吃菜的蔡菜

已于 2022-05-23 16:53:55 修改

阅读量473

点赞数

分类专栏： jQuery 文章标签： jquery javascript 前端

于 2022-05-23 16:52:32 首次发布

本文链接：https://blog.csdn.net/muziqwyk/article/details/124900237

版权

本文详细介绍了jQuery的选择器，包括基础选择器、层级选择器和筛选选择器，强调了隐式迭代的重要性。此外，文章还探讨了jQuery的样式操作，如css方法和类样式操作，并提供了tab栏切换的案例。在动画效果部分，讲解了显示隐藏、滑动、淡入淡出及自定义animate方法，结合王者荣耀手风琴效果的案例进行实战演示。

摘要由CSDN通过智能技术生成

jQuery 选择器

jQuery 基础选择器

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

$(“选择器”) // 里面选择器直接写 CSS 选择器即可，但是要加引号

        $('.nav')

jQuery 层级选择器

        $('ul li')

jQuery 设置样式

$('div').css('属性', '值')

        $('div').css('backgroundColor', 'pink');

隐式迭代（重要）

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

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

这里就是隐式迭代给四个div设置背景颜色和字体颜色

jQuery 筛选选择器

odd和even 选择的是索引号为奇数或者偶数的元素！！！

    <script>
        $(function () {
            $('ul li:first').css('color', 'red'); // ul里面的第一个小li
            $('ul li:eq(2)').css('color', 'blue'); // ul里面的第三个小li
            $('ol li:odd').css('color', 'skyblue');  // 索引号是奇数行的
            $('ol li:even').css('color', 'pink');  // 索引号是偶数行的
        })
    </script>

jQuery 筛选方法（重点）

这些是函数，不要忘记最后加（）！！！

这些是站在父子兄的角度来查找元素

重点记住： parent() children() find() siblings() eq()

    <script>
        $(function () {
            // 1. 父  parent()  // 返回的是 最近一级的父级元素 亲爸爸
            $('.son').parent();
            console.log($('.son').parent()); // father
            // 2. 子 
            // (1) 只选亲儿子   children()  相当于子代选择器 ul>li
            $('.nav').children('p').css('color', 'red');
            // (2) 可以选里面所有的儿子，包括儿子和孙子  类似于后代选择器 ul li
            $('.nav').find('p').css('backgroundColor', 'skyblue');
        })
    </script>

    <script>
        // 1. 兄弟元素siblings 除了自身元素之外的所有亲兄弟
        $('ol .item').siblings('li').css('color', 'red');
        // 2. 第n个元素
        // (1)我们可以利用选择器的方式选择
        $('ul li:eq(2)').css('backgroundColor', 'skyblue');
        // (2) 利用 选择方法  来选择  更推荐这种选法
        $('ul li').eq(1).css('background', 'pink');
        // 3. 判断是否有某个类名
        console.log($('div:first').hasClass('current')); // true
        console.log($('div:last').hasClass('current')); // false
    </script>

$(this) jQuery的当前元素 this不要加引号
show () 显示元素 hide()隐藏元素

    <script>
        $(function () {
            // 鼠标经过
            $('.nav>li').mouseover(function () {
                // $(this) jQuery的当前元素  this不要加引号
                // show () 显示元素 hide()隐藏元素
                $(this).children('ul').show();
            })
            // 鼠标离开
            $('.nav>li').mouseout(function () {
                $(this).children('ul').hide();
            })
        })
    </script>