首页 前端知识 前端已死? Bootstrap--JS-jQuery

前端已死? Bootstrap--JS-jQuery

2024-05-23 20:05:31 前端知识 前端哥 316 812 我要收藏

目录

Bootstrap--JS-jQuery

1 jQuery基础

介绍

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

1.1 安装jQuery

地址

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

2 jQuery事件

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

jQuery常用事件

2.1 鼠标事件

鼠标单击-click

鼠标双击-dblclick

鼠标移动-mouseenter

鼠标移出-mouseleave

2.2 键盘事件

输入次数-keypress

按下某键-keydown

松开某键-keyup

3 jQuery隐藏显示

3.1 hide()与show()

3.2 toggle()

3.2 垂直菜单栏

4 jQuery滑动

4.1 slideToggle()

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

可选的 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 中发生某些事件时所调用的方法。
    <!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常用事件

鼠标事件键盘事件表单事件文档/窗口事件
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleaveblurunload

2.1 鼠标事件

鼠标单击-click

<!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

<!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

<!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

<!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

<!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

<!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

<!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()

<!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()

<!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 垂直菜单栏

<!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" 或毫秒。
    <!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>


转载请注明出处或者链接地址:https://www.qianduange.cn//article/9192.html
评论
发布的文章

用JS生成本周日期代码

2024-04-18 17:04:15

js 递归函数

2024-05-31 10:05:46

jQuery是什么?如何使用?

2024-03-12 01:03:24

js延迟加载的六种方式

2024-05-30 10:05:51

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!