JavaScript库-jQuery

jQuery是一个快速、简洁的JavaScript库，将JavaScript常用的功能代码封装成函数，使用时直接调用
jQuery是一个比较老的库，以后可能不会用到，但感觉有必要了解下

JavaScript库是封装好的特定的集合(方法和函数)，是一个js文件，里面对原生JS代码进行了封装，可以实现各种预定好的功能
jQuery把js中的DOM操作做了封装，可以快速查询使用里面的功能(j：JavaScript，Query：查询)

下载及使用官网地址
选择 production，打开后全选复制，到VScode中新建一个js文件，粘贴保存
在项目中引入这个js文件<script src="jQuery.js"></script>

jQuery的入口函数与顶级对象$

入口函数
jQuery的入口函数只会等待DOM结构加载完成就开始执行，并不会等待所有外部文件加载完成
相当于原生js的DOMContentLoaded，但js的load是等待页面文档，外部js、css、图片加载完成才执行内部代码
jQuery的对象$
$是jQuery的别称，在代码中可以使用jQuery代替$，通常使用$
jQuery的对象$相当于原生JS的window对象，把元素用$包装成jQuery对象，就可以调用jQuery的方法

<script>
    // 第一种写法
    $(document).ready(function() {
        alert('1');
    })
    // 第二种写法
    $(function() {
        alert('2');
    })
    // $是jQuery的别称
    jQuery(function() {
        alert('3');
    })
</script>

jQuery对象和 DOM对象

用原生js方法获取到的就是DOM对象
jQuery方法获取到的就是jQuery对象
jQuery对象的本质是利用$对DOM对象包装后产生的对象，以伪数组形式存储

<div>123</div>
<span></span>
<script>
    // DOM对象 通过DOM提供的API获取
    var div_DOM = document.querySelector('div');
    var span_DOM = document.querySelector('span');
    console.dir(div_DOM);

    // jQuery对象 通过$将DOM元素包装
    $('div');
    $('span');
    console.dir($('div'));

    // jQuery对象只能使用jQuery的方法，DOM对象只能使用原生js的属性和方法
    div_DOM.style.display = 'none';
    $('div').hide();
</script>

jQuery对象和 DOM对象相互转换
原生js的一些属性和方法jQuery没有封装，想要使用这些属性和方法需要将jQuery对象转换成DOM对象

<div>123</div>
<script>
    // DOM对象 转换成 jQuery对象
    // 1.直接获取DOM元素
    console.dir($('div'));
    // 2.通过$将DOM对象包装成 jQuery对象
    var div_DOM = document.querySelector('div');
    console.dir($(div_DOM));

    // jQuery对象 转换成 DOM对象
    // 1. $('div')[index]
    console.dir($('div')[0]);
    // 2. $('div').get(index)
    console.dir($('div').get(0));
</script>

jQuery隐式迭代

jQuery获取元素后以伪数组形式存储，自动遍历这些元素的过程称为隐式迭代
给获取到的所有元素进行循环遍历，执行相应的方法，不需要手动循环，简化操作，方便调用

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<script>
    // 获取4个div
    console.dir($('div'));
    // 设置背景颜色 jQuery对象不能使用style
    $('div').css('backgroundColor', 'cyan'); // 隐式迭代就是把匹配到的所有元素内部进行遍历循环，给每个元素添加方法
</script>

隐式迭代下的排他思想实现

// 按钮切换
<script>
    $(function() { // 入口函数无视结构顺序
        // 隐式迭代给所有的按钮都绑定了点击事件，无需手动循环添加事件
        $('button').click(function() { // 添加鼠标事件
            // 当前元素背景颜色变化
            $(this).css('backgroundColor', 'cyan'); // $(this)指当前元素，不加引号
            // 其他同级元素去除背景颜色，不需要手动循环清除
            $(this).siblings('button').css('backgroundColor', '');
        })
    })
</script>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>
<button>按钮</button>

// tab栏切换实现
<script>
    $(function() { 
        // 鼠标经过tab栏
        $('#left li').mouseover(function() {
            // 拿到鼠标当前经过的li的索引号
            var index = $(this).index();
            // 相应索引的版块显示出来
            $('#content div').eq(index).show();
            // 其他同级元素版块隐藏
            $('#content div').eq(index).siblings.hide();
        })
    })
</script>

jQuery常用API

更多API使用方法查看[jQueryAPI中文文档]https://jquery.cuishifeng.cn/

选择器

选择器语法$("选择器") 直接写css选择器即可，需要加引号，单引双引效果相同

基础选择器

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

层级选择器

$("ul>li")  // 子代选择器  获取最近一级的指定子级元素
$("ul li")  // 后代选择器  获取所有的指定子级元素

筛选选择器

<ul>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
    <li>5</li>
</ul>
<script>
    $("ul li:first").css("color", "red");            // :first 获取第一个元素
    $("ul li:last").css("color", "blue");            // :last  获取最后一个元素
    $("ul li:eq(2)").css("color", "green");          // :eq(2) 获取指定索引号的元素，索引号从0开始
    $("ul li:odd").css("backgroundColor", "cyan");   // :odd   获取索引号为奇数的元素
    $("ul li:even").css("backgroundColor", "yellow");// :even  获取索引号为偶数的元素
</script>

jQuery筛选方法类似于节点层级操作

<div class="nav">
    <ul>
        <li class="first">1</li>
        <li class="second">2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
</div>
<script>
    // 查找最近一级的父级
    console.log($('.first').parent());
    // parents() 选择所有的父级，或 parents('选择器') 选择指定的父级，可跨多个层级

    // 查找最近一级的所有子级
    console.log($('ul').children('li')); // 获取最近一级的指定子级元素， $("ul>li") 子代选择器  
    console.log($('ul').find('li')); // 获取所有的指定子级元素，相当于 $("ul li") 后代选择器
    $('.nav>ul').mouseover(function() { // 添加鼠标事件
        $(this).children('li').css("color", "red");
    })
    $('.nav>ul').mouseout(function() {
        $(this).children('li').css("color", "");
    })

    // 查找指定的所有兄弟元素，不包括自己本身
    console.log($('.first').siblings('li'));
    // 查找当前元素之前的所有同级元素，不包括自己本身
    console.log($('.second').prevAll());
    // 查找当前元素之后的所有同级元素，不包括自己本身
    console.log($('.second').nextAll());

    // 检查当前元素是否含有指定的类名，如果有返回true
    console.log($('ul>li:first').hasClass('first')); // true
    console.log($('ul>li:last').hasClass('first')); // false

    // 获取指定索引号的元素，索引号从0开始，相当于 $("ul li:eq(index)")
    var index = 2;
    $('ul li').eq(index).css('backgroundColor', 'yellow');
</script>

链式编程
节省代码量，但使用链式编程要注意是哪个对象执行样式

<div>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
    <button>按钮</button>
</div>
<script>
    $(function() {
        $('button').click(function() {
            // $(this).css('color', 'red');
            // $(this).siblings('button').css('color', '');
            // 元素.属性样式.元素.属性样式 两个元素之间要有层级关系
            $(this).css('color', 'red').siblings('button').css('color', '');
            // 注意是哪个对象执行样式 $(this).siblings().parent()
            $(this).siblings().parent().css('backgroundColor', 'cyan');
        })
    })
</script>

CSS样式

使用css方法修改简单元素样式

<div></div>
<script>
    $(function() {
        // 只写属性名，返回属性值
        console.log($('div').css('width'));
        // 设置属性，参数是'属性名', '属性值'  是设置一组样式，属性必须加引号，值如果是数字可以不加引号和单位
        $('div').css('width', 400);
        // 对象形式的键值对参数，设置多组样式，属性之间用 , 分隔，属性不加引号
        $('div').css({
            height: 400,
            backgroundColor: 'lime' // 复合属性采用驼峰命名法
        })
    })
</script>

也可以操作类名，修改多个样式

<style>
    div {
        width: 150px;
        height: 150px;
        background-color: lime;
        margin: 100px auto;
        transition: all .5s;
    }
        
    .current {
        background-color: red;
        transform: rotate(360deg);
    }
</style>
<div></div>
<script>
    $(function() {
        var isRote = false;
        $('div').click(function() {
            if (!isRote) {
                // 添加类 addClass()
                $(this).addClass('current');
                isRote = true;
            } else {
                // 移除类 removeClass()
                $('div').removeClass('current');
                isRote = false;
            }
        })
    })
</script>

    <script>
        $(function() {
            $('div').click(function() {
                // 切换类名
                $(this).toggleClass('current'); // 执行一次追加类名，再执行就移除类名
            })
        })
    </script>

jQuery类操作与原生JS的className的区别
原生JS的className会覆盖原类名，jQuery相当于追加类名，不影响原本的类名

动画效果

显示与隐藏

<script src="jQuery.min.js"></script>

<button>显示</button>
<button>隐藏</button>
<button>切换</button>
<div style="width: 150px; height: 200px; background: lime"></div>

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

    // 显示 show([speed, [easing], [fn]]) //中括号表示参数都可以省略
    // $("div").show();

    // 隐藏 hide([speed, [easing], [fn]])
    // $("div").hide();

    // 显示与隐藏间切换 toggle([speed, [easing], [fn]])
    // $("div").toggle();

    // 显示隐藏、滑动、淡入淡出三种动画效果 参数一样
    // 参数都可以省略， 无动画直接显示、隐藏、显示与隐藏间切换，平时一般不带参数，直接显示隐藏即可
    // speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
    // easing：(Optional) 用来指定切换效果，默认是“swing”，可用参数“linear”
    // fn: 回调函数，在动画完成时执行的函数，每个元素执行一次
</script>

滑动效果

<button>下滑</button>
<button>上滑</button>
<button>切换</button>
<div style="width: 150px; height: 200px; background: lime"></div>

<script>
    $(function() {
        $('button').eq(0).click(function() {
            $('div').slideDown(1000, function() {
                alert('下滑');
            })
        })
        $('button').eq(1).click(function() {
            $('div').slideUp(1000, function() {
                alert('上滑');
            })
        })
        $('button').eq(2).click(function() {
            $('div').slideToggle(1000, function() {
                alert('切换');
            })
        })
    })

    // 下滑动 slideDown([speed, [easing], [fn]])
    // $("div").slideDown();

    // 上滑动 slideUp([speed, [easing], [fn]])
    // $("div").slideUp();

    // 滑动切换效果 slideToggle([speed, [easing], [fn]])
    // $("div").slideToggle();
</script>

淡入淡出效果

<button>淡入</button>
<button>淡出</button>
<button>切换</button>
<button>修改透明度</button>
<div style="width: 150px; height: 200px; background: lime"></div>

<script>
    $(function() {
        $('button').eq(0).click(function() {
            $('div').fadeIn(1000, function() {
                alert('淡入');
            })
        })
        $('button').eq(1).click(function() {
            $('div').fadeOut(1000, function() {
                alert('淡出');
            })
        })
        $('button').eq(2).click(function() {
            $('div').fadeToggle(1000, function() {
                alert('切换');
            })
        })

        // 渐进方式修改到指定的透明度 
        $('button').eq(3).click(function() {
            $('div').fadeTo(1000, 0.5)
        })
    })

    // 淡入 fadeIn([speed,[easing],[fn]])
    // $("div").fadeIn();

    // 淡出 fadeOut([speed,[easing],[fn]])
    // $("div").fadeOut;

    // 淡入淡出切换 fadeToggle([speed,[easing],[fn]])
    // $("div").fadeToggle();

    // 修改透明度
    // fadeTo(speed,opacity,[easing],[fn])
    // 两个必要参数
    // opacity ：透明度，取值 0~1 之间
    // speed：三种预定速度之一的字符串(“slow”,“normal”, or “fast”)或表示动画时长的毫秒数值(如：1000)
    // 其他参数同上
</script>

自定义动画

<button>移动</button>
<div style="position:absolute; width: 150px; height: 200px; background: lime"></div>

<script>
    $(function() {
        $('button').click(function() {
            $('div').animate({
                top: 300,
                left: 300,
                opacity: 0.4
            }, 1000)
        })
    })

    // animate(params,[speed],[easing],[fn])
    // params: 想要更改的样式属性，以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法 borderLeft。其余参数都可以省略
    // 其他参数同上
</script>

事件切换

<div class="hoverBox" style="width: 150px; height: 200px; background: cyan"></div>
<div class="slideBox" style="width: 150px; height: 200px; background: lime"></div>

<script>
    $(function() {
        // $('.hoverBox').hover(function() {
        //     $('.slideBox').slideUp(1000)
        // }, function() {
        //     $('.slideBox').slideDown(1000)
        // })

        $('.hoverBox').hover(function() {
            $('.slideBox').slideToggle(1000)
        })

        // $('div').hover(function() {}, function() {})
        // hover([over,]out)
        // over: 鼠标移到元素上要触发的函数(相当于mouseenter)
        // out: 鼠标移出元素要触发的函数(相当于mouseleave)
        // 如果只写一个函数，则鼠标经过和离开都会触发它
    })
</script>

动画队列及停止排队方法
动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

<div class="hoverBox" style="width: 150px; height: 200px; background: cyan"></div>
<div class="slideBox" style="width: 150px; height: 200px; background: lime"></div>

<script>
    $(function() {
        // 停止动画 stop()
        $('.hoverBox').hover(function() {
            $('.slideBox').stop().slideToggle(1000)
        })
            
        // stop()方法用于停止动画或者效果
        // 注意: stop() 写到动画或者效果的前面，相当于停止结束上一次的动画
        // $('.slideBox').slideToggle(1000).stop() 放到后面是停止本次动画，也就不会有动画效果
    })
</script>

属性操作

设置或获取元素的属性值

<div index="123">
    <a href="#"></a>
</div>
<script>
    $(function() {
        // 设置或获取元素的固有属性值 prop()  (元素本身自带的属性，比如 <a> 元素里面的 href)
        // 获取  prop("属性")
        console.log($("a").prop("href"));
        // 设置 prop("属性","属性值")
        $("a").prop("title", "文本");

        // 设置或获取自定义的元素属性值 attr() (自己给元素添加的属性，比如给 div 添加 index ="1")
        // 获取 attr("属性")   类似原生getAttribute()
        console.log($("div").attr("index"));
        // 设置 attr("属性","属性值") 类似原生setAttribute()
        $("div").attr("index", 4);
    })
</script>

数据缓存

<div index="1"></div>
<span></span>
<script>
    $(function() {
        // data() 方法可以在指定的元素上存取数据,并不会修改DOM元素结构，一旦页面刷新，之前存放的数据都将被移除。

        // 附加数据 data("name","value") 向被选元素附加数据，这个里面的数据是存放在元素的内存里面
        $("span").data("uname", "andy");

        // 获取数据 date("name") 向被选元素获取数据
        console.log($("span").data("uname"));
        // // 这个方法还可以读取H5自定义属性 data-index h5自定义属性，不用写 data-，返回的是数字型
        console.log($("div").data("index"));
    })
</script>

内容文本值

<div><span>123</span></div>
<div>
    <span>我是内容</span>
</div>
<input type="text" value="请输入内容">
<script>
    $(function() {
        // 主要针对元素的内容还有表单的值操作

        // 普通元素内容
        // 获取：html()  相当于原生innerHTML
        console.log($("div").html()); // 获取过来的文本带标签 <span>123</span>
        // 设置：html("内容")
        $("div").html("123");

        // 获取元素的文本内容：text()  相当于原生innerText
        console.log($("div").text()); // 获取过来的不带标签 123
        // 设置元素的文本内容：text("文本内容")
        $("div").text("123");

        // 获取设置表单值 val()
        // 获取：val()
        console.log($("input").val());
        // 设置：val("内容")
        $("input").val("123");
    })
</script>

保留两位小数的方法

<div>123</div>
<script>
    $(function() {
        // toFixed() 主要用于显示价格上
        var num = 123;
        $("div").html('￥' + num.toFixed(2));
    })
</script>

元素操作

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

遍历元素

<div>1</div>
<div>2</div>
<div>3</div>
<script>
    $(function() {
        // jQuery隐式迭代是对同一类元素做了同样的操作，如果想要给同一类元素做不同操作，就需要用到遍历

        // 语法1 $("div").each(function(index,domEle){xxx;})
        // each()方法遍历匹配的每一个元素，主要用DOM处理
        // 里面的回调函数有2个参数: index是每个元素的索引号,demEle是每个DOM元素，不是jQuery对象
        // 所以想要使用jQuery方法，需要给这个dom元素转换为jquery对象 $(domEle)
        var sum = 0;
        var arr = ["red", "green", "blue"];
        $("div").each(function(i, domEle) {
            $(domEle).css("color", arr[i]); // 回调函数第一个参数是索引号  可以自己指定参数名称
            sum += parseInt($(domEle).text()); // 回调函数第二个参数是 dom元素对象 dom对象没有css方法 需要$转换
        })
        console.log(sum);


        // 语法2 $.each(Object,function(index,element){xxx;})
        // $.each() 方法可用于遍历任何对象，主要用于遍历数据，处理数据，比如数组、对象
        // 里面的函数有2个参数: index 是每个元素的索引号,element索引对应的内容
        $.each($("div"), function(index, element) {
            console.log(index);
            console.log(element);
        });

        $.each(arr, function(i, ele) {  // 主要用于遍历数组、对象等，形参名称可自定义
            console.log(i);
            console.log(ele);
        })

        $.each({
            name: "andy",
            age: 18
        }, function(i, ele) {
            console.log(i); // 输出的是 name age 属性名
            console.log(ele); // 输出的是 andy  18 属性值
        })
    })
</script>

创建与添加元素

<ul class="test"></ul>
<script>
    $(function() {
        // 创建元素
        $("<li></li>"); // 动态创建一个li标签
        var li = $("<li>prepend_li</li>");
        var div = $("<div>before_div</div>");

        // 添加元素
        // 1.内部添加  生成之后，它们是父子级关系
        // element.prepend("内容") 把内容放入匹配元素内部最前面
        $("ul").prepend(li);
        // element.append("内容") 把内容放入匹配元素内部最后面，类似原生appendChild
        $("ul").append("<li>append_li</li>");

        // 2.外部添加  生成之后，它们是兄弟级关系
        // element.before("内容"); 把内容放入目标元素前面
        $(".test").before(div);
        // element.after("内容"); 把内容放入目标元素后面
        $(".test").after($("<div>after_div</div>"));
    })
</script>

删除元素

<ul><li></li></ul>
<script>
    $(function() {
        // element.remove() //删除匹配的元素(本身)
        $("ul").remove();

        // element.empty() //删除匹配元素集合中所有的子节点
        $("ul").empty();

        // element.html("") //清空匹配的元素内容(子结点)
        $("ul").html("");

        // remove 删除元素本身
        // empt() 和 html("") 作用等价，都可以删除元素里面的内容，只不过 html 还可以设置内容
    })
</script>

元素尺寸、位置

尺寸
|语法 |用法 |
|---------------------------------------|:--------------------------------------------|
|width() / height() |取得匹配元素宽度和高度值，只算 width / height |
|innerWidth() / innerHeight() |取得匹配元素宽度和高度值，包含padding |
|outerWidth() / outerHeight() |取得匹配元素宽度和高度值，包含padding、border |
|outerWidth(true) / outerHeight(true) |取得匹配元素宽度和高度值，包含padding、border、margin|

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

<div></div>
<script>
    $(function() {
        // 1. width() / height() 获取设置元素 width和height大小 
        console.log($("div").width());
        $("div").width(300);

        // 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) 获取设置 width和height + padding + border + margin
        console.log($("div").outerWidth(true));
    })
</script>

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

<div class="father" style="width: 200px; height:200px; background-color: aqua;">
    <div class="son"></div>
</div>
<script>
    $(function() {
        // offset() 设置或获取元素偏移   设置或返回被选元素相对于文档的偏移坐标，跟父级没有关系
        // 获取
        console.log($(".son").offset()); // 方法返回的是一个对象
        console.log($(".son").offset().top);
        // 设置  以对象的方式传递参数
        $(".son").offset({
            top: 200,
            left: 200
        });
        // 该方法有两个属性 left、top
        // offset().top 用于获取距离文档顶部的距离
        // offset().left 用于获取距离文档左侧的距离


        // position()获取元素偏移 这个方法只能获取偏移，不能设置偏移
        // 返回被选元素相对于带有定位的父级偏移坐标，如果父级都没有定位，则以文档为准
        console.log($(".son").position());
        console.log($(".son").position().left);
        // 该方法同样有2个属性 left、top
        // position().top 用于获取距离定位父级顶部的距离
        // position().left 用于获取距离定位父级左侧的距离


        // scrollTop() / scrollLeft() 设置或获取元素被卷去的头部和左侧
        // 不跟参数是获取，参数为不带单位的数字则是设置被卷去的头部
        $(window).scroll(function() {
            console.log($(document).scrollTop()); // 监听页面滚动事件，返回头部滚动的位置(被卷去的头部)
        })

        // 页面刷新直接滚动到某个位置
        $(document).scrollTop(100);

        // 动画的返回顶部
        $('.father').click(function() {
            $('body, html').animate({ // 这里是html和body元素做动画，而不是document
                scrollTop: 0
            })
        })
    })
</script>

// demo
<style>
    body {
        height: 2000px;
    }
    
    .back {
        position: fixed;
        width: 50px;
        height: 50px;
        background-color: pink;
        right: 30px;
        bottom: 100px;
        display: none;
    }
    
    .container {
        width: 900px;
        height: 500px;
        background-color: skyblue;
        margin: 400px auto;
    }
</style>
<div class="back">返回顶部</div>
<div class="container">
</div>
<script>
    $(function() {
        $(document).scrollTop(100);
        // 页面滚动事件
        var boxTop = $(".container").offset().top;
        $(window).scroll(function() {
            if ($(document).scrollTop() >= boxTop) {
                $(".back").fadeIn();
            } else {
                $(".back").fadeOut();
            }
        });
        // 返回顶部
        $(".back").click(function() {
            $("body, html").stop().animate({
                scrollTop: 0
            });
            // $(document).stop().animate({
            //     scrollTop: 0
            // }); 不能是文档而是 html和body元素做动画
        })
    })
</script>

jQuery事件

事件注册、事件处理(on()绑定事件)

<div>123</div>
<ul>
    <li>@@@</li>
    <li>###</li>
</ul>
<script>
    $(function() {
        // 单个事件注册  element.事件(function(){})
        // 其他事件和原生基本一致 比如mouseover、mouseout、blur、focus、change、keydown、keyup、resize、scrull等
        $("div").click(function() {
            $(this).css('background', 'cyan');
        })

        // 事件处理  on() 绑定事件  在匹配元素上绑定一个或多个事件的事件处理函数
        // element.on(events, [selector], fn)
        // events：一个或多个空格分隔的事件类型，如“ click” 或“ keydown”
        // selector：元素的子元素选择器
        // fn：回调函数，即绑定在元素身上的侦听函数
        $("div").on({
            mouseenter: function() {
                $(this).css("background", "skyblue");
            },
            mouseleave: function() {
                $(this).css("background", "purple");
            }
        })

        // on() 方法优势1  绑定多个事件
        $("div").on({ // 可以绑定多个事件，多个处理事件处理程序
            mouseover: function() {},
            mouseout: function() {},
            click: function() {}
        })

        // 如果事件处理程序相同
        $("div").on("mouseover mouseout", function() {
            $(this.toggleClass("current"));
        });


        // on()方法优势2 事件委托/事件委派  
        // 事件委派的定义就是，把原来加给子元素身上的事件绑定在父元素身上，就是把事件委派给父元素
        // 事件是绑定在ul身上，只有一个ul 添加了点击事件，但是触发对象是li，会发生事件冒泡，冒泡到父亲身上，父亲就会执行这个函数
        $("ul").on("click", "li", function() {
            alert("hello world!");
        }); // 在此之前有bind(), live() delegate()等方法来处理事件绑定或者事件委派，最新版本的用on替代


        // on()方法优势3 给未来动态创建的元素绑定事件
        $("ul").on("click", "li", function() {
            alert(11);
        })
        var li = $("<li>我是后来创建的</li>")
        $("ul").append(li); // on()可以给未来动态创建的元素绑定事件

        // $("ul li").click(function() { // DOM的方法
        //     alert(11);
        // })
        // var li = $("<li>我是后来创建的</li>")
        // $("ul").append(li);// 没有触发事件，click()没有办法给动态创建的元素绑定事件
    })
</script>

事件处理(off()解绑事件)

// off() 方法可以移除 通过on()方法添加的事件处理程序
$("div").off(); // 这个是接除了div身上的所有事件
$("div").off("click"); //这个是解除了div身上的点击事件
$("ul").off("click", "li"); //这个是解绑事件委托

事件处理 one() 只执行一次的事件

// 如果有些事件只想执行一次就不再执行，可以使用one() 方法
$("p").one("click", function() {
    alert(11);
})

自动触发事件trigger()

<div>123</div>
<input type="text">
<script>
    $(function() {
        // 事件
        $("div").on("click", function() {
            alert(11);
        });

        // 有些事件希望自动触发, 比如轮播图自动播放功能跟点击右侧按钮一致。可以利用定时器自动触发右侧按钮点击事件，不必鼠标点击触发。
        // 1.元素.事件()  会触发元素的默认行为
        $("div").click();

        // 2.元素.trigger("事件")  会触发元素的默认行为
        $("div").trigger("click");
        $("input").trigger("focus");

        // 3.元素.triggerHandler("事件")  triggerHandler模式不会触发元素的默认行为，这是和前面两种的区别
        $("div").triggerHandler("click");
        $("input").on("focus", function() {
            $(this).val("你好吗");
        });
        $("input").triggerHandler("focus");
    })
</script>

事件对象

<style>
    div {
        width: 100px;
        height: 100px;
        background-color: pink;
    }
</style>
<div></div>
<script>
    $(function() {
        $(document).on("click", function() {
            console.log("点击了document");
        })

        // 事件被触发，就会有事件对象的产生  event
        // element.on(events,[selector],function(event){})
        $("div").on("click", function(event) {
            console.log("点击了div");
            event.stopPropagation(); // 事件不会冒泡到父级
        })

        // 阻止默认行为: event.preventDefault() 或者 return false
        // 阻止冒泡 : event.stopPropagation()
    })
</script>

jQuery的其他方法

拷贝对象

如果想要把某个对象拷贝(合并)给另外一个对象使用，此时可以使用$.extend()方法

<script>
    $(function() {
        // $.extend([deep],target,object1,[objectN])
        // 参数：
        // deep:如果设为true为深拷贝，默认为false 浅拷贝
        // target: 要拷贝的目标对象
        // object1:待拷贝到第一个对象的对象
        // objectN:待拷贝的第N个对象的对象
        var targetObj = {};
        var obj = {
            id: 1,
            name: "andy"
        };
        $.extend(targetObj, obj); // 把 obj 拷贝给 targetObj，会覆盖targetObj里面原来的数据

        // 浅拷贝是把被拷贝的对象复杂数据类型中的地址拷贝给目标对象，修改目标对象会影响被拷贝对象
        // 深拷贝，前面加true，完全克隆(拷贝的对象，而不是地址),修改目标对象不会影响被拷贝对象
        // 深拷贝把里面的数据完全复制一份给目标对象，如果里面有不冲突的属性，会合并到一起


        var targetObj = {
            id: 0,
            msg: {
                sex: '男'
            }
        };
        var obj = {
            id: 1,
            name: "andy",
            msg: {
                age: 18
            }
        };
        // 1. 浅拷贝把原来对象里面的复杂数据类型地址拷贝给目标对象
        targetObj.msg.age = 20;
        console.log(targetObj);
        console.log(obj);
        // 2. 深拷贝把里面的数据完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起 
        $.extend(true, targetObj, obj);
        // console.log(targetObj); // 会覆盖targetObj 里面原来的数据
        targetObj.msg.age = 20;
        console.log(targetObj); // msg :{sex: "男", age: 20}
        console.log(obj);
    })
</script>

多库共存

解决多个js库之间使用$符号冲突，让jQuery 和其他的js库可以同时存在

<div></div>
<span></span>
<script>
    $(function() {
        function $(ele) { // 使用了$符号的函数名
            return document.querySelector(ele);
        }
        console.log($("div")); // 与jQuery符号冲突

        // 1. 如果$符号冲突，就把里面的$符号统一改为jQuery，比如 jQuery('div')
        jQuery.each();
        // 2. 或者让jquery释放对$控制权，让使用者自己决定  $.noConflict()
        // jQuery变量规定新的名称： var xx = $.noConflict();
        var suibian = jQuery.noConflict();
        console.log(suibian("span"));
        suibian.each();
    })
</script>

jQuery插件

jQuery 功能比较有限，想要更复杂的特效效果，可以借助于 jQuery 插件完成

注意: 这些插件也是依赖于jQuery来完成的，所以必须要先引入jQuery文件，因此也称为 jQuery 插件

jQuery 插件常用的网站:
jQuery插件库 http://www.jq22.com/ (需要登录)
jQuery之家 http://www.htmleaf.com/ (不需登录)
插件使用
打开jQuery之家(例)，选择我们需要的插件，下载完是一个压缩包，直接解压
打开index.html，右击检查网页源代码
将解压好的文件夹中的html中使用到的css、js文件拷贝到自己所需的文件夹中
引入相关文件，将引入css、js部分代码复制粘贴进自己的html中(先引入jQuery文件)
复制相关 html，css，js(调用插件)
在插件下载页面下滑，可以看到我们的配置参数，在引入的js代码中修改相关参数
几种插件
瀑布流插件

图片懒加载EasyLazyload(图片使用延迟加载在可提高网页下载速度。它也能帮助减轻服务器负载)
当页面滑动到可视区域，再显示图片
注意，此时的js引入文件和js调用必须写到 DOM元素（图片）最后面

全屏滚动插件fullpage.js
GitHub地址：https://github.com/alvarotrigo/fullPage.js
中文翻译网站：https://www.dowebok.com/demo/2014/77/

bootstrap.js

todolist Demo

index.html

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

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="css/index.css">
    <script src="js/jQuery.min.js"></script>
    <script src="js/ToDoList.js"></script>
</head>

<body>
    <header>
        <section>
            <label for="title">ToDoList</label>
            <input type="text" id="title" name="title" placeholder="添加ToDo">
        </section>
    </header>
    <section>
        <h2>正在进行 <span id="todocount"></span></h2>
        <ol id="todulist" class="demo-box">

        </ol>
        <h2>已经完成 <span id="donecount"></span></h2>
        <ul id="donelist">

        </ul>
    </section>
    <footer>
        备案信息
    </footer>

</body>

</html>

ToDoList.js

$(function() {
    // 打开或刷新页面时加载并渲染一次
    loadData();
    $('#title').on('keydown', function(event) {
        // 键盘事件检测是否输入回车 以及输入不能为空
        if (event.keyCode === 13 && $(this).val() != '') {
            var local = getData();
            local.push({ title: $(this).val(), done: false }); // 将输入框的内容添加进数组
            saveData(local);
            $(this).val(''); // 保存完成后，清空输入框
            loadData();
        }
    })

    // 删除
    $('ol, ul').on('click', 'a', function() { // 事件委托
        var data = getData();
        var index = $(this).attr('id'); // 获取a的id属性作为索引
        data.splice(index, 1); // 移除索引对应的数据
        saveData(data);
        loadData();
    })

    // todolist 正在进行和已完成之间的选项操作
    $('ol, ul').on('click', 'input', function() { // 事件委托
        var data = getData();
        var index = $(this).siblings('a').attr('id');
        data[index].done = $(this).prop('checked');
        saveData(data);
        loadData();
    })

    // 读取本地存储数据
    function getData() {
        var data = localStorage.getItem('CPTodolist');
        if (data) {
            return JSON.parse(data); // 将本地字符串数据解析成原数据类型
        } else {
            return [];
        }
    }

    // 数据保存到本地
    function saveData(data) {
        localStorage.setItem('CPTodolist', JSON.stringify(data)); // 将数组转换成字符串保存，本地数据只能保存字符串形式
    }

    // 刷新加载数据
    function loadData() {
        // 获取本地数据
        var data = getData();
        // 遍历之前清空列表里的内容
        $('ol, ul').empty();
        var todocount = 0; // 正在进行的清单个数
        var donecount = 0;
        // 遍历数组
        $.each(data, function(i, n) {
            if (n.done) {
                $('ul').prepend('<li><input type="checkbox" checked="true"><p>' + n.title + '</p><a href="javascript:;" id=' + i + '></a></li>');
                donecount++;
            } else {
                $('ol').prepend('<li><input type="checkbox"><p>' + n.title + '</p><a href="javascript:;" id=' + i + '></a></li>');
                todocount++
            }
        })
        $('#todocount').text(todocount);
        $('#donecount').text(donecount);
    }
})

index.css

body {
    margin: 0;
    padding: 0;
    font-size: 16px;
    background-color: #cdcdcd;
}

header {
    height: 50px;
    background: #333;
    background: rgba(47, 47, 47, .98);
}

section {
    margin: 0 auto;
}

label {
    float: left;
    width: 100px;
    line-height: 50px;
    color: #ddd;
    font-size: 24px;
    cursor: pointer;
    font-family: "Helvetica Neue", "Helvetica", Arial, sans-serif;
}

header input {
    float: right;
    width: 60%;
    height: 24px;
    margin-top: 12px;
    text-indent: 10px;
    border-radius: 5px;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .24), 0 1px 6px rgba(0, 0, 0, .45);
    border: none;
}

input:focus {
    outline-width: 0;
}

h2 {
    position: relative;
}

span {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    padding: 0 5px;
    height: 20px;
    border-radius: 20px;
    background: #e6e6fa;
    line-height: 22px;
    text-align: center;
    color: #666;
    font-size: 14px;
}

ol,
ul {
    padding: 0;
    list-style: none;
}

li input {
    position: absolute;
    top: 2px;
    left: 10px;
    width: 22px;
    height: 22px;
    cursor: pointer;
}

p {
    margin: 0;
}

li p input {
    top: 3px;
    left: 40px;
    width: 70%;
    height: 20px;
    text-indent: 5px;
    font-size: 14px;
}

li {
    height: 32px;
    line-height: 32px;
    background: #fff;
    position: relative;
    margin-bottom: 10px;
    padding: 0 45px;
    border-radius: 3px;
    border-left: 5px solid #629a9c;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .07);
}

ol li {
    cursor: pointer;
}

ul li {
    border-left: 5px solid #999;
    opacity: .5;
}

li a {
    position: absolute;
    top: 2px;
    right: 5px;
    display: inline-block;
    width: 14px;
    height: 12px;
    border-radius: 14px;
    border: 6px double #fff;
    background: #ccc;
    line-height: 14px;
    text-align: center;
    color: #fff;
    font-weight: bold;
    font-size: 14px;
    cursor: pointer;
}

footer {
    color: #666;
    font-size: 14px;
    text-align: center;
}

@media screen and (max-device-width: 620px) {
    section {
        width: 96%;
        padding: 0 2%;
    }
}

@media screen and (min-width: 620px) {
    section {
        width: 600px;
        padding: 0 10px;
    }
}

posted @ 2022-03-20 16:23 ChiseledPumpkin 阅读(104) 评论(0) 编辑收藏举报

刷新页面返回顶部

登录后才能查看或发表评论，立即登录或者逛逛博客园首页

相关博文：

· JavaScript基础--ECMAScript

· Ajax使用

· jQuery

· jQuery基础，选择器

· javascript-jQuery(选择器、排他思想、样式操作、动画效果)

阅读排行：
· 无需6万激活码！GitHub神秘组织3小时极速复刻Manus，手把手教你使用OpenManus搭建本
· Manus爆火，是硬核还是营销？
· 终于写完轮子一部分：tcp代理了，记录一下
· 别再用vector＜bool＞了！Google高级工程师：这可能是STL最大的设计失误
· 单元测试从入门到精通

公告

昵称： ChiseledPumpkin
园龄： 3年
粉丝： 0
关注： 1

+加关注

2025年3月

日

一

二

三

四

五

六

ChiseledPumpkin

JavaScript库-jQuery

jQuery的入口函数与顶级对象$

jQuery对象和 DOM对象

jQuery隐式迭代

jQuery常用API

选择器

CSS样式

动画效果

属性操作

元素操作

元素尺寸、位置

jQuery事件

jQuery的其他方法

拷贝对象

多库共存

jQuery插件

todolist Demo

公告

搜索

常用链接

我的标签

随笔档案

阅读排行榜

ChiseledPumpkin

JavaScript库-jQuery

jQuery的入口函数 与 顶级对象$

jQuery对象 和 DOM对象

jQuery隐式迭代

jQuery常用API

选择器

CSS样式

动画效果

属性操作

元素操作

元素尺寸、位置

jQuery事件

jQuery的其他方法

拷贝对象

多库共存

jQuery插件

todolist Demo

公告

搜索

常用链接

我的标签

随笔档案

阅读排行榜

jQuery的入口函数与顶级对象$

jQuery对象和 DOM对象