引用

引用地址

BootCDN 提供加速

https://www.bootcdn.cn/jquery/

<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

版本对比

1.x：兼容 IE6、7、8，停止更新
2.x：不兼容老浏览器，停止更新
3.x：不兼容老浏览器，持续更新中

压缩min版本

未压缩的版本适合调试开发使用；
min压缩版本适合上线使用；

入口函数

当页面的DOM元素加载完毕后运行

两种写法

    <script>
        $(document).ready(function() {
            alert("jQuery入口函数已运行");
        })

        $(function() {
            alert("jQuery入口函数已运行");
        })
    </script>

与 window.onload 区别

window.onload 只能写一个，而 jQuery 入口函数可以写多个
window.onload 需要整个页面加载完毕才会执行，如 css/js 等，而 jQuery 只需要 DOM 元素加载完毕即可运行，快于 window.onload

DOM对象与jQuery对象转换

    <script>
        //DOM对象转jQuery对象
        var div1 = document.getElementById("test");
        console.log($(div1));

        //jQuery对象转DOM对象
        var $div2 = $("#test");
        var div3 = $div2[0];
        console.log(div3);
    </script>

获取 / 设置文本

对象.text("文本参数");
不加文本参数是获取，加文本参数是设置

    <input type="button" value="点我更改文本" id="set">
    <div>这是原本的文本</div>

    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script>
        console.log($("div").text());

        $("#set").click(function() {
            $("div").text("啦啦啦");
        });
    </script>

它会获取当前DOM下全部的文本，修改同理
不能渲染html标签

获取 / 设置 CSS

对象.css("样式名", "样式值")
不加样式值是获取，加样式值是设置

获取CSS

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            border: 10px solid blue;
        }
    </style>
</head>
<body>
    <input type="button" value="获取" id="get">
    <div></div>
    <script>
        $("#get").click(function() {
            console.log($("div").css("width"));
            console.log($("div").css("height"));
            console.log($("div").css("background-color"));
            console.log($("div").css("border"));
        })
    </script>
</body>

结果：
200px
200px
rgb(255, 0, 0)
10px solid rgb(0, 0, 255)

IE浏览器获取border这种含有四个属性的时候，需要给准确的值

比如：border-top-width

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            border: 10px solid blue;
        }
    </style>

</head>

<body>
    <input type="button" value="获取" id="get">
    <div></div>

    <script>
        $("#get").click(function () {
            console.log($("div").css("border-top-width"));
        })
    </script>
</body>

结果：
10px

如果获取了多个DOM元素的样式，那么只能得到第一个DOM的样式

设置CSS

单样式设置

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            border: 10px solid blue;
        }
    </style>

</head>
<body>
    <input type="button" value="设置" id="set">
    <div></div>

    <script>
        $("#set").click(function() {
            $("div").css("width", "300px");
            $("div").css("height", "300px");
            $("div").css("background-color", "green");
            $("div").css("border", "10px solid red");
        })
    </script>
</body>

设置的样式默认是行内样式

多样式设置

<head>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: red;
            border: 10px solid blue;
        }
    </style>

</head>
<body>
    <input type="button" value="设置" id="set">
    <div></div>

    <script>
        $("#set").click(function() {
            $("div").css({
                width: '300px',
                height: '300px',
                'background-color': 'green',
                border: '10px solid blue'
            });
        })
    </script>
</body>

在 css 的括号内用 {} 来设置多个样式

过滤选择器

名称	用法	描述
:eq(index)	$('li:eq(2)').css('color', 'red');	获取到li的元素中，索引为2的元素，从0开始
:odd	$('li:odd').css('color', 'red');	获取到li的元素中，索引为奇数的元素
:even	$('li:even').css('color', 'red');	获取到li的元素中，索引为偶数的元素

筛选选择器

名称	用法	描述
children(selector)	$('ul').children('li');	相当于 $('ul-li');，子类选择器
find(selector)	$('ul').find('li');	相当于 $('ul i');，后代选择器
siblings(selector)	$('ul').siblings('li');	查找兄弟节点，不包括本身
parent()	$('ul').parent();	查找父节点
next()	$('li').next();	查找下一个兄弟节点
prev()	$('li').prev();	查找上一个兄弟节点

鼠标移动事件

名称	用法	描述
mouseenter	$('ul').mouseenter(...)	鼠标移入事件
mouseleave	$('ul').mouseleave(...)	鼠标移出事件

类的操作

添加类 addClass

$('div').addClass('样式1 样式2 ...');

删除类 removeClass

$('div').removeClass('样式1 样式2 ...');

删除全部类 removeClass

$('div').removeClass();

判断类

会返回bool类型，存在true，不存在false
console.log($('div').hasClass('样式'));

切换类

如果存在则移除，不存在则添加
$('div').toggleClass('样式');

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        .class {
            width: 100px;
            height: 100px;
            background-color: red;
        }

        .class2 {
            border: 10px solid green;
        }
    </style>
</head>

<body>
    <input type="button" value="添加Class" id="addClass">
    <input type="button" value="移除边框" id="removeBorder">
    <input type="button" value="移除全部" id="removeClass">
    <input type="button" value="判断类" id="hasClass">
    <input type="button" value="切换类" id="toggleClass">
    <div></div>

    <script>
        $(function () {
            $("#addClass").click(function () {
                $("div").addClass("class class2");
            });

            $("#removeBorder").click(function () {
                $("div").removeClass("class2");
            });

            $("#removeClass").click(function () {
                $("div").removeClass();
            });

            $("#hasClass").click(function () {
                console.log($("div").hasClass("class"));
            });

            $("#toggleClass").click(function () {
                $("div").toggleClass("class2");
            });
        });
    </script>
</body>

动画

三组预设动画

显示 / 隐藏
show(时长, 回调函数) / hide(时长, 回调函数)

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        div {
            width: 300px;
            height: 300px;
            background-color: red;
            display: none;
        }
    </style>
</head>

<body>
    <input type="button" value="显示" id="show">
    <input type="button" value="隐藏" id="hide">
    <div></div>

    <script>
        $(function () {
            $('#show').click(function() {
                $('div').show(1000, function() {
                    alert("显示啦");
                });
            });

            $('#hide').click(function() {
                $('div').hide(1000, function() {
                    alert("隐藏啦");
                });
            });
        });
    </script>
</body>

滑入 / 滑出 / 切换
slideDown(时长, 回调函数) / slideUp(时长, 回调函数) / slideToggle(时长, 回调函数)
滑入滑出同理显示与隐藏；
切换则是如果已经滑出则滑入，否则就滑出
淡入 / 淡出 / 切换
fadeIn(时长, 回调函数) / fadeOut(时长, 回调函数) / fadeToggle(时长, 回调函数)
与滑入同理

自定义动画

animate(变化对象, 时间, 过渡, 回调函数);

过渡为linear（匀速）与swing（缓动），默认不写为缓动

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            position: absolute;
        }
    </style>
</head>

<body>
    <input type="button" value="Go" id="left">
    <div></div>

    <script>
        $(function () {
            $('#left').click(function() {
                $('div').animate({
                    left: '500px'
                }, 2000, 'linear', function() {
                    alert("动画执行完毕");
                });
            });
        });
    </script>
</body>

停止动画

stop(是否清除队列, 是否跳转到最终效果);

动态创建元素

html(参数);

不给参数是获取DOM元素的内容，给参数则是设置
设置内容可渲染html标签

<body>
    <input type="button" value="Go" id="set">
    <div>
        <p>啦啦啦</p>
    </div>

    <script>
        $(function () {
            $('#set').click(function() {
                console.log($('div').html());
                $('div').html("<a href=\"https://baidu.com\">嘻嘻嘻</a>");
            });
        });
    </script>
</body>

$();

创建元素，但是需要append追加

<body>
    <input type="button" value="Go" id="set">
    <div>
        <p>啦啦啦</p>
    </div>

    <script>
        $(function () {
            $('#set').click(function() {
                var $link = $("<a href=\"https://baidu.com\">嘻嘻嘻</a>");
                $('div').append($link);
            });
        });
    </script>
</body>

父元素.append(子元素);

作为父元素的最后一个子元素添加
如果取页面的元素添加到父元素，则会剪切元素并添加

<body>
    <input type="button" value="Go" id="set">
    <div>
        <ul>
            <li>这里是li1</li>
            <li id="li2">这里是li2</li>
            <li>这里是li3</li>
            <li>这里是li4</li>
        </ul>
    </div>

    <script>
        $(function () {
            $('#set').click(function() {
                $('ul').append('<li>这是添加到li</li>');
                var $li2 = $('#li2');
                $('ul').append($li2);
            });
        });
    </script>
</body>

父元素.prepend(子元素);

作为父元素的第一个子元素添加
如果取页面的元素添加到父元素，则会剪切元素并添加

<body>
    <input type="button" value="Go" id="set">
    <div>
        <ul>
            <li>这里是li1</li>
            <li id="li2">这里是li2</li>
            <li>这里是li3</li>
            <li>这里是li4</li>
        </ul>
    </div>

    <script>
        $(function () {
            $('#set').click(function() {
                $('ul').prepend('<li>这是添加到li</li>');
                var $li2 = $('#li2');
                $('ul').prepend($li2);
            });
        });
    </script>
</body>

元素A.after / before(元素b);

作为元素的兄弟元素添加
before在前，after在后
如果取页面的元素添加，则会剪切元素并添加

<body>
    <input type="button" value="Go" id="set">
    <div>
        <ul>
            <li>这里是li1</li>
            <li id="li2">这里是li2</li>
            <li>这里是li3</li>
            <li>这里是li4</li>
        </ul>
    </div>

    <script>
        $(function () {
            $('#set').click(function() {
                $('ul').after('<li>这是添加到li</li>');
                var $li2 = $('#li2');
                $('ul').after($li2);
            });
        });
    </script>
</body>

appendTo(子元素);

子元素添加到父元素的最后

<body>
    <input type="button" value="Go" id="set">
    <div>
        <ul>
            <li>这里是li1</li>
            <li id="li2">这里是li2</li>
            <li>这里是li3</li>
            <li>这里是li4</li>
        </ul>
    </div>

    <script>
        $(function () {
            $('#set').click(function() {
                var $li = $('<li>这是添加到li</li>');
                $li.appendTo('ul');
            });
        });
    </script>
</body>

清空 / 移除节点

empty();

清空元素内容，并删除有关事件，不会造成内存泄露

<body>
    <input type="button" value="Go" id="set">
    <ul>
        <li>这里是li1</li>
        <li id="li2">这里是li2</li>
        <li>这里是li3</li>
        <li>这里是li4</li>
    </ul>

    <script>
        $(function () {
            $('#set').click(function() {
                $('ul').empty();
            });
        });
    </script>
</body>

remove();

移除元素

<body>
    <input type="button" value="Go" id="set">
    <ul>
        <li>这里是li1</li>
        <li id="li2">这里是li2</li>
        <li>这里是li3</li>
        <li>这里是li4</li>
    </ul>

    <script>
        $(function () {
            $('#set').click(function() {
                $('ul').remove();
            });
        });
    </script>
</body>

克隆节点

clone(bool参数);

参数为 true ，则连通事件一起克隆， false 则不克隆事件；留空默认不克隆
如果克隆的元素出现 id 重复可使用 attr 来修改克隆后的 id
attr('id', '修改后id');

<body>
    <input type="button" value="Go" id="set">
    <ul id="ul1">
        <li>这里是li1</li>
        <li id="li2">这里是li2</li>
        <li>这里是li3</li>
        <li>这里是li4</li>
    </ul>

    <script>
        $(function () {
            $('#set').click(function() {
                var $clone = $('#ul1').clone();
                $clone.attr('id', 'ul2');
                $('body').append($clone);
            });
        });
    </script>
</body>

获取表单内容

val(文本参数);
给参数就是设置，不给参数就是获取

<body>
    <input type="button" value="Go" id="set">
    <input type="text" value="test" id="text">

    <script>
        $(function () {
            $('#set').click(function() {
                console.log($('#text').val());
                $('#text').val('设置后的文本');
            });
        });
    </script>
</body>

操作属性Attr

attr(属性名, 属性值);

添加

当存在此属性则是修改，不存在则是添加

获取

不填入属性值则返回当前属性名的值

删除

removeAttr(属性名);
删除指定属性

<body>
    <input type="button" value="添加属性" id="add">
    <input type="button" value="设置属性" id="set">
    <input type="button" value="移除属性" id="remove">
    <div class="div"></div>

    <script>
        $(function () {
            $('#add').click(function() {
                $('.div').attr('id', 'id1');

                $('.div').attr({
                    name: 'wdnmd',
                    aaa: 'aaa'
                });
            });

            $('#set').click(function() {
                $('.div').attr('id', 'id2');

                $('.div').attr({
                    name: 'wdnmd2',
                    aaa: 'aaa2'
                });
            });

            $('#remove').click(function() {
                $('.div').removeAttr('id');

                $('.div').removeAttr('name aaa class');
            });
        });
    </script>
</body>

prop操作布尔类型

在 jQuery1.6 之后，对于checked、selected、disabled这类boolean属性来说，不能使用 attr 来获取，只能通过 prop 来获取

prop(属性名, 属性值);
给了属性值是设置，不给则是获取

<body>
    <input type="button" value="Go" id="go">
    <input type="checkbox" id="checkbox">

    <script>
        $(function () {
            $('#go').click(function() {
                console.log($('#checkbox').prop('checked'));
                $('#checkbox').prop('checked', true)
            });
        });
    </script>
</body>

宽高

获取元素宽高

width(数值); / height(数值);
不给数值则是获取，给数值就是设置
包括内边距
获取或设置并不受padding、border、margin的影响

innerWidth(数值); / innerHeight(数值);
包括内边距、边框
设置同理

outerWidth(数值); / outerHeight(数值);
包括内边距、边框、外边距
设置同理

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <style>
        div {
            width: 100px;
            height: 100px;
            background-color: red;
            border: 10px solid green;
            margin: 20px;
            padding: 20px;
        }
    </style>
</head>

<body>
    <input type="button" value="Go" id="go">
    <div></div>

    <script>
        $(function () {
            $('#go').click(function() {
                console.log($('div').width());
                console.log($('div').height());
                console.log($('div').innerWidth());
                console.log($('div').innerHeight());
                console.log($('div').outerWidth());
                console.log($('div').outerHeight());

                $('div').width(300);
                $('div').height(300);
            });
        });
    </script>
</body>

获取网页可视化宽高

    <script>
        $(function () {
            $('#go').click(function() {
                console.log($(window).width());
                console.log($(window).height());
            });
        });
    </script>

offset方法与position方法

offset方法获取元素距离document的位置，position方法获取的是元素距离有定位的父元素的位置。

//获取元素距离document的位置,返回值为对象：{left:100, top:100}
$(selector).offset();
//获取相对于其最近的有定位的父元素的位置。
$(selector).position();

scrollTop与scrollLeft

设置或者获取垂直滚动条的位置
设置则是在括号内给出数值参数即可

//获取页面被卷曲的高度
$(window).scrollTop();
//获取页面被卷曲的宽度
$(window).scrollLeft();
//设置页面被卷曲的高度
$(window).scrollTop(100);
//设置页面被卷曲的宽度
$(window).scrollLeft(100);

on注册事件

jQuery1.7之后，jQuery用on统一了所有事件的处理方法。
最现代的方式，兼容zepto(移动端类似jQuery的一个库)，强烈建议使用。

on注册简单事件

// 表示给$(selector)绑定事件，并且由自己触发，不支持动态绑定。
$(selector).on( "click", function() {});

on注册委托事件

// 表示给$(selector)绑定代理事件，当必须是它的内部元素span才能触发这个事件，支持动态绑定
$(selector).on( "click",“span”, function() {});

on注册多个委托事件

$('div').on({
    click: function() {
        console.log("这是点击事件");
    },

    mouseenter: function() {
        console.log("这是鼠标移入事件");
    }
});

on注册事件的语法：

// 第一个参数：events，绑定事件的名称可以是由空格分隔的多个事件（标准事件或者自定义事件）
// 第二个参数：selector, 执行事件的后代元素（可选），如果没有后代元素，那么事件将有自己执行。
// 第三个参数：data，传递给处理函数的数据，事件触发的时候通过event.data来使用（不常使用）
// 第四个参数：handler，事件处理函数
$(selector).on(events[,selector][,data],handler);

事件解绑

off方式

// 解绑匹配元素的所有事件
$(selector).off();
// 解绑匹配元素的所有click事件
$(selector).off("click");

触发事件

$(selector).click(); //触发 click事件
$(selector).trigger("click");

jQuery事件对象

jQuery事件对象其实就是js事件对象的一个封装，处理了兼容性。

//screenX和screenY   对应屏幕最左上角的值
//clientX和clientY   距离页面左上角的位置（忽视滚动条）
//pageX和pageY   距离页面最顶部的左上角的位置（会计算滚动条的距离）

//event.keyCode 按下的键盘代码
//event.data    存储绑定事件时传递的附加数据

//event.stopPropagation()   阻止事件冒泡行为
//event.preventDefault()    阻止浏览器默认行为
//return false:既能阻止事件冒泡，又能阻止浏览器默认行为。

链式编程

通常情况下，只有设置操作才能把链式编程延续下去。因为获取操作的时候，会返回获取到的相应的值，无法返回 jQuery对象。

end(); // 筛选选择器会改变jQuery对象的DOM对象，想要回复到上一次的状态，并且返回匹配元素之前的状态。

评分案例

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

<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
</head>

<style>
    ul li {
        float: left;
        list-style: none;
        font-size: 3rem;
        cursor: default;
    }
</style>

<body>
    <ul>
        <li>♡</li>
        <li>♡</li>
        <li>♡</li>
        <li>♡</li>
        <li>♡</li>
    </ul>

    <script>
        $(function() {
            //心
            var $stx = "♥";
            var $kx = "♡";

            $('ul>li').on('mouseenter', function() {
                //鼠标移入
                $(this).text($stx).prevAll().text($stx).end().nextAll($kx);
            }).on('mouseleave', function() {
                //鼠标移出
                $(this).text($kx).siblings().text($kx);
                //获取单击位置
                $('ul > li[click]').text($stx).prevAll().text($stx);
            }).on('click', function() {
                //鼠标单击添加属性
                $(this).attr('click', 'click').siblings().removeAttr('click');
                //提示
                alert("你点击了第" + ($('ul>li').index(this) + 1) + "个心");
            });
        });
    </script>
</body>

</html>

each方法

jQuery的隐式迭代会对所有的DOM对象设置相同的值，但是如果我们需要给每一个对象设置不同的值的时候，就需要自己进行迭代了。

作用：遍历jQuery对象集合，为每个匹配的元素执行一个函数

// 参数一表示当前元素在所有匹配元素中的索引号
// 参数二表示当前元素（DOM对象）
$(selector).each(function(index,element){});

多库共存

jQuery使用$作为标示符，但是如果与其他框架中的$冲突时，jQuery可以释放$符的控制权.

var c = $.noConflict();//释放$的控制权,并且把$的能力给了c

声明: 本文采用 BY-NC-SA 协议进行授权，如无注明均为原创，转载请注明转自 N0tssss' Note
本文地址: jQuery笔记

jQuery笔记

引用