jQuery开发教程学习笔记

链接:
jQuery开发教程_学习资源库_阿里云培训中心-阿里云 (aliyun.com)

文章目录

- 介绍
- 基础选择器
- 属性选择器
- 基础过滤
- 子元素过滤
- 内容过滤
- 表单
- 层级
- 可见性过滤
- jQuery 扩展
- 鼠标事件
- 键盘事件
- 浏览器事件
- 文档加载过程
- 绑定事件处理器
- 事件对象
- 表单事件
- jQuery的DOM属性
- CDN
- CSS属性
- jQuery 过滤
- 遍历
- 特效
- - - - 隐藏与显示
    - - 淡入淡出
    - -- 滑动、回调
    - -- 自定义
- 幽灵按钮
- 瀑布流

- 介绍

是js库
下载网址：jQuery
必须在script之前进行引入

- 基础选择器

w3v4ompr.dgt.png

wft13lj4.amg.png

<!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.js"></script>

    <script>

        $(function(){

            $("div").css("color", "red");

        })

    </script>

</head>

<body>

    <div>学习</div>

    <p>学习</p>

    <div>学习</div>

    <p>学习</p>

    <div>学习</div>

</body>

</html>

- 属性选择器

deoctitj.zdc.png

ossxbe45.dvg.png

- 基础过滤

vu4typ2u.ipi.png

zuylbwjo.wpu.png

utow304o.gj0.png

- 子元素过滤

xxtkh3qk.ssw.png

hunhzmkh.huz.png

- 内容过滤

5apkhx3p.2o1.png

- 表单

rf2ytqmo.e4v.png

ugodjtox.4wn.png

myix2uvm.z51.png

参考代码：

<!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.js"></script>

    <style>

        textarea{

            height: 35px;

        }

        div{

            color: red;

        }

        fieldset{

            margin: 0;

            padding: 0;

            border-width: 0;

        }

        .marked{

            background-color: yellow;

            border: 3px solid  red;

        }

    </style>

</head>

<body>

    <form >

        <fieldset>

            <input type="button" value="Input-button"/>

            <input type="checkbox">

            <input type="file">

            <input type="hidden">

            <input type="image">

            <input type="password">

            <input type="radio">

            <input type="reset">

            <input type="submit">

            <input type="text">

            <select><option>option</option></select>

            <textarea></textarea>

        </fieldset>

    </form>

<div></div>

<script>

    $(function(){

            var input=$(":button").addClass("marked");

    })

</script>

</body>

</html>

- 层级

kpyb3lcc.eeg.png

5n3iemdh.jmp.png

- 可见性过滤

e4zzlzvm.eb3.png

mm2k1mip.2bg.png

- jQuery 扩展

s1xbkeqq.vgz.png

f2ky1fqo.5m2.png

- 鼠标事件

2ebwalga.4at.png

利用JS的原有功能制作点击事件:

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

</head>

<body>

    <p>hhhh1</p>

    <p>hhhh2</p>

    <p>hhhh3</p>

    <p>hhhh4</p>

    <p>hhhh5</p>

  

<script>

    var p=document.getElementsByTagName("p");

    for(var i=0; i<p.length; i++){

        p[i].onclick=function(){

            alert(this.innerHTML);

        }

    }

</script>

</body>

</html>

使用jQuery实现相同功能：

<!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.js"></script>

</head>

<body>

    <p>hhhh1</p>

    <p>hhhh2</p>

    <p>hhhh3</p>

    <p>hhhh4</p>

    <p>hhhh5</p>

  

<script>

    $(function(){

        $("p").click(function(){

            alert($(this).html());

        })

    })

</script>

</body>

</html>

- 键盘事件

adudf0oh.iak.png

glfygqw5.brf.png

- 浏览器事件

zsuzkcwn.oqz.png

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

- 文档加载过程

kxttd1yh.51b.png

- 绑定事件处理器

ibb3ocsr.cfv.png

测试代码：

ngf2oa1c.auc.png

鼠标点亮标签：

2zfiwhin.mac.png

csumxz4n.ym4.png

参考代码：

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Document</title>

    <style>

        p{

            width: 100px;

            height: 50px;

            background-color: darkgreen;

            border-radius: 5px;

            text-align: center;

            line-height: 50px;

            margin: 0 auto;

            color: #ffffff;

            font-size: 20px;

        }

        .pbtn{

            background-color: green;

        }

    </style>

    <script src="./jquery.js"></script>

</head>

<body>

    <p>按钮</p>

<script>

    $("p").bind("mouseover mouseout", function(){

        $(this).toggleClass("pbtn");

    })

</script>

</body>

</html>

vkcp5mdw.erv.png

- 事件对象

s4kapwea.zca.png

e.currentTarget //事件的监听者
e.target //事件的目标
e.delegateTarget //事件的委托目标
e.preventDefault //阻止默认事件

- 表单事件

wmcjvjvr.3ng.png

- jQuery的DOM属性

1vu1i51v.bjj.png

k5pzh1h1.msn.png

DOM插入包裹现有内容

v4fotdk0.xyt.png

DOM插入现有元素内
复制元素深拷贝
DOM插入到现有元素外
DOM移除，替换

- CDN

无需将文件导入项目

- CSS属性

xkvqdsnr.ioo.png

r1ubi5hp.fvd.png

- jQuery 过滤

zbes1m2n.f10.png

pjurniu3.pf0.png

- 遍历

vdjosrty.pm2.png

q3bvvqrn.sh2.png

- 特效

- 隐藏与显示

<!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.js"></script>

</head>

<body>

    <p>hello</p>

    <button id="hide">隐藏</button>

    <button id="show">显示</button>

  

    <script>

        $(function(){

            $("#hide").click(function(){

                $("p").hide(1000);

            })

  

            $("#show").click(function(){

                $("p").show(1000);

            })

        })

    </script>

</body>

</html>

- 淡入淡出

<!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.js"></script>

</head>

<body>

    <div id="div1" style="width: 80px;height: 80px;background-color: aquamarine;"></div>

    <div id="div2" style="width: 80px;height: 80px;background-color: palegreen;"></div>

    <div id="div3" style="width: 80px;height: 80px;background-color: palevioletred;"></div>

  

    <button id="in">fade in</button>

    <button id="out">fade out</button>

    <button id="toggle">toggle</button>

    <script>

        $(function(){

            $("#in").on("click", function(){

                $("#div1").fadeIn(1000);

                $("#div2").fadeIn(1000);

                $("#div3").fadeIn(1000);        

            });

  

            $("#out").on("click", function(){

                $("#div1").fadeOut(1000);

                $("#div2").fadeOut(1000);

                $("#div3").fadeOut(1000);

            });

  

            $("#toggle").on("click", function(){

                $("#div1").fadeToggle(1000);

                $("#div2").fadeToggle(1000);

                $("#div3").fadeToggle(1000);

            })

  

        })

    </script>

</body>

</html>

5ddlos00.pt1.png

– 滑动、回调

滑动参考代码：

<!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.js"></script>

    <style>

        #content{

            padding: 50px;

            display: none;

        }

        #flipshow, #content, #fliphide{

            padding: 5px;

            text-align: center;

            background-color: aquamarine;

            border: 1px solid green;

        }

    </style>

</head>

<body>

    <div id="flipshow">点击显示</div>

    <div id="fliphide">点击隐藏</div>

    <div id="content">hello world</div>

  

    <script>

        $(function(){

            $("#flipshow").click(function(){

                $("#content").slideDown(1000);

            })

  

            $("#fliphide").click(function(){

                $("#content").slideUp(1000);

            })

        })

    </script>

</body>

</html>

外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传

– 自定义

iy4rpnsj.srp.png

jtopp3ve.l24.png

- 幽灵按钮

cj1sznyn.wcu.png

参考代码：

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

    <style>

        * {

            margin: 0;

            padding: 0;

        }

  

        body {

            background-color: #333;

        }

  

        a {

            text-decoration: none;

        }

  

        .box {

            width: 1000px;

            height: 220px;

            margin: 50px auto;

        }

  

        .box .link {

            float: left;

            margin: 0 20px;

            width: 205px;

            height: 280px;

            position: relative;

        }

  

        .left .icon {

            background-image: url(images/3.png);

            background-position: center center;

            background-repeat: no-repeat;

        }

  

        .center .icon {

            background-image: url(images/3.png);

            background-position: center center;

            background-repeat: no-repeat;

        }

  

        .right .icon {

            background-image: url(images/3.png);

            background-position: center center;

            background-repeat: no-repeat;

        }

  

        .box .link .icon {

            display: inline-block;

            width: 100%;

            height: 190px;

            transition: 0.2s linear;

            -webkit-transition: 0.2s linear;

            -moz-transition: 0.2s linear;

            -o-transition: 0.2s linear;

        }

  

        .box .link .icon:hover {

            transform: rotate(360deg) scale(1.2);

            -webkit-transform: rotate(360deg) scale(1.2);

            -moz-transform: rotate(360deg) scale(1.2);

            -o-transform: rotate(360deg) scale(1.2);

        }

  

        .box .link .button {

            display: block;

            width: 180px;

            height: 50px;

            line-height: 50px;

            border: 2px solid rgba(255, 255, 255, 0.8);

            color: #2dcb70;

            font-size: 20px;

            font-weight: 700;

            padding-left: 20px;

            box-sizing: border-box;

            margin: auto;

            background: url(C:/Users/ThinkPad/Desktop/1.jpg) no-repeat 130px center;

            transition: 0.4s ease;

            -webkit-transition: 0.4s ease;

            position: relative;

        }

  

        .box .link .button:hover {

            background-position: 140px center;

            border-color: rgba(255, 255, 255, 1);

        }

  

        .box .link .button .line {

            position: absolute;

            display: block;

            background: none;

            transition: 0.4s ease;

            -webkit-transition: 0.4s ease;

        }

  

        .box .link .button .top_1 {

            left: -100%;

            top: -2px;

            width: 0;

            height: 2px;

        }

  

        .box .link .button:hover .top_1 {

            width: 180px;

            background-color: #fff;

            position: absolute;

            left: -2px;

            top: -2px;

        }

  

        .box .link .button .left_1 {

            bottom: -100%;

            left: -2px;

            width: 2px;

            height: 0;

        }

  

        .box .link .button:hover .left_1 {

            height: 50px;

            background-color: #fff;

            left: -2px;

            bottom: -2px;

        }

  

        .box .link .button .right_1 {

            top: -100%;

            right: -2px;

            width: 2px;

            height: 0;

        }

  

        .box .link .button:hover .right_1 {

            height: 50px;

            background-color: #fff;

            right: -2px;

            top: -2px;

        }

  

        .box .link .button .button_1 {

            right: -100%;

            bottom: -2px;

            width: 0;

            height: 2px;

        }

  

        .box .link .button:hover .button_1 {

            width: 180px;

            background-color: #fff;

            right: -2px;

            bottom: -2px;

        }

  

        .box .tooltip {

            position: absolute;

            padding: 0 15px;

            height: 35px;

            background-color: #2dcb70;

            border-radius: 5px;

            line-height: 35px;

            margin: 0 auto;

            color: #fff;

            font-size: 18px;

            font-weight: 700;

            opacity: 0;

        }

  

        .box .tooltip span {

            position: absolute;

            top: 35px;

            width: 0;

            height: 0;

            border: 8px solid transparent;

            border-top-color: #2dcb70;

            left: 50%;

        }

    </style>

    <script src="jquery-3.3.1.min.js"></script>

    <script>

        $(function () {

            $(".button").hover(function () {

                $(".tooltip").show();

                var titleText = $(this).attr("data-text");

                $(".tooltip em").text(titleText);

                var leftLoc = $(this).offset().left;

                var addleft = ($(".tooltip").outerWidth() - $(this).outerWidth()) / 2;

                $(".tooltip").css({

                    left: leftLoc - addleft,

                    top: 140

                }).animate({

                    top: 195,

                    opacity: 1

                }, 300)

  

            }, function () {

                $(".tooltip").hide();

            })

  

        })

    </script>

</head>

  

<body>

    <div class="box">

        <div class="link left">

            <span class="icon"></span>

            <a href="" class="button" data-text="diyigeanniu">

                <span class="line top_1"></span>

                <span class="line left_1"></span>

                <span class="line right_1"></span>

                <span class="line button_1"></span>

                MISSIN

            </a>

        </div>

        <div class="link center">

            <span class="icon"></span>

            <a href="" class="button" data-text="diergeanniu">

                <span class="line top_1"></span>

                <span class="line left_1"></span>

                <span class="line right_1"></span>

                <span class="line button_1"></span>

                PLAY

            </a>

        </div>

        <div class="link right">

            <span class="icon"></span>

            <a href="" class="button" data-text="disangeanniu">

                <span class="line top_1"></span>

                <span class="line left_1"></span>

                <span class="line right_1"></span>

                <span class="line button_1"></span>

                JJAISSU

            </a>

        </div>

        <div class="tooltip">

            <em></em>

            <span></span>

        </div>

    </div>

</body>

  

</html>

实现效果：

a4k1wkaa.ijf.png

- 瀑布流

c1zj5izb.vww.png

实现代码：

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>瀑布流布局</title>

<script src="./jquery.js"></script>

<style>

    .waterfall {

        column-count: 4; /* 定义列数 */

        column-gap: 16px; /* 列与列之间的间隙 */

    }

    .item {

        break-inside: avoid; /* 防止元素分割到两列 */

        margin-bottom: 16px; /* 元素之间的间隙 */

    }

    img {

        width: 100%; /* 图片宽度100% */

        height: auto; /* 图片高度自动 */

    }

</style>

</head>

<body>

  

<div id="waterfall" class="waterfall">

    <!-- 图片项 -->

</div>

  

<script>

$(document).ready(function(){

    var items = [

        'https://via.placeholder.com/600x300?text=1',

        'https://via.placeholder.com/300x600?text=2',

        'https://via.placeholder.com/600x400?text=3',

        'https://via.placeholder.com/400x600?text=4',

        'https://via.placeholder.com/400x600?text=5',

        'https://via.placeholder.com/400x600?text=6',

        'https://via.placeholder.com/400x600?text=7',

        'https://via.placeholder.com/400x600?text=8',

        'https://via.placeholder.com/400x600?text=9',

        // 更多图片链接...

    ];

  

    var $waterfall = $('#waterfall');

  

    $.each(items, function(index, src){

        var $item = $('<div class="item"><img src="' + src + '" alt="Image ' + (index + 1) + '"></div>');

        $waterfall.append($item);

    });

  

    // 计算列宽

    var tallest = 0;

    $waterfall.find('.item').each(function(){

        var height = $(this).outerHeight();

        if(height > tallest) {

            tallest = height;

        }

    });

  

    // 调整列宽

    $waterfall.find('.item').each(function(){

        var $this = $(this),

            height = $this.outerHeight();

        $this.css('margin-bottom', tallest - height);

    });

});

</script>

  

</body>

</html>

实现效果：

3fdnh45w.tr1.png