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

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

jQuery开发教程学习笔记

文章目录

- 介绍

- 基础选择器

- 属性选择器

- 基础过滤

- 子元素过滤

- 内容过滤

- 表单

- 层级

- 可见性过滤

- jQuery 扩展

- 鼠标事件

- 键盘事件

- 浏览器事件

- 文档加载过程

- 绑定事件处理器

- 事件对象

- 表单事件

- jQuery的DOM属性

- CDN

- CSS属性

- jQuery 过滤

- 遍历

- 特效

- 隐藏与显示

- 淡入淡出

– 滑动、回调

– 自定义

- 幽灵按钮

- 瀑布流

微信扫一扫：分享