jQuery02

前言

一、复习

二、标签内容

三、get请求

四、新增子元素

五、委托

六、克隆

七、加载HTML

八、准备就绪

九、Node.js

十、js中提示jQuery的方案

十一、location

十二、根据地址栏参数加载页面

十三、全局样式变量

总结

前言

jQuery02学习开始

`一、复习`

设计理念: Write Less, Do More 写的少做的多
利用封装技巧:
简化方法名
JQ: next()
原生:nextElementSibling
查元素
原生: document.querySelectorAll()
JQ: $()
函数重载: 根据参数的数量或类型不同, 实现不同的逻辑
css(属性名, 值)
css({属性名:值, 属性名: 值})
方法自带遍历
click(函数): 自动遍历每个查询到的元素挨个绑定函数

二、标签内容

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标签内容 09:07</title>
</head>

<body>
  <div id="box1">Hello</div>

  <div id="box2">
    <a href="">Hello</a>
  </div>

  <ul></ul>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    // 原生开发:  innerHTML 和 innerText
    console.log($('#box1').html())
    console.log($('#box1').text())

    console.log($('#box2').html())  // html标签 + 文本
    console.log($('#box2').text())  // 文本

    // 写入操作
    $("#box1").text('<h1>World!</h1>')  //不解析
    $("#box2").html('<h1>World!</h1>')  //解析成HTML后显示

    var emps = [
      '<li>泡泡</li>',
      '<li>铭铭</li>',
      '<li>亮亮</li>',
    ]

    // 数组参数: 自动拼接成字符串 并且 默认的间隔符号 , 会去掉
    $('ul').html(emps)
  </script>
</body>

</html>

`三、get请求`

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>get 09:21</title>
</head>

<body>
  <ul></ul>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    console.dir($);
    // 封装的 get 方法, 可以快速实现 AJAX 的 get请求操作

    var url = 'https://api.xin88.top/car/news.json'
    // 参数1: 接口地址
    // 参数2: 成功后的回调
    $.get(url, data => {
      console.log(data)
      // map: 遍历数组, 把回调函数的返回值 组合成新的数组
      var els = data.data.list.map(value => {
        return `<li>${value.title}</li>`
      })

      console.log(els)
      $('ul').html(els) //存放到 ul 中

      // 简化合写
      $('ul').html(
        data.data.list.map(value => {
          return `<li>${value.title}</li>`
        })
      )
    })
  </script>
</body>

</html>

练习

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 09:37</title>
</head>

<body>
  <ul></ul>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    var url = 'https://web.codeboy.com/mfresh/data/news_select.php'

    $.get(url, data => {
      console.log(data);

      $('ul').html(
        data.data.map(value => {
          return `<li>${value.title}</li>`
        })
      )
    })
  </script>
</body>

</html>

练习

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 09:46</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    ul {
      display: flex;
      width: 800px;
      margin: 10px auto;
      flex-wrap: wrap;
    }

    li {
      display: flex;
      flex-direction: column;
      margin: 0 10px 10px 0;
    }
  </style>
</head>

<body>
  <ul>
    <!-- html的结构复杂, 先在HTML中写出来 -->
    <!-- <li>
      <img src="" alt="">
      <span>名字</span>
      <span>价格</span>
    </li> -->
  </ul>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    var url = 'https://api.xin88.top/game/heros.json'

    $.get(url, data => {
      console.log(data)

      $('ul').html(
        data.hero.map(value => {
          // 利用解构语法, 把要用的值从对象里取出来
          const { alias, goldPrice, name } = value
          const icon = data.baseURL.replace('{alias}', alias)
          console.log(icon);

          return `<li>
            <img src="${icon}" alt="">
            <span>${name}</span>
            <span>${goldPrice}</span>
          </li>`
        })
      )
    })
  </script>
</body>

</html>

`四、新增子元素`

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新增子元素 10:20</title>
</head>

<body>
  <button>新增</button>
  <ul>
    <li>泡泡</li>
    <li>铭铭</li>
    <li>亮亮</li>
  </ul>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('button').click(function () {
      // append: 新增
      $('ul').append('<li>新元素</li>')

      var emps = ['<li>AAA</li>', '<li>BBB</li>', '<li>CCC</li>']
      $('ul').append(emps)
    })
  </script>
</body>

</html>

练习

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 10:27</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    ul {
      display: flex;
      width: 800px;
      flex-wrap: wrap;
    }

    li {
      margin: 0 10px 10px 0;
    }

    li>div {
      position: relative;
      border-radius: 6px;
      overflow: hidden;
    }

    li>div>span {
      position: absolute;
      bottom: 0;
      background-color: rgba(0, 0, 0, 0.2);
      color: white;
      width: 100%;
      padding: 4px;
    }
  </style>
</head>

<body>
  <ul>
    <!-- <li>
      <div>
        <img src="" alt="">
        <span>昵称</span>
      </div>
      <span>房间名</span>
    </li> -->
  </ul>

  <button>获取更多</button>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    var nowPage = 1  //存储当前页

    var url = 'https://douyu.xin88.top/api/room/list?page=1&type=yz'
    $.get(url, data => {
      console.log(data);

      $('ul').html(
        data.data.list.map(value => {
          const { nickname, roomName, roomSrc } = value

          return `<li>
            <div>
              <img src="${roomSrc}" alt="">
              <span>${nickname}</span>
            </div>
            <span>${roomName}</span>
          </li>`
        })
      )
    })

    // 获取更多
    $('button').click(function () {
      var url = `https://douyu.xin88.top/api/room/list?page=${nowPage + 1}&type=yz`

      $.get(url, data => {
        console.log(data)
        // 更新本地存放的 nowPage
        nowPage = data.data.nowPage

        // 新的数据 累加到之前已有数据的下方
        $('ul').append(
          data.data.list.map(value => {
            const { nickname, roomName, roomSrc } = value

            return `<li>
            <div>
              <img src="${roomSrc}" alt="">
              <span>${nickname}</span>
            </div>
            <span>${roomName}</span>
          </li>`
          })
        )
      })
    })
  </script>
</body>

</html>

`五、委托`

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>委托模式 11:20</title>
</head>

<body>
  <!-- 事件的冒泡机制: 当子元素上触发事件后, 会传递给父元素 -->
  <!-- 委托: 给父元素添加事件,  帮子元素完成相关操作 -->
  <!-- 适用场景: 动态新增的子元素 -- 特别适合网络请求的 -->

  <button>新增子元素</button>
  <ul>
    <li>泡泡</li>
    <li>亮亮</li>
    <li>铭铭</li>
  </ul>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('button').click(function () {
      $('ul').append('<li>新元素</li>')
    })

    // 点击li时, 让其变红
    // $('li').click(function () {
    //   $(this).css('color', 'red')
    // })

    // 事件委托的写法
    // on(事件名, '过滤', 回调函数)
    // 参数2: 当事元素的特征
    $('ul').on('click', 'li', function () {
      // this: 代表触发本次事件的当事元素
      $(this).css('color', 'red')
    })
  </script>
</body>

</html>

练习

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>练习 11:35</title>
  <!-- 解除图片的防盗 -->
  <meta name="referrer" content="no-referrer">
  <link rel="stylesheet" href="./reset.css">
  <style>
    ul {
      display: flex;
      width: 700px;
      flex-wrap: wrap;
    }

    li {
      display: flex;
      flex-direction: column;
      margin: 0 10px 10px 0;
    }

    li>img {
      width: 200px;
    }
  </style>
</head>

<body>
  <ul>
    <!-- <li>
      <img src="" alt="">
      <span></span>
    </li> -->
  </ul>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    var url = 'https://api.xin88.top/douban/movies.json'

    $.get(url, data => {
      console.log(data)

      $('ul').html(
        data.subjects.map(value => {
          const { cover, title, url } = value

          return `<li data-url="${url}">
            <img src="${cover}" alt="">
            <span>${title}</span>
          </li>`
        })
      )
    })

    // 给 网络请求到的 li 添加点击事件, 动态生成
    $('ul').on('click', 'li', function () {
      console.log(this)
      var url = $(this).data('url')
      // 跳转到这个url地址的页面

      // open : 此方法 也可以实现页面的跳转
      open(url)  //打开新的页面

      // 小概率: 浏览器会因为安全设定, 拦截通过 open 方式开启的窗口
    })
  </script>
</body>

</html>

`六、克隆`

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>克隆元素 14:01</title>
  <style>
    #box2 {
      width: 500px;
      min-height: 200px;
      background-color: #eee;
    }
  </style>
</head>

<body>
  <div id="box">
    <img src="./imgs/smallskin-1.jpg" alt="">
    <img src="./imgs/smallskin-2.jpg" alt="">
    <img src="./imgs/smallskin-3.jpg" alt="">
    <img src="./imgs/smallskin-4.jpg" alt="">
    <img src="./imgs/smallskin-5.jpg" alt="">
  </div>

  <button>清空</button>

  <div id="box2"></div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    // 目标: 点击 box 中的图, 复制这个图到 box2 里
    $('#box>img').click(function () {
      // append: 添加
      // clone: 复制元素
      $('#box2').append($(this).clone())
    })

    // 删除元素
    $('#box2').on('click', 'img', function () {
      // remove: 删除元素
      $(this).remove()
    })

    // 清空
    $('button').click(function () {
      $('#box2').empty()
    })
  </script>
</body>

</html>

`七、加载HTML`

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>load 14:20</title>
  <style>
    #header {
      padding: 10px;
      border: 3px solid blue;
    }
  </style>
</head>

<body>
  <!-- load : 加载 其他html代码到 当前文件中 -->
  <!-- 提供 模块化开发的 方案 : 编程的 活字印刷术-->
  <!-- 把网页中的内容 拆分成多个 独立的html 文件, 使用时临时组合在一起 -->
  <!-- 好处1: 复用 -->
  <!-- 好处2: 团队合作时, 多人开发 -->
  <div id="header">
    <h1>我是头</h1>
  </div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('#header').load('./06.LianXi.html')
  </script>
</body>

</html>

`八、准备就绪`

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ready 14:34</title>
  <!-- 常见问题: 脚本之间的依赖性, 11.js中使用的 $ 来自 jquery脚本;  -->
  <!-- 所以, 必须先引入 jquery  再引入 11.js -->
  <script src="./jquery-3.6.1.min.js"></script>
  <!-- 这种修改DOM元素的 js代码, 应该放在 所有DOM元素加载完毕后, 即 body的最后一行 -->
  <script src="./11.js"></script>
</head>

<body>
  <!-- 实际开发中, 代码需要解耦合, 进行拆分 -->
  <!-- 1个网页由3部分组成:  html  css  js,  拆分成3个文件书写 -->
  <ul>
    <li>泡泡</li>
    <li>铭铭</li>
    <li>亮亮</li>
  </ul>


</body>

</html>

// 11.js
// 利用 node.js 的模块化方案, 让vscode 弹出代码提示
// 安装 node.js
// 用npm 初始化文件夹:  npm init -y
// 安装 jquery 模块:  npm i jquery
// 重启 vscode

// 3.3版本中, 不推荐直接写 事件名,
// 推荐采用 on 语法绑定事件
// DOMContentLoaded: DOM内容加载完毕后自动触发
// addEventListener('DOMContentLoaded', function () {
//   // 这里的 JS 代码, 一定会在 所有DOM加载完毕后执行
//   $('li').on('click', function () {})

//   $('li').css('color', 'red')
// })

// JQ的简化
// $(函数): 自动把函数 放在DOM加载后运行
$(function () {
  $('li').css('color', 'red')

  // 优点: 在这里用var 声明变量, 属于函数作用域, 没有全局污染
})

`九、Node.js`

确保是最新的长期支持版本 :下载 | Node.js 中文网

检查版本的命令: node -v
12版本以上即可, 最好能升级到 16.18

npm工具: node自带的包管理工具
需要设置中国镜像
设置中国镜像: npm set registry https://registry.npmmirror.com
查看当前镜像: npm get registry

把文件夹用node初始化为 node管理的项目包
在代码所在文件夹打开命令行, 执行 npm init -y
init :初始化
-y :所有配置项都采用默认值

安装jQuery模块: vscode 就能识别并给出提示:npm i jquery

到文件夹里的 node_modules 下查看是否有 jquery 即可

十、js中提示jQuery的方案

// 解决方案1 : 利用node 初始化, 安装jquery模块, vscode能自动识别

// 方案2:  在首行书写如下代码
// vscode 就会认为这里 需要 jQuery 的代码提示
// 此方案不需要node环境, 但 每个JS文件都要在首行书写
jQuery || require('jquery')

$('li').click()

十一、location

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>location 15:41</title>
</head>

<body>
  <button onclick="location.reload()">刷新</button>

  <!-- replace: 替换后, 不支持返回操作 -->
  <button onclick="location.replace('http://www.baidu.com')">替换</button>

  <!-- assign: 指派 显示新的页面; 支持返回操作 -->
  <button id="btn3" onclick="location.assign('http://www.baidu.com')">assign</button>
  <br>
  <!-- 当前页面的锚点信息, 存储在 location.hash 里 -->
  <a href="#btn3">前往按钮3</a>

  <!-- url地址的结构:    路径?参数=值&参数=值.. -->
  <!-- 路径的参数 存储在 location.search 中 -->
  <a href="?name=泡泡&age=18&phone=18832123333">路径参数</a>

  <script>
    // 读取路径中的参数, 使用 URLSearchParams
    var params = new URLSearchParams(location.search)
    var name = params.get('name') //从参数中, 读取 name 的值
    console.log(name)

    var phone = params.get('phone')
    console.log(phone);

    // 属于 BOM 的知识点
    // Browser Object Model : 浏览器对象模型
    // 一些控制浏览器操作的API
    console.log(location)
    // 带有 地址栏 相关的操作 和 信息
  </script>
</body>

</html>

`十二、根据地址栏参数加载页面`

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>load_location 16:25</title>
  <link rel="stylesheet" href="./reset.css">
  <style>
    #header {
      padding: 20px;
      background-color: aquamarine;
    }

    #header>a {
      font-size: 24px;
      color: #333;
      text-decoration: none;
    }

    #body {
      border: 3px solid blue;
      min-height: 400px;
    }

    #footer {
      height: 140px;
      background-color: gray;
    }
  </style>
</head>

<body>
  <!-- 根据路径参数 来加载不同的内容页面 -->
  <div id="header">
    <a href="?path=03.LianXi">LianXi03</a>
    <a href="?path=04.LianXi">LianXi04</a>
    <a href="?path=08.LianXi">LianXi08</a>
  </div>

  <div id="body"></div>

  <div id="footer"></div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    // JQ提供了扩展函数 extend, 可以把自定义的函数 融合到 JQ 里
    $.extend({
      // hello: function() { }
      hello() {
        console.log('nihao');
      },
      double(value) { return value * 2 },
      s(value, def) {
        const params = new URLSearchParams(location.search)
        // 查询不到, 就返回默认值
        // 短路语法, 从左到右 第一个真值
        return params.get(value) || def
      }
    })

    // 练习:
    console.log($.s('path', '03.LianXi')) //读取到 路径参数中 path 的值

    console.log($.double(10));
    $.hello()

    // 思路: 读取 location中的 参数 path 的值
    // const params = new URLSearchParams(location.search)
    // const path = params.get('path')
    var path = $.s('path', '03.LianXi')

    // 拼接成 对应的 html 文件路径
    // 利用load方法加载 此html 文件到 #body 里
    $('#body').load(`./${path}.html`)
  </script>
</body>

</html>

`十三、全局样式变量`

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>全局css 样式</title>

  <style>
    /* 伪元素选择器: 就是 html 标签, 习惯在这个标签中声明全局变量 */
    :root {
      /* 变量格式:  --变量名 */
      /* 如果某些样式值, 在网页中通用, 例如 字体大小, 主题色 */
      --md: 20px;
      --color-primary: #bbb;
      /* 统一风格: 所有组员都采用同一套 变量 */
      --border-radius-sm: 4px;
      --border-radius-md: 8px;
      --border-radius-lg: 12px;
    }

    li {
      /* 使用变量的方式 var(--变量名) */
      font-size: var(--md);
      background-color: var(--color-primary);
      padding: 10px;
      border-radius: var(--border-radius-md);
    }

    button {
      background-color: var(--color-primary);
      font-size: var(--md);
    }

    p {
      background-color: var(--color-primary);
      font-size: var(--md);
    }
  </style>
</head>

<body>
  <ul>
    <li>泡泡</li>
  </ul>

  <button>Hello</button>
  <p>World</p>
</body>

</html>

总结

标签内容操作
text(): 操作双标签文本
text(): 不带参数, 读取
text(值): 带参数, 写入
html(): 操作双标签中的html代码
html(): 读取
html(值): 写入
get
jQuery封装的 AJAX 方法, 可以快速实现 get 请求
$.get(接口地址, 回调函数)
网络操作
先发请求把数据用map转HTML, 利用 html() 方法添加到元素里
新增子元素:
append: 适合累加内容的场景, 例如加载更多
委托模式:
利用事件的冒泡机制, 让父元素帮子元素处理事件
$().on(事件名, 过滤, 回调函数)
适合动态新增的子元素
克隆: clone() 复制元素
删除: remove()
清空子元素: empty()
load:
加载其他的html 代码, 到指定的元素中
实现活字印刷术的核心操作
模块化: 把网页按照业务功能拆分成多个模块
准备就绪:
当把 JS文件拆分到外部书写, 需要考虑使用时必须是在DOM加载完毕后
监听 DOMContentLoaded 事件触发时
$(函数) : 在DOM加载完毕后才会执行
关于代码提示:
默认: 在 JS 中书写 JQ 没有提示, 解决方案有两种
把项目包切换成 node.js 管理的包, vscode根据模块给出提示
在每个JS文件的顶部书写 : jQuery || require('jquery')
location:
BOM: 浏览器对象模型中的 API
浏览器的相关操作被封装成了一些方法, 统称BOM
open方法:也属于BOM范围, 用来开启新的标签页
location中的方法
reload : 刷新
assign : 指派显示新的页面 -- 带返回
replace : 替换成新的页面 -- 没有返回
location中的属性
hash: 存放了锚点值
search: 地址栏中 URL 的参数部分
利用 URLSearchParams 来进行解析后获取其中的值
使用场景:
根据路径中的参数, 来切换网页中局部加载的页面内容
扩展jQuery: 把自定义的方法存储在JQ中
$.extend( { 方法名(){} } )
使用时 :$.方法名()
全局css变量
在 :root 这个伪元素中生成, 此元素就是 html 标签
习惯在这个标签中存放全局变量
变量的声明方式:--变量名: 值;
使用方式:var(--变量名)
优点:
方便修改: 只需要修改变量的值, 就可以影响到所有使用此变量的位置
统一样式: 所有开发者都用这些变量, 来实现所有页面的样式统一