jQuery开发教程学习笔记

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

---

文章目录

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

---

– 介绍

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

---

– 基础选择器

DOCTYPE html>

html lang="en">

head>

    meta charset="UTF-8">

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

    title>Documenttitle>

    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>

---

– 属性选择器

---

– 基础过滤

---

– 子元素过滤

---

– 内容过滤

---

– 表单

参考代码：

DOCTYPE html>

html lang="en">

head>

    meta charset="UTF-8">

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

    title>Documenttitle>

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

            textarea>textarea>

        fieldset>

    form>

div>div>

script>

    $(function(){

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

    })

script>

body>

html>

---

– 层级

---

– 可见性过滤

---

– jQuery 扩展

---

– 鼠标事件

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

DOCTYPE html>

html lang="en">

head>

    meta charset="UTF-8">

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

    title>Documenttitle>

head>

body>

    p>hhhh1p>

    p>hhhh2p>

    p>hhhh3p>

    p>hhhh4p>

    p>hhhh5p>

  

script>

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

    for(var i=0; ip.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>Documenttitle>

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

head>

body>

    p>hhhh1p>

    p>hhhh2p>

    p>hhhh3p>

    p>hhhh4p>

    p>hhhh5p>

  

script>

    $(function(){

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

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

        })

    })

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

    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>

---

– 事件对象

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

---

– 表单事件

---

– jQuery 的 DOM 属性

• DOM 插入包裹现有内容

---

– CDN

• 无需将文件导入项目

---

– CSS 属性

---

– jQuery 过滤

---

– 遍历

---

– 特效

– 隐藏与显示

DOCTYPE html>

html lang="en">

head>

    meta charset="UTF-8">

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

    title>Documenttitle>

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

head>

body>

    p>hellop>

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

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

    button id="out">fade outbutton>

    button id="toggle">togglebutton>

    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>

---

– 滑动、回调

滑动参考代码：

DOCTYPE html>

html lang="en">

head>

    meta charset="UTF-8">

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

    title>Documenttitle>

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

  

    script>

        $(function(){

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

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

            })

  

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

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

            })

        })

    script>

body>

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

    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>

实现效果：

---

– 瀑布流

实现代码：

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

        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 = $('
+ src + '"alt="Image ' + (index + 1) + '">
');

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

实现效果：

---