前端已死? Bootstrap--JS-jQuery

金灰2024-05-15 11:55

目录

Bootstrap--JS-jQuery

[1 jQuery基础](#1 jQuery基础)

介绍

[基础语法： (selector).action()](#基础语法： (selector).action())

[1.1 安装jQuery](#1.1 安装jQuery)

地址

[基础语法： (selector).action()](#基础语法： (selector).action())

[2 jQuery事件](#2 jQuery事件)

[事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。](#事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。)

jQuery常用事件

[2.1 鼠标事件](#2.1 鼠标事件)

鼠标单击-click

鼠标双击-dblclick

鼠标移动-mouseenter

鼠标移出-mouseleave

[2.2 键盘事件](#2.2 键盘事件)

输入次数-keypress

按下某键-keydown

松开某键-keyup

[3 jQuery隐藏显示](#3 jQuery隐藏显示)

[3.1 hide()与show()](#3.1 hide()与show())

[3.2 toggle()](#3.2 toggle())

[3.2 垂直菜单栏](#3.2 垂直菜单栏)

[4 jQuery滑动](#4 jQuery滑动)

[4.1 slideToggle()](#4.1 slideToggle())

[slideToggle()方法可以在 slideDown() 与 slideUp() 方法之间进行切换。](#slideToggle()方法可以在 slideDown() 与 slideUp() 方法之间进行切换。)

[可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。](#可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。)

Bootstrap--JS-jQuery

1 jQuery基础

介绍

  • jQuery 是一个 JavaScript 库。

  • jQuery 极大地简化了 JavaScript 编程。

  • jQuery 很容易学习。

基础语法： $(selector).action()

  • 美元符号定义 jQuery

  • 选择符（selector）"查询"和"查找" HTML 元素

  • jQuery 的 action() 执行对元素的操作

1.1 安装jQuery

地址

Download jQuery | jQuery

  • https://jquery.com/download/

  • 复制原文件，创建JavaScript文件粘贴即可.

基础语法： $(selector).action()

  • 美元符号定义 jQuery

  • 选择符（selector）"查询"和"查找" HTML 元素

  • jQuery 的 action() 执行对元素的操作

2 jQuery事件

事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<ul>
    <li>张三</li>
    <li>李四</li>
    <li>王五</li>
</ul>
​
<script src="jquery-3.7.1.js"></script>
<script>
    $("li").click(function () {
            var text = $(this).text();
            alert(text)
        }
    )
</script>
</body>
</html>

jQuery常用事件

鼠标事件 键盘事件 表单事件 文档/窗口事件
click keypress submit load
dblclick keydown change resize
mouseenter keyup focus scroll
mouseleave blur unload

2.1 鼠标事件

鼠标单击-click

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>点我</p>
​
<script src="static/js/jquery-3.7.1.js"></script>
<script>
    $(document).ready(function () {
        $("p").click(function () {
            alert("段落被点击了。");
        });
    });
</script>
</body>
</html>

鼠标双击-dblclick

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>点我</p>
​
<script src="static/js/jquery-3.7.1.js"></script>
<script>
    $(document).ready(function () {
        $("p").dblclick(function () {
            alert("这个段落被双击。");
        });
    });
</script>
</body>
</html>

鼠标移动-mouseenter

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>过来</p>
​
<script src="static/js/jquery-3.7.1.js"></script>
<script>
    $(document).ready(function () {
        $("p").mouseenter(function () {
            $("p").css("background-color", "yellow");
        });
        $("p").mouseleave(function () {
            $("p").css("background-color", "lightgray");
        });
    });
</script>
</body>
</html>

鼠标移出-mouseleave

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<p>过来</p>
​
<script src="static/js/jquery-3.7.1.js"></script>
<script>
    $(document).ready(function () {
        $("p").mouseenter(function () {
            $("p").css("background-color", "yellow");
        });
        $("p").mouseleave(function () {
            $("p").css("background-color", "red");
        });
    });
</script>
</body>
</html>

2.2 键盘事件

输入次数-keypress

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
输入你的名字: <input type="text">
<p>按键的次数: <span>0</span></p>
​
<script src="static/js/jquery-3.7.1.js"></script>
<script>
    i = 0;
    $(document).ready(function () {
        $("input").keypress(function () {
            $("span").text(i += 1);
        });
    });
</script>
</body>
</html>

按下某键-keydown

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
输入你的名字: <input type="text">
<p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p>
​
<script src="static/js/jquery-3.7.1.js"></script>
<script>
    $(document).ready(function () {
        $("input").keydown(function () {
            $("input").css("background-color", "yellow");
        });
        $("input").keyup(function () {
            $("input").css("background-color", "blue");
        });
    });
</script>
</body>
</html>

松开某键-keyup

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
输入你的名字: <input type="text">
<p>在以上输入框中输入你的名字。在按键按下后输入框背景颜色会改变。</p>
​
<script src="static/js/jquery-3.7.1.js"></script>
<script>
    $(document).ready(function () {
        $("input").keydown(function () {
            $("input").css("background-color", "yellow");
        });
        $("input").keyup(function () {
            $("input").css("background-color", "blue");
        });
    });
</script>
</body>
</html>

3 jQuery隐藏显示

3.1 hide()与show()

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            background-color: #3e8f3e;
            height: 25px;
            width: 350px;
        }
    </style>
</head>
<body>
<div>如果你点击"隐藏" 按钮，我将会消失。</div>
<button id="hide">隐藏</button>
<button id="show">显示</button>
​
<script src="jquery-3.7.1.js"></script>
<script>
    $(document).ready(function () {
        $("#hide").click(function () {
            $("div").hide(1000);
        });
        $("#show").click(function () {
            $("div").show(1000);
        });
    });
</script>
</body>
</html>

3.2 toggle()

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            background-color: #3e8f3e;
            height: 25px;
            width: 350px;
        }
    </style>
</head>
<body>
<div>如果你点击"隐藏" 按钮，我将会消失。</div>
<button id="hide">隐藏</button>
<button id="show">显示</button>
​
<script src="static/js/jquery-3.7.1.js"></script>
<script>
    $(document).ready(function () {
        $("button").click(function () {
            $("div").toggle(1000);
        });
    });
</script>
</body>
</html>

3.2 垂直菜单栏

html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .menus{
            width: 200px;
            height: 800px;
            border: 1px solid red;
        }
        .menus .header{
            background-color: orange;
            padding: 10px 5px;
        }
        .menus .content a{
            /*a标签默认块级元素*/
            display: block;
            padding: 5px 5px;
            border-bottom: 1px dotted red;
        }
        .head{
            display: none;
        }
        .item{
            padding: 2px 0 0 0;
            border: 1px solid black;
        }
    </style>
</head>
<body>
<div class="menus">
    <div class="item">
        <div class="header" onclick="click_me(this)">射雕英雄传</div>
        <div class="content head">
            <a href="#">郭靖</a>
            <a href="#">黄蓉</a>
            <a href="#">梅超风</a>
            <a href="#">江南七怪</a>
        </div>
    </div>
​
    <div class="item">
        <div class="header" onclick="click_me(this)">射雕英雄传</div>
        <div class="content head">
            <a href="#">郭靖</a>
            <a href="#">黄蓉</a>
            <a href="#">梅超风</a>
            <a href="#">江南七怪</a>
        </div>
    </div>
​
    <div class="item">
        <div class="header" onclick="click_me(this)">射雕英雄传</div>
        <div class="content head">
            <a href="#">郭靖</a>
            <a href="#">黄蓉</a>
            <a href="#">梅超风</a>
            <a href="#">江南七怪</a>
        </div>
    </div>
​
    <div class="item">
        <div class="header" onclick="click_me(this)">射雕英雄传</div>
        <div class="content head">
            <a href="#">郭靖</a>
            <a href="#">黄蓉</a>
            <a href="#">梅超风</a>
            <a href="#">江南七怪</a>
        </div>
    </div>
​
    <div class="item">
        <div class="header" onclick="click_me(this)">射雕英雄传</div>
        <div class="content head">
            <a href="#">郭靖</a>
            <a href="#">黄蓉</a>
            <a href="#">梅超风</a>
            <a href="#">江南七怪</a>
        </div>
    </div>
​
</div>
​
<script src="static/js/jquery-3.7.1.js"></script>
<script>
    function click_me(self) {
        //寻找当前点击的标签的子标签有没有head属性
        var header = $(self).next().hasClass("head");
        if(header){
            //如果有head，则给你移除
            $(self).next().removeClass("head")
        }else {
            //如果没有head，则添加一个
            $(self).next().addClass("head")
        }
    }
</script>
</body>
</html>

4 jQuery滑动

4.1 slideToggle()

slideToggle()方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
html 复制代码 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #panel, #flip {
            padding: 5px;
            text-align: center;
            background-color: #e5eecc;
            border: solid 1px #c3c3c3;
        }
​
        #panel {
            padding: 50px;
            display: none;
        }
    </style>
</head>
<body>
<div id="flip">点我，显示或隐藏面板。</div>
<div id="panel">Hello world!</div>
​
<script src="jquery-3.7.1.js"></script>
<script>
    $(document).ready(function () {
        $("#flip").click(function () {
            $("#panel").slideToggle("slow");
        });
    });
</script>
</body>
</html>
相关推荐
张元清3 小时前
React useTimeout Hook：声明式 setTimeout 与自动清理 (2026)
javascript·react.js
FTS苏州运营部-富港包装检测技术3 小时前
YY/T 0681.3‑2010 无约束包装抗内压破坏试验 技术笔记
笔记·yy/t 0681.2·yy/t 0681.3·yy/t 0681.9·astm f1140·无约束包装·astm f2054
禁止摆烂_才浅3 小时前
JavaScript 类型判断：instanceof 与 constructor 原理深度解析
前端·javascript·面试
gezg4 小时前
DeepSeek Harness 插件：Excel 拖进输入框，AI 自己去读文件
前端·ai编程
Asize4 小时前
HTTP 明明无状态，登录态怎么就保住了——React + Zustand + JWT 鉴权全流程拆解
前端·javascript
两只羊ovo4 小时前
MCP：AI 界的 USB-C，把模型和世界「插」起来
前端
Darling噜啦啦4 小时前
JWT 登录鉴权全链路：从 Zustand 状态管理到 Axios 拦截器，彻底搞懂前端鉴权工程
前端
可涵不会debug4 小时前
LangChain 示例选择器（Example selectors）完整基础概念解读
服务器·前端·数据库
Csvn4 小时前
😱 React `<StrictMode>`：为什么 useEffect 被调用了两次？别慌，这是特性不是 bug
前端
Asize4 小时前
2 道大厂面试题：TS 工具类型我懂了，CSS 3 列布局把我问住了
前端·css·typescript
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02GitHub 镜像站点03微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新042026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？05历年考研数学一、数学二、数学三真题试卷及答案PDF06Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费07AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路082026年7月AI圈大地震：GPT-5.6被政府限制、Claude入驻Slack、Anthropic自研芯片09VSCode+CodeX扩展，无法启动10如何新建文件夹？ 电脑新建文件夹的4种方法