jQuery_day02

最新推荐文章于 2023-04-12 09:18:36 发布

原创最新推荐文章于 2023-04-12 09:18:36 发布 · 425 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #javascript #前端

jQuery 专栏收录该内容

2 篇文章

订阅专栏

这篇博客主要介绍了jQuery的基础操作，如DOM查询、样式操作、事件处理、内容操作和网络请求。此外，还详细讲解了如何在外部JS文件中启用jQuery提示，通过npm初始化项目并安装jQuery模块。最后，讨论了项目准备就绪，包括页面结构、资源组织和基本文件创建。

复习

DOM的痛点: 原生DOM 查询出来的原型提供的方法太少, 只能完成最基础的操作

要完成复杂的操作, 需要书写更多的代码…
jQuery 秉承着 write less, do more的理念而生 – 写的少做的多

作者把常用的 DOM 操作都进行了封装, 提供了更好的编程体验

例如:

查询元素的语法
- 原生: document.querySelectorAll('选择器')
- 现在: $('选择器')
操作style
- css
  - css(‘属性名’) : 读取样式值
  - css(‘属性名’, 值) : 设置样式的值
  - css({属性名: 值, 属性名: 值}) : 一次性设置多个
- class
  - addClass : 添加
  - removeClass : 删除
  - toggleClass : 切换
  - hasClass: 判断有没有
- 事件
  - click(函数) : 点击
  - mouseover(函数) : 鼠标悬浮
- 属性操作
  - 系统属性: prop
  - 自定义属性
    - data- : data
    - 通用方式: attr
- 内容操作
  - html()
    - 如果值是数组, 会自动完成字符串拼接操作 – 特别适合网络请求
  - text()
- 网络请求
  - jQuery把网络请求 AJAX 操作, 封装成了很多个方法, 更加易用
    - get: 用于发送get请求
      - $.get(请求地址, 回调函数)
- 显示与隐藏
  - show 和 hide 和 toggle: 不带动画的瞬间切换
  - slideUp: 滑动收起 slideDown: 滑动展开 slideToggle: 滑动切换
  - fadeIn: 渐进显示 fadeOut: 渐出隐藏
- 动画效果制作
  - 适合简易动画 - 不支持颜色和 transform
  - animate : 动画
  - stop: 停止

关于jQuery在外部JS中如何出现提示

在JS文件中书写 JQ代码, 默认没有提示

解决方案: 依赖npm 把项目包初始化为npm管理的包, vscode才能识别

在电脑上安装 node 软件, 用node -v看版本

下载地址: http://nodejs.cn/download/

安装长期支持版本 – 稳定可靠, 适合使用

在这里插入图片描述

把项目文件夹用npm进行初始化, 然后安装 jquery 模块, 就能出提示

在项目文件夹下执行: npm init -y 完成初始化操作

在这里插入图片描述

安装jquery模块: npm i jquery

不同的node版本, 安装成功后的提示不同; 到文件夹里 -> node_modules 查看是否有jquery文件夹即可

注意: 如果无法下载的同学, 可能是没有切换中国镜像

到 xin666.vip 找到切换命令执行下就行
```
设置中国镜像: npm set registry https://registry.npmmirror.com
查看当前镜像: npm get registry
```

vscode会自动从这个文件里, 查看代码, 给出代码提示

在这里插入图片描述

准备就绪

<!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:13</title>

  <!-- 在头部栏引入脚本, 和 CSS的link在一起, 更整齐 -->
  <!-- 理论上: 操作DOM元素的脚本, 必须放在 body的最后运行, 确保所有DOM元素已经加载完毕! -->
  <script src="./jquery-3.6.1.min.js"></script>
  <script src="./ready.js"></script>
</head>

<body>
  <ul>
    <li>泡泡</li>
    <li>铭铭</li>
    <li>亮亮</li>
    <li>小新</li>
  </ul>

  <!-- 当进行外部JS开发时, 要注意依赖问题 -->
  <!-- 必须!! 先引入JQ脚本, 再引入依赖JQ脚本的代码 -->

  <!-- <script src="./jquery-3.6.1.min.js"></script>
  <script src="./ready.js"></script> -->
</body>

</html>

// 在JS文件中书写 JQ代码, 默认没有提示
// 解决方案: 依赖npm 把项目包初始化为npm管理的包, vscode才能识别
// 在电脑上安装 node 软件,  用node -v看版本
// 下载地址: http://nodejs.cn/download/

// DOM元素加载完毕时, 会触发  DOMContentLoaded 事件
// 监听此事件触发时, 再执行脚本代码即可
// addEventListener('DOMContentLoaded', function () {
//   console.log('DOM加载完毕!')
//   $('li').css('color', 'red')
// })

// JQ提供了简化
// 把函数放在 $() 里, 就会自动在 DOM加载完毕后执行
$(function () {
  $('li').css('color', 'red')
  var x = 0 // 在函数作用域 - 没有全局污染
})

var x = 0 //有全局污染

// 总结:
// 如果是外部JS文件中, 操作DOM元素, 需要确保代码 在DOM元素加载完毕后执行
// 方案1: 在body最后书写  -- 对人的要求高,一旦在head引入 则失效
// 方式2: 监听DOM完毕的事件, 再调用代码 -- 使用时在哪里引入都没问题

委托模式

<!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:12</title>
</head>

<body>
  <!-- 
    事件冒泡: 当子元素上发生一个事件,会通知父元素触发相同的事件
    事件委托: 用父元素来帮子元素完成事件
    适合场景: 动态新增的子元素
    注意事项: 父元素要区分 触发事件的 当事元素
   -->
  <ul>
    <li>亮亮</li>
    <li>铭铭</li>
    <p>贾右使</p>
    <li>世宇</li>
    <p>唐左使</p>
  </ul>

  <script src="./jquery-3.6.1.js"></script>
  <script>
    // on: 此方法添加委托
    // on(事件, 指定当事元素, 回调)
    $('ul').on('click', 'li', function () {
      // this指向: 触发事件的当事元素  而非 父元素
      // 相较于原生的 e.target 来获取当事元素, 此处的this更友好
      console.log(this)
      $(this).css('color', 'blue')
    })
  </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:23</title>
</head>

<body>
  <button>新增</button>
  <ul>
    <li>世宇</li>
  </ul>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('button').click(function () {
      // append: 新增 - 在子元素末尾加
      $('ul').append('<li>出bug了</li>')
    })

    // 任务: 点击哪个li 就让其变为蓝色
    $('ul').on('click', 'li', function () {
      $(this).css('color', 'blue')
      // console.log('向服务器发请求..')
    })
  </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>克隆</title>
  <style>
    #box2 {
      /* 最小高度 */
      min-height: 200px;
      width: 300px;
      background-color: #eee;
      padding: 10px;
    }
  </style>
</head>

<body>
  <div id="box">
    <button>亮亮</button>
    <button>铭铭</button>
    <button>世宇</button>
    <button>唐护法</button>
    <button>贾护法</button>
  </div>

  <hr>

  <button>清空</button>
  <div id="box2"></div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    $('#box').on('click', 'button', function () {
      // append: 添加到子元素末尾

      // 复制元素
      const clone_this = $(this).clone()
      $('#box2').append(clone_this)
    })

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

    // 筛选器语法:  JQ提供的
    // :contains  筛选出标签内容含有指定文本的
    $('button:contains(清空)').click(function () {
      $('#box2').empty()  // empty:清空子元素
    })
  </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 11:09</title>
</head>

<body>
  <!-- 模块化开发: 如果是大型网页 在1个html中开发 会导致代码量过大 -->

  <!-- 原生HTML的 iframe 可以实现局部加载 - 已淘汰 -->
  <div id="delegate"></div>

  <div id="append"></div>

  <div id="clone"></div>

  <script src="./jquery-3.6.1.min.js"></script>
  <script>
    // load: 把页面的内容 加载到元素里
    $('#delegate').load('./02.delegate.html')
    $('#append').load('./03.append.html')
    $('#clone').load('./04.clone.html')
  </script>
</body>

</html>

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 11:23</title>
</head>

<body>
  <!-- 新的领域: BOM - browser object model 浏览器对象模型 -->
  <!--  -->
  <button onclick="location.reload()">刷新</button>
  <button onclick="location.replace('http://www.baidu.com')">替换</button>
  <!-- 指派新的地址 assign -->
  <button onclick="location.assign('http://tmooc.cn')">
    新地址
  </button>
  <hr>
  <!-- 地址栏可以保存少量参数, 与 get 请求传参是相同的机制 -->
  <!-- 接口的传参是传给服务器的 -->
  <!-- 地址栏的传参 是 传给当前html文件的 -->
  <a href="?name=世宇&age=23&skill=唱歌">关于世宇</a>
  <a href="?name=泡泡&age=18&skill=跳舞">关于泡泡</a>


  <!-- replace: 替换后 没有返回操作 -->
  <!-- assgin: 有返回操作 -->
  <div id="box1">box1</div>

  <p style="height: 1000px;"></p>

  <a href="#box1">跳转到box1</a>
  <!-- 地址栏中: # 代表锚点, 称为 hash  哈希 -->



  <script>
    // location: 位置, 地址
    // 保存浏览器地址栏的各种信息
    console.log(location)

    // 读取路径中的参数, 中文需要转义
    // decodeURI: 把 路径中的编码, 转义为普通的汉字
    const search = decodeURI(location.search)
    console.log(search)

    // 获取属性的值
    // URLSearchParams: 这是专门解析 url格式传参的对象
    const params = new URLSearchParams(search)
    console.log('name:', params.get('name'))
    console.log('name:', params.get('skill'))
    console.log('name:', params.get('age'))
    console.log('name:', params.get('suibian'))

    // 路径传参: 当开启的是同一个网页, 同一个html文件
    // 可以通过传参的方式, 传入不同的值
    // 然后页面通过读取这个值, 来呈现不同的内容
    // 特别常见于: 详情页, 带有分页的页 等...
  </script>
</body>

</html>

css变量声明

<!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自定义变量 14:01</title>

  <style>
    /* :root  - 伪元素选择器, 相当于是 html 标签 */
    /* :root 中书写的 比html中, 优先更高一些 */
    /* 所有书写在html中的元素, 都可以使用 html中声明的变量 */
    :root {
      /* -- :固定关键词, 代表声明变量 */

      /* 如果某个颜色 样式 是全局的, 可能会有同时变更的需求, 则做成统一的全局变量, 便于后期修改 */
      --theme-color: #999;
      --shiyu: '世宇';
      --size-lg: 20px;
    }

    ul>li::before {
      font-size: var(--size-lg);

      /* var(): 代表使用某个变量 */
      /* 字符串类型的变量, 可以和其他字符串拼接 */
      content: var(--shiyu) ' -- ';
    }

    /* 假设3个li 分属不同的页面 */
    ul>li:nth-child(1) {
      /* color: #f75148;
      color: red; */
      color: var(--theme-color)
    }

    ul>li:nth-child(2) {
      color: var(--theme-color)
        /* color: #f75148;
      color: red; */
    }

    ul>li:nth-child(3) {
      color: var(--theme-color)
        /* color: #f75148;
      color: red; */
    }
  </style>
</head>

<body>
  <!-- 大型项目中: 页面特别多, 则需要风格统一 -->
  <!-- 
    统一的颜色风格, 统一的字体大小, 统一的间距, 统一的圆角 等...
   -->
  <ul>
    <li>泡泡</li>
    <li>亮亮</li>
    <li>铭铭</li>
  </ul>
</body>

</html>

插件安装

在这里插入图片描述

自动把 SASS 转为 CSS 文件: 注意作者是 Glenn Marks

在这里插入图片描述

项目初始化

为了代码提示, 用npm初始化项目包, 并安装jquery模块

npm init -y
npm i jquery

为了存放不同页面的代码, 创建pages文件夹
文件夹包括：home video note mall register login
每个文件夹中存放对应名称的 html css js

图片, 音频, 视频等资源, 放在 assets 或 resources 目录
也可以存放一些公共的 css 或 js 代码
assets/css assets/js assets/img assets/video

制作基础的css文件：reset.css 和 base.css
制作公共js文件：common.js 和 request.js

根目录下创建index.html
这是一个特殊名称的文件, 服务器的默认设置是: 访问网站时, 默认开启根目录下的 index.html 文件
在index.html中引入：reset.css base.css jquery脚本 common.js 和 request.js
引入标签栏的图标

在index.html中书写 div#container标签
在pages中的每个页面的 html中，书写h1标签，写上内容
在index.html中书写超链接跳转，点击后修改地址栏的参数?page=名字书写js代码，读取地址栏的page参数，拼接出路径
利用$.load加载指定页面到 div#container 中
在这里插入图片描述