jQuery的知识总结（1）

jQuery的基础知识，常用的API

什么是jQuery

jQuery是一个JavaScript函数库。jQuery是一个轻量级的”写的少，做的多”的JavaScript库。
jQuery库包含以下功能：

HTML 元素选取
HTML 元素操作
CSS 操作
HTML 事件函数
JavaScript 特效和动画
HTML DOM 遍历和修改
AJAX
Utilities
<script src="https://cdn.jsdelivr.net/gh/Rr210/hexofixed@v0.47/js/jquery-3.5.1.min.js"></script>

jQuery对象

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

相互转化

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

jQuery API

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

筛选选择器

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

$(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')
})

筛选方法

parent(),最近一级的父代
children()亲儿子
find() 包括儿子和孙子
$().mouseover/mouseout
$(this)当前元素，this不要加引号
兄弟元素 $().siblings,除了自身的所有元素
nextAll([]),查找元素之后所有的同辈元素，prevAll([expr])查找之前的所有同辈元素
hasClass('类名'), 检查当前元素是否含有某个特定的类，如果有，返回true
eq(index)或者使用选择器$(li:eq(index))
partent() children()`` find()`` eq()
$(this).index()得到当前元素的索引号

查看案例


<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")

操作方法

属性名一定要加引号，数值不需要加引号
符合属性，用,隔开，并用驼峰名法.css({,})
设置类样式

添加类addClass('不需要加.')
删除类`removeClass(‘类名’)
切换类toggleClass('类名')

链式操作

jQuery效果

显示隐藏

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

滑动

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

淡入淡出

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

自定义动画

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

手风琴案例

<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://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
            <li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
            <li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
            <li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
            <li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
            <li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/hexo/4/161211-1552378331dafb.webp" alt="" class="big"></li>
            <li><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/admin/qqavatar.jpeg" alt="" class="small"><img src="https://cdn.jsdelivr.net/gh/Rr210/image@master/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() 属性值

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

attr()

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

数据缓存

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

全选prop()案例

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

获取内容

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

元素操作

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

购物车经典案例

$(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));
}
})

查看效果