jQuery的基础知识，常用的API

什么是jQuery

  1. jQuery是一个JavaScript函数库。jQuery是一个轻量级的”写的少，做的多”的JavaScript库。
  2. jQuery库包含以下功能：
  • HTML 元素选取
  • HTML 元素操作
  • CSS 操作
  • HTML 事件函数
  • JavaScript 特效和动画
  • HTML DOM 遍历和修改
  • AJAX
  • Utilities
    <script src="https://cdn.jsdelivr.net/gh/Rr210/[email protected]/js/jquery-3.5.1.min.js"></script>

jQuery对象

  1. 等待页面加载完毕 $(document).ready(function(){})或者$(function(){})
  2. $是jQuery的别称,dollar符号，顶级对象
  3. 原生jsDOM对象，jQuery对象$()里面不能使用原生属性和方法

相互转化

  1. DOM对象转化为jQuery对象，$(obj)
  2. jQuery对象转化为DOM对象 $('div')[index] 或者$('div').get(index)

jQuery API

  1. 选择器 $('') 与css获取一致
  2. 隐式迭代 $('').css('','')(伪数组形式存储)

筛选选择器

  1. 筛选元素的方法-first/last/eq(index)/odd/even

    1
    2
    3
    4
    5
    6
    7
    8
    $(function(){
        $('ul li:first').css('color','red'); //获取第一个元素
        $('ul li:last').css('fontSize','20px');//获取最后一个
        $('ul li:eq(4)').css('backgroundColor','#ccc');//获取指定元素
        $('ul li:odd').css('textShadow','1px 2px 3px #ccc'); //获取偶数元素
        $('ul li:even').css('textIndent','10px');//获取奇数元素
        $('ul').css('listStyle','none')
    })

    筛选方法

  2. parent(),最近一级的父代

  3. children()亲儿子

  4. find() 包括儿子和孙子

  5. $().mouseover/mouseout

  6. $(this)当前元素，this不要加引号

  7. 兄弟元素 $().siblings,除了自身的所有元素

  8. nextAll([]),查找元素之后所有的同辈元素，prevAll([expr])查找之前的所有同辈元素

  9. hasClass('类名'), 检查当前元素是否含有某个特定的类，如果有，返回true

  10. eq(index)或者使用选择器$(li:eq(index))

  11. partent() children()`` find()`` eq()

  12. $(this).index()得到当前元素的索引号

查看案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64

<style>
    *{
    padding: 0;
    margin: 0;
}
section{
    width: 600px;
    height: 200px;
    background-color: #ccc;
    margin: 100px auto;
    display: flex;
    overflow: hidden;
    border-radius: 10px;
    border: 1px solid rgb(78, 177, 202);
}
ul{
    flex:1;
    display: flex;
    flex-direction: column;
}
ul li{
    flex: 1;
    border-bottom: 2px solid rgb(194, 150, 83);
    text-align: center;
    line-height: 50px;
}
li{
    list-style: none;
}
.content{
    flex:5
}
.content img {
    width: 100%;
    vertical-align: middle;
}
</style>
<body>
    <section>
    <ul>
        <li>你好世界</li>
        <li>你好世界</li>
        <li>你好世界</li>
        <li>你好世界</li>
    </ul>
    <div class="content">
        <li><img src="https://cdn.jsdelivr.net/gh/Fuukei/WebP_API/PC/web-illust_66413382_20171223_233200.webp" alt=""></li>
        <li><img src="https://cdn.jsdelivr.net/gh/Fuukei/WebP_API/PC/web-illust_71658260_20181119_230056.webp" alt=""></li>
        <li><img src="https://tva1.sinaimg.cn/large/a15b4afely1fnt9605xzwj21hc0u07ld.jpg" alt=""></li>
        <li><img src="https://cdn.jsdelivr.net/gh/Fuukei/WebP_API/PC/web-illust_69810542_20180804_165122.webp" alt=""></li>
    </div>
</section>
<script>
    $(function(){
    $('ul li').eq(3).css('border-bottom','none');
    $('.content li').eq(0).siblings().hide();
    $('ul li').mouseover(function(){
        var index = $(this).index();
        $('.content li').eq(index).show();
        $('.content li').eq(index).siblings().hide();
    })
})
</script>

jQuery获取

查看答案

  • jQuery.parent(expr)，找父亲节点，可以传入expr进行过滤，比如$(“span”).parent()或者$(“span”).parent(“.class”)
  • jQuery.parents(expr)，类似于jQuery.parents(expr),但是是查找所有祖先元素，不限于父元素
  • jQuery.children(expr)，返回所有子节点，这个方法只会返回直接的孩子节点，不会返回所有的子孙节点
  • jQuery.contents()，返回下面的所有内容，包括节点和文本。这个方法和children()的区别就在于，包括空白文本，也会被作为一个jQuery对象返回，children()则只会返回节点
  • jQuery.prev()，返回上一个兄弟节点，不是所有的兄弟节点
  • jQuery.prevAll()，返回所有之前的兄弟节点
  • jQuery.next()，返回下一个兄弟节点，不是所有的兄弟节点
  • jQuery.nextAll()，返回所有之后的兄弟节点
  • jQuery.siblings()，返回兄弟姐妹节点，不分前后
  • jQuery.find(expr)，跟jQuery.filter(expr)完全不一样：
  • jQuery.filter()，是从初始的jQuery对象集合中筛选出一部分，而
  • jQuery.find()，的返回结果，不会有初始集合中的内容，比如$(“p”).find(“span”)，是从

    元素开始找<span>，等同于$("p span")

操作方法

  1. 属性名一定要加引号，数值不需要加引号
  2. 符合属性，用,隔开，并用驼峰名法.css({,})
  3. 设置类样式
  • 添加类addClass('不需要加.')
  • 删除类`removeClass(‘类名’)
  • 切换类toggleClass('类名')
  1. 链式操作

jQuery效果

显示隐藏

  1. show() hide() toggle() 显示 隐藏 切换
  2. show([speed,[easeing],[fn]])

滑动

  1. slideDown() 向下滑动
  2. slideUp() 向上滑动
  3. slideToggle()
  4. hover（over，out） 事件切换
  5. 包括鼠标经过离开的符合写法
  6. 只写一个参数 使用sildeToggle()， 使用stop() 结束上一次动画

淡入淡出

  1. fadeIn() 淡入效果
  2. fadeOut() 淡出效果
  3. fadeToggle() 淡入淡出切换
  4. fadeTo('[speed],opacity,[easeing],[fn]')

自定义动画

  1. animate(params,[speed])
  2. params 以对象形式传递{ }，属性名可以不带引号，复合属性使用驼峰命名法

手风琴案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<style>
    *{
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    .box{
        width: 950px;
        margin: 100px auto;
        height: 100px;
        background-color: rgb(213, 233, 125);
    }
    ul {
        width: 1000px;
        height: 100%;
        list-style: none;
        margin: 0;
        padding: 0;
    }
    li{
        position: relative;
        float: left;
        width: 100px;
        height: 100px;
        margin: 0;
        margin-right: 20px;
        border-radius: 10px;
        overflow: hidden;
    }
    li .small{
        position: absolute;
        width: 100px;
        height: 100px;
        top:0;
        z-index: 100;
    }
    li .big{
        display: none;
        width: 224px;
        height: 100%;
    }
    ul li:nth-child(1){
        width: 224px;
    }
    ul li:nth-child(1) .small{
        display: none;
    }
    ul li:nth-child(1) .big{
        display: block;
    }
</style>

<body>
    <div class="box">
        <ul>
            <li><img src="https://cloud.mr90.top/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cloud.mr90.top/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
            <li><img src="https://cloud.mr90.top/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cloud.mr90.top/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
            <li><img src="https://cloud.mr90.top/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cloud.mr90.top/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
            <li><img src="https://cloud.mr90.top/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cloud.mr90.top/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
            <li><img src="https://cloud.mr90.top/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cloud.mr90.top/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
            <li><img src="https://cloud.mr90.top/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cloud.mr90.top/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
            <li><img src="https://cloud.mr90.top/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cloud.mr90.top/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
        </ul>
    </div>
    <script>
        $(function(){
            $('.box').css('borderRadius',10)
            $('.box ul li').mouseenter(function(){
                $(this).stop().animate({
                    width:224
                },200).children('.small').stop().fadeOut().siblings('.big').stop().fadeIn();
               $(this).siblings('li').stop().animate({
                    width: 100
                },200).children('.big').stop().fadeOut().siblings().stop().fadeIn();
            })
        })
    </script>

查看案例

prop() 属性值

  1. element.prop('属性名') 获得固有属性值
  2. prop（'属性名','属性值')

attr()

  1. attr('属性名')元素的自定义属性
  2. 设置和prop方法一致

数据缓存

  1. data('key','value')存放在元素的内存里面
  2. 获取的时候(data('key'))
  3. 或者H5自定义属性，不需要加data-,而且返回的是数字型

全选prop()案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
<body>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        body{
            font-size: 13px;
        }
        table{
            text-align: center;
            margin: 100px auto;
            border-radius: 10px;
            overflow: hidden;
        }
        thead{
            background-color: #008dd0;
        }
    </style>
    
    <body>
        <table width="300px" border="1" cellspacing="0">
            <thead>
                <tr>
                    <th><label for="all">全选<input type="checkbox" id="all"></label></th>
                    <th>hello</th>
                    <th>world</th>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>你好世界</td>
                    <td>你好世界</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>你好世界</td>
                    <td>你好世界</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>你好世界</td>
                    <td>你好世界</td>
                </tr>
                <tr>
                    <td><input type="checkbox"></td>
                    <td>你好世界</td>
                    <td>你好世界</td>
                </tr>
            </tbody>
    
        </table>
        <script>
            $(function(){
                $('#all').change(function(){
                    $('td input').prop('checked',$(this).prop('checked'))
                    console.log($(this).prop('checked'));
                })
                $('td input').attr('data-index',1);
                console.log($('td input').attr('data-index'));
                $('td input').change(function(){
                    console.log($(this).prop('checked')); 
                    if($('td input:checked').length == $('td input').length){
                        $('#all').prop('checked',true);
                    }else{
                        $('#all').prop('checked',false);
                    }
                })
              
            })

            // var main = document.getElementById('all');
            // var input = document.querySelector('tbody').getElementsByTagName('input');
            // // 当点击全选按钮时，下方的选框同步
            // main.onclick = function () {
            //     console.log(this.checked);
            //     for (var i = 0; i < input.length; i++) {
            //         input[i].checked = this.checked;
            //     }
            // }
            // // 当去除下方选框，或者全部将input选框点击或取消时，全选按钮同步发生改变
            // for (var i = 0; i <= input.length - 1; i++) {
            //     input[i].onclick = function () {
            //         var flag = true;
            //         for (var i = 0; i <= input.length - 1; i++) {
            //             if (!input[i].checked) {
            //                 flag = false;
            //             }                   
            //         } 
            //         main.checked = flag;
            //     }
            // }
    
        </script>
</body>

获取内容

  1. html() 带有标签
  2. text() 只获取文本
  3. 表单中的值 val()
  4. 获取指定的祖先元素 $(this).partents('类名')，
  5. (n*n).toFixed(2)保留两位小数

元素操作

  1. 遍历元素 $('类').each(回调函数function(index,domEle))可以自己命名
  2. $.each($('类')，function(index,domELe)),遍历数组

购物车经典案例

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
$(function () {
    $('#all').change(function () {
        $('td .da').prop('checked', $(this).prop('checked'))
        // console.log($(this).prop('checked'));
    })
    $('td .da').attr('data-index', 1);
    // console.log($('td .da').attr('data-index'));
    $('td .da').change(function () {
        // console.log($(this).prop('checked'));
        console.log($('td .da').length / 2);
        if ($('td .da:checked').length == $('td .da').length) {
            $('#all').prop('checked', true);
        } else {
            $('#all').prop('checked', false);
        }
    })
    // 购物车🚗增加案例
    $('.box .adds').click(function () {
        var n = $(this).siblings('#nums').val();
        n++;
        // console.log($(this).siblings('#nums').val(n));
        $(this).siblings('#nums').val(n);
        // 计算小计金额
        var p = $(this).parents('td').next('.tup').text().substr(1);
        // console.log($(this).parents('td').eq(2).text('￥' + (p * n).toFixed(2)));
        $(this).parents('td').next('.tup').next('.xj').text('￥' + (p * n).toFixed(2));
        getSum();
    })
    $('.box .subs').click(function () {
        var n = $(this).siblings('#nums').val();
        if (n <= 1) {
            return false;
        }
        n--;
        // console.log($(this).siblings('#nums').val(n));
        $(this).siblings('#nums').val(n);
        // 计算小计金额
        var p = $(this).parents('td').next('.tup').text().substr(1);
        $(this).parents('td').next('.tup').next('.xj').text('￥' + (p * n).toFixed(2));
        getSum();
    })
    // 当文本框中的数量发生变化时，小计同步变化
    $('#nums').change(function () {
        console.log($(this).parents('td').next().text().substr(1));
        var con = $(this).val();
        console.log($(this).val());
        var p = $(this).parents('td').next().text().substr(1);
        $(this).parents('td').next().next().html('￥' + (p * con).toFixed(2));
        if ($(this).val() == 1) {
            $(this).parents('td').next().next().html() = $(this).parents('td').next().text()
        }
        getSum();
    })
    // 计算总计数量
    getSum();
    function getSum() {
        var count = 0;
        var money = 0;
        $('td #nums').each(function(n,ele){
            count += parseInt($(ele).val());
        })
        $('.xj').each(function(n,ele){
            money += parseFloat($(ele).text().substr(1));
        })
        $('.count').text(count);
        $('.money').text(money.toFixed(2));
}
})

查看效果