• JQuery 高级使用 高阶函数 委托模式 全局css变量

    目录

    ES6

    箭头函数

    数组高阶函数

    JQuery

    选择操作元素

    get

    委托模式

    全局css变量

     

    ES6

    箭头函数

    语法糖

    • 一个形参，省略（）
    • 函数体只有一行，省略{return}
    • 没有this，通过作用域链查找上层作用域的this

    数组高阶函数

    • every：每一个元素都符合条件
    • some：至少一个元素符合
    • filter：过滤符合条件的元素 
    • map：每一个元素按照固定的规则处理，返回新的数组

    JQuery

    选择操作元素

    • id：document.getElementById
    • 关系
      • 父元素 parentElement
      • 子元素 children
      • 兄元素 previousElementSibling
      • 弟弟元素 nextElementSibling
    • css选择器
      • 单个元素节点对象 querySelector
      • 多个元素节点对象 querySelectorAll
    • 自定义属性
      • 规范：data-，存放在dataset

    get

    $.get（url，回调函数） 

    append：适合累加内容的场景

    委托模式

    1. 利用事件冒泡，$（）.on（事件名，过滤，回调函数）
    2. 动态新增子元素

    load_location

    扩展JQuery，存储自定义方法

    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <meta name="referrer" content="no-referrer" />
    8.     <link rel="stylesheet" href="./reset.css" />
    9.     <title>locationtitle>
    10.     <style>
    11.       #header {
    12.         padding: 20px;
    13.         background-color: aquamarine;
    14.       }
    15.       #header a {
    16.         font-size: 24px;
    17.         color: #333;
    18.       }
    19.       a {
    20.         text-decoration: none;
    21.       }
    22.       #body {
    23.         border: 3px solid #666;
    24.         min-height: 400px;
    25.       }
    26.       #footer {
    27.         height: 140px;
    28.         background-color: gray;
    29.       }
    30.     style>
    31.   head>
    32.  
    33.   <body>
    34.     <div id="header">
    35.       <a href="?path=03.Lianxi">视频菜谱a>
    36.       <a href="?path=04.Lianxi">笔记a>
    37.       <a href="?path=05.Lianxi">商城a>
    38.     div>
    39.     <div id="body">div>
    40.     <div id="footer">div>
    41.     <script src="./jquery-3.6.1.min.js">script>
    42.     <script src="./js/index.js">script>
    43.     <script>
    44.       $.extend({
    45.         s(path, defaults) {
    46.           var params = new URLSearchParams(location.search)
    47.           // 返回默认值，短路
    48.           return params.get(path) || defaults
    49.         },
    50.       })
    51.       // 读取location参数，拼接成文件路径，load加载文件到body
    52.       // 读取location参数
    53.       // 方案一
    54.       var params = new URLSearchParams(location.search)
    55.       var path = params.get("path")
    56.       // 方案二（推荐）
    57.       var path = $.s('path','05.Lianxi')
    58.       // 拼接文件路径，load加载
    59.       $("#body").load(`./${path}.html`)
    60.       console.log(path)
    61.     script>
    62.   body>
    63. html>

    全局css变量

    1. ：root伪元素
    2. 格式：--变量名：值
    3. 使用方式：var（--变量名）
    1. html>
    2. <html lang="en">
    3.   <head>
    4.     <meta charset="UTF-8" />
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7.     <meta name="referrer" content="no-referrer" />
    8.     <link rel="stylesheet" href="./reset.css" />
    9.     <title>locationtitle>
    10.     <style>
    11.       /* 伪元素选择器，声明全局变量 */
    12.       :root {
    13.         /* 变量格式 --变量名*/
    14.         --md: 28px;
    15.         --color-primary:#eee
    16.         --border-radius-lg:4px
    17.         --border-radius-md:8px
    18.         --border-radius-sm:12px
    19.       }
    20.       li {
    21.         font-size: var(--md);
    22.         background-color: var(--color-primary);
    23.         color: #000;
    24.       }
    25.       button {
    26.         font-size: var(--md);
    27.         border-radius: var(--border-radius-md);
    28.       }
    29.       p {
    30.         font-size: var(--md);
    31.       }
    32.     style>
    33.   head>
    34.  
    35.   <body>
    36.     <ul>
    37.       <li>的非官方li>
    38.     ul>
    39.     <button>U盾舒服button>
    40.     <p>dkfdsp>
    41.     <script src="./jquery-3.6.1.min.js">script>
    42.     <script src="./js/index.js">script>
    43.     <script>script>
    44.   body>
    45. html>
  • 相关阅读:
    时间序列与 Statsmodels：预测所需的基本概念（1）
    柔性电子数字源表测试方案
    MQ - 17 集群篇_（性能）分布式存储系统的编程技巧
    vellum 学习03 10/7 (知识补)
    【笔记：模拟MOS集成电路】二级运算放大器频率响应与品质因子Q和阻尼因子ξ的讨论
    计算机网络之应用层
    呼叫中心中间件-网关配置
    基于主动视觉机制的深度学习--一个综合池化框架
    mac新环境
    资料分析方法总结
  • 原文地址：https://blog.csdn.net/weixin_49739911/article/details/127663406