前端已死? 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>
相关推荐
深蓝海拓1 分钟前
PySide6从0开始学习的笔记（二十七） 日志管理
笔记·python·学习·pyqt
xqqxqxxq12 分钟前
Java Thread 类核心技术笔记
java·笔记
Byron070716 分钟前
从 0 到 1 搭建 Vue 前端工程化体系：提效、提质、降本实战落地
前端·javascript·vue.js
哆啦code梦20 分钟前
前端存储三剑客：localStorage、sessionStorage与Cookie解析
前端·前端存储
老师用之于民31 分钟前
【DAY21】Linux软件编程基础&Shell 命令、脚本及系统管理实操
linux·运维·chrome·经验分享·笔记·ubuntu
徐小夕@趣谈前端33 分钟前
Web文档的“Office时刻“：jitword共建版2.0发布！让浏览器变成本地生产力
前端·数据结构·vue.js·算法·开源·编辑器·es6
iFeng的小屋34 分钟前
【2026年新版】Python根据小红书关键词爬取所有笔记数据
笔记·爬虫·python
山岚的运维笔记40 分钟前
SQL Server笔记 -- 第14章：CASE语句
数据库·笔记·sql·microsoft·sqlserver
宵时待雨42 分钟前
STM32笔记归纳8：时钟
笔记·stm32·单片机·嵌入式硬件
Data_Journal1 小时前
如何使用 Python 解析 JSON 数据
大数据·开发语言·前端·数据库·人工智能·php
热门推荐
01GitHub 镜像站点02Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services03Vue-skills的中文文档04让 Trae IDE 智能体 “读懂”文档 Excel+PDF+DOCX ：mcp-documents-reader 工具使用指南05Claude Code Skills 实用使用手册06一文了解国产算子编程语言 TileLang，TileLang 对国产开源生态的影响与启示07UV安装并设置国内源08OpenClaw Chrome扩展使用教程 - 浏览器中继控制09AI 规范驱动开发“三剑客”深度对比：Spec-Kit、Kiro 与 OpenSpec 实战指南10Linux下V2Ray安装配置指南