jQuery笔记

2024-11-12 21:47:38

JQuery

1.jQuery概述

1.1 JavaScript库

仓库: 可以把很多东西放到这个仓库里面。找东西只需要到仓库里面查找到就可以了

JavaScript库:即library,是一个封装好的特定的集合(方法和函数)。从封装一大堆函数的角度理解库，就是在这个库中，封装了很多预先定义好的函数在里面，比如动画animate、hide、show，比如获取元素等

比如jQuery，就是为了快速方便的操作DOM，里面基本都是函数(方法)。

1.2 jQuery的概念

jQuery 是一个快速、简洁的 JavaScript 库，其设计的宗旨是 “write Less,Do More”，即倡导写更少的代码做更多的事情。

jQuery 封装了JavaScript常用的功能代码,优化了 DOM 操作、事件处理、动画设计和 Ajax交互

  • jQuery 的优点
    • 轻量级。核心文件才几十kb，不会影响页面加载速度
    • 跨浏览器兼容。基本兼容了现在主流的浏览器
    • 链式编程、隐式迭代
    • 对事件、样式、动画支持，大大简化了DOM操作
    • 支持插件扩展开发。有着丰富的第三方的插件
    • 例如:树形菜单、日期控件、轮播图等
    • 免费、开源

2.jQuery的基本使用

2.1 jQuery 的下载

官网地址:https://jquery.com/

code.jquery.com/jquery-3.5.1.min.js

版本

  • 1x: 兼容IE 678等低版本浏览器，官网不再更新
  • 2x: 不兼容IE 678等低版本浏览器，官网不再更新
  • 3x: 不兼容IE 678等低版本浏览器，是官方主要更新维护的版本
2.2 jQuery 的入口函数
$(function (){
    //此处是页面 DOM 加载完成的入口
});

$(document).ready(function(){
    //此处是页面DOM加载完成的入口
});
  1. 等着 DOM 结构渲染完毕即可执行内部代码，不必等到所有外部资源加载完成，jQuery 帮我们完成了封装。
  2. 相当于原生 javascript 中的DOMContentLoaded。
2.4 jQuery 的*对象$
  1. $是jQuery的别称，在代码中可以使用jQuery代替$,但一般为了方便,通常都直接使用$。
  2. $是jQuery的*对象，相当于原生JavaScript中的window。把元素利用$包装成jQuery对象，就可以调用jQuery的方法。
2.5 jQuery 对象和 DOM 对象
  1. 用原生 JS 获取来的对象就是 DOM 对象
  2. jQuery方法获取的元素就是jQuery对象。
  3. jQuery 对象只能使用 jQuery 方法，DOM 对象则使用原生的 Javascirpt 属性和方法

DOM 对象与jQuery对象之间是可以相互转换的。

因为原生 js 比 jQuery 更大，原生的一些属性和方法jQuery没有给我们封装.要想使用这些属性和方法需要把jQuery对象转换为DOM对象才能使用。

  1. DOM 对象转换为jQuery对象:$(DOM对象)
  2. jQuery对象转换为 DOM 对象(两种方式)
$('div')[index]
// index是索引号
$('div'),get(index)

3.jQuery的选择器

3.1 jQuery的基础选择器

原生JS获取元素方式很多，很杂，而且兼容性情况不一致，因此jQuery给我们做了封装，使获取元素统一标准。

$("选择器") //里面选择器直接写CSS选择器即可，但是要加引号
名称 用法 描述
ID选择器 $(“#id”) 获取指定ID的元素
全选选择器 $(“*”) 匹配所有元素
类选择器 $(“.class”) 获取同一类class的元素
标签选择器 $(“div”) 获取同一类标签的所有元素
并集选择器 $(“div,p,li”) 选取多个元素
交集选择器 $(“li.current”) 交集元素
3.2 层级选择器
名称 用法 描述
子代选择器 $(“ul>li”) 使用>号，获取亲儿子层级的元素；注意，并不会获取孙子层级的元素
后代选择器 $(“ul li”) 使用空格，代表后代选择器，获取ul下的所有li元素，包括孙子等
3.3 隐式迭代

遍历内部DOM元素(伪数组形式存储)的过程就叫做隐式迭代。

简单理解: 给匹配到的所有元素进行循环遍历，执行相应的方法，而不用我们再进行循环，简化我们的操作方便我们调用。

3.4 jQuery筛选选择器
语法 用法 描述
:first $(‘li:first’) 获取第一个li元素
:last $(‘li:last’) 获取最后一个li元素
:eq(index) $(“li:eq(2)”) 获取到的li元素中，选择索引号为2的元素，索引号index从0开始
:odd $(“li:odd”) 获取到的li元素中，选择索引号为奇数的元素
:even $(“li:even”) 获取到的li元素中，选择索引号为偶数的元素
3.5 jQuery筛选方法(重点)
语法 用法 说明
parent() $(“li”).parent(); 查找父级
children(selector) $(“ul”).children(“li”); 相当于$(“ul>li”)，最近一级（亲儿子）
find(selector) $(“ul”).find(“li”); 相当于$(“ul li”)，后代选择器
siblings(selector) $(“.first”).siblings(“li”); 查找兄弟节点，不包括自身
nextAll([expr]) $(“.first”).nextAll() 查找当前元素之后所有的同辈元素
prevtAll([expr]) $(“.last”).prevAll() 查找当前元素之前所有的同辈元素
hasClass(class) $(“div”).hasClass(“protected”) 检查当前的元素是否含有某个特定的类，如果有，则返回true
eq(index) $(“li”).eq(2); 相当于$("li:eq(2)"),index从0开始
3.6 jQuery的排他思想

思路: 利用siblings()筛选方法选出除自身外元素修改为默认样式

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>jQuery的排他思想</title>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    </head>

    <body>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <button>按钮</button>
        <script>
            $(function () {
                $("button").click(function () {
                    $(this).css("background-color", "red");
                    // $("button").not(this).css("background-color", "");
                    $(this).siblings("button").css("background-color", "");
                });
            });
        </script>
    </body>
</html>

index()方法

$("button").click(function () {
    // index() 方法可以获取当前元素在其同辈元素中的位置索引
    console.log($(this).index());
});

4. jQuery样式操作

4.1 操作CSS方法

jQuery可以使用css方法来修改简单元素样式;也可以操作类，修改多个样式

  1. 参数只写属性名，则是返回属性值
$(this).css("'color");
  1. 参数是属性名，属性值，逗号分隔，是设置一组样式，属性必须加引号，值如果是数字可以不用跟单位和引号
$(this).css("color", "red");
  1. 参数可以是对象形式，方便设置多组样式。属性名和属性值用冒号隔开，属性可以不用加引号
$(this).css({"color":"white","font-size":"20px"});
4.2 设置类样式方法

作用等同于以前的 classList，可以操作类样式，注意操作类里面的参数不要加点

  1. 添加类
$("div").addClass("current");
  1. 删除类
$("div").removeClass("current");
  1. 切换类
$("div").toggleClass("current");

5. jQuery效果

5.1 元素的显示和隐藏

  1. 显示语法规范

    show([speed,[easing],[fn]])

  2. 显示参数

  • 参数都可以省略，无动画直接显示。

  • speed: 三种预定速度之一字符串(“slow”，“normal”,or “fast”)或表示动画时长的毫秒数值(如:1000)

  • easing: (Optional)用来指定切换效果，默认是 “swing” ，可用参数 “linear”

  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次

  1. 隐藏语法规范

    show([speed,[easing],[fn]])

  2. 隐藏参数

  • 参数都可以省略，无动画直接显示。

  • speed: 三种预定速度之一字符串(“slow”，“normal”,or “fast”)或表示动画时长的毫秒数值(如:1000)

  • easing: (Optional)用来指定切换效果，默认是 “swing” ，可用参数 “linear”

  • fn: 回调函数，在动画完成时执行的函数，每个元素执行一次

切换语法规范

toggle([speed,[easing],[fn]]);
5.2 滑动效果

  1. 滑动切换效果语法规范

    slideToggle([speed,[easing],[fn]]);

  2. 滑动切换效果参数

    • 参数都可以省略。
    • speed: 三种预定速度之一的字符串(“slow”，“normal”,or “fast”)或表示动画时长的毫秒数值(如:1000)
    • easing: (Optional)用来指定切换效果，默认是 “swing” 可用参数 “linear”
    • fn: 回调函数，在动画完成时执行的函数,每个元素执行一次。
5.3 事件切换
hover([over,]out)
  1. over:鼠标移到元素上要触发的函数(相当于mouseenter)
  2. out:鼠标移出元素要触发的函数(相当于mouseleave)

如果只写一个函数,鼠标移入和离开都会触发这个函数

5.4 动画队列及其停止排队方法
  1. 动画或效果队列

动画或者效果一旦触发就会执行，如果多次触发，就造成多个动画或者效果排队执行

2.停止排队

stop();
  1. stop()方法用于停止动画或效果,
  2. 注意:stop()写到动画或者效果的前面，相当于停止结束上一次的动画。
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>导航栏</title>
        <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
        <style>
            ul {
                list-style: none;
                padding: 0;
            }
            ul li {
                float: left;
                margin-right: 10px;
                position: relative;
            }
            ul li span {
                display: inline-block;
                width: 50px;
                height: 20px;
                margin: 0;
                text-align: center;
            }
            ul li .content {
                display: none;
                width: 100%;
                height: 290px;
                background-color: blue;
                position: absolute;
                top: 100%;
                left: 0;
            }
        </style>
    </head>
    <body>
        <div class="box">
            <ul>
                <li>
                    <span>导航</span>
                    <div class="content"></div>
                </li>
                <li>
                    <span>导航</span>
                    <div class="content"></div>
                </li>
                <li>
                    <span>导航</span>
                    <div class="content"></div>
                </li>
                <li>
                    <span>导航</span>
                    <div class="content"></div>
                </li>
                <li>
                    <span>导航</span>
                    <div class="content"></div>
                </li>
            </ul>
        </div>
        <script>
            $("ul>li").hover(function () {
                // 先停止动画
                $(this).children(".content").stop().slideToggle();
            });
        </script>
    </body>
</html>
5.5 淡入淡出效果
  1. 淡入效果语法规范
fadeIn([speed,[easing],[fn]])
  1. 淡入效果参数
    • 参数都可以省略。
    • speed:三种预定速度之一的字符串(“slow”，“normal”,or “fast”)或表示动画时长的亳秒数值(如:1000)
    • easing: (Optional)用来指定切换效果，默认是 “swing” 可用参数 “linear”
    • fn: 回调函数，在动画完成时执行的函数,每个元素执行一次。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>淡入淡出效果</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style>
      div {
        width: 200px;
        height: 200px;
        background-color: red;
      }
    </style>
  </head>
  <body>
    <button>淡入</button>
    <button>淡出</button>
    <button>淡入淡出切换</button>
    <button>修改透明度</button>
    <div></div>
    <script>
      $(function () {});
      $("button")
        .eq(0)
        .click(function () {
          $("div").fadeIn();
        });
      $("button")
        .eq(1)
        .click(function () {
          $("div").fadeOut();
        });
      $("button")
        .eq(2)
        .click(function () {
          $("div").fadeToggle();
        });
      $("button")
        .eq(3)
        .click(function () {
          $("div").fadeTo("slow", 0.5);
        });
    </script>
  </body>
</html>
5.6 自定义动画animate
  1. 语法
animate(params,[speed],[easing],[fn]);
  1. 参数
    • params????*想要更改的样式属性,以对象形式传递，必须写。属性名可以不用带引号，如果是复合属性则需要采取驼峰命名法。**其余参数都可以省略。
    • speed:三种预定速度之一的字符串(“slow”，“normal”,or “fast”)或表示动画时长的亳秒数值(如:1000)
    • easing: (Optional)用来指定切换效果，默认是 “swing” 可用参数 “linear”
    • fn: 回调函数，在动画完成时执行的函数,每个元素执行一次。
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>动画效果</title>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
    <style>
      div {
        position: absolute;
        width: 200px;
        height: 200px;
        background-color: blue;
      }
    </style>
  </head>
  <body>
    <div></div>
    <script>
        // 实现自定义动画
      $(function () {
        $("div").click(function () {
          $(this).animate(
            {
              left: "250px",
              top: "250px",
              width: "100px",
              height: "100px",
              opacity: 0.5,
            },
            1000
          );
        });
      });
    </script>
  </body>
</html>

6. jQuery的属性操作

6.1 设置或获取元素固有属性值 prop()

所谓元素固有属性就是元素本身自带的属性，比如<a>元素里面的 href,比如 <input>元素里面的type。

  1. 获取属性语法
prop("属性")
  1. 设置属性语法
prop("属性"，"属性值")
6.2 设置或获取元素自定义属性值 attr()

用户自己给元素添加的属性，我们称为自定义属性。比如给 div 添加 index=“1“

  1. 获取属性语法
attr("属性")//类似原生 getAttribute()
  1. 设置属性语法
attr("属性"，"属性值")//类似原生 setAttribute()
6.3 数据缓存 data()

data()方法可以在指定的元素上存取数据，并不会修改 DOM 元素结构。一旦页面刷新，之前存放的数据都将被移除

1.附加数据语法

data("name"，"value")// 向被选元素附加数据

2.获取数据语法

date("name")// 向被选元素获取数据

同时，还可以读取 HTML5 自定义属性 data-index，得到的是数字型

<span data-index="1">test</span>

console.log($("span").data("index")) <- 输出1 ->

7.jQuery内容文本值

主要针对元素的内容还有表单的值操作。

7.1 普通元素内容html()(相当于原生innerHTML)
html() //获取元素内容
html("内容") // 设置元素内容值
7.2 text()文本内容值
text()
text("文本内容")
7.3 val()表单值
val()
val(
上一篇：【Spring Boot 入门四】Spring Boot安全机制 - 保护你的应用安全

下一篇：AI驱动的轻量级笔记应用Blinko-参考文档