系列学习前端之第 6 章:一文掌握 jQuery(熟悉即可)

前言:为什么说 jQuery 熟悉即可,已日渐过时?

作为前端开发中常用的两个库或框架:Vue.js 和 jQuery。不少开发者想要学习 Vue.js 时,都会有一个疑惑:学习 Vue.js 是否一定要学习 jQuery?

从几个方面来对比大家就清晰了:

(1)数据驱动

jQueryVue
需要一直操作 DOM以数据为导向,将业务逻辑分开

(2)组件化

jQueryVue
组件化支持较少支持组件化开发,每个组件负责独立的事情

(3)实时响应

jQueryVue
需要通过操作 DOM 来完成页面上元素的添加或删除等操作Vue.js 的数据驱动方式所体现的一个最显著的优势是实时响应。只要数据发生变化,视图就会自动更新

(4)数据绑定

jQueryVue
数据绑定需要通过手动操作 DOM 实现Vue.js 中的数据绑定能够有效地减少对 DOM 的直接操作。通过简单的模板语法,可以轻松地将数据绑定到视图上,实现数据的自动更新

(5)插件支持

jQueryVue
 jQuery 依赖于插件来扩展自身的功能,如表单验证、模板引擎等拥有丰富的插件,并且不断地有新的插件加入。这些插件能够扩展 Vue.js 的功能,提高程序的可维护性和扩展性

(6)语法特色

jQueryVue
jQuery 是标准 HTML 和 CSS 语法的增强版,开发者需要掌握较多的 JavaScript 和 DOM 操作知识Vue.js 所采用的是模板语法,不需要掌握太多的 JavaScript,即可快速上手开发

实际工作中,如何选择 jQuery 和 Vue?

  1.  需求适配:如果是需要适配现有的 jQuery 项目,那么就没有必要去深入学习 Vue.js。反之,如果是新项目或者要对项目进行重构,推荐使用 Vue.js。
  2. 前后端分离:Vue.js 更适合在前后端分离的项目中使用,这样可以更加明确地划分前后端职责,是一种更加先进的开发模式。而 jQuery 更适合传统的后端渲染页面应用开发模式。
  3. 应用复杂度:当应用复杂度较高时,Vue.js 的组件化开发模式会更好地满足项目需求。而当开发需求较简单时,jQuery 的操作 DOM 和事件绑定的方式更为方便快捷。
  4. 开发成本:尽管 Vue.js 有一定的学习成本,但是随着项目规模的扩大和需求变化,学习 Vue.js 能够有效提高开发效率,节省开发成本。而 jQuery 的学习成本相对较低,但是在项目规模较大,需求变化频繁的情况下,开发成本会随着项目规模的扩大而逐渐变高。

总的来说:Vue.js 以数据驱动和组件化为特色,能够有效地提高开发效率和可维护性,适用于较为复杂和前后端分离的项目。而 jQuery 则以操作 DOM 为特色,适用于需求简单、项目规模较小的项目。Vue 已经成为前端主流开发语言之一,是找工作、开发项目的首选。但不排除有很多公司有老旧的 jQuery 项目需要维护。从另外一个层面来说,掌握多一门语言绝不是坏事。

1、简单认识 jQuery

1.1 jQuery 是什么(What)?

  • jQuery 是一个 JavaScript 库,还提供了大量的插件,即插即用。
  • jQuery 极大地简化了 JavaScript 编程。write less,do more(写得少,做得多)
  • jQuery 封装简化 DOM 操作(CRUD) / Ajax,包括:HTML元素的选取和操作以及事件绑定,CSS的操作,JavaScript 特效和动画,封装 Ajax 操作等等。
  • jQuery 很容易学习。有 HTML、CSS、JavaScript 基础的人很容易上手。

1.2 为什么要使用 jQuery(Why)?

  • 强大选择器:方便快速查找DOM元素
  • 读写合一:同一个函数,根据传参不同,可以进行读数据 或 写数据操作
  • 链式调用:可以通过(.)不断调用 jQuery 对象的方法
  • 浏览器兼容,且 jQuery 是目前最流行的 JS 代码库

1.3 如何使用 jQuery(How)?

1.3.1 引入jQuery库

引入 jQuery 库分为“本地引入”和“CDN远程引入”,同时,引入的版本分为“测试版”与“生产版”(压缩版)。

我们平时开发、测试的时候,使用“测试版”,方便调试和打印日志。

上生产环境,使用“生产版”或者“CDN远程引入”,因为它的文件体积更小,访问速度更快,可减轻服务器压力。

1、jQuery 在线教程:https://www.runoob.com/jquery/jquery-tutorial.html

2、jQuery 在线参考手册:https://www.runoob.com/manual/jquery/

3、jQuery 1.7 离线版中文手册 chm:https://pan.baidu.com/s/1yigT3MWHfYgobk_HthaV6A?pwd=1717 提取码: 1717

4、jQuery 1.11.3 离线版中文手册 chm:https://pan.baidu.com/s/1k3slbwsGkl1cSZjj7z87gQ?pwd=xmde

提取码:xmde

5、jQuery 官网:https://jquery.com/

什么是 CDN?

CDN 的全称是Content Delivery Network,即内容分发网络。其基本思路是尽可能避开互联网上有可能影响数据传输速度和稳定性的瓶颈和环节,使内容传输的更快、更稳定。通过在网络各处放置节点服务器所构成的在现有的互联网基础之上的一层智能虚拟网络,CDN系统能够实时地根据网络流量和各节点的连接、负载状况以及到用户的距离和响应时间等综合信息将用户的请求重新导向离用户最近的服务节点上。其目的是使用户可就近取得所需内容,解决 Internet 网络拥挤的状况,提高用户访问网站的响应速度。

常用的 CDN 网站:

1、bootcdn:https://www.bootcdn.cn/

例如:https://cdn.bootcdn.net/ajax/libs/jquery/1.10.1/jquery.min.js

2、staticfile:https://www.staticfile.org/

1.3.2 使用jQuery

使用 jQuery 函数:$ 或者 jQuery

使用 jQuery 对象:$xxx(执行$() 或者 jQuery() 得到的)

js 源文件可以在官网下载,这里提供截图的 js 文件:https://pan.baidu.com/s/1SMp9fb0IzIdQWplhg-60SA?pwd=u7kp

提取码:u7kp

1.4 jQuery 不同版本的区别

jQuery主要有 3 个不同的大版本,分别是 1.x、2.x 和 3.x 这 3 个不同的大版本。

1.x :是 jQuery 比较早期的版本,主要兼容老的浏览器,包括 IE6、IE7等浏览器。如果需要兼容IE6及以上版本浏览器,那么可以选择使用 jQuery 1.x 版本。其缺点是文件体积比较大。

2.x:是 jQuery  发展后期的版本,主要舍弃了对低版本浏览器的兼容性(部分 IE8 及以下版本不再支持),将文件大小减小,并提高了性能,提高执行效率。

3.x:是 jQuery  的最新版本,支持所有现代浏览器,不再兼容旧的浏览器,完全不再支持 IE8 及以下的版本。提供了一些新的 API,这意味着可以使用更多的 HTML5 和 CSS3 特性。另外,jQuery 3.x还完全移除了一些早期版本中被弃用的方法和特性。

2、jQuery的 2 把利器:核心函数&核心对象

2.1 jQuery 的 HelloWorld

2.1.1 需求:点击“打招呼”按钮,弹框提示输入的值

代码结构:

01-HelloWorld.html 源代码:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jQuery HelloWorld</title>
    <!-- 使用 JavaScript 原生 DOM -->
    <script>
        window.onload = function () {
            let btn1 = document.getElementById("btn1");
            btn1.onclick = function () {
                let yourWord = document.getElementById("yourWord").value;
                alert(yourWord);
            }
        }
    </script>

    <!-- 使用 jQuery 实现 -->
    <!-- 本地引入 js 文件 -->
    <script src="../js/jquery-1.10.1.js"></script>
    <!-- 远程 CDN 引入,要求电脑联网 -->
    <!-- <script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.10.1/jquery.js"></script> -->
    <script>
        /*
        1、使用 jQuery 核心函数:$ / jQuery
        2、使用 jQuery 核心对象:执行 $() 或者 jQuery() 返回的对象
        */
        $(function () {//文档加载完成后执行
            let btn2 = $("#btn2");
            btn2.click(function () {//给 btn2 绑定监听事件
                let yourWord = $("#yourWord").val();
                alert(yourWord);
            })
        })

        /*
        // 上面的代码可以改为以下的方式,也就是引入 jQuery 文件后,$和jQuery等价
        jQuery(function () {
            let btn2 = jQuery("#btn2");
            btn2.click(function () {
                let yourWord = jQuery("#yourWord").val();
                alert(yourWord);
            })
        })
        */
    </script>
</head>

<body>
    <!-- 
        需求:点击“打招呼”按钮,弹框提示输入的值
     -->
    请输入您要说的话:
    <input type="text" id="yourWord" /> <br> <br>
    <button id="btn1">打招呼(JavaScript 原生版)</button> <br> <br>
    <button id="btn2">打招呼(jQuery 版)</button>
</body>

</html>

你是否很疑惑为什么没有在 <script> 标签中使用 type="text/javascript" ?

在 HTML5 中,不必那样做了。JavaScript 是 HTML5 以及所有现代浏览器中的默认脚本语言!

文档就绪事件

注意到在实例中的 jQuery 函数位于一个函数中:

$(function(){
   // 逻辑代码...
});

这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码,即在 DOM 加载完成后才可以对 DOM 进行操作。如果在文档没有完全加载之前就运行函数,操作可能失败。另外一种写法(比较麻烦):

$(document).ready(function(){

   // 逻辑代码...
});

运行结果:

文本框输入消息,点击 JavaScript 原生版按钮、jQuery版按钮。

可以在浏览器的 Console(控制台) 窗口中使用 $.fn.jquery 命令查看当前 jQuery 使用的版本:

2.2 简单解读 jQuery 源代码

1、jQuery 是匿名函数调用

2、jQuery 函数执行后,返回的是实例对象

3、引入 jQuery 文件后,给 window 添加了 2 个属性。jQuery 与 $ 都是指向 jQuery。

2.3 jQuery 核心函数

jQuery 文件只对外暴露了 2 个函数,即:$ 或 jQuery

引入 jQuery 库后,直接使用 $ (jQuery用得比较少),当函数用:$(xxx),当对象用:$.xxx(),记忆口诀:当 $ 作为函数用的时候,后面紧跟着的是函数括号 ();当 $ 当做对象用的是,后面紧跟着的是英文点 . 去调用对象的方法,调用方法后一般都是返回对象结果。

我们研究函数,就是研究给函数传递不同的参数后,有什么功能,返回什么结果。

平时学习、工作可以对照中文手册:

实践:

需求1:点击按钮,显示按钮的文本,增加新的文本输入框

需求2:输出数组中的元素值,当等于某个值时不再往后执行

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>核心函数</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        // 需求1:点击按钮,显示按钮的文本,增加新的文本输入框
        $(function () {//绑定文档加载完成后的回调函数
            $("#btn").click(function () {//绑定按钮的点击事件函数
                //这里的 this,指的是发生事件的 dom 元素,即:id=btn 的元素
                //方式1:元素.innerHTML(原生方式)
                console.log("this.innerHTML 输出:" + this.innerHTML);
                //方式2:参数如果是 dom 对象,jQuery 会把它封装成 jQuery 对象,封装后就可以使用 jQuery 的方法
                console.log("$(this).html() 输出:" + $(this).html());

                //创建标签对象并封装成jQuery对象,追加到 div 元素中
                $(`<input type="text" name="say2" /><br/>`).appendTo("div");
            })
        })

        // 需求2:输出数组中的元素值,当等于某个值时不再往后执行
        let arr = [1, 3, 5, 7, 9];
        $.each(arr, function (index, item) {
            if (item == 7) {//当 item 值等于 7 时,不再往后执行,结束循环
                return false;
            }
            console.log("index=" + index + ",item=" + item);
        })

    </script>
</head>

<body>
    <div>
        <button id="btn">点我</button>
        <br>
        <input type="text" name="say"><br>
    </div>
</body>

</html>

结果:

打开 jQuery 1.7中文帮助手册,找到“工具”目录下,找到 jQuery.each() 函数,里面有详细的使用说明。回调函数有2个参数:第一个参数是数组索引,第二个参数是变量的内容。如果要退出循环,使用 return false

另外,我们找到“属性”下的 html 函数,如果没有传递参数,则是获取元素的内容;如果传递了参数,则是设置元素的内容。这就是 jQuery 读写合一的特性:同一个函数,根据传参不同,可以进行读数据 或 写数据操作。

2.4 jQuery 核心对象

jQuery 对象可以通过执行函数后获取到:$xxx(执行$() 或者 jQuery() 得到),执行jQuery函数返回的就是 jQuery 对象。使用 jQuery 对象: $obj.xxx()

jQuery 对象内部包含的是 dom 元素对象的伪数组(可能只有一个元素),jQuery 对象拥有很多有用的属性和方法,让程序员能方便操作 dom。什么叫做伪数组?就是没有数组的专有特性,比如:push() pop()

我们研究对象,主要是研究对象的属性、方法。jQuery 对象的基本属性、方法有如下。

2.4.1 基本行为

  • size() / length:jQuery 对象中元素的个数
  • index([selector|element]):搜索匹配的元素,并返回相应元素的索引值,从0开始计数。
  • get([index]):取得其中一个匹配的元素。 index表示取得第几个匹配的元素。
  • each():以每一个匹配的元素作为上下文来执行一个函数。

2.4.2 属性

操作内部标签的属性或值

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>核心对象</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        $(function () {
            // 需求1:统计一共有多少个按钮
            let buttons = $("button");//获取所有的 button 元素
            console.log("buttons.size()=" + buttons.size(), ",buttons.lenth=" + buttons.length);
            //输出:buttons.size()=5 ,buttons.lenth=5

            // 需求2:取出第3个 button 元素的文本
            console.log("第3个button元素的文本 buttons[2].innerHTML=" + buttons[2].innerHTML);
            //输出:第3个button元素的文本 buttons[2].innerHTML=哈佛大学

            console.log("第3个button元素的文本 buttons.get(2).innerHTML=" + buttons.get(2).innerHTML);
            //输出:第3个button元素的文本 buttons.get(2).innerHTML=哈佛大学

            //需求3:输出所有 button 标签的文本
            buttons.each(function () {//不使用参数的方式
                console.log("each不加参数:" + this.innerHTML);
            })
            /*
            输出:
            each不加参数:清华大学
            each不加参数:北京大学
            each不加参数:哈佛大学
            each不加参数:牛津大学
            each不加参数:复旦大学
            */

            buttons.each(function (index, item) {//使用参数的方式
                console.log("index=" + index + ",item=" + item.innerHTML);
            })
            /*
            输出:
            index=0,item=清华大学
            index=1,item=北京大学
            index=2,item=哈佛大学
            index=3,item=牛津大学
            index=4,item=复旦大学
            */

            //需求4:输出“牛津大学”按钮的下标
            console.log("“牛津大学”按钮的下标是:" + $("#niujin").index());
            //输出:“牛津大学”按钮的下标是:3


            //什么是伪数组?
            /**
             * 它是 Object 对象
             * 它有 length 属性
             * 它有数值下标属性
             * 没有数组特别的方法:forEach()、push()、pop()、splice()
             */

            //需求5:证明 buttons 不是数组,而是伪数组
            console.log("buttons是否是数组$.isArray():" + $.isArray(buttons));
            //输出:buttons是否是数组$.isArray():false

            console.log("buttons是否是数组 instanceof Array:" + (buttons instanceof Array));
            //输出:buttons是否是数组 instanceof Array:false

            //非数组对象调用 forEach 函数返回 undefined
            console.log("buttons.forEach=" + buttons.forEach);
            //输出:buttons.forEach=undefined
        })
    </script>
</head>

<body>
    <button id="qinghua">清华大学</button>
    <button id="beida">北京大学</button>
    <button id="hafo">哈佛大学</button>
    <button id="niujin">牛津大学</button>
    <button id="fudan">复旦大学</button>
</body>

</html>

2.4.3 CSS

2.4.3.1 选择器

jQuery 选择器的基本语法就是 CSS 的选择器语法,并在此基础上做了一些扩展;只有调用 $,并将选择器作为参数传入才能起到作用。$(selector)作用:根据选择器规则在整个文档中查找所有匹配的标签的数组(伪数组),并封装成 jQuery 对象返回。

2.4.3.2 选择器分类
  1. 基本选择器
  2. 层次选择器
  3. 过滤选择器
  4. 表单选择器
2.4.3.2.1 基本选择器
  • id选择器,语法:$("#xxx"),例如:$("#p1")
  • 元素选择器,语法:$("xxx"),例如:$("div")
  • 类选择器,语法:$(".xxx"),例如:$(".good")
  • 通配符选择器,语法:$("*"),例如:$("*")
  • 并集选择器,不同元素之间以逗号隔开,语法:$("选择器1, 选择器2, 选择器3 "),例如:$("a,button")
  • 交集选择器,不用隔开(记忆:它们要贴在一起写才算是相交),语法:$("选择器1选择器2"),例如:$("li.good")

 使用“交集选择器”注意:

1. 有标签名,标签名必须写在前面。
2. 交集选择器中不可能出现两个元素选择器 ,因为一个元素,不可能即是 p 元素又是 span 元素。
3. 用的最多的交集选择器是:元素选择器配合类名选择器,例如: li.good

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>选择器</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        $(function () {// 绑定文档加载完成后的回调函数
            // 需求1:选择 id=p1 的元素,并设置背景颜色为 red
            $("#p1").css("background", "red");

            // 需求2:选择所有的 div 元素,并设置背景颜色为 green
            $("div").css("background", "green");

            // 需求3:选择所有 class 属性为 good 的元素,并设置字体大小为30px
            $(".good").css("font-size", "30px");

            // 需求4:选择所有的 a 和 button 元素,并设置背景颜色为 yellow
            $("a,button").css("background", "yellow");

            // 需求5:选择所有 class 属性为 good 的 li 元素,并设置背景颜色为 orange
            $("li.good").css("background", "orange");

        })
    </script>
</head>

<body>
    <p id="p1">我是p元素(id=p1)</p>
    <div id="div1" class="good">我是div1(class="good")</div>
    <div id="div2">我是div2</div>
    <span class="good">我是span(class="good")</span>
    <br>
    <a id="jump" href="http://www.baidu.com" target="_blank">点我,去百度首页</a>
    <button id="btn">我是一个按钮,可以开启未来</button>
    <br>
    <ul>
        <li>北京</li>
        <li title="bigCity">上海(title="bigCity")</li>
        <li class="good">广州(class="good")</li>
        <li title="bigCity">深圳(title="bigCity")</li>
    </ul>
</body>

</html>

效果:

2.4.3.2.21 层次选择器
  • 查找子元素(也叫直接后代元素),语法:$("parent>child"),例如:$("ul>li")
  • 查找后代元素(指的是所有后代元素,包括子元素),语法:$("ancestor descendant"),例如:$("ul span")
  • 查找兄弟元素,紧接在 prev 元素后的 next 元素,语法:$("prev+next"),例如:$(".shanghai+li")
  • 查找某个元素后的所有兄弟元素,语法:$("prev~siblings"),例如:$("ul .shenzhen~*")
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>层次选择器</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        $(function () {// 绑定文档加载完成后的回调函数
            //查找所有后代元素(包括子元素)语法:ancestor descendant
            // 需求1、选中ul下所有的的span(在给定的祖先元素下匹配所有的后代元素)
            $("ul span").css("background", "red");

            // 查找子元素(直接后代)的语法:parent>child
            // 需求2、选中ul下所有的子元素p
            $("ul>p").css("background", "yellow");

            //查找兄弟元素,紧接在 prev 元素后的 next 元素,语法:prev+next
            // 需求3、选中class为 shanghai 的下一个li
            $(".shanghai+li").css("background", "green");

            //查找匹配 prev 元素之后的所有 siblings 元素,语法:prev~siblings
            //需求4、选中 ul 下的class为shenzhen的元素后面的所有兄弟元素
            $("ul .shenzhen~*").css("background", "purple");
        })
    </script>
</head>

<body>
    <ul>
        <li>我去过北京</li>
        <li class="shanghai">我去过上海</li>
        <li title="guilin"><a href="http://www.baidu.com">我去过桂林</a></li>
        <li class="shanghai">
            <p>我去过东方明珠塔</p>
            <p class="lujiazui">我去过陆家嘴</p>
        </li>
        <span>我去过重庆</span>
        <li class="shenzhen"><span>我去过深圳</span></li>
        <h2>我去过沈阳</h2>
        <h3>我去过苏州</h3>
    </ul>
</body>

</html>

效果:

   

2.4.3.2.3 过滤选择器

在原有选择器匹配的元素中,进一步进行过滤的选择器

  • 基本
  • 内容
  • 可见性
  • 属性
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>过滤选择器</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        $(function () {// 绑定文档加载完成后的回调函数
            // 需求1、选择第一个 div
            $("div:first").css("background", "green");

            // 需求2、选择最后一个 class 为 nice 的元素
            $(".nice:last").css("background", "black");

            // 需求3、选择所有 class 属性不为 nice 的 div
            $("div:not(.nice)").css("background", "yellow");

            // 需求4、选择第二个和第三个 li 元素
            $("li:eq(1)").css("background", "red");
            $("li:eq(2)").css("background", "orange");

            // 需求5、选择内容为“我喜欢做饭”的li
            $(`li:contains("我喜欢做饭")`).css("background", "pink");

            // 需求6、选择隐藏的 li,并输出其内容
            console.log($("li:hidden")[0].innerHTML);

            // 需求7、选择有 title 属性的 li 元素
            $("li[title]").css("font-size", "30px");

            // 需求8、选择所有 title 属性为 nice 的 li 元素
            $(`li[title="games"]`).css("color", "white");

        })
    </script>
</head>

<body>
    <div id="div1" class="nice">class=nice的div1</div>
    <div id="div2" class="nice">class=nice的div2</div>
    <div id="div3">div3</div>
    <span class="nice">class=nice的span元素</span>
    <br>
    <ul>
        <li>我的爱好很多</li>
        <li title="games">我喜欢玩传奇</li>
        <li title="games">我喜欢打王者</li>
        <li title="coking">我喜欢做饭</li>
        <li class="nice">我喜欢KTV,class=nice</li>
        <li style="display: none;">我本来的隐藏的元素</li>
    </ul>
</body>

</html>

效果:

   

2.4.3.2.4 表单选择器
  • 表单
  • 表单对象属性
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>表单选择器</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        $(function () {// 绑定文档加载完成后的回调函数
            //需求1:选择不可用的文本输入框
            $(":text:disabled").css("background", "red");

            //需求2:显示选择爱好的个数
            console.log("爱好的个数=" + $(":checkbox:checked").length);

            //需求3:显示选择的城市名称
            $(":submit").click(function () {
                let city = $("select>option:selected").html();
                city = $("select").val();
                console.log("选择的城市名称=" + city);
            })
        })
    </script>
</head>

<body>
    <form>
        用户名: <input type="text" /><br>
        密 码: <input type="password" /><br>
        爱 好:
        <input type="checkbox" checked="checked" />唱歌
        <input type="checkbox" />编程
        <input type="checkbox" checked="checked" />羽毛球 <br>
        性 别:
        <input type="radio" name="sex" value='male' />男
        <input type="radio" name="sex" value='female' />女<br>
        邮 箱: <input type="text" name="email" disabled="disabled" /><br>
        所在地:
        <select>
            <option value="北京">北京</option>
            <option value="深圳" selected="selected">深圳</option>
            <option value="上海">上海</option>
        </select><br>
        <input type="submit" value="提交" />
    </form>
</body>

</html>

效果:

  

1. 操作任意属性

   attr():操作属性值为非布尔值的属性
   removeAttr():删除属性
   prop():专门操作属性值为布尔值的属性

2. 操作class属性

   addClass(classValue):添加 class 属性
   removeClass(classValue):移除指定class属性

3. 操作HTML代码/文本/值

   html():读写标签体文本
   val():读写标签的value

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>属性</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        $(function () {// 绑定文档加载完成后的回调函数
            // attr(): 操作属性值为非布尔值的属性
            // prop(): 专门操作属性值为布尔值的属性

            //需求1:读取第一个 div 的 class 属性
            console.log($("div:first").attr("class"));

            //需求2:给所有的 div 设置 name 属性为 study
            $("div").attr("name", "study");
            //测试输出
            console.log($("div:first").attr("name"));

            //需求3:移除所有的 div 的 title 属性
            $("div").removeAttr("title");
            //测试输出
            console.log($("div:first").attr("title"));

            //需求4:给所有的 div 添加 class="meet"
            $("div").addClass("meet");
            //测试输出
            console.log($("div:first").attr("class"));

            //需求5:移除所有的 div 的 class=nice
            $("div").removeClass("nice");
            //测试输出
            console.log($("div:first").attr("class"));

            //需求6:得到最后一个li的标签体文本
            console.log($("li:last").html());//输出:我本来的隐藏的元素

            //需求7:设置第一个 li 的标签体为 "<h2>哈哈哈哈哈哈哈</h2>"
            $("li:first").html("<h2>哈哈哈哈哈哈哈</h2>");

            //需求8:得到输入框中的 value 值
            console.log($(":text").val());

            //需求9:将输入框的值设置为:伦敦大学
            $(":text").val("伦敦大学");

            //需求10:点击“全选”、“全不选”按钮实现全选、全不选
            let checkboxArr = $(":checkbox");
            $("#btn1").click(function () {
                checkboxArr.prop("checked", true);
            });

            $("#btn2").click(function () {
                checkboxArr.prop("checked", false);
            });
        })
    </script>
</head>

<body>
    <input type="text" name="username" value="清华大学" />
    <div id="div1" class="nice">class=nice的div1</div>
    <div id="div2" class="nice">class=nice的div2</div>
    <div id="div3">div3</div>
    <span class="nice">class=nice的span元素</span>
    <br>
    <ul>
        <li>我的爱好很多</li>
        <li title="games">我喜欢玩传奇</li>
        <li title="games">我喜欢打王者</li>
        <li title="coking">我喜欢做饭</li>
        <li class="nice">我喜欢KTV,class=nice</li>
        <li style="display: none;">我本来的隐藏的元素</li>
    </ul>
    <br>
    <input type="checkbox" value="爬山">爬山
    <input type="checkbox" value="骑行">骑行
    <input type="checkbox" value="钓鱼">钓鱼
    <br>
    <button id="btn1">全选</button>
    <button id="btn2">全不选</button>
</body>

</html>

效果:

  

更多选择器参考下列表格:

 选择器在线参考手册:https://www.runoob.com/cssref/css-selectors.html

选择器示例示例说明CSS
.class.intro选择所有class="intro"的元素1
#id#firstname选择所有id="firstname"的元素1
**选择所有元素2
elementp选择所有<p>元素1
element,elementdiv,p选择所有<div>元素和 <p> 元素1
element.classp.hometown选择所有 class="hometown" 的 <p> 元素1
element elementdiv p选择<div>元素内的所有<p>元素1
element>elementdiv>p选择所有父级是 <div> 元素的 <p> 元素2
element+elementdiv+p选择所有紧跟在 <div> 元素之后的第一个 <p> 元素2
[attribute][target]选择所有带有target属性元素2
[attribute=value][target=-blank]选择所有使用target="-blank"的元素2
[attribute~=value][title~=flower]选择标题属性包含单词"flower"的所有元素2
[attribute|=language][lang|=en]选择 lang 属性等于 en,或者以 en- 为开头的所有元素2
:linka:link选择所有未访问链接1
:visiteda:visited选择所有访问过的链接1
:activea:active选择活动链接1
:hovera:hover选择鼠标在链接上面时1
:focusinput:focus选择具有焦点的输入元素2
:first-letterp:first-letter选择每一个<p>元素的第一个字母1
:first-linep:first-line选择每一个<p>元素的第一行1
:first-childp:first-child指定只有当<p>元素是其父级的第一个子级的样式。2
:beforep:before在每个<p>元素之前插入内容2
:afterp:after在每个<p>元素之后插入内容2
:lang(language)p:lang(it)选择一个lang属性的起始值="it"的所有<p>元素2
element1~element2p~ul选择p元素之后的每一个ul元素3
[attribute^=value]a[src^="https"]选择每一个src属性的值以"https"开头的元素3
[attribute$=value]a[src$=".pdf"]选择每一个src属性的值以".pdf"结尾的元素3
[attribute*=value]a[src*="runoob"]选择每一个src属性的值包含子字符串"runoob"的元素3
:first-of-typep:first-of-type选择每个p元素是其父级的第一个p元素3
:last-of-typep:last-of-type选择每个p元素是其父级的最后一个p元素3
:only-of-typep:only-of-type选择每个p元素是其父级的唯一p元素3
:only-childp:only-child选择每个p元素是其父级的唯一子元素3
:nth-child(n)p:nth-child(2)选择每个p元素是其父级的第二个子元素3
:nth-last-child(n)p:nth-last-child(2)选择每个p元素的是其父级的第二个子元素,从最后一个子项计数3
:nth-of-type(n)p:nth-of-type(2)选择每个p元素是其父级的第二个p元素3
:nth-last-of-type(n)p:nth-last-of-type(2)选择每个p元素的是其父级的第二个p元素,从最后一个子项计数3
:last-childp:last-child选择每个p元素是其父级的最后一个子级。3
:root:root选择文档的根元素3
:emptyp:empty选择每个没有任何子级的p元素(包括文本节点)3
:target#news:target选择当前活动的#news元素(包含该锚名称的点击的URL)3
:enabledinput:enabled选择每一个已启用的输入元素3
:disabledinput:disabled选择每一个禁用的输入元素3
:checkedinput:checked选择每个选中的输入元素3
:not(selector):not(p)选择每个并非p元素的元素3
::selection::selection匹配元素中被用户选中或处于高亮状态的部分3
:out-of-range:out-of-range匹配值在指定区间之外的input元素3
:in-range:in-range匹配值在指定区间之内的input元素3
:read-write:read-write用于匹配可读及可写的元素3
:read-only:read-only用于匹配设置 "readonly"(只读) 属性的元素3
:optional:optional用于匹配可选的输入元素3
:required:required用于匹配设置了 "required" 属性的元素3
:valid:valid用于匹配输入值为合法的元素3
:invalid:invalid用于匹配输入值为非法的元素3

2.4.4 CSS

2.4.4.1 style样式
  • css(styleName): 根据样式名得到对应的值
  • css(styleName, value): 设置一个样式
  • css({多个样式对}): 设置多个样式
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>css</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        $(function () {// 绑定文档加载完成后的回调函数
            //需求1:得到第一个标签的颜色
            console.log($("p:first").css("color"));//输出:rgb(0, 0, 255)

            //需求2:设置所有 span 标签的背景颜色为 orange
            $("span").css("background", "orange");

            //需求3:设置第2个p标签的字体颜色=#FF2288 背景=yellow,宽=300px,高=30px
            $("p:eq(1)").css({
                color: "#FF2288",
                background: "yellow",
                width: "300px",
                height: "30px"
            })

        })
    </script>
</head>

<body>
    <span>马云</span>
    <p style="color:blue">让天下没有难做的生意!</p>
    <br>
    <span>雷军</span>
    <p style="color:red">小米,为发烧而生!</p>
</body>

</html>

效果:

2.4.4.2 位置坐标
  • offset(): 读/写当前元素坐标(原点是页面左上角)
  • position(): 读当前元素坐标(原点是父元素左上角)
  • scrollTop()/scrollLeft(): 读/写元素/页面的滚动条坐标
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>offset</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        $(function () {// 绑定文档加载完成后的回调函数
            /* 
            需求1:点击 btn1
            打印 div1 相对于页面左上角的位置
            打印 div2 相对于页面左上角的位置
            打印 div1 相对于父元素左上角的位置
            打印 div2 相对于父元素左上角的位置
            */
            $("#btn1").click(function () {
                let offset1 = $(".div1").offset();
                // 打印 div1 相对于页面左上角的位置
                console.log("offset1=", offset1.left, offset1.top);

                let offset2 = $(".div2").offset();
                // 打印 div2 相对于页面左上角的位置
                console.log("offset2=", offset2.left, offset2.top);

                // 打印 div1 相对于父元素左上角的位置
                let position1 = $(".div1").position();
                console.log("position1=", position1.left, position1.top);

                // 打印 div2 相对于父元素左上角的位置
                let position2 = $(".div2").position();
                console.log("position2=", position2.left, position2.top);

            });

            // 需求2:点击 btn2 设置 div2 相对于页面的左上角的位置
            $("#btn2").click(function () {
                $(".div2").offset({
                    left: "50",//注意不能使用像素单位px,否则失效
                    top: "100" //注意不能使用像素单位px,否则失效
                });
                //输出验证
                let offset3 = $(".div2").offset();
                console.log("offset3=", offset3.left, offset3.top);
            })

        })
    </script>
</head>

<body style="height: 1000px;">
    <div class="div1">
        <div class="div2">测试offset</div>
    </div>

    <div class="div3">
        <button id="btn1">读取 offset 和 position </button>
        <button id="btn2">设置offset</button>
    </div>

    <style type="text/css">
        * {
            margin: 0px;
        }

        /* 设置 class=div1 的样式 */
        .div1 {
            /* 绝对定位 */
            position: absolute;
            width: 200px;
            height: 200px;
            left: 10px;
            top: 20px;
            background: green;
        }

        /* 设置 class=div2 的样式 */
        .div2 {
            /* 绝对定位 */
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50px;
            background: red;
        }

        /* 设置 class=div3 的样式 */
        .div3 {
            /* 绝对定位 */
            position: absolute;
            top: 250px;
        }
    </style>
</body>

</html>

效果:

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素滚动</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        $(function () {// 绑定文档加载完成后的回调函数
            //需求1:得到 div 或者页面滚动条的坐标
            $("#btn1").click(function () {
                console.log($("div").scrollTop())
                console.log($("html").scrollTop() + $("body").scrollTop())
                console.log($(document.documentElement).scrollTop() + $(document.body).scrollTop()) // 兼容IE/Chrome
            })

            //需求2: 让div或页面的滚动条滚动到指定位置
            $("#btn2").click(function () {
                $("div").scrollTop(200)
                $("html,body").scrollTop(300)
            })

        })
    </script>
</head>

<body style="height: 1000px;">
    <div style="border:1px solid black;width:100px;height:150px;overflow:auto">
        “轻舟已过万重山”出自唐代诗人李白的《早发白帝城》。
        这句诗描绘了一幅轻舟快速穿越重重山峦的壮丽画面,寓含了诗人因遇赦而心情愉悦的情境。
        同时,这句诗也常被用来形容人们在面对困难时,勇往直前、无所畏惧的精神风貌。
        这句诗不仅具有文学价值,也富含人生哲理。它告诉我们,在人生的旅途中,无论遇到多少艰难险阻,
        只要我们保持积极的心态,坚定信念,勇往直前,就一定能够克服一切困难,到达理想的彼岸。
        此外,这句诗也体现了李白独特的诗歌风格,他善于运用生动的形象和富有想象力的语言,将自然景观与人生哲理相结合,
        创作出既具有艺术美感又富含深刻内涵的诗歌作品。
        因此,“轻舟已过万重山”不仅是一句优美的诗句,更是一种积极向上、勇往直前的人生态度的象征。
        小时候背这句古诗是如此轻松,步入而立之年才听懂其中的人生道理。
    </div>
    <br>
    <br>
    <br>
    <button id="btn1">得到scrollTop</button>
    <button id="btn2">设置scrollTop</button>
</body>

</html>

效果:

2.4.4.3 尺寸
  • width()/height(): 内容尺寸,width/height
  • innerWidth()/innerHeight(): 内部尺寸,innerHeight=height+padding(注意有上下2个)、innerWidth=width+padding(注意有左右2个)
  • outerWidth()/outerHeight(): 外部尺寸,outerWidth=width+padding+border 如果是true, 加上margin。  outerHeight=height+padding+border  如果是true, 加上margin
<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>元素的尺寸</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        $(function () {// 绑定文档加载完成后的回调函数
            // 需求1:获取内容尺寸
            let $div = $("div");
            console.log("width=" + $div.width(), "height=" + $div.height());

            //需求2:获取内部尺寸。innerHeight=height+padding(注意有上下2个)、innerWidth=width+padding(注意有左右2个)
            console.log("innerWidth=" + $div.innerWidth(), "innerHeight=" + $div.innerHeight());

            //需求3:获取外部尺寸。outerWidth=width+padding+border 如果是true, 加上margin。  outerHeight=height+padding+border  如果是true, 加上margin
            console.log("outerWidth=" + $div.outerWidth(), "outerHeight=" + $div.outerHeight());
            console.log("outerWidth=" + $div.outerWidth(true), "outerHeight=" + $div.outerHeight(true));
        })
    </script>
</head>

<body>

    <div>
        <textarea name="textarea" id="textarea" cols="50" rows="10">
                《你曾是少年》 S.H.E
            许多年前,你有一双清澈的双眼。
            奔跑起来,像是一道春天的闪电。
            想看遍这世界,去最遥远的远方。
            感觉有双翅膀,能飞越高山和海洋。
            许多年前,你曾是个朴素的少年。
            爱上一个人,就不怕付出自己一生。
            相信爱会永恒,相信每个陌生人。
            相信你会成为最想成为的人。
        </textarea>
    </div>

    <style>
        div {
            width: 400px;
            height: 160px;
            background: red;
            padding: 10px;
            border: 10px #fbd850 solid;
            margin: 10px;
        }
    </style>
</body>

</html>

效果:

2.4.5 筛选

根据指定的规则过滤内部的标签,在 jQuery 对象中的元素对象数组中过滤出一部分元素来

            1. first()

            2. last()

            3. eq(index|-index)

            4. filter(selector)

            5. not(selector)

            6. has(selector) 筛选有某个标签

            7. children():在子标签中找

            8. find():后代标签中找

            9. parent():父标签

            10. prevAll():前面所有的兄弟标签

            11. nextAll():后面所有的兄弟标签

            12.siblings():前后所有的兄弟标签

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>筛选-过滤</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        $(function () {// 绑定文档加载完成后的回调函数
            /*
            在 jQuery 对象中的元素对象数组中过滤出一部分元素来
            1. first()
            2. last()
            3. eq(index|-index)
            4. filter(selector)
            5. not(selector)
            6. has(selector) 筛选有某个标签
            7. children():在子标签中找
            8. find():后代标签中找
            9. parent():父标签
            10. prevAll():前面所有的兄弟标签
            11. nextAll():后面所有的兄弟标签
            12.siblings():前后所有的兄弟标签
            */

            let liArr = $("ul>li");
            $.each(liArr, function (index, item) {
                console.log("index=" + index + ",item=" + item.innerHTML);
            })

            // 需求1:获取 ul 下 li 标签的第一个
            $(liArr.first()).css("font-size", "30px");
            $(liArr[0]).css("color", "red");

            //需求2:获取 ul 下 li 标签的最后一个
            $(liArr.last()).css("color", "blue");

            //需求3:获取 ul 下 li 标签的第三个
            $(liArr.eq(2)).css("color", "orange");

            //需求4:获取 ul 下 li 标签 title = games 的元素
            $(liArr.filter("[title=games]")).css("background", "#999999");

            //需求5:获取 ul 下 li 标签中 title 属性不是 games 的
            $(liArr.not("[title=games]")).css("text-decoration", "underline");
            $(liArr.filter("[title!=games]").filter("[title]")).css("font-family", "楷体");

            //需求6:获取 ul 下 li 标签有 span 子标签的
            $(liArr.has("span")).css("background", "green");

            let $olArr = $("ol");
            // 需求7:ol 标签的第2个 span 子标签
            $olArr.children("span:eq(1)").css("font-size", "30px");

            //需求8:ol 标签的第二个 span 后代标签
            $olArr.find("span:eq(1)").css("color", "red");

            //需求9:ol 标签的父标签
            $olArr.parent().css("font-family", "黑体");

            //需求10:ol 中 title="beijing" 的前面所有 li 标签
            $("[title=beijing]").prevAll("li").css("background", "purple");

            // 需求11: title="beijing"的li标签的所有兄弟标签
            $("[title=beijing]").siblings("li").css("text-decoration", "underline");

        })
    </script>
</head>

<body>
    <ul>
        <li>我的爱好很多</li>
        <li title="games">我喜欢玩传奇</li>
        <li title="games">我喜欢打王者</li>
        <li title="coking">我喜欢做饭</li>
        <li class="ktv">我喜欢KTV,class=ktv</li>
        <li><span>再小的个体,也有品牌</span></li>
        <li class="chess">我喜欢玩下棋</li>
    </ul>
    <br>
    <li>我爬围墙出走了</li>
    <br>
    <ol>
        <span>重庆</span>
        <li title="shenzhen" class="city">深圳</li>
        <li title="beijing">北京</li>
        <li class="city"><span>上海</span></li>
        <li class="city">广州</li>
        <span class="city">武汉</span>
    </ol>
</body>

</html>

效果:

2.4.5 文档操作

1. 添加/替换元素
  * append(content):    向当前匹配的所有元素内部的最后插入指定内容
  * prepend(content):    向当前匹配的所有元素内部的最前面插入指定内容
  * before(content):    将指定内容插入到当前所有匹配元素的前面
  * after(content):    将指定内容插入到当前所有匹配元素的后面替换节点
  * replaceWith(content):    用指定内容替换所有匹配的标签删除节点
2. 删除元素
  * empty():    删除所有匹配元素的子元素,掏空(自己还在)
  * remove():    删除所有匹配的元素,将自己及内部的孩子都删除

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>文档操作</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        $(function () {// 绑定文档加载完成后的回调函数
            let $ul = $("ul");
            // 需求1:在 ul 后面添加一个 span
            $(`<span>我是添加的span</span>`).appendTo($ul);

            //需求2:在 ul 前面添加一个 li
            $(`<li>我是添加的li</li>`).prependTo($ul);

            //需求3:在 li 下的 title=coking 前面添加一个 li
            $ul.children("li[title=coking]").before(`<li>你会做饭吗?</li>`);

            //需求4:在 li 下的 title=coking 后面添加一个 li
            $ul.children("li[title=coking]").after(`<li>我还会吃!</li>`);

            //需求5:把 title=games 全部替换为 p 标签
            $("ul>li[title=games]").replaceWith(`<p>replaceWith把我们替换成 p </p>`);

            //需求6:移除 class = chess 后面的所有 li
            $(".chess~li").remove();
            //$(".chess~li").empty();
        })
    </script>
</head>

<body>
    <ul>
        <li>我的爱好很多</li>
        <li title="games">我喜欢玩传奇</li>
        <li title="games">我喜欢打王者</li>
        <li title="coking">我喜欢做饭</li>
        <li class="ktv">我喜欢KTV,class=ktv</li>
        <li><span>再小的个体,也有品牌</span></li>
        <li class="chess">我喜欢玩下棋</li>
        <li id="fight">还会打架</li>
        <li class="gun">还会玩枪</li>
    </ul>
    <br>
    <li>我爬围墙出走了</li>
</body>

</html>

效果:

2.4.6 事件

2.4.6.1 绑定事件、解绑事件

    * eventName(function(){}):绑定对应事件名的监听,    例如:$('#btn').click(function(){});
    * on('eventName', function(){}):通用的绑定事件监听, 例如:$('#btn').on('click', function(){})

优缺点:
    eventName: 编码方便, 但只能加一个监听, 且有的事件监听不支持
    on: 编码不方便, 可以添加多个监听, 且更通用


    * 常用: click,mouseenter/mouseleave,mouseover/mouseout,focus/blur, hover(function(){}, function(){})

解绑事件:

off('eventName'):如果不加 eventName 则是取消绑定所有事件监听

  * 事件坐标
     * event.offsetX: 原点是当前元素左上角
     * event.clientX: 原点是窗口左上角
     * event.pageX: 原点是页面左上角
  * 事件相关
    * 停止事件冒泡: event.stopPropagation()
    * 阻止事件的默认行为: event.preventDefault() 

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件绑定与解绑</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        $(function () {// 绑定文档加载完成后的回调函数
            //需求1:给 class=out 绑定监听事件
            $("#out").click(function () {
                console.log("id=out 方式1:触发了 click 事件");
            });

            $("#out").on("click", function () {
                console.log("id=out 方式2:触发了 on click 事件");
            });

            //需求2:给 id=content 绑定鼠标移入、移除的事件监听
            $("#content").mouseenter(function () {
                console.log("id=content 方式1:鼠标进入事件 mouseenter");
            });
            $("#content").mouseleave(function () {
                console.log("id=content 方式1:鼠标离开事件 mouseleave");
            });

            $("#content").on("mouseenter", function () {
                console.log("id=content 方式2:鼠标进入事件 on=mouseenter");
            });

            $("#content").on("mouseleave", function () {
                console.log("id=content 方式2:鼠标离开事件 on=mouseleave");
            });

            $("#content").hover(function () {
                console.log("id=content 方式3:鼠标进入事件 hover");
            }, function () {
                console.log("id=content 方式3:鼠标离开事件");
            });

            //需求3:点击 btn1 解除 id=content 的所有 mouseenter事件监听
            $("#btn1").click(function () {
                $("#content").off("mouseenter");
                console.log("id=content 的 mouseenter 事件监听被解除");
            })

            //需求4:点击 btn2 解除 id=content 的所有事件监听
            $("#btn2").click(function () {
                $("#content").off();
                console.log("id=content 的所有事件监听被解除");
            })

            //需求5: 点击 btn3 得到事件坐标
            $("#btn3").click(function (event) { // event事件对象
                console.log("offsetX、offsetY=" + event.offsetX, event.offsetY) // 原点为事件元素的左上角
                console.log("clientX、clientY=" + event.clientX, event.clientY) // 原点为窗口的左上角
                console.log("pageX、pageY=" + event.pageX, event.pageY) // 原点为页面的左上角
            })

            // 需求6:点击 content 区域,外部点击监听不响应
            $(".content").click(function () {
                console.log("点击了 content 区域");
                //停止事件冒泡
                event.stopPropagation();
            })

            // 需求7:点击链接,如果当前时间是偶数,则不跳转
            $("#test4").click(function (event) {
                let now = Date.now() % 2;
                console.log("now=" + now);
                if (now === 0) {
                    event.preventDefault();
                }
            })

        })
    </script>
</head>

<body style="height: 1000px;">
    <div id="out">
        <div id="content" style="border:1px solid black;width:100px;height:150px;overflow:auto">
            “轻舟已过万重山”出自唐代诗人李白的《早发白帝城》。
            这句诗描绘了一幅轻舟快速穿越重重山峦的壮丽画面,寓含了诗人因遇赦而心情愉悦的情境。
            同时,这句诗也常被用来形容人们在面对困难时,勇往直前、无所畏惧的精神风貌。
            这句诗不仅具有文学价值,也富含人生哲理。它告诉我们,在人生的旅途中,无论遇到多少艰难险阻,
            只要我们保持积极的心态,坚定信念,勇往直前,就一定能够克服一切困难,到达理想的彼岸。
            此外,这句诗也体现了李白独特的诗歌风格,他善于运用生动的形象和富有想象力的语言,将自然景观与人生哲理相结合,
            创作出既具有艺术美感又富含深刻内涵的诗歌作品。
            因此,“轻舟已过万重山”不仅是一句优美的诗句,更是一种积极向上、勇往直前的人生态度的象征。
            小时候背这句古诗是如此轻松,步入而立之年才听懂其中的人生道理。
        </div>
    </div>
    <br>
    <br>
    <br>
    <button id="btn1">取消绑定 mouseover 事件</button>
    <button id="btn2">取消绑定所有事件</button>
    <button id="btn3">测试事件坐标</button>
    <a href="http://www.baidu.com" id="test4" target="_blank">去百度首页</a>
</body>

</body>

</html>

效果:

问:如何 区别 mouseover 与 mouseenter ?
  • mouseover:在移入当前元素和子元素时都会触发, 对应移出事件是:mouseout
  • mouseenter:只在移入当前元素时才触发, 对应移出事件是:mouseleave
  • hover()使用的就是 mouseenter() 和 mouseleave(),也就是移入、移出当前元素才触发

2.4.6.3 事件委托

1. 事件委托(委派/代理):

     * 将多个子元素(li)的事件监听委托给父辈元素(ul)处理

     * 监听回调是加在了父辈元素上

     * 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ul)

     * 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数

2. 事件委托的2方:

     * 委托方: 业主  li

     * 被委托方: 中介  ol

3. 使用事件委托的好处

     * 添加新的子元素, 自动有事件响应处理

     * 减少事件监听的数量: n==>1

4. jQuery的事件委托API

     * 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)

     * 移除事件委托: $(parentSelector).undelegate(eventName)

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>事件委托</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        $(function () {// 绑定文档加载完成后的回调函数
            //绑定事件监听的问题: 新加的元素没有监听
            //需求1:点击 li 背景变蓝色
            $("ul>li").click(function () {
                this.style.background = "pink";
            });

            //需求2:点击按钮,增加一个新 li
            $("#btn1").click(function () {
                $("ul").append(`<li>周星驰</li>`);
            })

            /*
            1. 事件委托(委派/代理):
                * 将多个子元素(li)的事件监听委托给父辈元素(ol)处理
                * 监听回调是加在了父辈元素上
                * 当操作任何一个子元素(li)时, 事件会冒泡到父辈元素(ol)
                * 父辈元素不会直接处理事件, 而是根据event.target得到发生事件的子元素(li), 通过这个子元素调用事件回调函数
            2. 事件委托的2方:
                * 委托方: 业主  li
                * 被委托方: 中介  ol
            3. 使用事件委托的好处
                * 添加新的子元素, 自动有事件响应处理
                * 减少事件监听的数量: n==>1
            4. jQuery的事件委托API
                * 设置事件委托: $(parentSelector).delegate(childrenSelector, eventName, callback)
                * 移除事件委托: $(parentSelector).undelegate(eventName)
            */

            //设置事件委托
            $("ol").delegate("li", "click", function () {
                console.log("将多个子元素(li)的事件监听委托给父辈元素(ol)处理");
                this.style.background = "green";
            });

            //点击按钮2,增加 li
            $("#btn2").click(function () {
                $("ol").append(`<li>姚明</li>`);
            });

            //点击按钮3,移除事件委托
            $("#btn3").click(function () {
                $("ol").undelegate("click");
            });

        })
    </script>
</head>

<body>
    <ul>
        <li>刘德华</li>
        <li>黎明</li>
        <li>张学友</li>
        <li>周润发</li>
    </ul>
    <br>
    <button id="btn1">给 ul 添加新的 li 按钮</button>
    <br>
    <ol>
        <li>乔丹</li>
        <li>梅西</li>
        <li>马拉多纳</li>
    </ol>
    <br>
    <button id="btn2">给 ol 添加新的 li 按钮</button>
    <button id="btn3">删除 ol 上的事件</button>
</body>

</html>

效果:没有设置委托事件时,新增的元素没有监听事件,比如“周星驰”。添加了委托事件后,新增的元素会有监听事件,比如“姚明”。但是当移除 ol 上的事件后,新增的元素也没有监听事件了。

2.4.7 动画效果

概念:动画效果,指的是在一定的时间内, 不断改变元素样式。

2.4.7.1 淡入淡出

淡入淡出:不断改变元素的透明度(opacity)来实现的

1. fadeIn():带动画的显示
2. fadeOut():带动画隐藏
3. fadeToggle():带动画切换显示/隐藏

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>淡入淡出</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        $(function () {// 绑定文档加载完成后的回调函数

            let $div1 = $("#div1");

            //需求1:点击btn1, 慢慢淡出,动画结束时提示“动画结束了”
            $("#btn1").click(function () {
                $div1.fadeOut();//无参数
                //$div1.fadeOut("slow");//有参数
                $div1.fadeOut(1000, function () {
                    alert("动画结束了");//1秒后弹框提示
                })
            })

            //需求2:点击btn2, 慢慢淡入
            $("#btn2").click(function () {
                $div1.fadeIn()
            })

            //需求3:点击btn3, 淡出/淡入切换
            $("#btn3").click(function () {
                $div1.fadeToggle()
            })

        })
    </script>
</head>

<body>
    <button id="btn1">慢慢淡出</button>
    <button id="btn2">慢慢淡入</button>
    <button id="btn3">淡出/淡入切换</button>
    <div id="div1"></div>

    <style type="text/css">
        * {
            margin: 0px;
        }

        #div1 {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 10px;
            background: red;
        }
    </style>
</body>

</html>

2.4.7.2 滑动

滑动动画: 不断改变元素的高度实现

1. slideDown(): 带动画的展开
2. slideUp(): 带动画的收缩
3. slideToggle(): 带动画的切换展开/收缩

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>滑动动画</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        $(function () {// 绑定文档加载完成后的回调函数

            let $div1 = $("#div1");

            //需求1:点击btn1, 向上滑动
            $("#btn1").click(function () {
                $div1.slideUp(3000);
            })

            //需求2:点击btn2,向下滑动
            $("#btn2").click(function () {
                $div1.slideDown();
            })

            //需求3:点击btn3, 向上/向下切换
            $("#btn3").click(function () {
                $div1.slideToggle();
            })

        })
    </script>
</head>

<body>
    <button id="btn1">向上滑动</button>
    <button id="btn2">向下滑动</button>
    <button id="btn3">上下滑动</button>
    <div id="div1"></div>

    <style type="text/css">
        * {
            margin: 0px;
        }

        #div1 {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 10px;
            background: red;
        }
    </style>
</body>

</html>
2.4.7.3 显示与隐藏

显示隐藏,默认没有动画, 动画(opacity/height/width)

1. show(): (不)带动画的显示
2. hide(): (不)带动画的隐藏
3. toggle(): (不)带动画的切换显示/隐藏

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示与隐藏</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        $(function () {// 绑定文档加载完成后的回调函数

            let $div1 = $("#div1");

            //需求1:点击btn1, 立即显示
            $("#btn1").click(function () {
                $div1.show();
            })

            //需求2:点击btn2,慢慢显示
            $("#btn2").click(function () {
                $div1.show(1000);//1秒显示完成
            })

            //需求3:点击btn3, 慢慢隐藏
            $("#btn3").click(function () {
                $div1.hide(1000);//1秒隐藏完毕
            })

            //需求4:点击btn4,切换显示/隐藏
            $("#btn4").click(function () {
                $div1.toggle(1000);
            })
        })
    </script>
</head>

<body>
    <button id="btn1">瞬间显示</button>
    <button id="btn2">慢慢显示</button>
    <button id="btn3">慢慢隐藏</button>
    <button id="btn4">显示/隐藏切换</button>
    <div id="div1"></div>

    <style type="text/css">
        * {
            margin: 0px;
        }

        #div1 {
            position: absolute;
            width: 200px;
            height: 200px;
            top: 50px;
            left: 10px;
            background: red;
            /* 默认不显示 */
            display: none;
        }
    </style>
</body>

</html>
2.4.7.4 自定义动画

jQuery动画本质 : 在指定时间内不断改变元素样式值来实现的

1. animate(): 自定义动画效果的动画
2. stop(): 停止动画

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>自定义动画</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <script>
        $(function () {// 绑定文档加载完成后的回调函数

            let $div1 = $("#div1");

            //需求1:逐渐扩大,宽/高都扩大为 200px,宽先扩为200px, 高后扩为200px
            $("#btn1").click(function () {
                /* 方式1:宽和高一起扩大
                $div1.animate({
                    width: 200,
                    height: 200
                }, 1000)
                */

                //方式2:先宽、后高扩大
                $div1
                    .animate({
                        width: 200
                    }, 1000)
                    .animate({
                        height: 200
                    }, 1000)
            })

            //需求2:按钮2,移动到指定位置:移动到 (500,100)处
            $("#btn2").click(function () {
                $div1.animate({
                    left: 500,
                    top: 100
                }, 1000)
            })

            //需求3:按钮3,移动指定距离,移动距离为(100, 50)
            $("#btn3").click(function () {
                $div1.animate({
                    left: "+=100",
                    top: "+=50"
                }, 1000)
            })

            //需求4:按钮4,停止动画
            $("#btn4").click(function () {
                $div1.stop();
            })
        })
    </script>
</head>

<body>
    <button id="btn1">逐渐扩大</button>
    <button id="btn2">移动到指定位置</button>
    <button id="btn3">移动指定距离</button>
    <button id="btn4">停止动画</button>
    <div id="div1">纸上得来终觉浅,绝知此事要躬行</div>

    <style type="text/css">
        * {
            margin: 0px;
        }

        #div1 {
            position: absolute;
            width: 100px;
            height: 100px;
            top: 50px;
            left: 10px;
            background: darkgray;
        }
    </style>
</body>

</html>

2.4.8 扩展插件

* 插件机制
  * 扩展jQuery函数对象的方法
    $.extend({
      xxx: fuction () {} // this是$
    })
    $.xxx()
  * 扩展jQuery对象的方法
    $.fn.extend({
      xxx: function(){}  // this是jQuery对象
    })
    $obj.xxx()

 代码结构(先在 js 文件目录创建自定义 js 插件):my_jQuery-plugin.js

my_jQuery-plugin.js内容如下: 

/*
 需求:
 1. 给 $ 添加4个工具方法:
   * min(a, b) : 返回较小的值
   * max(c, d) : 返回较大的值
   * leftTrim() : 去掉字符串左边的空格
   * rightTrim() : 去掉字符串右边的空格
 2. 给jQuery对象 添加3个功能方法:
 * checkAll() : 全选
 * unCheckAll() : 全不选
 * reverseCheck() : 全反选
 */
(function () {

  // 扩展$的方法
  $.extend({
    min: function (a, b) {
      return a < b ? a : b
    },
    max: function (a, b) {
      return a > b ? a : b
    },
    leftTrim: function (str) {
      return str.replace(/^\s+/, '')
    },
    rightTrim: function (str) {
      return str.replace(/\s+$/, '')
    }
  })

  // 扩展jQuery对象的方法
  $.fn.extend({
    checkAll: function () {
      this.prop('checked', true) // this是jQuery对象
    },
    unCheckAll: function () {
      this.prop('checked', false)
    },
    reverseCheck: function () {
      // this是jQuery对象
      this.each(function () {
        // this是dom元素
        this.checked = !this.checked
      })
    }
  })

})()

案例代码: 

<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>扩展插件</title>
    <script src="../js/jquery-1.10.1.js"></script>
    <!-- 引入自定义插件 -->
    <script type="text/javascript" src="../js/my_jQuery-plugin.js"></script>
    <script>
        $(function () {// 绑定文档加载完成后的回调函数
            /*
               需求:
               1. 给 $ 添加4个工具方法:
                 * min(a, b) : 返回较小的值
                 * max(c, d) : 返回较大的值
                 * leftTrim() : 去掉字符串左边的空格
                 * rightTrim() : 去掉字符串右边的空格
               2. 给jQuery对象 添加3个功能方法:
                 * checkAll() : 全选
                 * unCheckAll() : 全不选
                 * reverseCheck() : 全反选
               */

            console.log($.min(3, 5), $.max(3, 5));
            let string = "   让天下没有难写的代码    ";
            console.log("-----" + $.leftTrim(string) + "-----");
            console.log("-----" + $.rightTrim(string) + "-----");

            let $items = $(":checkbox[name=items]");
            $("#checkedAllBtn").click(function () {
                $items.checkAll();
            })
            $("#checkedNoBtn").click(function () {
                $items.unCheckAll();
            })
            $("#reverseCheckedBtn").click(function () {
                $items.reverseCheck();
            })
        })
    </script>
</head>

<body>
    <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="reverseCheckedBtn" value="反选" />
</body>

</html>

效果:

2.4.9 多库共存

问题 : 如果有2个库都有$, 就存在冲突

解决 : jQuery库可以释放$的使用权, 让另一个库可以正常使用, 此时jQuery库只能使用jQuery了
API : jQuery.noConflict()

要想使用 jQuery 的功能, 只能使用 jQuery

例如有一个自定义库:myLib.js,代码如下:

(function () {
  window.$ = function () {
    console.log('my lib $()...')
  }
})()

在实际使用中,需要先释放 jQuery 的 $ 使用权,如:

  // 释放$的使用权
  jQuery.noConflict();
  // 调用myLib中的$
  $();
  // 要想使用jQuery的功能, 只能使用jQuery
  jQuery(function () {
    console.log("文档加载完成")
  })

2.4.10 onload 与 ready

区别: window.onload与 $(document).ready()

  * window.onload
    * 包括页面的图片加载完后才会回调(比较晚加载)
    * 只能有一个监听回调
  * $(document).ready()
    * 等同于: $(function(){})
    * 页面加载完就回调(比较早)
    * 可以有多个监听回调

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/491517.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

(五)图像的标准假彩色合成

环境&#xff1a;Windows10专业版 IDEA2021.2.3 jdk11.0.1 GDAL(release-1928-x64-gdal-3-5-2-mapserver-8-0-0) OpenCV-460.jar 系列文章&#xff1a; &#xff08;一&#xff09;PythonGDAL实现BSQ&#xff0c;BIP&#xff0c;BIL格式的相互转换 &#xff08;二&#xff…

【测试开发学习历程】第一个Python程序(下)

6 Python的标识符&#xff0c;命名规则与规范 标识符&#xff1a;python中的标识符是用于识别变量、函数、类、模块以及其他对象的名字叫标识符。 命名规则&#xff1a;所有需要自己命名的地方都必须要遵守以下规则 可以包含数字、字母、_&#xff0c;但是不能以数字开头&…

<c语言学习>数据文件操作

数据文件 按文件功能讲&#xff0c;计算机的文件分为程序文件和数据文件&#xff0c;数据文件操作以下简称文件操作。 程序文件&#xff1a; 包括源程序文件&#xff08;后缀为.c&#xff09;,目标文件&#xff08;windows环境后缀为.obj&#xff09;,可执行程序&#…

使用npm仓库的优先级以及.npmrc配置文件的使用

使用npm仓库的优先级以及.npmrc配置文件的使用 概念如何设置 registry&#xff08;包管理仓库&#xff09;1. 设置项目配置文件2. 设置用户配置文件3. 设置全局配置文件4. .npmrc文件可以配置的常见选项 概念 npm&#xff08;Node Package Manager&#xff09;是一个Node.js的…

2014年认证杯SPSSPRO杯数学建模B题(第一阶段)位图的处理算法全过程文档及程序

2014年认证杯SPSSPRO杯数学建模 B题 位图的处理算法 原题再现&#xff1a; 图形&#xff08;或图像&#xff09;在计算机里主要有两种存储和表示方法。矢量图是使用点、直线或多边形等基于数学方程的几何对象来描述图形&#xff0c;位图则使用像素来描述图像。一般来说&#…

既有理论深度又有技术细节——深度学习计算机视觉

推荐序 我曾经试图找到一本既有理论深度、知识广度&#xff0c;又有技术细节、数学原理的关于深度学习的书籍&#xff0c;供自己学习&#xff0c;也推荐给我的学生学习。虽浏览文献无数&#xff0c;但一直没有心仪的目标。两周前&#xff0c;刘升容女士将她的译作《深度学习计…

爬虫实践(1)

这一篇只提登录模拟&#xff0c;主要介绍chrome开发者窗口的使用&#xff0c;实际上相关接口调用都是用到cookie&#xff0c;需要再加一篇从token到cookie&#xff0c;以保证实践的完整性 以migu登录为例&#xff0c;分析其登录过程&#xff0c;之后可以使用任意语言模拟登录&…

蓝桥杯真题Day40 倒计时19天 纯练题!

蓝桥杯第十三届省赛真题-统计子矩阵 题目描述 给定一个 N M 的矩阵 A&#xff0c;请你统计有多少个子矩阵 (最小 1 1&#xff0c;最大 N M) 满足子矩阵中所有数的和不超过给定的整数 K? 输入格式 第一行包含三个整数 N, M 和 K. 之后 N 行每行包含 M 个整数&#xf…

Linux实现m4a格式转换为wav格式

需要在linux上安装ffmpeg 参考博客 Linux上安装ffmpeg修改环境变量【这一点很重要&#xff0c;自己因为没有添加环境变量&#xff0c;捣鼓了很长时间】 将ffmpeg的绝对路径添加到 PATH 环境变量中&#xff0c;以让系统能找到ffmpeg的安装路径。 # /home//project/ffmpeg-6.1-a…

数据库安全性

背景&#xff1a;数据库的一大特性就是数据共享&#xff0c;这样我们就不能不考虑数据库的安全性问题。 1.数据库的不安全因素 1.1非授权用户对数据库的恶意存取和破坏 一些黑客&#xff08;Hacker&#xff09;和犯罪分子在用户存取数据库时猎取用户名和用户 口令&#xff0…

图像处理与视觉感知---期末复习重点(4)

文章目录 一、图像复原与图像增强1.1 概述1.2 异同点 二、图像复原/退化模型2.1 模型图简介2.2 线性复原法 三、彩色基础四、彩色模型五、彩色图像处理 一、图像复原与图像增强 1.1 概述 1. 图像增强技术一般要利用人的视觉系统特性&#xff0c;目的是取得较好的视觉效果&…

canvas跟随鼠标画有透明度的矩形边框

提示&#xff1a;canvas跟随鼠标画有透明度的矩形边框 文章目录 前言一、跟随鼠标画有透明度的矩形边框总结 前言 一、跟随鼠标画有透明度的矩形边框 test.html <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8">&…

Hana数据库 No columns were bound prior to calling SQLFetch or SQLFetchScroll

在php调用hana数据库的一个sql时报错了&#xff0c;查表结构的sql&#xff1a; select * from sys.table_columns where table_name VBAP SQLSTATE[SL009]: <<Unknown error>>: 0 [unixODBC][Driver Manager]No columns were bound prior to calling SQLFetch …

Kibana的安装(Linux版)

Kibana是一个针对Elasticsearch的开源分析及可视化平台&#xff0c;用来搜索、查看交互存储在Elasticsearch索引中的数据。使用Kibana&#xff0c;可以通过各种图表进行高级数据分析及展示。 Kibana让海量数据更容易理解。它操作简单&#xff0c;基于浏览器的用户界面可以快速创…

Eladmin-jpa基于SpringBoot和Vue的前后端分离后台管理系统​

在当今快速发展的软件开发领域&#xff0c;前后端分离的架构模式已经成为主流。这种架构模式不仅可以提高开发效率&#xff0c;还能使系统更加易于维护和扩展。Eladmin-jpa是一个基于Spring Boot 2.6.4、Spring Boot Jpa、JWT、Spring Security、Redis和Vue的前后端分离的后台管…

分布式系统面试全集通第一篇(dubbo+redis+zookeeper----分布式+CAP+BASE+分布式事务+分布式锁)

目录 分布式系统面试全集通第一篇什么是分布式?和微服务的区别什么是分布式分布式与微服务的区别 什么是CAP?为什么不能三者同时拥有分区容错性一致性可用性 Base理论了解吗基本可用软状态最终一致性 什么是分布式事务分布式事务有哪些常见的实现方案?2PC&#xff08;Two Ph…

docker安装elasticseachkibana

1.docker安装es 创建本机挂载目录&#xff0c;与容器上目录映射 /Users/wangpei/2024/mydata/elasticsearch conf下创建yml文件 echo "http.host : 0.0.0.0" >> /Users/wangpei/2024/mydata/elasticsearch/config/elasticsearch.yml 安装容器&#xff1a; d…

【Effective Web】html/css优化和技巧

html/css优化和技巧 html/css可以做到一些js的功能&#xff0c;减少js操作dom的高昂成本。 巧用伪类 显示勾选时文案 checkbo勾选时触发&#xff0c;实现checkbox的简单选中事件处理 <template><input type"checkbox" /><span class"checkb…

谷粒商城——缓存——SpringCache

1. 配置使用 首先需要导入相关的依赖&#xff1a; <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-cache</artifactId></dependency> 随后在配置文件中进行配置&#xff1a; spring:cache:t…

纳斯达克大屏媒体尺寸与投放费用:一次投放需要多少钱?

纳斯达克大屏媒体尺寸与投放费用&#xff1a;一次投放需要多少钱&#xff1f; 1. 纳斯达克图片要求 1.1 像素要求 高度&#xff1a;2336 像素宽度&#xff1a;1832 像素 1.2 分辨率要求 像素比率&#xff1a;1.0 px 72 dpi 1.3 文件格式要求 静态图片格式&#xff1a;.…