乐趣区

关于jquery:JQuery学习记录

jiezi

JQuery 概述

什么是 JQuery？

jQuery，顾名思义，也就是 JavaScript 和查问（Query），它就是辅助 JavaScript 开发的 js 类库。

JQuery 核心思想

它的核心思想是 write less,do more(写得更少, 做得更多)，所以它实现了很多浏览器的兼容问题。

JQuery 风行水平

jQuery 当初曾经成为最风行的 JavaScript 库，在世界前 10000 个拜访最多的网站中，有超过 55% 在应用 jQuery。

jQuery 益处

jQuery 是收费、开源的，jQuery 的语法设计能够使开发更加便捷，例如操作文档对象、抉择 DOM 元素、制作动画成果、事件处理、应用 Ajax 以及其余性能。

JQuery 初体验

需要：应用 jQuery 给一个按钮绑定单击事件?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery 初体验 </title>
    <!-- 引入 jquery 文件 -->
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function() {$("#one").click(function() {alert("应用 JQuery 给一个按钮绑定单击事件");
           });
        });
    </script>
</head>
<body>
    <button id="one"> 你真还好吗？</button>
</body>
</html>

JQuery 外围函数

$ 是 jQuery 的外围函数，能实现 jQuery 的很多性能。$()就是调用 $ 这个函数

  1. 传入参数为 [函数] 时：

    示意页面加载实现之后。相当于 window.onload = function(){}

  2. 传入参数为 [HTML 字符串] 时：

    会对咱们创立这个 html 标签对象

  3. 传入参数为 [选择器字符串] 时：

    $(“#id 属性值”); id 选择器，依据 id 查问标签对象

    $(“标签名”); 标签名选择器，依据指定的标签名查问标签对象

    $(“.class 属性值”); 类型选择器，能够依据 class 属性查问标签对象

  4. 传入参数为 [DOM 对象] 时：

    会把这个 dom 对象转换为 jQuery 对象

jQuery 对象和 dom 对象辨别

什么是 jQuery 对象？什么是 dom 对象？

DOM 对象

  1. 通过 getElementById()查问进去的标签对象是 Dom 对象
  2. 通过 getElementsByName()查问进去的标签对象是 Dom 对象
  3. 通过 getElementsByTagName()查问进去的标签对象是 Dom 对象
  4. 通过 createElement() 办法创立的对象，是 Dom 对象

DOM 对象 Alert 进去的成果是：[object HTML 标签名 Element]

JQuery 对象

  1. 通过 JQuery 提供的 API 创立的对象，是 JQuery 对象
  2. 通过 JQuery 包装的 Dom 对象，也是 JQuery 对象
  3. 通过 JQuery 提供的 API 查问到的对象，是 JQuery 对象

jQuery 对象 Alert 进去的成果是：[object Object]

jQuery 对象的实质是什么？

jQuery 对象是 dom 对象的数组 + jQuery 提供的一系列性能函数。

jQuery 对象和 Dom 对象应用区别

jQuery 对象不能应用 DOM 对象的属性和办法
DOM 对象也不能应用 jQuery 对象的属性和办法

Dom 对象和 jQuery 对象互转

dom 对象转化为 jQuery 对象

将 DOM 对象传入 $() 中即可

jQuery 对象转为 dom 对象

jQuery 对象 [下标] 取出相应的 DOM 对象

jQuery 选择器

根本选择器

  • #id 属性值：id 选择器，依据 id 查找标签对象
  • .class 属性值：类选择器，依据 class 查找标签对象
  • element 标签名：标签选择器，依据标签名查找标签对象
  • *：星选择器，示意任意的，所有的元素
  • selector1, selector2：组合选择器，合并选择器 1，选择器 2 的后果并返回

演示

// 抉择 id="lastname" 的元素
$("#lastname")

// 抉择 class="intro" 的所有元素
$(".intro");

// 抉择所有 <p> 元素
$("p");

// 抉择所有 <h1>、<div> 和 <p> 元素
$("h1, div, p");

层级选择器

  • ancestor descendant：后辈选择器，在给定的先人元素下匹配所有的后辈元素
  • parent > child：子元素选择器，在给定的父元素下匹配所有的子元素
  • prev + next：街坊元素选择器，匹配所有紧接在 prev 元素后的 next 元素
  • prev ~ siblings：兄弟元素选择器，匹配 prev 元素之后的所有 siblings 元素

演示

// 抉择 <form> 中的所有后辈 <input> 元素
$("form input");

// 抉择 <form> 中的仅子代 <input> 元素
$("form > input");

// 抉择 <div> 之后的一个同级 <span> 元素
$("div + span");

// 抉择 <a> 之后所有的同级 <button> 元素
$("a ~ button");

根本过滤选择器

  • :first：获取第一个元素
  • :last：获取最初一个元素
  • :not(selector)：去除所有与给定选择器匹配的元素
  • :even：匹配所有索引值为偶数的元素，从 0 开始计数
  • :odd：匹配所有索引值为奇数的元素，从 0 开始计数
  • :eq(index)：匹配一个给定索引值的元素
  • :gt(index)：匹配所有大于给定索引值的元素
  • :lt(index)：匹配所有小于给定索引值的元素
  • :header：匹配如 h1, h2, h3 之类的题目元素
  • :animated：匹配所有正在执行动画成果的元素

演示

// 抉择第一个 <input> 元素
$("input:first");

// 抉择最初一个 <a> 元素
$("a:last");

// 所有不为空的输出元素
$("input:not(:empty)");

// 所有偶数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。$("tr:even");

// 所有奇数 <tr> 元素，索引值从 0 开始，第一个元素是偶数 (0)，第二个元素是奇数 (1)，以此类推。$("tr:odd");

// 列表中的第四个元素（index 值从 0 开始）$("ul li:eq(3)");

// 列举 index 大于 3 的元素
$("ul li:gt(3)");

// 所有题目元素 <h1>, <h2> ...
$(":header");

// 所有动画元素
$(":animated");

内容过滤器

  • :contains("text")：匹配蕴含给定文本的元素
  • :empty：匹配所有不蕴含子元素或者文本的空元素
  • :parent：匹配含有子元素或者文本的元素
  • :has(selector)：匹配含有选择器所匹配的元素的元素
  • :hidden：匹配所有不可见元素 display:none 或 input type=hidden

演示

// 所有蕴含文本 "Hello" 的元素
$(":contains('Hello')");

// 所有不为空的输出元素
$("input:not(:empty)");

// 匹配所有含有子元素或者文本的父元素。$(":parent");

// 所有蕴含有 <p> 元素在其内的 <div> 元素
$("div:has(p)");

// 所有暗藏的 <p> 元素
$("p:hidden");

属性过滤器

  • [attribute]：匹配蕴含给定属性的元素
  • [attribute=value]：匹配给定的属性是某个特定值的元素
  • [attribute!=value]：匹配所有不含有指定的属性，或者属性不等于特定值的元素
  • [attribute^=value]：匹配给定的属性是以某些值开始的元素
  • [attribute$=value]：匹配给定的属性是以某些值结尾的元素
  • [attribute|=value]：选取每个带有指定属性的元素，该元素的值等于指定字符串（比方 “en”）或以该字符串后跟连接符作为结尾的字符串（比方 “en-us”）
  • [attribute*=value]：匹配给定的属性是以蕴含某些值的元素
  • [attrSel1][attrSel2][attrSelN]：复合属性选择器，须要同时满足多个条件时应用

演示

// 所有带有 href 属性的元素
$("[href]");

// 所有带有 href 属性且值等于 "default.htm" 的元素
$("[href='default.htm']");

// 所有带有 href 属性且值不等于 "default.htm" 的元素
$("[href!='default.htm']");

// 所有带有 title 属性且值以 "Tom" 结尾的元素
$("[title^='Tom']");

// 所有带有 href 属性且值以 ".jpg" 结尾的元素
$("[href$='.jpg']");

// 所有带有 title 属性且值等于 'Tomorrow' 或者以 'Tomorrow' 后跟连接符作为结尾的字符串
$("[title|='Tomorrow']");

// 所有带有 title 属性且值蕴含字符串 "hello" 的元素
$("[title*='hello']");

// 带有 id 属性，并且 name 属性以 man 结尾的输入框
$("input[id][name$='man']" );

表单过滤器

  • :input：匹配所有 input, textarea, select 和 button 元素
  • :text：匹配所有的文本输入框
  • :password：匹配所有的明码输入框
  • :radio：匹配所有的单选框
  • :checkbox：匹配所有的复选框
  • :submit：匹配所有提交按钮
  • :image：匹配所有 img 标签
  • :reset：匹配所有重置按钮
  • :button：匹配所有 input type=button 按钮
  • :file：匹配所有 input type=file 文件上传框

演示

// 所有 input 元素
$(":input");

// 所有带有 type="text" 的 input 元素
$(":text");

// 所有带有 type="password" 的 input 元素
$(":password");

// 所有带有 type="radio" 的 input 元素
$(":radio");

// 所有带有 type="checkbox" 的 input 元素
$(":checkbox");

// 所有带有 type="submit" 的 input 元素
$(":submit");

// 所有带有 type="image" 的 input 元素
$(":image");

// 所有带有 type="reset" 的 input 元素
$(":reset");

// 所有带有 type="button" 的 input 元素
$(":button");

// 所有带有 type="file" 的 inpu
$(":file");

表单对象属性过滤器

  • :enabled：匹配所有可用元素
  • :disabled：匹配所有不可用元素
  • :checked：匹配所有选中的单选，复选，和下拉列表中选中的 option 标签对象
  • :selected：匹配所有选中的 option

演示

// 所有启用的元素
$(":enabled");

// 所有禁用的元素
$(":disabled");

// 所有选中的复选框选项
$(":checked");

// 所有选定的下拉列表元素
$(":selected");

JQuery 元素筛选

  • eq(index)：获取给定索引的元素（性能与 :eq(index) 统一）
  • first()：获取第一个元素（性能与 :first 统一）
  • last()：获取最初一个元素（性能与 :last 统一）
  • filter(exp)：留下匹配的元素
  • is(exp)：判断是否匹配给定的选择器，只有有一个匹配就返回，true
  • has(exp)：返回蕴含有匹配选择器的元素的元素（性能与 :has(selector) 统一
  • not(exp)：删除匹配选择器的元素（性能与 :not(selector) 统一）
  • children(exp)：返回匹配给定选择器的子元素（性能与 :parent > child 统一）
  • find(exp)：返回匹配给定选择器的后辈元素（性能与 ancestor descendant 统一）
  • next()：返回以后元素的下一个兄弟元素（性能与 prev + next 统一）
  • nextAll()：返回以后元素前面所有的兄弟元素（性能与 prev ~ siblings 统一）
  • nextUntil()：返回以后元素到指定匹配的元素为止的前面元素
  • parent()：返回父元素
  • prev(exp)：返回以后元素的上一个兄弟元素
  • prevAll()：返回以后元素后面所有的兄弟元素
  • prevUnit(exp)：返回以后元素到指定匹配的元素为止的后面元素
  • siblings(exp)：返回所有兄弟元素
  • add()：把 add 匹配的选择器的元素增加到以后 jquery 对象中

JQuery 的属性操作

  • html()：它能够设置和获取起始标签和完结标签中的内容
  • text()：它能够设置和获取起始标签和完结标签中的文本
  • val()：它能够设置和获取表单项的 value 属性值，还能够操作单选、复选、下拉列表的勾选
  • attr()：能够设置和获取属性的值，还能够增加自定义的属性、属性值（但不举荐操作 checked、readOnly、selected、disabled 等等）
  • prop()：能够设置和获取属性的值（只举荐操作 checked、readOnly、selected、disabled 等等）
// 获取 id='one' 的 <div> 元素中的 html 内容
$("div[id='one']").html();

// 设置 id='one' 的 <div> 元素中的 html 内容
$("div[id='one']").html("<span> 我是王多鱼 </span>");// 页面成果为：我是王多鱼

// 获取 id='two' 的 <div> 元素中的 text 内容
$("div[id='two']").text();

// 设置 id='two' 的 <div> 元素中的 text 内容
$("div[id='two']").text("<span> 我是王多鱼 </span>");// 页面成果为：<span> 我是王多鱼 </span>

// 获取 id='three' 且 type='text' 的 <input> 的 value 值
$(":text[id='three']").val();

// 设置 id='three' 且 type='text' 的 <input> 的 value 值
$(":text[id='three']").val("HelloWorld");

// 操作单选、复选、下拉列表的勾选
$(".radio,.checkbox,#single,#multiple").val(["man","game","Japanese","male","female"]);

// 获取第一个复选框的 name 属性值
$(":checkbox:first").attr("name");

// 设置最初一个复选框的 name 属性值
$(":checkbox:last").attr("name","hobbies");

// 为第一个复选框增加自定义的 love='never' 属性值
$(":checkbox:first").attr("love","never");

// 获取索引为 0 的单选框的选中状态
$(":radio:eq(0)").prop("checked");

// 设置索引为 1 的单选框的选中状态
$(":radio:eq(1)").prop("checkbox","true");

案例 -JQuery 全选 / 全不选

案例要求

要求实现 全选 / 全不选 、 全选 、 全不选 、 反选 、 提交 按钮的性能。

案例实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Exercise</title>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function () {
            // 给全选按钮绑定单击事件
            $("#checkAllBtn").click(function () {$(":checkbox").prop("checked", true);
            });
            // 给全不选按钮绑定单击事件
            $("#checkNotAllBtn").click(function () {$(":checkbox").prop("checked", false);
            });
            // 给反选绑定按钮单击事件
            $("#invert").click(function () {
                // 遍历每个 name='sport' 复选框的勾选状态
                $(":checkbox[name='sport']").each(function () {
                    // 进行反选
                    this.checked = !this.checked;
                });
                // 全副 name='sport' 复选框的个数
                let $allNum = $(":checkbox[name='sport']").length;
                // 曾经勾选的 name='sport' 复选框个数
                let $checkedNum = $(":checkbox[name='sport']:checked").length;
                // 判断全选 / 全不选按钮选取状态
                $("#checkAllBox").prop("checked", $allNum === $checkedNum);
            });
            // 给提交按钮绑定单击事件
            $("#submit").click(function () {
                // 创立贮存已选中按钮 value 值的数组
                let checkedValue = [];
                // 遍历 name='sport' 的已选中复选框
                $(":checkbox[name='sport']:checked").each(function () {
                    // 获取 value 值，并放入数组
                    checkedValue.push(this.value);
                });
                // 弹出 value 值数组
                alert(checkedValue);
            });
            // 给全选 / 全不选按钮绑定单击事件
            $("#checkAllBox").click(function () {
                // 通过全选 / 全不选按钮的选中状态给所有 name='sport' 的复选框选中状态赋值
                $(":checkbox[name='sport']").prop("checked",this.checked);
            });
            // 手动全选 name='sport' 复选框，全选 / 全不选复选框也要主动选中
            $(":checkbox[name='sport']").click(function(){
                // 获取全副 name='sport' 复选框数量
                let $allSport = $(":checkbox[name='sport']").length;
                // 获取全副已选中的 name='sport' 复选框数量
                let $allChecked = $(":checkbox[name='sport']:checked").length;
                // 判断全选 / 全不选 checked 状态
                $("#checkAllBox").prop("checked",$allSport === $allChecked);
            });
        });
    </script>
</head>
<body>
<form method="post" action="">
    <span>What's your favorite sport?</span>
    <input type="checkbox" id="checkAllBox"/> 全选 / 全不选
    <br/>
    <input type="checkbox" name="sport" value="football"/>football
    <input type="checkbox" name="sport" value="basketball"/>basketball
    <input type="checkbox" name="sport" value="badminton"/>badminton
    <input type="checkbox" name="sport" value="tableTennis"/>tableTennis
    <br/>
    <input type="button" id="checkAllBtn" value="全选"/>
    <input type="button" id="checkNotAllBtn" value="全不选"/>
    <input type="button" id="invert" value="反选"/>
    <input type="button" id="submit" value="提交"/>
</form>
</body>
</html>

DOM 对象的增删改

外部插入

  • appendTo()：例如a.prependTo(b)，把 a 插入到 b 子元素开端，成为最初一个子元素
  • prependTo()：例如a.prependTo(b)，把 a 插到 b 所有子元素后面，成为第一个子元素

内部插入

  • insertAfter()：例如a.insertAfter(b)，把 a 插到 b 前面，成为同级一元素
  • insertBefore()：例如a.insertBefore(b)，把 a 插到 b 后面，成为同级一元素

替换

  • replaceWith()：例如a.replaceWith(b)，用 b 替换掉所有 a
  • replaceAll()：例如a.replaceAll(b)，用 a 替换掉所有 b

删除

  • remove()：例如a.remove()，删除 a 标签
  • empty()：例如a.empty()，清空 a 标签里的内容

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DOM 对象增删改 </title>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function(){
            // 创立一个 DOM 对象，并增加 class='one' 的 div 中的最初面
            $("<p> 原来我也是一个 Joker</p>").appendTo($("div[class='one']"));
            // 创立一个 DOM 对象，并增加 class='one' 的 div 中的最后面
            $("<a>www.pornhub.com</a><br/>").prependTo($("div[class='one']"));
            // 创立一个 DOM 对象，并增加 class='one' 的 div 外的最后面
            $("<img src=\"\"alt=\" 骗你的，其实没有图片 \"/>").insertBefore($("div[class='one']"));
            // 创立一个 DOM 对象，并增加 class='one' 的 div 外的最初面
            $("<ol> 什么状况啊！你！</ol>").insertAfter($("div[class='one']"));
            // 前替换所有后
            $("<form>\n" +
                "<span> 装逼犯姓名：</span>\n" +
                "<input type=\"text\"/>\n" +
                "</form>").replaceAll($("div[class='two']"));
            // 后替换所有前
            $("div[class='three']").replaceWith("<p> 别叫了，行不行啊！</p>");
            // 删除指定 DOM 对象
            $("div[class='four']:first").remove();
            // 分明指定 DOM 对象中的内容
            $("div[class='four']:first").empty();});
    </script>
</head>
<body>
    <div class="one">
        <span> 严老板都曾经拉了夸，你是真小丑！</span>
    </div>
    <div class="two">
        <span> 不是，我都不晓得，你在装什么？</span>
    </div>
    <div class="two">
        <span> 你就是一个因溜狗！</span>
    </div>
    <div class="three">
        都太经典了，你晓得不？</div>
    <div class="three">
        龙哥的 S6 第一个王者，韩晶亮你懂不懂啊！</div>
    <div class="four">
        上路被三人越塔！打野都不在，我为什么要去啊！不是，不是抬杠！你来通知我，打野都不在，我为什么要去！</div>
    <div class="four">
        来，这个叫尊尼获加的臭 JB 钢筋！我给你房管来，来你给我谈话！你说不明确，今天你妈出门被车撞死！</div>
</body>
</html>

案例 - 从左到右，从右到左

案例要求

做出两个下拉列表，再做出四个按钮。按钮的性能别离为：增加选中项到左边 、 增加全副项到左边 、 增加选中项到右边 、 增加全副项到右边。

案例实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 从左到右，从右到左 </title>
    <script src="jquery-3.5.1.js"></script>
    <style>
        select {
            width: 100px;
            height: 140px;
        }

        div {
            width: 130px;
            float: left;
            text-align: center;
        }
    </style>
    <script>
        $(function () {
            // 实现 "增加选中项到左边" 按钮性能
            $("button:eq(0)").click(function () {$("select:eq(0) > option:selected").appendTo($("select:eq(1)"));
            });
            // 实现 "增加全副项到左边" 按钮性能
            $("button:eq(1)").click(function () {$("select:eq(0) > option").appendTo($("select:eq(1)"));
            });
            // 实现 "增加选中项到右边" 按钮性能
            $("button:eq(2)").click(function () {$("select:eq(1) > option:selected").appendTo($("select:eq(0)"));
            });
            // 实现 "增加全副项到右边" 按钮性能
            $("button:eq(3)").click(function () {$("select:eq(1) > option").appendTo($("select:eq(0)"));
            });
        });
    </script>
</head>
<body>
<div id="left">
    <select multiple="multiple" name="sel01">
        <option value="one">one</option>
        <option value="two">two</option>
        <option value="three">three</option>
        <option value="four">four</option>
        <option value="five">five</option>
        <option value="six">six</option>
        <option value="seven">seven</option>
        <option value="eight">eight</option>
    </select><br/>
    <button> 增加选中项到左边 </button>
    <button> 增加全副项到左边 </button>
</div>
<div id="right">
    <select multiple="multiple" name="sel02"></select><br/>
    <button> 增加选中项到右边 </button>
    <button> 增加全副项到右边 </button>
</div>
</body>
</html>

案例 - 表格的动静增加、删除

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 动静增加、删除表格记录 </title>
    <style>
        #employeeTable {
            border-spacing: 1px;
            background-color: black;
            margin: 80px auto 10px auto;
        }

        th, td {background-color: white;}

        #formDiv {
            width: 250px;
            border-style: solid;
            border-width: 1px;
            margin: 50px auto 10px auto;
            padding: 10px;
        }

        #formDiv input {width: 100%;}

        .word {width: 40px;}

        .inp {width: 200px;}
    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function () {
            //Delete 函数
            let deleteFun = function () {
                // 获取被删除表格行对象
                let $trObj = $(this).parent().parent();
                // 获取被删除表格行 name
                let name = $trObj.find($("td:first")).text();
                // 用户确认删除
                if (confirm("确定删除 [" + name + "] 用户？")) {$trObj.remove();
                }
                // 阻止 a 标签的默认跳转
                return false;
            };
            // 实现提交按钮性能
            $("#addEmpButton").click(function () {
                // 获取输入框中 姓名、邮箱、工资的内容
                let name = $(":text[name='empName']").val();
                let email = $(":text[name='email']").val();
                let salary = $(":text[name='salary']").val();
                // 创立一个新的表格行，将数据增加进去
                let $newTrObj = $("<tr>" +
                    "<td>"+name+"</td>" +
                    "<td>"+email+"</td>" +
                    "<td>"+salary+"</td>" +
                    "<td><a href=\"deleteEmp?id=new\">Delete</a></td>" +
                    "</tr>");
                // 将新的表格行增加进员工表格中
                $newTrObj.appendTo($("#employeeTable"));
                // 与新增加的表格行绑定 Delete 事件
                $newTrObj.find("a").click(deleteFun);
            });
            // 实现 Delete<a> 标签性能
            $("a").click(deleteFun);
        });
    </script>
</head>
<body>
<table id="employeeTable">
    <tr>
        <th>Name</th>
        <th>Email</th>
        <th>Salary</th>
        <th>Delete</th>
    </tr>
    <tr>
        <td>Jason</td>
        <td>[email protected]</td>
        <td>5000</td>
        <td><a href="deleteEmp?id=001">Delete</a></td>
    </tr>
    <tr>
        <td>Bob</td>
        <td>[email protected]</td>
        <td>6000</td>
        <td><a href="deleteEmp?id=002">Delete</a></td>
    </tr>
    <tr>
        <td>Bernardo</td>
        <td>[email protected]</td>
        <td>7000</td>
        <td><a href="deleteEmp?id=003">Delete</a></td>
    </tr>
</table>
<div id="formDiv">
    <h4> 增加新员工 </h4>
    <table>
        <tr>
            <td class="word">name</td>
            <td class="inp">
                <input type="text" name="empName" id="empName"/>
            </td>
        </tr>
        <tr>
            <td class="word">email</td>
            <td class="inp">
                <input type="text" name="email" id="email"/>
            </td>
        </tr>
        <tr>
            <td class="word">salary</td>
            <td class="inp">
                <input type="text" name="salary" id="salary"/>
            </td>
        </tr>
        <tr>
            <td colspan="2" align="center">
                <button id="addEmpButton" value="abc">
                    Submit
                </button>
            </td>
        </tr>
    </table>
</div>
</body>
</html>

JQuery 操作 CSS 款式

  • addClass()：增加款式
  • removeClass()：删除款式
  • toggleClass()：款式存在即删除，不存在即增加

  • offset()：获取和设置元素的坐标地位

    • 属性：top 和 left，别离为到 dom 顶的间隔、和到 dom 左的间隔。

    在设置 offset() 时，必须传入键值对数据。如offset({left:100,top:100})

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Css 款式操作 </title>
    <style>
        div {
            width: 100px;
            height: 260px;
        }

        div.yellowBorder {border: 2px yellow solid;}

        div.redDiv {background-color: red;}

        div.blueBorder {border: 5px blue solid;}
    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function () {// 实现 addClass()按钮性能
            $(":button[value='addClass()']").click(function () {$("div.border").addClass("redDiv yellowBorder");
            });
            // 实现 removeClass()按钮性能
            $(":button[value='removeClass()']").click(function () {$("div.border").removeClass("redDiv");
            });
            // 实现 toggleClass()按钮性能
            $(":button[value='toggleClass()']").click(function () {$("div.border").toggleClass("blueBorder");
            });
            // 实现 offset()按钮的获取性能
            $(":button[value='offset()01']").click(function () {let leftNum = $("div.border").offset().left;
                let topNum = $("div.border").offset().top;
                alert("left:"+leftNum+"top:"+topNum);
            });
            // 实现 offset()按钮的设置性能
            $("#btn05").click(function () {let $offset = $("div.border").offset({
                    top: 100,
                    left: 100
                });
            });
        });
    </script>
</head>
<body>
<table align="center">
    <tr>
        <!-- 空白元素，以便测试 css 款式 -->
        <td>
            <div class="border"></div>
        </td>
        <td>
            <div class="btn">
                <input type="button" value="addClass()" id="btn01"/>
                <input type="button" value="removeClass()" id="btn02"/>
                <input type="button" value="toggleClass()" id="btn03"/>
                <input type="button" value="offset()01" id="btn04"/>
                <input type="button" value="offset()02" id="btn05"/>
            </div>
        </td>
    </tr>
</table>
</body>
</html>

JQuery 操作动画

根本动画

  • show()：将暗藏的元素显示
  • hide()：将可见的元素暗藏
  • toggle()：可见则暗藏，不可见则显示 =

淡入淡出动画

  • fadeIn()：淡入（缓缓可见）
  • fadeOut()：淡出（缓缓隐没）
  • fadeTo()：在指定时长内缓缓的将透明度批改到指定的值。0 通明，1 实现可见，0.5 半透明（此办法较为非凡，第二个参数为透明度，第三个办法才为回调函数）
  • fadeToggle()：淡入则切换为淡出，淡出则切换为淡入

上述所有办法都能够增加两个参数：

  1. 参数一，动画执行的时长
  2. 参数二，动画的回调函数

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery 操作动画演示 </title>
    <style>
        #tableClass {
            border: 1px solid;
            border-collapse: collapse;
            float: left;
        }
        #divClass {
            border: 1px solid;
            float: left;
            width: 300px;
            height: 200px;
            background-color: #0044DD;
        }
        table, td {
            border: 1px solid;
            border-collapse: collapse;
        }
    </style>
    <script src="../javascript/jquery-3.5.1.js"></script>
    <script>
        $(document).ready(function () {// 实现 '暗藏 hide()' 按钮性能
            $("#btn01").click(function () {$("#divClass").hide(2000,function () {alert("暗藏 hide()动画执行实现");
                });
            });
            // 实现 '显示 show()' 按钮性能
            $("#btn02").click(function () {$("#divClass").show(2000, function () {alert("显示 show()动画执行实现");
                });
            });
            // 实现 '切换显示 / 暗藏 toggle()' 按钮性能
            $("#btn03").click(function () {$("#divClass").toggle(3000, function () {alert("切换显示 / 暗藏 toggle()动画执行实现");
                });
            });
            // 实现 '淡出 fadeOut()' 按钮性能
            $("#btn04").click(function () {$("#divClass").fadeOut(1000, function () {alert("淡出 fadeOut()动画执行实现");
                });
            });
            // 实现 '淡入 fadeIn()' 按钮性能
            $("#btn05").click(function () {$("#divClass").fadeIn(2000, function () {alert("淡入 fadeIn()动画执行实现");
                });
            });
            // 实现 '切换淡出 / 淡入 fadeToggle()' 按钮性能
            $("#btn06").click(function () {$("#divClass").fadeToggle(1000, function () {alert("切换淡出 / 淡入 fadeToggle()动画执行实现");
                });
            });
            // 实现 '淡化到 fadeTo()' 按钮性能
            $("#btn07").click(function () {$("#divClass").fadeTo(3000, 0.5, function () {alert("淡化到 fadeTo()动画执行实现");
                });
            });
        });
    </script>
</head>
<body>
<table id="tableClass">
    <tr>
        <td>
            <button id="btn01"> 暗藏 hide()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn02"> 显示 show()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn03"> 显示 / 暗藏切换 toggle()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn04"> 淡出 fadeOut()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn05"> 淡入 fadeIn()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn06"> 淡化切换 fadeToggle()</button>
        </td>
    </tr>
    <tr>
        <td>
            <button id="btn07"> 淡化到 fadeTo()</button>
        </td>
    </tr>
</table>
<div id="divClass"></div>
</body>
</html>

案例 -CSS 动画之品牌展现

案例要求

  1. 点击按钮的时候，暗藏和显示卡西欧之后的品牌。
  2. 当显示全部内容的时候，按钮文本为“显示精简品牌”。而后小三角形向上，所有品牌产品为默认色彩。
  3. 当只显示精简品牌的时候，要暗藏卡西欧之后的品牌，按钮文本为“显示全副品牌”。而后小三形向下，并且把 佳能，尼康的品牌色彩改为红色（给 li 标签增加 promoted 款式即可）

案例实现

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS 动画之商品展现练习 </title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        body {
            font-size: 12px;
            text-align: center;
        }

        a {
            color: #0044DD;
            text-decoration: none;
        }

        a:hover {
            color: #FF5500;
            text-decoration: underline;
        }

        .SubCategoryBox {
            width: 600px;
            margin: 0 auto;
            text-align: center;
            margin-top: 40px;
        }

        .SubCategoryBox ul {list-style: none;}

        .SubCategoryBox ul li {
            display: block;
            float: left;
            width: 200px;
            line-height: 20px;
        }

        .showMore, .showLess {
            clear: both;
            text-align: center;
            paddin-top: 10px;
        }

        .showMore a, .showLess a {
            display: block;
            width: 120px;
            margin: 0 auto;
            line-height: 24px;
            border: 1px solid #AAAAAA;
        }

        .showMore a span {
            padding-left: 15px;
            background: url("img/down.gif") no-repeat 0 0;
        }

        .showLess a span {
            padding-left: 15px;
            background: url("img/up.gif") no-repeat 0 0;
        }

        .promoted a {color: #FF5500;}
    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(function () {
            // 页面初始状态
            $("li:gt(4):not(:last)").hide();
            // 实现展现 / 收起按钮性能
            $("a:last").click(function () {
                // 让上面的品牌显示或暗藏
                $("li:gt(4):not(:last)").toggle();
                // 判断上面的品牌是显示还是暗藏
                if ($("li:gt(4):not(:last)").is(":hidden")) {
                    // 若上面的品牌是暗藏的，则 text 为 '显示全副品牌'，图标为向下
                    $("div div a span").text("显示全副品牌");
                    $("div div").removeClass();
                    $("div div").addClass("showMore")
                    // 除去广告高亮
                    $("li:contains(' 佳能 ')").removeClass("promoted");
                    $("li:contains(' 索尼 ')").removeClass("promoted");
                    $("li:contains(' 三星 ')").removeClass("promoted");
                } else {
                    // 若上面的品牌是显示的，则 text 为 '显示精简品牌'，图标为向上
                    $("div div a span").text("显示精简品牌");
                    $("div div").removeClass();
                    $("div div").addClass("showLess");
                    // 增加广告高亮
                    $("li:contains(' 佳能 ')").addClass("promoted");
                    $("li:contains(' 索尼 ')").addClass("promoted");
                    $("li:contains(' 三星 ')").addClass("promoted");
                }
                // 勾销 <a> 标签主动跳转
                return false;
            });
        });
    </script>
</head>
<body>
<div class="SubCategoryBox">
    <ul>
        <li>
            <a href="#"> 佳能 </a>
            <i>(30440)</i>
        </li>
        <li>
            <a href="#"> 索尼 </a>
            <i>(20001)</i>
        </li>
        <li>
            <a href="#"> 三星 </a>
            <i>(19028)</i>
        </li>
        <li>
            <a href="#"> 尼康 </a>
            <i>(17821)</i>
        </li>
        <li>
            <a href="#"> 松下 </a>
            <i>(12289)</i>
        </li>
        <li>
            <a href="#"> 卡西欧 </a>
            <i>(8242)</i>
        </li>
        <li>
            <a href="#"> 富士 </a>
            <i>(14894)</i>
        </li>
        <li>
            <a href="#"> 柯达 </a>
            <i>(9520)</i>
        </li>
        <li>
            <a href="#"> 宾得 </a>
            <i>(2195)</i>
        </li>
        <li>
            <a href="#"> 理光 </a>
            <i>(4114)</i>
        </li>
        <li>
            <a href="#"> 奥林巴斯 </a>
            <i>(12205)</i>
        </li>
        <li>
            <a href="#"> 明基 </a>
            <i>(1466)</i>
        </li>
        <li>
            <a href="#"> 爱国者 </a>
            <i>(3091)</i>
        </li>
        <li>
            <a href="#"> 小米 </a>
            <i>(1010)</i>
        </li>
        <li>
            <a href="#"> 其余品牌 </a>
            <i>(7275)</i>
        </li>
    </ul>
    <div class="showMore">
        <a href="more.html">
            <span> 显示全副品牌 </span>
        </a>
    </div>
</div>
</body>
</html>

JQuery 操作事件

JQuery 页面加载后事件

什么是 ’JQuery 页面加载后事件 ’?

$(document).ready()

JQuery 页面加载后事件与原生 JS 页面加载后事件的触发程序？

  • JQuery 的 $(document).ready() 先执行
  • 原生 JS 的 window.onload 后执行

JQuery 页面加载后事件与原生 JS 页面加载后事件的触发机会？

  • JQuery 的 $(document).ready() 是浏览器的内核解析完页面的标签，创立好 DOM 对象之后就会马上执行
  • 原生 JS 的 window.onload 除了要等浏览器内核解析完标签创立好 DOM 对象，还要等标签显示时须要的内容加载
    实现能力执行

JQuery 页面加载后事件与原生 JS 页面加载后事件的可执行次数？

  • JQuery 的$(document).ready()，有多少执行多少（顺次）
  • 原生 JS 的 window.onload 再多，也只能执行最初顺次的赋值函数

JQuery 其余常见事件

  • click()：鼠标单击事件（被调用时传入函数为绑定，不传入函数为触发）
  • mouseover()：鼠标移入事件（被调用时传入函数为绑定，不传入函数为触发）
  • mouseout()：鼠标移出事件（被调用时传入函数为绑定，不传入函数为触发）
  • bind()：给元素绑定一个或多个事件
  • one()：给元素绑定一个或多个事件，但其绑定的事件只能被触发一次（应用格局与 bind() 统一）
  • unbind()：解除元素绑定的一个或多个事件（性能与 bind() 相同，调用时只需传入字符串模式的事件名即可）
  • $(document).on(events,[selector],[data],fn) ：动静绑定事件，即便元素是后创立的

演示

//click()绑定单击事件
$("h5").click(function(){alert("h5 的单击事件");
});
//click()触发单击事件
$("h5").click();

//mouseover()绑定鼠标移入事件
$("h5").mouseover(function () {alert("h5 的鼠标移入事件");;
});
//mouseover()触发鼠标移入事件
$("h5").mouseover();

//mouseout()绑定鼠标移出事件
$("h5").mouseout(function () {alert("鼠标移出事件");
});
//mouseout()触发鼠标移出事件
$("h5").mouseout();

//bind()元素绑定三个事件
$("h5").bind("click mouseover mouseout", function () {console.log("别 JB 叫！");
});
//bind()别离触发三个事件
$("h5").click();
$("h5").mouseover();
$("h5").mouseout();

//one()元素绑定三个事件
$("h5").one("click mouseover mouseout", function () {console.log("我说的，眼老板是垃圾！");
});
//one()别离触发三个事件（一个事件只能被触发一次）$("h5").click();
$("h5").mouseover();
$("h5").mouseout();

//unbind()解除两个事件的绑定
$("h5").unbind("mouseover mouseout");
//unbind()解除所有事件的绑定（不传参，示意解除全副事件绑定）$("h5").unbind();

//$(document).on(events,[selector],[data],fn)动静绑定事件
$(document).on("click mouseover mouseout", $("h5"), function(){console.log("我是回调函数");
});

事件冒泡

什么是事件冒泡？

事件的冒泡是指：父子元素同时监听同一个事件，当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery 操作事件 </title>
    <style>
        #ancestor {
            width: 300px;
            height: 300px;
            border: black solid 2px;
        }

        #descendant {
            width: 200px;
            height: 200px;
            border: blue solid 1px;
        }

    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(document).ready(function () {
            // 父元素 div 与子元素 div 绑定同一个事件，// 当子元素 div 的单击事件被触发，// 父元素 div 的单击事件也会被主动触发
            $("div").click(function () {alert("事件冒泡");
            });
        });
    </script>
</head>
<body>
<div id="ancestor">one
    <div id="descendant">two</div>
</div>
</body>
</html>

怎么解决事件冒泡？

在子元素事件函数体内，return false; 能够阻止事件的冒泡传递。

演示

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>JQuery 操作事件 </title>
    <style>
        #ancestor {
            width: 300px;
            height: 300px;
            border: black solid 2px;
        }

        #descendant {
            width: 200px;
            height: 200px;
            border: blue solid 1px;
        }
    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(document).ready(function () {
            // 与下面的是同样的代码，当初只须要加上 return false
            // 即可阻止事件冒泡的产生
            $("div").click(function () {alert("事件冒泡");
                return false;
            });
        });
    </script>
</head>
<body>
<div id="ancestor">one
    <div id="descendant">two</div>
</div>
</body>
</html>

事件对象

什么是事件对象？

事件对象，是封装有触发的事件信息的一个 javascript 对象。

如何获取事件对象？

在给元素绑定事件的时候，在事件的 function(event) 参数列表中增加一个参数，这个参数名，咱们习惯取名为 event。这个 event 就是 javascript 传递参事件处理函数的事件对象。

演示

// 原生 Js 获取事件对象 event
window.onload = function () {document.getElementsByTagName("div")[0].onclick = function (event) {console.log(event);
    };
};

//JQuery 获取事件对象 event
$(document).ready(function () {$("div:first").click(function (event) {console.log(event);
    });
});

事件对象的作用

在咱们应用 bind() 给一个元素一次性绑定多个事件时，咱们该如何别离给这些事件设置独自的函数呢？这个时候，咱们就须要用到事件对象 event 了。

// 应用 bind()给一个元素一次性绑定多个事件
$("div:first").bind("mouseover mouseout click", function (event) {
    // 若是 mouseover 事件，控制台打印 mouseover
    if (event.type == "mouseover") {console.log("mouseover");
    } else if (event.type == "mouseout") {
        // 若是 mouseout 事件，控制台打印 mouseout
        console.log("mouseout");
    } else if (event.type == "click") {
        // 若是 click 事件，控制台打印 click
        console.log("click");
    }
});

案例 - 图片放大追随

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title> 图片追随 </title>
    <style>
        body {text-align: center;}
        #small {
            width: 20%;
            height: 20%;
        }
        #big {
            width: 600px;
            height: 300px;
        }
        #showBig {
            position: absolute;
            display: none;
        }
    </style>
    <script src="jquery-3.5.1.js"></script>
    <script>
        $(document).ready(function () {$("#small").bind("mouseover mouseout mousemove", function (event) {
                // 当鼠标到图片上时，增加大图片
                if (event.type == "mouseover") {$("#showBig").show();

                    // 当鼠标挪动时，大图片也要追随鼠标挪动
                } else if (event.type == "mousemove") {$("#showBig").offset({
                       left: event.pageX + 10,
                       top: event.pageY + 10
                    });

                    // 当鼠标移出图片上时，大图片隐没
                } else if (event.type == "mouseout") {$("#showBig").hide();}
            });
        });
    </script>
</head>
<body>
<img id="small" src="img/wallhaven-6oqzgq.jpg"/>
<div id="showBig">
    <img id="big" src="img/wallhaven-6oqzgq.jpg"/>
</div>
</body>
</html>
退出移动版