JavaScript学习笔记(五) jQuery

其他 2019-11-14 12:01:21 阅读次数: 0

jQuery 是一个 JavaScript 函数库，兼容目前绝大部分的浏览器，概括来说包含如下功能：

  • 元素选取
  • 元素操作
  • 样式设置
  • 事件操作
  • 过渡与动画
  • AJAX

1、安装

（1）在 官网 中下载 jQuery，在项目中通过 <script> 标签引入

jQuery 提供两个版本可供下载，分别是 生产版本（用于实际上线） 和 开发版本（用于开发测试）

下载下来的 jQuery 是一个 JavaScript 文件，在项目中可以通过 <script> 标签引入

（2）直接通过 CDN 引入

也可以通过 CDN 引入 jQuery，这里以官方的 CDN 为例

<script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>

2、语法

（1）基础语法

只要学习过 HTML、CSS、JavaScript 的朋友，一定会觉得 jQuery 的语法十分熟悉

一条独立的 jQuery 语句可以分为三个部分，$(selector).action()

  • $：jQuery 的全局引用
  • selector：选择特定的 HTML 元素
  • action：对选择的元素进行操作

（2）执行入口

为了防止在文档完全加载之前运行 jQuery 代码，我们一般会把 jQuery 代码写在下面的回调函数中

扫描二维码关注公众号，回复： 7851539 查看本文章 
// 常规语法
$(document).ready(function(){
    // 其它 jQuery 代码
})

// 简写语法
$(function(){
    // 其它 jQuery 代码
})

3、元素选取

jQuery 可以用来选择特定的 HTML 元素，它与 CSS 选择器类似，但是对其做了一定的拓展

（1）CSS 选择器

这部分的语法与 CSS 选择器类似，常见的有 id 选择器、class 选择器等等，这里不多作介绍

<!DOCTYPE html>
<html>
<head>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("p").css("font-weight", "bold")
        })
    </script>
</head>
<body>
    <p>Say Hello To Tomorrow</p>
    <p>Say Goodbye To Yesterday</p>
</body>
</html>

（2）拓展

祖先元素

  • parent()：返回选中元素的父亲元素
  • parents()：返回选中元素的所有祖先元素
  • parentsUntil(<selector>)：返回介于选中元素与给定元素之间的所有祖先元素

后代元素

  • children()：返回选中元素的所有孩子子元素
  • find()：返回选中元素的所有后代元素

兄弟元素

  • siblings()：返回选中元素的所有兄弟元素
  • next() / prev()：返回选中元素的下 / 上一个兄弟元素
  • nextAll() / prevAll()：返回选中元素之后 / 前的所有兄弟元素
  • nextUntil(<selector>) / prevUntil(<selector>)：返回介于选中元素与给定元素之间的所有兄弟元素

过滤元素

  • first()：返回选中元素的第一个元素
  • last()：返回选中元素的最后一个元素
  • eq(<index>)：返回选中元素中带有指定索引的元素
  • filter(<selector>)：返回符合条件的元素
  • not(<selector>)：返回不符合条件的元素
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>元素选取</title>
    <style>
        .relationship * {
            display: block;
            color: gray;
            border: 1px solid gray;
            padding: 5px;
            margin: 15px;
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#selected").parentsUntil("body").css({
                "color" : "red",
                "border": "1px solid red"
            })
        })
    </script>
</head>
<body class="relationship">
    <div>
        祖父元素
        <div>
            其它元素
            <div>其它元素</div>
            <div>其它元素</div>
        </div>
        <div>
            父亲元素
            <div>之前的兄弟元素</div>
            <div>上一个兄弟元素</div>
            <div id="selected">
                选中元素
                <div>
                    孩子元素
                    <div>孙子元素</div>
                    <div>孙子元素</div>
                </div>
                <div>
                    孩子元素
                    <div>孙子元素</div>
                </div>
            </div>
            <div>下一个兄弟元素</div>
            <div>之后的兄弟元素</div>
        </div>
    </div>
</body>
</html>

4、元素操作

jQuery 提供了一系列操作 DOM 的方法，用于访问和操作元素及其属性

（1）访问和操作元素

  • text([<text>] | [<function>])：访问或操作选中元素的文本内容
  • html([<html>] | [<function>])：访问或操作选中元素的内容
  • val([<value>] | [<function>])：访问或操作表单字段的值
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>访问和操作元素</title>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#set_text").click(function(){
                $("#to_change").text("change into text")
            })
            $("#set_html").click(function(){
                $("#to_change").html("<b>change into html</b>")
            })
        })
    </script>
</head>
<body>
    <p id="to_change">waiting to change</p>
    <button id="set_text">set text</button>
    <button id="set_html">set html</button>
</body>
</html>

（2）访问和操作属性

  • prop(<property>[, <value>] | { <property>: <value>, ... })：访问和操作选中元素的属性

    如果存在指定的属性，返回相应的值；如果没有指定的属性，返回 空字符串

  • attr(<attribute>[, <value>] | { <attribute>: <value>, ... })：访问和操作选中元素的属性

    如果存在指定的属性，返回相应的值；如果没有指定的属性，返回 undefined

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>访问和操作属性</title>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        function selectAll(checkbox) {
            // 注意，这里不能使用 attr，否则会有错误
            // 因为使用 attr 将会返回 undefined
            let isAll = $(checkbox).attr("checked")
            $("input[name='fruit']").prop("checked", isAll)
        }
    </script>
</head>
<body>
    <p>What fruit do you like to eat?</p>
    <p><input type="checkbox" name="fruit" value="all" onclick="selectAll(this)" />All</p>
    <p><input type="checkbox" name="fruit" value="apple" />Apple</p>
    <p><input type="checkbox" name="fruit" value="banana" />Banana</p>
    <p><input type="checkbox" name="fruit" value="cherry" />Cherry</p>
</body>
</html>

（3）添加元素

  • append(<text>|<html>)：在选中元素的结尾添加内容（仍属于该元素）
  • prepend(<text>|<html>)：在选中元素的开头添加内容（仍属于该元素）
  • after(<text>|<html>)：在选中元素的后面添加内容（不属于该元素）
  • before(<text>|<html>)：在选中元素的前面添加内容（不属于该元素）
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加元素</title>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        // 在添加文本后，请打开控制台看看 DOM 结构，比较它们之间的区别
        $(function(){
            $("#add_text").click(function(){
                $("#origin_text").before("<p>before oringin text</p>")
                $("#origin_text").prepend("<p>prepend to oringin text</p>")
                $("#origin_text").append("<p>append to oringin text</p>")
                $("#origin_text").after("<p>after oringin text</p>")
            })
        })
    </script>
</head>
<body>
    <p id="origin_text">origin text</p>
    <button id="add_text">add text</button>
</body>
</html>

（4）删除元素

  • remove()：删除选中元素及其后代元素
  • empty()：删除选中元素的后代元素
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>删除元素</title>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        // 在删除元素后，请打开控制台看看 DOM 结构，比较它们之间的区别
        $(function(){
            $("#remove_elem").click(function(){
                $("#to_remove").remove()
            })
            $("#empty_elem").click(function(){
                $("#to_empty").empty()
            })
        })
    </script>
</head>
<body>
    <div id="to_remove">
        waiting to remove
        <p>la la la</p>
        <p>bla bla bla</p>
    </div>
    <button id="remove_elem">remove element</button>
    <br/><br/>
    <div id="to_empty">
        waiting to empty
        <p>la la la</p>
        <p>bla bla bla</p>
    </div>
    <button id="empty_elem">empty element</button>
</body>
</html>

5、样式设置

jQuery 也提供了操作样式的方法，用于设置元素的 class 和 style

（1）class

  • addClass(<class>)：向选中元素添加 class，可以添加一个或多个
  • removeClass(<class>)：从选中元素删除 class，可以删除一个或多个
  • toggleClass(<class>)：对选中元素进行 添加 / 删除 class 的切换操作
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>操作 class</title>
    <style>
        .rectangle {
            width: 100px;
            height: 80px;
            cursor: pointer;
        }
        .red-color {
            background-color: rgb(255, 0, 0);
        }
        .green-color {
            background-color: rgb(0, 255, 0);
        }
        .blue-color {
            background-color: rgb(0, 0, 255);
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            let currColorIndex = 0
            let nextColorIndex = 1
            let indexColorMapping = {
                0: "red-color",
                1: "green-color",
                2: "blue-color",
            }
            let colorNum = Object.keys(indexColorMapping).length
            $("#primary_color").click(function(){
                $("#primary_color").removeClass(indexColorMapping[currColorIndex])
                $("#primary_color").addClass(indexColorMapping[nextColorIndex])
                currColorIndex = nextColorIndex
                nextColorIndex = (nextColorIndex + 1) % colorNum
            })
        })
    </script>
</head>
<body>
    <div id="primary_color" class="rectangle red-color"></div>
</body>
</html>

（2）style

  • css(<property>[, <value>] | { <property>: <value>, ... })：访问或设置选中元素的 style
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>操作 style</title>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            let interval = 10
            $("#larger").click(function(){
                let font_size_string = $("#para").css("font-size").trim("px")
                let font_size_number = parseInt(font_size_string)
                let larger_font_size = (font_size_number + interval) + "px"
                $("#para").css("font-size", larger_font_size)
            })
        })
    </script>
</head>
<body>
    <div id="para" style="font-size: 10px;">这是一段文字</div>
    <br/><br/><button id="larger">larger</button>
</body>
</html>

（3）size

  • width()：访问或设置元素的宽度（width）
  • height()：访问或设置元素的高度（height）
  • innerWidth()：访问或设置元素的内宽度（width + padding）
  • innerHeight()：访问或设置元素的内高度（height + padding）
  • outerWidth()：访问或设置元素的外宽度（width + padding + border）
  • outerHeight()：访问或设置元素的外高度（height + padding + border）
  • outerWidth(true)：访问或设置元素的外宽度（width + padding + border + margin）
  • outerHeight(true)：访问或设置元素的外高度（height + padding + border + margin）
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>操作 size</title>
    <style>
        .rectangle {
            display: block;
            width: 100px;
            height: 80px;
            margin: 20px 30px;
            padding: 20px 30px;
            border: 5px solid deeppink;
            background-color: cornflowerblue;
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#rectangle_width").text(function(index, oldText){
                return oldText + $(".rectangle").width() + "px"
            })
            $("#rectangle_height").text(function(index, oldText){
                return oldText + $(".rectangle").height() + "px"
            })
            $("#rectangle_inner_width").text(function(index, oldText){
                return oldText + $(".rectangle").innerWidth() + "px"
            })
            $("#rectangle_inner_height").text(function(index, oldText){
                return oldText + $(".rectangle").innerHeight() + "px"
            })
            $("#rectangle_outer_width").text(function(index, oldText){
                return oldText + $(".rectangle").outerWidth() + "px"
            })
            $("#rectangle_outer_height").text(function(index, oldText){
                return oldText + $(".rectangle").outerHeight() + "px"
            })
            $("#rectangle_outer_width_true").text(function(index, oldText){
                return oldText + $(".rectangle").outerWidth(true) + "px"
            })
            $("#rectangle_outer_height_true").text(function(index, oldText){
                return oldText + $(".rectangle").outerHeight(true) + "px"
            })
        })
    </script>
</head>
<body>
    <div class="rectangle"></div>
    <p id="rectangle_width">rectangle width: </p>
    <p id="rectangle_height">rectangle height: </p>
    <p id="rectangle_inner_width">rectangle inner width: </p>
    <p id="rectangle_inner_height">rectangle inner height: </p>
    <p id="rectangle_outer_width">rectangle outer width: </p>
    <p id="rectangle_outer_height">rectangle outer height: </p>
    <p id="rectangle_outer_width_true">rectangle outer width true: </p>
    <p id="rectangle_outer_height_true">rectangle outer height true: </p>
</body>
</html>

6、事件操作

在 jQuery 中，对于大多数的事件操作都有一个等效的 jQuery 方法

（1）鼠标事件

  • click(<callback>)：点击选中元素
  • dbclick(<callback>)：双击选中元素
  • mouseenter(<callback>)：鼠标移入选中元素
  • mouseleave(<callback>)：鼠标移出选中元素
  • hover(<mouseenter>[, <mouseleave>])：鼠标悬浮在选中元素
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>鼠标事件</title>
    <style>
        .wrapper {
            width: 260px;
            height: 80px;
            background-color: black;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
        .content {
            width: 240px;
            height: 60px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $(".content").css({
                "color": "ghostwhite",
                "border": "1px solid rgba(255, 255, 255, 0.5)"
            }).mouseenter(function(){
                $(".content").css({
                    "color": "white",
                    "text-shadow": "1px 1px 2px ghostwhite",
                    "border": "1px solid rgba(255, 255, 255, 1)",
                    "box-shadow": "5px 5px 50px rgba(255, 255, 255, 0.4) inset"
                })
            }).mouseleave(function(){
                $(".content").css({
                    "color": "ghostwhite",
                    "text-shadow": "none",
                    "border": "1px solid rgba(255, 255, 255, 0.5)",
                    "box-shadow": "none"
                })
            })
        })
    </script>
</head>
<body>
    <div class="wrapper">
        <div class="content">Hello World</div>
    </div>
</body>
</html>

（2）键盘事件

  • keypress(<callback>)：按下键盘的某一按键，并且产生一个字符时触发
  • keydown(<callback>)：按下键盘的某一按键时触发
  • keyup(<callback>)：松开键盘的某一按键时触发

（3）表单事件

  • submit(<callback>)：提交表单
  • change(<callback>)：当选中元素的值发生改变
  • focus(<callback>)：当选中元素获得焦点
  • blur(<callback>)：当选中元素失去焦点

（4）文档 / 窗口事件

  • resize(<callback>)：调整浏览器窗口大小
  • scroll(<callback>)：滚动指定元素

7、过渡与动画

在 jQuery 中，也可以处理过渡与动画效果

（1）显示隐藏

  • hide([<speed>[, <callback>]])：隐藏选中元素
  • show([<speed>[, <callback>]])：显示选中元素
  • toggle([<speed>[, <callback>]])：切换 hide() 和 show() 方法隐藏或显示选中元素
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>显示隐藏</title>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#show_or_hide").click(function(){
                $("#para").toggle()
            })
        })
    </script>
</head>
<body>
    <p id="para">这是一段文本</p>
    <button id="show_or_hide">Show / Hide</button>
</body>
</html>

（2）淡入淡出

  • fadeIn([<speed>[, <callback>]])：淡入隐藏的选中元素
  • fadeOut([<speed>[, <callback>]])：淡出可见的选中元素
  • fadeToggle([<speed>[, <callback>]])：切换 fadeIn() 和 fadeOut() 方法淡入或淡出选中元素
  • fadeTo(<speed>, <opacity>[, <callback>])：为指定元素设置不透明度
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>淡入淡出</title>
    <style>
        .circle {
            width: 100px;
            height: 100px;
            border-radius: 50px;
            background-color: cornflowerblue;
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            setInterval(function(){
                $(".circle").fadeIn(1000).fadeOut(500)
            }, 1500)
        })
    </script>
</head>
<body>
    <div class="circle"></div>
</body>
</html>

（3）滑动

  • slideDown(<speed>[, <callback>])：向下滑动选中元素
  • slideUp(<speed>[, <callback>])：向上滑动选中元素
  • slideToggle(<speed>[, <callback>])：切换 slideDown() 和 slideUp() 方法向下或向上滑动选中元素
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>滑动</title>
    <style>
        .announcement {
            width: 200px;
            height: 20px;
            background-color: deepskyblue;
            text-align: center;
            cursor: pointer;
        }
        .content {
            width: 200px;
            height: 80px;
            background-color: lightskyblue;
            display: none;
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $(".announcement").click(function(){
                $(".content").slideToggle(750)
            })
        })
    </script>
</head>
<body>
    <div class="announcement">announcement</div>
    <div class="content"></div>
</body>
</html>

（4）动画

  • animate({<property>: <value>, ...}[, <speed>[, <callback>]])：为选中元素设置自定义动画
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>动画</title>
    <style>
        .circle {
            width: 200px;
            height: 200px;
            border-radius: 100px;
            background-color: cornflowerblue;
            font-size: 20px;
            display: flex;
            flex-direction: row;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }
    </style>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#announcement").click(function(){
                $("#announcement").animate({
                    "width": "250px",
                    "height": "250px",
                    "border-radius": "125px"
                }).animate({
                    "font-size": "25px"
                })
            })
        })
    </script>
</head>
<body>
    <div id="announcement" class="circle">announcement</div>
</body>
</html>

8、AJAX

  • load(<URL>, <data>, <callback>)：从服务器加载数据，并把返回的数据放入选中元素
  • get(<URL>, <callback>)：从指定资源请求数据
  • post(<URL>, <data>, <callback>)：向指定资源提交数据
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>AJAX</title>
    <script src="http://code.jquery.com/jquery-3.4.1.min.js"></script>
    <script>
        $(function(){
            $("#get_data").click(function(){
                $.post("http://www.httpbin.org/post", {
                    "username": "admin",
                    "password": "123456"
                }, function(data, status){
                    console.log(data)
                    $("#response_status").text(function(index, oldText){
                        return oldText + status
                    })
                })
            })
        })
    </script>
</head>
<body>
    <button id="get_data">get data</button>
    <p id="response_status">response status: </p>
</body>
</html>

【 阅读更多 JavaScript 系列文章，请看 JavaScript学习笔记 】

猜你喜欢

转载自www.cnblogs.com/wsmrzx/p/11855961.html
今日推荐
TIOBE 5 月榜单：Fortran “复活”进入 Top 10
GCC 14.1 发布
面壁智能发布 Eurux-8x22B 开源大模型 —— 堪称「理科状元」
开源日报 | 谷歌扶持鸿蒙上位；开源Rabbit R1；Docker加持的安卓手机；微软的焦虑和野心；海尔电器把开放平台关了
中国码农的“35岁魔咒”
蘭雅 CorelDRAW 插件 2024.5.1 国际劳动节版，免费下载
Arc Browser for Windows 1.0 正式 GA
90后程序员开发视频搬运软件、不到一年获利超 700 万，结局很刑！
周排行
Java自定义时间格式
同步整形电路
在开发中最最最常用的字符串的属性大集合
Linux 查看端口占用并杀掉
Java基础四：ArrayList
多线程之死锁就是这么简单
mysql 基础命令集
awk 命令详解
Centos6.3编译安装nginx+php步骤
OCR （Optical Character Recognition，光学字符识别）
每日归档
更多
2024-05-08(42)
2024-05-07(14)
2024-05-06(40)
2024-05-05(0)
2024-05-04(7)
2024-05-03(19)
2024-05-02(0)
2024-05-01(4)
2024-04-30(1)
2024-04-29(40)

代码天地 © 2018 codetd.com

境外服务器   最新电视剧2022