前端已死? 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 小时前
案例-表白墙简单实现
前端·javascript·css
数云界1 小时前
如何在 DAX 中计算多个周期的移动平均线
java·服务器·前端
风清扬_jd1 小时前
Chromium 如何定义一个chrome.settingsPrivate接口给前端调用c++
前端·c++·chrome
安冬的码畜日常1 小时前
【玩转 JS 函数式编程_006】2.2 小试牛刀：用函数式编程（FP）实现事件只触发一次
开发语言·前端·javascript·函数式编程·tdd·fp·jasmine
ChinaDragonDreamer1 小时前
Vite：为什么选 Vite
前端
小御姐@stella1 小时前
Vue 之组件插槽Slot用法（组件间通信一种方式）
前端·javascript·vue.js
GISer_Jing1 小时前
【React】增量传输与渲染
前端·javascript·面试
GISer_Jing1 小时前
WebGL在低配置电脑的应用
javascript
eHackyd2 小时前
前端知识汇总（持续更新）
前端
万叶学编程5 小时前
Day02-JavaScript-Vue
前端·javascript·vue.js
热门推荐
01分享几个惊艳的 Three.js 个人站点02【经验分享】Ubuntu22.04安装微信(linux官方版)032024年高教社杯数学建模国赛C题超详细解题思路分析04组基轨迹建模 GBTM的介绍与实现（Stata 或 R）05安卓系列机型永久去除data分区加密 详细步骤解析06【2024数模国赛赛题思路公开】国赛B题思路丨附可运行代码丨无偿自提07springer 在线投稿编译踩坑08Ubuntu24.04安装中文输入法09【2024高教社杯全国大学生数学建模竞赛】B题 生产过程中的决策问题——解题思路 代码 论文10CTF网络安全大赛简单的web抓包题目：HEADache