前端已死? 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>
相关推荐
m0_748256782 分钟前
SpringBoot 依赖之Spring Web
前端·spring boot·spring
web1350858863531 分钟前
前端node.js
前端·node.js·vim
巫师不要去魔法部乱说32 分钟前
PyCharm专项训练5 最短路径算法
python·算法·pycharm
m0_5127446432 分钟前
极客大挑战2024-web-wp（详细）
android·前端
若川41 分钟前
Taro 源码揭秘：10. Taro 到底是怎样转换成小程序文件的？
前端·javascript·react.js
潜意识起点1 小时前
精通 CSS 阴影效果：从基础到高级应用
前端·css
奋斗吧程序媛1 小时前
删除VSCode上 origin/分支名，但GitLab上实际上不存在的分支
前端·vscode
LuH11241 小时前
【论文阅读笔记】IC-Light
论文阅读·笔记
是小菜呀！1 小时前
实验四 触发器
笔记
IT女孩儿1 小时前
JavaScript--WebAPI查缺补漏（二）
开发语言·前端·javascript·html·ecmascript
热门推荐
0119个Web前端交互式3D JavaScript框架和库02ARM学习（31）编译器对overlay方式的支持03玄机平台应急响应—webshell查杀04RAG 实践- Ollama+RagFlow 部署本地知识库05【一文读懂】NTN（非地面网络）技术介绍06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07ZZ038 物联网应用与服务赛题第J套08组基轨迹建模 GBTM的介绍与实现（Stata 或 R）09Docker 夺命连环 15 问10VSCode插件 —— Cody AI （免费AI助手！）