Day02-jQuery

最新推荐文章于 2024-07-23 14:51:29 发布
最新推荐文章于 2024-07-23 14:51:29 发布
阅读量19 收藏
点赞数
文章标签： jquery 前端 javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Spirs/article/details/135170327
版权

一.事件处理

<!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="./js/jquery-3.6.0.min.js"></script>
    <style>
        .box {
            width: 200px;
            height: 200px;
            background-color: pink;
        }

        .son {
            width: 100px;
            height: 100px;
            background-color: red;
        }
    </style>
</head>

<body>

    <div class="box">
        <div class="son"></div>
    </div>

    <button>手动触发</button>

    <script>

        // $(".box").click(function () {
        //     console.log(1);
        // })

        // on()
        // 可绑定多个相同的事件
        // $(".box").on("click",function(){
        //     console.log("abc");
        // });

        $(".box").on("click", {
            name: "张三",
            age: 18
        }, function (e) {
            console.log("ABC");
            console.log(e);
            console.log(e.data);
        })

        // $(".box").on({
        //     click: function () {
        //         console.log("hello");
        //     },
        //     mouseenter: function () {
        //         console.log("world");
        //     }
        // })

        $(".box").on("click", ".son", function () {
            console.log("son事件");
        })

        // $(".son").click(function(){
        //     console.log("son事件");
        // })

        $(".box").append($("<div class='son'></div>"))


        // one()
        // $(".box").one("click",function(){
        //     console.log("昙花一现");
        // })


        // trigger()
        $("button").click(function () {
            console.log("手动触发");
        }).trigger("click");

        // hover()
        $(".box").hover(function () {
            console.log("进入");
        }, function () {
            console.log("移出");
        })

    </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>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 800px;
            height: 400px;
            background-color: pink;
            position: absolute;
        }
    </style>

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

<body>

    <button class="show">显示</button>
    <button class="hide">隐藏</button>
    <button class="toggle">显示隐藏切换</button>
    <button class="fadein">淡入</button>
    <button class="fadeout">淡出</button>
    <button class="fadeto">指定透明度</button>
    <button class="fadeToggle">淡入淡出切换</button>
    <button class="slideDown">向下展开</button>
    <button class="slideUp">向上卷起</button>
    <button class="slideToggle">展开收起切换</button>
    <button class="animate">自定义动画</button>
    <button class="stop">淡入淡出切换</button>

    <div class="box">
        <p>下周气温骤降</p>
        <p>大家注意保暖</p>
    </div>

    <script>

        $(".show").click(function () {
            $(".box").show(2000, "linear", function () {
                console.log("动画执行完毕");
            })
        })

        $(".hide").click(function () {
            $(".box").hide(2000, "linear", function () {
                console.log("动画执行完毕");
            })
        })

        $(".toggle").click(function () {
            $(".box").toggle(2000, "swing", function () {
                console.log("动画执行完毕");
            })
        })

        $(".fadein").click(function () {
            $(".box").fadeIn(2000, "swing", function () {
                console.log("动画执行完毕");
            })
        })

        $(".fadeout").click(function () {
            $(".box").fadeOut(2000, "swing", function () {
                console.log("动画执行完毕");
            })
        })

        $(".fadeto").click(function () {
            $(".box").fadeTo(2000, 0.5, "swing", function () {
                console.log("动画执行完毕");
            })
        })

        $(".fadeToggle").click(function () {
            $(".box").fadeToggle(2000, "swing", function () {
                console.log("动画执行完毕");
            })
        })

        $(".slideDown").click(function () {
            $(".box").slideDown(2000, "swing", function () {
                console.log("动画执行完毕");
            })
        })

        $(".slideUp").click(function () {
            $(".box").slideUp(2000, "swing", function () {
                console.log("动画执行完毕");
            })
        })

        $(".slideToggle").click(function () {
            $(".box").slideToggle(2000, "swing", function () {
                console.log("动画执行完毕");
            })
        })

        $(".animate").click(function () {
            $(".box").animate({
                width: 600,
                height: 300,
                top: 50,
                left: 100
            }, 2000, "swing", function () {
                console.log("动画执行完毕");
            })
        })

        // 停止动画排队 stop()
        $(".stop").click(function(){
            $(".box").stop().slideToggle(2000,"swing",function(){
                console.log("动画执行完毕");
            })
        })

    </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>
    <style>
        * {
            margin: 0;
            padding: 0;
            list-style: none;
        }

        ul {
            display: flex;
        }

        li {
            width: 100px;
            height: 30px;
            box-sizing: border-box;
            position: relative;
            border: 1px solid #ccc;
            text-align: center;
            line-height: 30px;
        }

        .box {
            position: absolute;
            width: 100px;
            height: 150px;
            background-color: red;
            top: 30px;
            left: 0;
            display: none;
        }
    </style>

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

<body>

    <ul>
        <li>首页
            <div class="box">1</div>
        </li>
        <li>产品
            <div class="box">2</div>
        </li>
        <li>我的
            <div class="box">3</div>
        </li>
    </ul>

    <script>

        $("li").hover(function () {
            $(this).children().stop().slideDown(1000, "linear", function () {
                console.log("over");
            })
        }, function () {
            $(this).children().stop().slideUp(1000, "linear", function () {
                console.log("over");
            })
        })

    </script>

</body>

</html>

四.$each

<!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="./js/jquery-3.6.0.min.js"></script>
</head>

<body>

    <div>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>

    <script>

        var arr = [10, 20, 30, 40, 50];

        $("div").each(function (index, value) {
            console.log(value);
        })


        $.each(arr, function (index, value) {
            console.log(index);
            console.log(value);
        })

        var obj = {
            name: "zhangsan",
            age: 18
        }
        $.each(obj, function (key, value) {
            console.log(key);
            console.log(value);
        })

        var rel = $.map(arr, function (value, index) {
            return value + 1;
        })
        console.log(rel);

    </script>

</body>

</html>

五.$extend

<!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="./js/jquery-3.6.0.min.js"></script>
</head>

<body>

    <script>

        var obj = {
            name: "xiaohao",
            age: 20,
            gender: "男"
        }

        var newobj = {}

        $.extend(true, newobj, obj);
        console.log(newobj);

    </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="./js/jquery-3.6.0.min.js"></script>
</head>

<body>

    <script>

        var baseUrl = "http://localhost:3008";

        $.get(baseUrl + "/api/student/getStudent", { name: "周杰" }, function (data, status, xhr) {
            console.log(data);
            console.log(status);
            console.log(xhr);
        })

        $.post(baseUrl + "/api/student/addStudent", {
            clazz: "火花239",
            name: "胡定海",
            gender: "男",
            age: "20",
            tel: "13999999999",
            address: "信阳",
            remark: "好谷吴彦祖"
        }, function (data) {
            console.log(data);
        })

    </script>

</body>

</html>

七.$ajax

<!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="./js/jquery-3.6.0.min.js"></script>
</head>

<body>

    <script>

        // 原生js中ajax怎么写？
        // 1.创建对象
        // var xhr = new XMLHttpRequest();

        // // 2.发起请求
        // xhr.open("GET/POST", "URL");

        // // 3.设置请求头
        // xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        // xhr.setRequestHeader("Content-Type", "application/json");

        // // 4.发送请求
        // xhr.send(data);

        // // 5.监听状态变化
        // xhr.onreadystatechange = function () {
        //     // 判断状态信息
        //     if (xhr.readyState == 4) {
        //         // 判断是否成功
        //         if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
        //             console.log(xhr.response);
        //         }
        //     }
        // }

        // jquery 中的ajax
        $.ajax({
            // 请求类型
            type: "GET",
            url: baseUrl + "",

            // 携带数据
            data: {},
            success: function (data, status, xhr) {
                console.log("请求成功");
            },
            error: function (error) {
                console.log("请求失败");
                console.log(error);
            }
        })

        $.ajax({
            // 请求类型
            type: "POST",
            url: baseUrl + "",

            // 设置请求头
            contentType: "application/json",

            // 携带数据
            data: {},
            success: function (data, status, xhr) {
                console.log("请求成功");
            },
            error: function (error) {
                console.log("请求失败");
                console.log(error);
            }
        })

    </script>

</body>

</html>

前端拓海
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
jQuery day02
lzw995189944的博客
12-07 181
初体验 先下载先去官网下载jQuery.js 脚本文件 <!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, initia
javaweb学习（day12-jQuery)
weixin_51580177的博客
04-23 1052
jquery就是简化了dom的操作，也确实很方便
7.23 Day27 ----- jQuery
qq_63771774的博客
07-23 295
在idea中下载jQuery 建一个01.jQuery选择器 HTML文件 建一个02.val()操作元素的value HTML文件 建一个03.使用元素的事件属性监听事件 HTML文件 建一个04.使用jQuery监听事件 HTML文件 建一个06.事件冒泡(事件传播)，事件委托 HTML文件 ...
Web基础 day03-JQuery
张准的博客
12-19 179
JQuery概述 JQuery选择器 文档操作 JSON
前端学习Day27-jQuery
ITsheng_ge的博客
07-24 182
jQuery的应用
Day01-jQuery
Spirs的博客
12-23 46
使用jQuery、jQuery入口函数、选择器、操作jQuery集合、jQuery中的排他、添加与删除类名、操作属性、插入、删除、省级联动
从0开始学web-day28-jquery01
oxygen_ls的博客
02-10 547
jQuery $函数 选择器 常用方法 显隐方法 html和attr 节点操作 序号问题 animate
Working with jQuery - Day 3 - jQuery UI theme
weixin_30325071的博客
07-07 125
1. 默认情况下，jQuery-UI 不带样式，很挫，但要添加样式，只需要在代码中引用(link)下载的ui.all.css即可。样式会自动添加。 转载于:https://www.cnblogs.com/Gildor/archive/2009/02/27/1399813.html...
text/x-jquery-tmpl做分页查询
苏凯的博客
03-15 1780
页面原型: 数据格式: { "pageindex" : 1, 默认第一页 "pagesize" : 10,每页显示条数记录 "count" : 12,总条数 "total" : 2,总页数 "currentPage" : 1,当前页面码 "list" : [ { "id" : 398,
day13-JQuery01.iml
11-26
day13-JQuery01.iml
15day-study-jquery-.rar_JavaScript/JQuery_Java_
08-11
在本资源"15day-study-jquery-.rar"中，你将踏上一个为期15天的快速学习jQuery的旅程。jQuery是一个强大的JavaScript库，它极大地简化了JavaScript编程，特别是对于网页上的DOM操作、事件处理、动画效果以及AJAX交互...
Work-Day-Scheduler-Jquery:使用jquery和时刻制作的调度程序
04-04
在文件列表"Work-Day-Scheduler-Jquery-main"中，我们可以推测这是项目的主目录，包含项目的源代码和其他相关资源。可能的文件结构可能包括HTML文件（用于页面结构和内容），CSS文件（用于样式设计），JavaScript...
5.CSS学习（浮动）
最新发布
ShawLee0925的博客
07-23 181
css浮动——float特点
谷粒商城实战笔记-39-前端基础-Vue-指令-v-on、v-for、v-if
epitomizelu的专栏
07-20 928
v-on 是 Vue.js 中的一个指令，用于在 DOM 元素上监听用户事件，并在事件触发时执行相应的 JavaScript 函数。它提供了一种将 Vue 实例中的方法与 DOM 事件关联起来的方式，使得你可以轻松地对用户交互做出响应。v-on 指令的基本语法是在元素上添加 v-on:event-name=“method”，其中 event-name 是你要监听的 DOM 事件类型（如 click、mouseover、keydown 等），method 则是 Vue 实例中定义的方法名。
Vue使用FullCalendar实现日历/周历/月历
_小郑有点困了的博客
07-23 83
需求背景：项目上遇到新需求，要求实现工单以日/周/月历形式展示。而且要求不同工单根据状态显示不同颜色，一个工单内部，需要以不同颜色显示三个阶段。
VUE 子组件可以直接改变父组件的数据吗
Cshaosun的博客
07-23 69
如果子组件需要修改父组件的数据，‌应该通过触发一个自定义事件来通知父组件进行数据的变更。‌父组件在接收到子组件触发的事件后，‌可以修改数据，‌从而间接地改变父组件的数据。‌这种方式通过明确的事件通信机制，‌保证了数据流的单向性和组件之间的解耦。需要注意的是，‌虽然Vue提供了一些特殊的方法来实现子组件修改父组件数据，‌但这种方式打破了数据流的单向性，‌增加了组件之间的耦合性，‌因此应谨慎使用。在Vue中，‌如果确实需要在子组件中修改父组件的数据，‌可以通过以下步骤实现：‌。
jQuery高级教程：动画、遍历与功能应用
在"day02-jquery高级.pdf"的学习材料中，本章主要聚焦于jQuery高级应用，包括动画效果、遍历方法、事件处理、插件机制以及表单校验。以下是详细的知识点概述： 1. **jQuery动画**： - **show()** 方法：用于显示...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值