【JavaWeb】jQuery 基础
阅读原文时间:2023年07月08日阅读:1

jQuery 基础

顾名思义,它是 JavaScript 和 查询,是辅助 JavaScript 开发的类库。

它的核心思想是 write less, do more. 所以它实现了很多浏览器的兼容问题。

它现在已经成为最流行的 JavaScript 库,在世界前 10000 个访问最多的网站中,有超过 55% 在使用它。

它是免费、开源的,它的语法设计可以使开发更加便捷,例如操作文档对象、选择 DOM 元素、制作动画效果、事件处理、使用 Ajax 以及其他功能。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 体验</title>
<!--    CDN-->
<!--    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>-->
    <script type="text/javascript" src="../lib/jquery.js"></script>
    <script type="text/javascript">
        // 原生方法给按钮绑定单击事件
        window.onload = function () {
            // dom 对象
            let btn01 = document.getElementById("btn01");
            btn01.onclick = function () {
                alert("JS 原生的单击事件")
            }
        };

        // jQuery 给按钮绑定单击事件
        $(function () {
            // jQuery 对象
            let $btn02 = $("#btn02");
            $btn02.click(function () {
                alert("jQuery 原生的单击事件")
            })
        });
    </script>
</head>
<body>
    <button id="btn01">按钮1</button>
    <button id="btn02">按钮2</button>

</body>
</html>

$ 是 jQuery 核心函数,能完成 jQuery 的很多功能。$() 就是调用 $ 这个函数。

对于 $(Obj)

  • 当 Obj 为一个 函数 时,表示页面加载完成之后,相当于 window.inload = function(){}
  • 当 Obj 为一个 HTML 字符串 时,会为我们创建这个 HTML 标签对象
  • 当 Obj 为一个 选择器字符串 时:
    • Obj 为 id 属性值时($(#id 属性值)),即 id 选择器,会根据 id 属性查询标签对象
    • Obj 为 class 属性值时($(.class 属性值)),即 class 选择器,会根据 class 属性查询标签对象
    • Obj 为 标签名时($(标签名)),即标签名选择器,会根据标签名查询标签对象
  • 当 Obj 为一个 函数 时,会把这个 DOM 对象 转换为 jQuery 对象

DOM 对象

  • DOM 对象 Alert 出来的效果是:[object HTML标签名Element]
  • 通过 getElementById() 查询出来的标签对象是 DOM 对象
  • 通过 getElementsByName() 查询出来的标签对象是 DOM 对象
  • 通过 getElementsByTagName() 查询出来的标签对象是 DOM 对象
  • 通过 createElement() 方法创建的对象,是 DOM 对象
  • DOM 对象不能使用 jQuery 对象的属性和方法
  • DOM 对象 转换为 jQuery 对象 -> $( DOM 对象 )

jQuery 对象

  • jQuery 对象 Alert 出来的效果是:[object Object]
  • 通过 jQuery 提供的 API 创建的对象,是 jQuery 对象
  • 通过 jQuery 包装的 DOM 对象,也是 jQuery 对象
  • 通过 jQuery 提供的 API 查询到的对象,是 jQuery 对象
  • jQuery 对象不能使用 DOM 对象的属性和方法
  • jQuery 对象 转换为 DOM 对象 -> jQuery 对象[下标]

jQuery 对象 是 DOM 对象的数组 和 jQuery 提供的一系列功能函数。

jQuery 选择器

基本选择器

  • #ID 选择器:根据 id 查找标签对象
  • .class 选择器:根据 class 查找标签对象
  • element 选择器:根据标签名查找标签对象
  • * 选择器:表示任意的,所有的元素
  • selector1,selector2 组合选择器:合并选择器 1,选择器 2 的结果并返回

层级选择器

  • ancestor descendant 后代选择器 :在给定的祖先元素下匹配所有的后代元素
  • parent > child 子元素选择器:在给定的父元素下匹配所有的子元素
  • prev + next 相邻元素选择器:匹配所有紧接在 prev 元素后的 next 元素
  • prev ~ sibings 之后的兄弟元素选择器:匹配 prev 元素之后的所有 siblings 元素

过滤选择器

基本过滤器

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

内容过滤器

  • :contains(text) 匹配包含给定文本的元素
  • :empty 匹配所有不包含子元素或者文本的空元素
  • :parent 匹配含有子元素或者文本的元素
  • :has(selector) 匹配含有选择器所匹配的元素的元素

属性过滤器

  • [attribute] 匹配包含给定属性的元素
  • [attribute=value] 匹配给定的属性是某个特定值的元素
  • [attribute!=value] 匹配所有不含有指定的属性,或者属性不等于特定值的元素。
  • [attribute^=value] 匹配给定的属性是以某些值开始的元素
  • [attribute$=value] 匹配给定的属性是以某些值结尾的元素
  • [attribute*=value] 匹配给定的属性是以包含某些值的元素
  • [attrSel1][attrSel2][attrSelN] 复合属性选择器,需要同时满足多个条件时使用

表单过滤器

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

表单对象属性过滤器

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

jQuery 元素筛选

  • eq() 获取给定索引的元素 功能跟 :eq() 一样
  • first() 获取第一个元素 功能跟 :first 一样
  • last() 获取最后一个元素 功能跟 :last 一样
  • filter(exp) 留下匹配的元素
  • is(exp) 判断是否匹配给定的选择器,只要有一个匹配就返回 true
  • has(exp) 返回包含有匹配选择器的元素的元素 功能跟 :has 一样
  • not(exp) 删除匹配选择器的元素 功能跟 :not 一样
  • 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() 设置和获取起始标签和结束标签中的内容。跟 dom 属性 innerHTML 一样。
  • text() 设置和获取起始标签和结束标签中的文本。跟 dom 属性 innerText 一样。
  • val() 获取匹配元素集中第一个元素的当前值,或设置每个匹配元素的值。跟 dom 属性 value 一样。它可以同时设置多个表单项的选中状态
  • attr() 获取匹配元素集中第一个元素的属性值,或为每个匹配元素设置一个或多个属性。不推荐操作 checked、readOnly、selected、disabled 等。它还可以操作非标准的属性,比如自定义属性。
  • prop() 获取匹配元素集中第一个元素的属性值,或为每个匹配元素设置一个或多个属性。只推荐操作 checked、readOnly、selected、disabled 等。

不传参数是获取值,传入参数是设置值。

<<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 属性操作</title>
    <script type="text/javascript" src="../lib/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            // 批量操作单选按钮选中状态
            $(":radio").val(["radio2"]);

            // 批量操作多选按钮选中状态
            $(":checkbox").val(["checkbox3", "checkbox2"]);

            // 批量操作多选下拉框选中状态
            $("#multiple").val(["mul2", "mul3", "mul4"]);

            // 批量操作单选下拉框选中状态
            $("#single").val(["sin2"]);

            //
            alert($("#multiple").val());    // mul2,mul3,mul4

            // 也可以简化操作
            $(":radio, :checkbox, #multiple, #single").val(["radio2", "checkbox3", "checkbox2", "mul2", "mul3", "mul4", "sin2"])

        })
    </script>
</head>
<body>
    单选:
    <input name="radio" type="radio" value="radio1">radio1
    <input name="radio" type="radio" value="radio2">radio2
    <br>
    多选:
    <input name="checkbox" type="checkbox" value="checkbox1">checkbox1
    <input name="checkbox" type="checkbox" value="checkbox2">checkbox2
    <input name="checkbox" type="checkbox" value="checkbox3">checkbox3
    <br>
    下拉多选:
    <select id="multiple" multiple="multiple" size="4">
        <option value="mul1">mul1</option>
        <option value="mul2">mul2</option>
        <option value="mul3">mul3</option>
        <option value="mul4">mul4</option>
    </select>
    <br>
    <br>
    <br>
    下拉单选:
    <select id="single">
        <option value="sin1">sin1</option>
        <option value="sin2">sin2</option>
        <option value="sin3">sin3</option>
    </select>

</body>
</html>


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery 属性操作 - 选项 </title>
    <script type="text/javascript" src="../lib/jquery.js"></script>
    <script type="text/javascript">
        $(function () {
            // 给全选按钮绑定单击事件
            $("#checkedAllBtn").click(function () {
                $(":checkbox").prop("checked", true);
            });

            // 给全不选按钮绑定单击事件
            $("#checkedNoBtn").click(function () {
                $(":checkbox").prop("checked", false);
            });

            // 给反选按钮绑定单击事件
            // 查询全部的球类的复选框
            $("#checkedRevBtn").click(function () {
                $(":checkbox[name='items']").each(function () {
                    // 在 each 遍历的 function 函数中,有一个 this 对象,这个 this 对象是当前正在遍历到的 dom 对象
                    this.checked = !this.checked;
                });

                // 检查是否是满选
                let allCount = $(":checkbox[name='items']").length;
                let checkedCount = $(":checkbox[name='items']:checked").length;
                $("#checkAllBox").prop("checked", allCount === checkedCount);
            });

            // 提交按钮的单击事件
            $("#sendBtn").click(function () {
                //
                $(":checkbox[name='items']:checked").each(function () {
                    alert(this.value);
                })
            });

            // 给全选/全不选单选框绑定单击事件
            $("#checkAllBox").click(function () {
                $(":checkbox[name='items']").prop("checked", this.checked);
            })

            // 给全部球类绑定单击事件
            $(":checkbox[name='items']").click(function () {
                let allCount = $(":checkbox[name='items']").length;
                let checkedCount = $(":checkbox[name='items']:checked").length;
                $("#checkAllBox").prop("checked", allCount === checkedCount);
            })
        });
    </script>
</head>
<body>
    <from method = "post" action="">
        您爱好的运动是?<input type="checkbox" id="checkAllBox">全选/全不选
        <br>
        <input type="checkbox" name="items" value="篮球">篮球
        <input type="checkbox" name="items" value="足球">足球
        <input type="checkbox" name="items" value="羽毛球">羽毛球
        <input type="checkbox" name="items" value="乒乓球">乒乓球
        <br>
        <input type="button" id="checkedAllBtn" value="全 选">
        <input type="button" id="checkedNoBtn" value="全不选">
        <input type="button" id="checkedRevBtn" value="反 选">
        <input type="button" id="sendBtn" value="提 交">
    </from>
</body>
</html>
  • appendTo 例如 a.appendTo(b),把 a 插入到 b 所有子元素末尾,成为最后一个子元素

  • prependTo() 例如 a.prependTo(b),把 a 插入到 b 所有子元素前面,成为第一个子元素

  • insertAfter() 例如 a.insertAfter(b),得到 ba

  • insertBefore() 例如 a.insertBefore(b),得到 ab

  • replaceWith() 例如 a.replaceWith(b),用 a 替换掉 b

  • replaceAll() 例如 a.replaceAll(b),用 a 替换掉所有 b

  • remove() 例如 a.remove(),删除 a 标签

  • empty() 例如 a.empty(),清空 a 标签里的内容





    从左到右,从右到左