jQuery学习笔记（二）- jQuery常用API

最新推荐文章于 2024-08-25 09:57:22 发布

Ludwig1597

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量334

点赞数

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

本文链接：https://blog.csdn.net/Ludwig1957/article/details/113705016

版权

jQuery 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

本文详细介绍了jQuery的基础知识，包括选择器、层级选择器、隐式迭代、筛选选择器和方法，以及样式操作、效果动画、属性操作、元素操作等。通过实例展示了如何使用jQuery实现元素的选择、遍历、样式变化、动画效果和事件处理，帮助读者快速掌握jQuery的核心功能。

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

2021.2.4

jQuery学习笔记（二）

jQuery常用API

jQuery选择器

jQuery基础选择器

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

语法：$('选择器') //里面选择器直接写CSS选择器即可，但是要加引号。

ID选择器
$('#id') 获取指定ID的元素
全选选择器
$('*') 匹配所有元素
类选择器
$('.class') 获取同一类class的元素
标签选择器
$('div') 获取统一标签的所有元素
并集选择器
$('div,p,li') 选取多个元素
交集选择器
$('li.current') 交集元素

jQuery层级选择器

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

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

jQuery隐式迭代（重要）

知识铺垫：设置样式
语法：$('div').css('属性','值')

遍历内部DOM元素(伪数组形式存储)的过程叫做隐式迭代。
简单理解：给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作，方便我们调用。

<body>
    <div>惊不惊喜</div>
    <div>惊不惊喜</div>
    <script>
        //1.获取四个div元素
        console.log($('div'));
        //2.给四个div设置背景颜色为粉色 jQuery对象不能使用style
        $('div').css('background', 'pink');
        //这里做了隐式迭代。
    </script>
</body>

jQuery筛选选择器

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

<body>
    <ul>
        <li>我是ul的</li>
        <li>我是ul的</li>
        <li>我是ul的</li>
    </ul>
    <script>
        $(function() {
            $('ul li:first').css('color', 'red');
        })
    </script>
</body>

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开始

Note:注意一下都是方法，要带括号,加粗的重点记忆

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <div class="nav">
        <p>我是p</p>
        <div>
            <p>我是p</p>
        </div>
    </div>
    <script>
        // 注意一下都是方法，要带括号
        $(function() {
            //1.父 parent() 返回亲爸爸
            console.log($('.son').parent());
            //2.子
            //2.1 亲儿子 children()
            //$('.nav').children('p').css('color', 'red');
            //2.2 所有的子孙后代 find()相当于后代选择器
            $('.nav').find('p').css('color', 'red');
            //3.兄 略
        })
    </script>
</body>

Note:面对这么多引号小括号，强烈推荐一款vs code插件tabout,按tab键即可帮助我们跳出括号！

jQuery 里面的排他思想

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

<body>
    <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>

一个实例：

<script>
    $(function(){
        $('#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>

jQuery样式操作

操作 css 方法

jQuery可以使用 css 方法来修改简单元素样式；也可以操作类，修改多个样式。

参数只写属性名，则是返回属性值 $(this).css('color');
参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号 $(this).css('color','red');
参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号 $(this).css({color:'white',font-size:20})

Note:如果是复合属性则必须采取驼峰命名法，如果值不是数字，则需要加引号。

设置类样式方法

作用等同于以前的classList，可以操作类样式，注意操作类里面的参数不加点。

添加类 $('div').addClass('current')
移除类 $('div').removeClass('current')
切换类 $('div').toggleClass('current')

类操作与className区别

原生JS中className会覆盖元素原先里面的类名。
jQuery里面类操作只是对指定类进行操作，不影响原先的类名。

<body>
    <div class="one"></div>
    <script>
        var one = document.querySelector('.one');
        one.className='two';//class变成two
        $('.one').addClass('two');//这个addClass相当于追加类名，不影响以前的类名
    </script>
</body>

jQuery效果

jQuery给我们封装了很多动画效果，最为常见的如下：

显示隐藏
- show();
- hide();
- toggle();
滑动
- slideDown();
- slideUp();
- slideToggle();
淡入淡出
- fadeIn();
- fadeOut();
- fadeToggle();
- fadeTo();
自定义动画
- animate();

显示隐藏效果

语法规范
显示：show([speed,[easing],[fn]])
隐藏：hide([speed,[easing],[fn]])
切换：toggle([speed,[easing],[fn]])
参数
- 参数都加了中括号，表示参数都可以省略，无动画直接显示。
- 参数意思
  - speed：
    三种预定速度之一的字符串（“slow”,“normal”,“fast”）或表示动画时常的毫秒数（如：100）。
  - easing：
    （Optional）用来指定切换效果，默认是’swing’,可用参数’linear’（匀速的）。
  - fn：
    回调函数，在动画完成时执行的函数，每个元素执行一次

<body>
    <button>显示</button>
    <button>隐藏</button>
    <button>切换</button>
    <div></div>
    <script>
        $(function() {
            $('button').eq(0).click(function() {
                $('div').show('fast', 'linear', function() {
                    alert(0);
                });
            })
            $('button').eq(1).click(function() {
                $('div').hide('slow', 'linear', function() {
                    alert(1);
                });
            })
            $('button').eq(2).click(function() {
                $('div').toggle('slow', 'linear', function() {});
            })
        })
    </script>
</body>

Note:一般情况下，我们都不加参数直接显示隐藏就可以了。

滑动效果

语法规范
下滑：slideDown([speed,[easing],[fn]])
上滑：slideUp([speed,[easing],[fn]])
滑动切换：slidetoggle([speed,[easing],[fn]])
参数
- 参数都可以省略。
- 参数意思
  - speed：
    三种预定速度之一的字符串（“slow”,“normal”,“fast”）或表示动画时常的毫秒数（如：100）。
  - easing：
    （Optional）用来指定切换效果，默认是’swing’,可用参数’linear’（匀速的）。
  - fn：
    回调函数，在动画完成时执行的函数，每个元素执行一次

事件切换

语法：hover([over,]out)

over：鼠标移到元素上要触发的函数(相当于mouseenter)
out：鼠标移出元素要触发的函数(相当于mouseleave)

<script>
    //1.事件切换 hover 就是鼠标经过和离开的复合写法
    /* $('.nav>li').hover(function(){
        $(this).children('ul').slideDown(200);
    },function(){
        $(this).children('ul').slideUp(200);
    }) */
    //2.事件切换 hover 如果只写一个函数，那么鼠标经过和离开都会触发这个函数
    $('.nav>li').hover(function(){
        $(this).children('ul').slideToggle();
    })
</script>

动画队列及其停止排队方法

动画或效果队列
动画或者效果一旦触发就会执行多次，如果多次触发，就造成多个动画或者效果排队执行。
停止排队 stop()
- stop() 方法用于停止动画或效果
- 注意：stop()写到动画或者效果的前面，相当于停止结束上一次的动画。

<script>
    $('.nav>li').hover(function(){
        //stop()方法必须写到动画的前面
        $(this).children('ul').stop().slideToggle();
    })
</script>

淡入淡出效果

语法规范
淡入：fadeIn()([speed,[easing],[fn]])
淡出：fadeOut()([speed,[easing],[fn]])
切换：fadeToggle()([speed,[easing],[fn]])
渐进方式调整到指定的透明度：fadeTo([[speed],opacity,[easing],[fn]])
参数意思
- opacity：透明度必须写，取值0~1之间。
- speed：必须写。三种预定速度之一的字符串（“slow”,“normal”,“fast”）或表示动画时常的毫秒数（如：100）。
- 其余参数意思已介绍过。

自定义动画 animate

语法规范
animate(params,[speed],[easing],[fn])
参数意思
- params：
  想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带括号，如果是复合属性则需要采取驼峰命名法borderLeft。其余参数都可以省略。
- 其余参数意思已介绍过。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.mini.js"></script>
    <style>
        div {
            position: absolute;
            width: 150px;
            height: 150px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <button>动起来</button>
    <div></div>
    <script>
        $(function() {
            $('button').click(function() {
                $('div').animate({
                    left: 200,
                    top: 200,
                    opacity: .4,
                    width: 300
                }, 500);
            })
        })
    </script>
</body>

</html>

jQuery属性操作

设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的href，比如<input>元素里面的type。

获取属性语法：prop('属性')
设置属性语法：prop('属性','属性值')

<body>
    <a href="https://www.baidu.com/" title="都很好">title</a>
    <input type="checkbox" name="" id="" checked>
    <script>
        $(function() {
            //element.prop('属性名') 获取元素固有的属性值
            console.log($('a').prop('href'));
            $('a').prop('title', '不怎么样');
            $('input').change(function() {
                console.log($(this).prop('checked'));
            })
        })
    </script>
</body>

设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给div添加一个index=‘1’。

获取属性元素:attr('属性') //类似原生getAttribute()
设置属性元素:attr('属性','属性值') //类似原生setAttribute()

Note:改方法也可以获取H5自定义属性。

<body>
    <div index='1'>index是自定义属性</div>
    <script>
        $(function() {
            console.log($('div').attr('index'));
            $('div').attr('index', 4);
            console.log($('div').attr('index'));
        })
    </script>
</body>

数据缓存 data()

data() 方法可以在指定的元素上存取数据，并不会修改DOM元素结构。一旦页面刷新，之前存放的数据被移除。

附加数据语法：data('name','value') //向被选元素附加数据
获取数据语法：data('name') //向被选元素获取数据

同时，还可以读取HTML5自定义属性 data-index，得到的是数字型。

<body>
    <div index='1' data-index="2">index是自定义属性</div>
    <span>123</span>
    <script>
        $(function() {
            //数据缓存data()这个里面的数据是存在元素的内存里面
            $('span').data('uname', 'andy');
            console.log($('span').data('uname'));
            //这个方法获取data-index H5 自定义属性，不用写data- 而且返回的是数字型
            console.log($('div').data('index'));//2
        });
    </script>
</body>

jQuery文本属性值

主要针对元素的内容还有表单的值操作。

普通元素内容 html()（相当于原生innerHTML）
获取元素内容：html()
设置元素内容：html('内容')
普通元素文本内容 text() （相当于原生innerText）
获取元素的文本内容：text()
设置元素的文本内容：text('内容')
表单的值val()（相当于原生的 value）

<body>
    <div>
        <span>我是span里的内容</span>
    </div>
    <input type="text" value="请输入内容">
    <script>
        $(function() {
            //1.获取设置元素内容 html()
            console.log($('div').html());
            //$('div').html('234');
            //2.获取设置元素文本内容 text()
            console.log($('div').text());
            $('div').text('123');
            //3.获取设置表单值 val()
            console.log($('input').val());
            $('input').val('123');
        });
    </script>
</body>

jQuery元素操作

主要是遍历、创建、添加、删除元素操作。

遍历元素

jQuery隐式迭代是对同一类元素做了同样的操作。如果想要给同一类元素做不同操作，就需要用到遍历。

语法₁：$('div').each(function(index,domEle){xxx;})
- each()方法遍历匹配的每一个元素。主要用DOM处理。
- 里面的回调函数有两个参数：index是每个元素的索引号；domEle是每个DOM元素对象，不是jQuery对象
- 所以要想使用jQuery方法，需要给这个dom元素转换为jQuery对象 $(domEle)

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            $('div').css('color', 'red');
            //如果针对于同一类元素做不同的操作，需要用到遍历元素（类似for 但是比for强大）
            //1.each() 方法遍历元素
            var arr = ['red', 'green', 'blue'];
            var sum = 0;
            $('div').each(function(index, domEle) {
                //回调函数第一个参数一定是索引号，可以自己指定index即索引号的名称
                console.log(index);
                //回调函数第二个参数一定是dom元素对象,也是自己命名
                console.log(domEle);
                //domEle.css('color');报错，因为这是一个dom对象
                console.log($(domEle).css('color', arr[index]));
                sum += parseInt($(domEle).text());
            })
            console.log(sum);
        })
    </script>
</body>

语法₂：$.each(object,function(index,element){xxx;})
- $.each()方法可用于遍历任何对象。主要用于数据处理，比如数组，对象。
- 里面的函数有两个参数：index是每个元素的索引号；element遍历内容

<body>
    <div>1</div>
    <div>2</div>
    <div>3</div>
    <script>
        $(function() {
            //2.$.each()方法遍历元素 主要用于遍历数据，处理数据
            $.each($('div'), function(i, ele) {
                console.log(i);
                console.log(ele);
            });
            var arr = ['red', 'green', 'blue'];
            $.each(arr, function(i, ele) {
                console.log(i);
                console.log(ele);
            });
            $.each({
                uname: 'andy',
                age: 18
            }, function(i, ele) {
                console.log(i); //输出的是 name age 属性名
                console.log(ele); //输出的是 andy 18 属性值
            })
        })
    </script>
</body>

创建元素

语法：$('<li></li>') //动态的创建了一个li标签

添加元素

内部添加：比如将li放到ul里
- element.append('内容')
  把内容放入到匹配元素内部最后面，类似原生的appendChild。
- element.prepend('内容')
  把内容放入到匹配元素内部最前面。
外部添加：比如将一个div放到另一个div前面
- element.after('内容') //把内容放入目标元素的后面
- element.before('内容') //把内容放到目标元素的前面

Note:
1.内部添加元素，生成之后，他们是父子关系
2.外部添加元素，生成之后，他们是兄弟关系

删除元素

element.remove() //删除匹配的元素（本身）
element.empty() //删除匹配的元素集合中所有的子节点
element.html('') //清空匹配的元素内容

<body>
    <ul>
        <li>原先的li</li>
    </ul>
    <div class="test">我是原先的div</div>
    <script>
        $(function() {
            //1.创建元素    
            var li = $('<li>我是后来创建的li</li>')
                //2.添加元素
                //2.1 内部添加
                // $('ul').append(li); //内部添加并且放到内容的最后面
            $('ul').prepend(li); //内部添加并且放到内容的最前面
            var div = $('<div>我是后来添加的div</div>');
            //$('.test').after(div);
            $('.test').before(div);
            //$('ul').remove();可以删除匹配的元素 自杀
            //$('ul').empty();可以删除匹配的元素里面的子节点 孩子
            $('ul').html('');//修改ul里面的内容为一个空的字符串
        })
    </script>
</body>

jQuery尺寸、位置操作

jQuery尺寸

width()/height() //取得匹配元素宽度和高度值，只算width/height
innerWidth()/innerHeight() //取得匹配元素宽度和高度值，包含padding
outerWidth()/outerHeight() //取得匹配元素宽度和高度值，包含padding、border
outerWidth(true)/outerHeight(true) //取得匹配元素的高度值，包含padding、border、margin

Note：
1.以上参数为空，则是获取相应值，返回的是数字型。
2.如果参数为数字，则是修改相应值。
3.参数可以不必写单位。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.mini.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: pink;
            padding: 10px;
            border: 15px solid red;
            margin: 20px;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        $(function() {
            //1.width()/height() 获取设置元素 width和height大小
            console.log($('div').width());
            $('div').width(300); //修改宽度为300px
            //2.innerWidth()/innerHeight() 获取设置元素width/height+padding大小
            console.log($('div').innerWidth());
            //3.outerWidth()/outerHeight() 获取设置元素width/height+padding+border大小
            console.log($('div').outerWidth());
            //4.outerWidth(true)/outerHeight(true) 获取设置元素widht/height+padding+border+margin
            console.log($('div').outerWidth(true));
        })
    </script>
</body>

</html>

jQuery位置

位置主要有三个：offset()、position()、scrollTop()/scrollLeft()

offset()设置或获取元素偏移
- offset()方法设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系。
- 该方法有两个属性left、top。offset().top与offset().left分别用于获取距离文档顶部和左侧的距离。
- 可以设置元素的偏移：offset({top:10,left:30});
position()获取元素偏移
- position()方法用于返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准。
- position()只能获取不能设置。

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="jQuery.mini.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        .father {
            width: 400px;
            height: 400px;
            background-color: pink;
            margin: 100px;
            overflow: hidden;
            position: relative;
        }
        
        .son {
            width: 150px;
            height: 150px;
            position: absolute;
            background-color: purple;
            left: 10px;
            top: 10px;
        }
    </style>
    <script src="jQuery.mini.js"></script>
</head>

<body>
    <div class="father">
        <div class="son"></div>
    </div>
    <script>
        $(function() {
            //1.获取设置距离文档的位置（偏移）offset
            console.log($('.son').offset());
            console.log($('.son').offset().top);
            //修改
            /* $('.son').offset({
                top: 200,
                left: 200
            }); */
            //2.获取距离带有定位父级位置（偏移）position 如果没有带有定位的父亲，则以文档为准
            console.log($('.son').position()); //position()只能获取不能设置
        })
    </script>
</body>

</html>

scrollTop()/scrollLeft()设置或获取元素被卷去的头部和左侧
- scrollTop()方法设置或返回被选元素被卷去的头部

 <script>
    $(function() {
        //被卷去的头部scrollTop() /被卷去的左侧scrollLeft()
        $(document).scrollTop(100);//有参数时页面一加载即滚动到100px的距离处
        //页面滚动事件
        $(window).scroll(function() {
            //console.log(11);
            console.log($(document).scrollTop());
        })
    })
</script>

案例：带有动画效果的返回顶部
案例分析；

核心原理：使用animate动画返回顶部
animate动画函数里面有个scrollTop属性，可以设置位置
但是是元素做动画。因此$('body,html').animate({scrllTop:0})

<script>
    $(function() {
        //返回顶部
        $('.back').click(function(){
            //$(document).scrollTop(0); 无动画效果
            $('body,html').stop().animate({scrollTop:0});
            //$(document).stop().animate({scrollTop:0});这样写不行，只有元素才可以做动画文档不行
        })
    })
</script>

Ludwig1597

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery学习笔记（二）- jQuery常用API

2021.2.4文章目录jQuery学习笔记（二）jQuery常用APIjQuery选择器jQuery基础选择器jQuery层级选择器jQuery隐式迭代（重要）jQuery筛选选择器jQuery 筛选方法（重点）jQuery 里面的排他思想jQuery样式操作操作 css 方法设置类样式方法类操作与className区别jQuery效果显示隐藏效果滑动效果事件切换动画队列及其停止排队方法淡入淡出效果自定义动画 animatejQuery属性操作设置或获取元素固有属性值 prop()设置或获取元素自定.
复制链接

扫一扫