-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathLearn-jQuery.html
1 lines (1 loc) · 71.2 KB
/
Learn-jQuery.html
1
<!DOCTYPE html><html lang="zh-CN"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=2"><meta name="theme-color" content="#222"><meta name="generator" content="Hexo 5.4.0"><link rel="apple-touch-icon" sizes="180x180" href="/images/favicon-32x32.png"><link rel="icon" type="image/png" sizes="32x32" href="/images/favicon-32x32.png"><link rel="icon" type="image/png" sizes="16x16" href="/images/favicon-16x16.png"><link rel="mask-icon" href="/images/favicon-32x32.png" color="#222"><link rel="stylesheet" href="/css/main.css"><link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lato:300,300italic,400,400italic,700,700italic&display=swap&subset=latin,latin-ext"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/[email protected]/css/all.min.css" integrity="sha256-2H3fkXt6FEmrReK448mDVGKb3WW2ZZw35gI7vqHOE4Y=" crossorigin="anonymous"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/animate.min.css" integrity="sha256-PR7ttpcvz8qrF57fur/yAx1qXMFJeJFiA6pSzWi0OIE=" crossorigin="anonymous"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.css" integrity="sha256-Vzbj7sDDS/woiFS3uNKo8eIuni59rjyNGtXfstRzStA=" crossorigin="anonymous"><link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/nprogress.css" integrity="sha256-no0c5ccDODBwp+9hSmV5VvPpKwHCpbVzXHexIkupM6U=" crossorigin="anonymous"><script src="https://cdn.jsdelivr.net/npm/[email protected]/nprogress.js" integrity="sha256-a5YRB27CcBwBFcT5EF/f3E4vzIqyHrSR878nseNYw64=" crossorigin="anonymous"></script><script class="next-config" data-name="main" type="application/json">{"hostname":"www.wrysmile.cn","root":"/","images":"/images","scheme":"Gemini","version":"8.5.0","exturl":false,"sidebar":{"position":"left","display":"post","padding":18,"offset":12},"copycode":true,"bookmark":{"enable":true,"color":"#222","save":"manual"},"fancybox":true,"mediumzoom":false,"lazyload":false,"pangu":false,"comments":{"style":"tabs","active":null,"storage":true,"lazyload":false,"nav":null},"motion":{"enable":true,"async":false,"transition":{"post_block":"fadeIn","post_header":"fadeInDown","post_body":"fadeInDown","coll_header":"fadeInLeft","sidebar":"fadeInUp"}},"prism":false,"i18n":{"placeholder":"搜索...","empty":"没有找到任何搜索结果：${query}","hits_time":"找到 ${hits} 个搜索结果（用时 ${time} 毫秒）","hits":"找到 ${hits} 个搜索结果"},"path":"/search.xml","localsearch":{"enable":true,"trigger":"auto","top_n_per_article":1,"unescape":false,"preload":false}}</script><script src="/js/config.js"></script><meta name="description" content="介绍 本文主要记录在学习尚硅谷的 jQuery 课程时的一些笔记 尚硅谷前端学科全套课程请点击这里进行下载，提取码：afyt"><meta property="og:type" content="article"><meta property="og:title" content="学习笔记：jQuery（尚硅谷）"><meta property="og:url" content="https://www.wrysmile.cn/Learn-jQuery.html"><meta property="og:site_name" content="Wrysmile 的博客"><meta property="og:description" content="介绍 本文主要记录在学习尚硅谷的 jQuery 课程时的一些笔记 尚硅谷前端学科全套课程请点击这里进行下载，提取码：afyt"><meta property="og:locale" content="zh_CN"><meta property="article:published_time" content="2021-03-21T12:46:32.000Z"><meta property="article:modified_time" content="2023-01-31T10:23:56.198Z"><meta property="article:author" content="Zhang Yangeng"><meta property="article:tag" content="前端"><meta property="article:tag" content="学习"><meta name="twitter:card" content="summary"><link rel="canonical" href="https://www.wrysmile.cn/Learn-jQuery.html"><script class="next-config" data-name="page" type="application/json">{"sidebar":"","isHome":false,"isPost":true,"lang":"zh-CN","comments":true,"permalink":"https://www.wrysmile.cn/Learn-jQuery.html","path":"Learn-jQuery.html","title":"学习笔记：jQuery（尚硅谷）"}</script><script class="next-config" data-name="calendar" type="application/json">""</script><title>学习笔记：jQuery（尚硅谷） | Wrysmile 的博客</title><script>!function(e,t,o,c,i,a,n){e.DaoVoiceObject=i,e[i]=e[i]||function(){(e[i].q=e[i].q||[]).push(arguments)},e[i].l=+new Date,a=t.createElement(o),n=t.getElementsByTagName(o)[0],a.async=1,a.src=c,a.charset="utf-8",n.parentNode.insertBefore(a,n)}(window,document,"script",("https:"==document.location.protocol?"https:":"http:")+"//widget.daovoice.io/widget/13e39436.js","daovoice"),daovoice("init",{app_id:"13e39436"}),daovoice("update")</script><noscript><link rel="stylesheet" href="/css/noscript.css"></noscript><link rel="alternate" href="/atom.xml" title="Wrysmile 的博客" type="application/atom+xml"></head><body itemscope itemtype="http://schema.org/WebPage" class="use-motion"><div class="headband"></div><main class="main"><header class="header" itemscope itemtype="http://schema.org/WPHeader"><div class="header-inner"><div class="site-brand-container"><div class="site-nav-toggle"><div class="toggle" aria-label="切换导航栏" role="button"><span class="toggle-line"></span> <span class="toggle-line"></span> <span class="toggle-line"></span></div></div><div class="site-meta"><a href="/" class="brand" rel="start"><i class="logo-line"></i><h1 class="site-title">Wrysmile 的博客</h1><i class="logo-line"></i></a><p class="site-subtitle" itemprop="description">欢迎来到我的个人小屋</p><img class="custom-logo-image" src="/images/favicon-32x32.png" alt="Wrysmile 的博客"></div><div class="site-nav-right"><div class="toggle popup-trigger"><i class="fa fa-search fa-fw fa-lg"></i></div></div></div><nav class="site-nav"><ul class="main-menu menu"><li class="menu-item menu-item-home"><a href="/" rel="section"><i class="fa fa-home fa-fw"></i>首页</a></li><li class="menu-item menu-item-about"><a href="/about/" rel="section"><i class="fa fa-user fa-fw"></i>关于</a></li><li class="menu-item menu-item-tags"><a href="/tags/" rel="section"><i class="fa fa-tags fa-fw"></i>标签</a></li><li class="menu-item menu-item-categories"><a href="/categories/" rel="section"><i class="fa fa-th fa-fw"></i>分类</a></li><li class="menu-item menu-item-archives"><a href="/archives/" rel="section"><i class="fa fa-archive fa-fw"></i>归档</a></li><li class="menu-item menu-item-search"><a role="button" class="popup-trigger"><i class="fa fa-search fa-fw"></i>搜索</a></li></ul></nav><div class="search-pop-overlay"><div class="popup search-popup"><div class="search-header"><span class="search-icon"><i class="fa fa-search"></i></span><div class="search-input-container"><input autocomplete="off" autocapitalize="off" maxlength="80" placeholder="搜索..." spellcheck="false" type="search" class="search-input"></div><span class="popup-btn-close" role="button"><i class="fa fa-times-circle"></i></span></div><div class="search-result-container no-result"><div class="search-result-icon"><i class="fa fa-spinner fa-pulse fa-5x"></i></div></div></div></div></div><div class="toggle sidebar-toggle" role="button"><span class="toggle-line"></span> <span class="toggle-line"></span> <span class="toggle-line"></span></div><aside class="sidebar"><div class="sidebar-inner sidebar-nav-active sidebar-toc-active"><ul class="sidebar-nav"><li class="sidebar-nav-toc">文章目录</li><li class="sidebar-nav-overview">站点概览</li></ul><div class="sidebar-panel-container"><div class="post-toc-wrap sidebar-panel"><div class="post-toc animated"><ol class="nav"><li class="nav-item nav-level-1"><a class="nav-link"><span class="nav-text">介绍</span></a></li><li class="nav-item nav-level-1"><a class="nav-link"><span class="nav-text">一、基础知识</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E7%89%88%E6%9C%AC%E4%B9%8B%E9%97%B4%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-text">1.版本之间的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E5%8E%9F%E7%94%9FJS%E5%92%8CjQuery%E7%9A%84%E5%8C%BA%E5%88%AB"><span class="nav-text">2.原生JS和jQuery的区别</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E5%9F%BA%E6%9C%AC%E6%93%8D%E4%BD%9C"><span class="nav-text">3.基本操作</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E5%BC%95%E5%85%A5-jQuery-%E5%BA%93"><span class="nav-text">(1).引入 jQuery 库</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#1-%E6%9C%8D%E5%8A%A1%E5%99%A8%E6%9C%AC%E5%9C%B0%E5%BA%93"><span class="nav-text">1).服务器本地库</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#2-CDN-%E8%BF%9C%E7%A8%8B%E5%BA%93"><span class="nav-text">2).CDN 远程库</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E4%BD%BF%E7%94%A8-jQuery"><span class="nav-text">(2).使用 jQuery</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link"><span class="nav-text">二、核心函数</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E4%BD%BF%E7%94%A8%E6%96%B9%E5%BC%8F"><span class="nav-text">1.使用方式</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E4%BD%9C%E4%B8%BA%E4%B8%80%E8%88%AC%E5%87%BD%E6%95%B0%E8%B0%83%E7%94%A8"><span class="nav-text">(1).作为一般函数调用</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E4%BD%9C%E4%B8%BA%E5%AF%B9%E8%B1%A1%E4%BD%BF%E7%94%A8"><span class="nav-text">(2).作为对象使用</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-text">2.选择器</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E5%9F%BA%E6%9C%AC%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-text">(1).基本选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E5%B1%82%E6%AC%A1%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-text">(2).层次选择器</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E8%BF%87%E6%BB%A4%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-text">(3).过滤选择器</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#a-%E5%9F%BA%E6%9C%AC"><span class="nav-text">a).基本</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#b-%E5%86%85%E5%AE%B9"><span class="nav-text">b).内容</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#c-%E5%8F%AF%E8%A7%81%E6%80%A7"><span class="nav-text">c).可见性</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#d-%E5%B1%9E%E6%80%A7"><span class="nav-text">d).属性</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-%E8%A1%A8%E5%8D%95%E9%80%89%E6%8B%A9%E5%99%A8"><span class="nav-text">(4).表单选择器</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#a-%E8%A1%A8%E5%8D%95"><span class="nav-text">a).表单</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#b-%E8%A1%A8%E5%8D%95%E5%AF%B9%E8%B1%A1%E5%B1%9E%E6%80%A7"><span class="nav-text">b).表单对象属性</span></a></li></ol></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E5%B7%A5%E5%85%B7"><span class="nav-text">3.工具</span></a></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link"><span class="nav-text">三、核心对象</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#0-%E4%BC%AA%E6%95%B0%E7%BB%84"><span class="nav-text">0.伪数组</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E5%9F%BA%E6%9C%AC%E8%A1%8C%E4%B8%BA"><span class="nav-text">1.基本行为</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E5%B1%9E%E6%80%A7"><span class="nav-text">2.属性</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E6%93%8D%E4%BD%9C%E4%BB%BB%E6%84%8F%E5%B1%9E%E6%80%A7"><span class="nav-text">(1).操作任意属性</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#strong-style-color-red-%E5%BC%95%E7%94%B3%EF%BC%9Aattr%E5%92%8Cprop%E7%9A%84%E5%8C%BA%E5%88%AB-strong"><span class="nav-text">引申：attr和prop的区别</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E6%93%8D%E4%BD%9Cclass%E5%B1%9E%E6%80%A7"><span class="nav-text">(2).操作class属性</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E6%93%8D%E4%BD%9CHTML%E4%BB%A3%E7%A0%81-%E6%96%87%E6%9C%AC-%E5%80%BC"><span class="nav-text">(3).操作HTML代码/文本/值</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-CSS"><span class="nav-text">3.CSS</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E8%AF%BB%E5%8F%96-%E8%AE%BE%E7%BD%AEcss%E6%A0%B7%E5%BC%8F"><span class="nav-text">(1).读取/设置css样式</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E8%AF%BB%E5%8F%96-%E8%AE%BE%E7%BD%AE%E6%A0%87%E7%AD%BE%E7%9A%84%E4%BD%8D%E7%BD%AE"><span class="nav-text">(2).读取/设置标签的位置</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E8%AF%BB%E5%8F%96-%E8%AE%BE%E7%BD%AE%E6%A0%87%E7%AD%BE%E7%9A%84%E5%B0%BA%E5%AF%B8"><span class="nav-text">(3).读取/设置标签的尺寸</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-%E7%AD%9B%E9%80%89"><span class="nav-text">4.筛选</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E8%BF%87%E6%BB%A4"><span class="nav-text">(1).过滤</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E6%9F%A5%E6%89%BE"><span class="nav-text">(2).查找</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-%E6%96%87%E6%A1%A3"><span class="nav-text">5.文档</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E6%B7%BB%E5%8A%A0%E8%8A%82%E7%82%B9"><span class="nav-text">(1).添加节点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E6%9B%BF%E6%8D%A2%E8%8A%82%E7%82%B9"><span class="nav-text">(2).替换节点</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E5%88%A0%E9%99%A4%E8%8A%82%E7%82%B9"><span class="nav-text">(3).删除节点</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-%E4%BA%8B%E4%BB%B6"><span class="nav-text">6.事件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E4%BA%8B%E4%BB%B6%E5%A4%84%E7%90%86"><span class="nav-text">(1).事件处理</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E4%BA%8B%E4%BB%B6%E5%88%87%E6%8D%A2"><span class="nav-text">(2).事件切换</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%B4%BE-%E5%A7%94%E6%89%98"><span class="nav-text">(3).事件委派(委托)</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#a-%E7%AE%80%E4%BB%8B"><span class="nav-text">a).简介</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#b-%E5%A7%94%E6%B4%BE%E6%96%B9%E6%B3%95"><span class="nav-text">b).委派方法</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-%E4%BA%8B%E4%BB%B6%E5%AF%B9%E8%B1%A1"><span class="nav-text">(4).事件对象</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#strong-style-color-red-%E5%BC%95%E7%94%B3%EF%BC%9A%E5%8C%BA%E5%88%AB-mouseover-%E4%B8%8E-mouseenter-strong"><span class="nav-text">引申：区别 mouseover 与 mouseenter</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#strong-style-color-red-%E5%BC%95%E7%94%B3%EF%BC%9A%E5%8C%BA%E5%88%AB-on-%E2%80%98xxx%E2%80%99-fun-%E4%B8%8E-xxx-fun-strong"><span class="nav-text">引申：区别 on(‘xxx’,fun) 与 xxx(fun)</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#7-%E6%95%88%E6%9E%9C"><span class="nav-text">7.效果</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E6%B7%A1%E5%85%A5%E6%B7%A1%E5%87%BA%E5%8A%A8%E7%94%BB"><span class="nav-text">(1).淡入淡出动画</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E4%B8%8A%E4%B8%8B%E6%BB%91%E5%8A%A8%E5%8A%A8%E7%94%BB"><span class="nav-text">(2).上下滑动动画</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E6%98%BE%E7%A4%BA%E9%9A%90%E8%97%8F%E5%8A%A8%E7%94%BB"><span class="nav-text">(3).显示隐藏动画</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#4-%E8%87%AA%E5%AE%9A%E4%B9%89%E5%8A%A8%E7%94%BB"><span class="nav-text">(4).自定义动画</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link"><span class="nav-text">四、多库共存</span></a></li><li class="nav-item nav-level-1"><a class="nav-link"><span class="nav-text">五、jQuery插件</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E6%89%A9%E5%B1%95%E6%8F%92%E4%BB%B6"><span class="nav-text">1.扩展插件</span></a></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-jQuery%E6%8F%92%E4%BB%B6"><span class="nav-text">2.jQuery插件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-jquery-validation"><span class="nav-text">(1).jquery-validation</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#%E6%8F%92%E4%BB%B6%E4%BD%BF%E7%94%A8%E6%96%B9%E6%B3%95"><span class="nav-text">!插件使用方法</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-jquery-UI"><span class="nav-text">(2).jquery UI</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E5%8E%9F%E7%94%9Fjs%E6%8F%92%E4%BB%B6"><span class="nav-text">3.原生js插件</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-layDate"><span class="nav-text">(1).layDate</span></a></li></ol></li></ol></li><li class="nav-item nav-level-1"><a class="nav-link"><span class="nav-text">六、案例分析</span></a><ol class="nav-child"><li class="nav-item nav-level-2"><a class="nav-link" href="#1-%E5%A4%9ATab%E5%88%87%E6%8D%A2%E5%8A%9F%E8%83%BD"><span class="nav-text">1.多Tab切换功能</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E6%80%9D%E8%B7%AF"><span class="nav-text">(1).思路</span></a><ol class="nav-child"><li class="nav-item nav-level-4"><a class="nav-link" href="#a-Tab%E5%AE%9E%E7%8E%B0"><span class="nav-text">a).Tab实现</span></a></li><li class="nav-item nav-level-4"><a class="nav-link" href="#b-%E5%88%87%E6%8D%A2Tab%E5%AE%9E%E7%8E%B0"><span class="nav-text">b).切换Tab实现</span></a></li></ol></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E4%BB%A3%E7%A0%81"><span class="nav-text">(2).代码</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#2-%E5%9B%9E%E5%88%B0%E9%A1%B6%E9%83%A8%E5%8A%9F%E8%83%BD"><span class="nav-text">2.回到顶部功能</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E6%80%9D%E8%B7%AF-2"><span class="nav-text">(1).思路</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E4%BB%A3%E7%A0%81-2"><span class="nav-text">(2).代码</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#3-%E7%88%B1%E5%A5%BD%E9%80%89%E6%8B%A9%E5%8A%9F%E8%83%BD"><span class="nav-text">3.爱好选择功能</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E6%80%9D%E8%B7%AF-3"><span class="nav-text">(1).思路</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E4%BB%A3%E7%A0%81-3"><span class="nav-text">(2).代码</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#4-%E8%A1%A8%E5%8D%95%E7%9A%84%E6%B7%BB%E5%8A%A0%E5%88%A0%E9%99%A4%E5%8A%9F%E8%83%BD"><span class="nav-text">4.表单的添加删除功能</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E6%80%9D%E8%B7%AF-4"><span class="nav-text">(1).思路</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E4%BB%A3%E7%A0%81-4"><span class="nav-text">(2).代码</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#3-%E4%BB%A3%E7%A0%81%E4%BC%98%E5%8C%96"><span class="nav-text">(3).代码优化</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#5-%E8%BD%AE%E6%92%AD%E5%9B%BE%E8%87%AA%E5%8A%A8%E5%88%87%E6%8D%A2%E5%8A%9F%E8%83%BD"><span class="nav-text">5.轮播图自动切换功能</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E6%80%9D%E8%B7%AF-5"><span class="nav-text">(1).思路</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E4%BB%A3%E7%A0%81-5"><span class="nav-text">(2).代码</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#6-%E5%AF%BC%E8%88%AA%E6%A0%8F%E6%98%BE%E7%A4%BA%E6%8A%98%E5%8F%A0%E5%8A%9F%E8%83%BD"><span class="nav-text">6.导航栏显示折叠功能</span></a><ol class="nav-child"><li class="nav-item nav-level-3"><a class="nav-link" href="#1-%E6%80%9D%E8%B7%AF-6"><span class="nav-text">(1).思路</span></a></li><li class="nav-item nav-level-3"><a class="nav-link" href="#2-%E4%BB%A3%E7%A0%81-6"><span class="nav-text">(2).代码</span></a></li></ol></li><li class="nav-item nav-level-2"><a class="nav-link" href="#7-%E4%BA%AC%E4%B8%9C%E5%95%86%E5%93%81%E8%AF%A6%E6%83%85%E9%A1%B5%E7%BB%BC%E5%90%88%E6%A1%88%E4%BE%8B"><span class="nav-text">7.京东商品详情页综合案例</span></a></li></ol></li></ol></div></div><div class="site-overview-wrap sidebar-panel"><div class="site-author site-overview-item animated" itemprop="author" itemscope itemtype="http://schema.org/Person"><img class="site-author-image" itemprop="image" alt="Zhang Yangeng" src="/images/avatar.jpg"><p class="site-author-name" itemprop="name">Zhang Yangeng</p><div class="site-description" itemprop="description">保持独立思考，不卑不亢不怂，长成自己想要的样子！</div></div><div class="site-state-wrap site-overview-item animated"><nav class="site-state"><div class="site-state-item site-state-posts"><a href="/archives/"><span class="site-state-item-count">69</span> <span class="site-state-item-name">日志</span></a></div><div class="site-state-item site-state-categories"><a href="/categories/"><span class="site-state-item-count">13</span> <span class="site-state-item-name">分类</span></a></div><div class="site-state-item site-state-tags"><a href="/tags/"><span class="site-state-item-count">52</span> <span class="site-state-item-name">标签</span></a></div></nav></div><div class="links-of-author site-overview-item animated"><span class="links-of-author-item"><a href="https://github.com/zhangyangeng" title="GitHub → https://github.com/zhangyangeng" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-github fa-fw"></i>GitHub</a> </span><span class="links-of-author-item"><a href="https://weibo.com/u/2294901673" title="weibo → https://weibo.com/u/2294901673" rel="external nofollow noopener noreferrer" target="_blank"><i class="fab fa-weibo fa-fw"></i>weibo</a></span></div><div class="cc-license site-overview-item animated" itemprop="license"><a href="https://creativecommons.org/licenses/by-nc-sa/4.0/zh-cn" class="cc-opacity" rel="external nofollow noopener noreferrer" target="_blank"><img src="https://cdn.jsdelivr.net/npm/@creativecommons/[email protected]/assets/license_badges/small/by_nc_sa.svg" alt="Creative Commons"></a></div><div class="links-of-blogroll site-overview-item animated"><div class="links-of-blogroll-title"><i class="fa fa-globe fa-fw"></i> 推荐网站</div><ul class="links-of-blogroll-list"><li class="links-of-blogroll-item"><a href="http://topbook.cc/" title="http://topbook.cc/" rel="external nofollow noopener noreferrer" target="_blank">Topbook</a></li></ul></div></div></div></div></aside><div class="sidebar-dimmer"></div></header><div class="back-to-top" role="button" aria-label="返回顶部"><i class="fa fa-arrow-up"></i> <span>0%</span></div><div class="reading-progress-bar"></div><a role="button" class="book-mark-link book-mark-link-fixed"></a><noscript><div class="noscript-warning">Theme NexT works best with JavaScript enabled</div></noscript><div class="main-inner post posts-expand"><div class="post-block"><article itemscope itemtype="http://schema.org/Article" class="post-content" lang="zh-CN"><link itemprop="mainEntityOfPage" href="https://www.wrysmile.cn/Learn-jQuery.html"><span hidden itemprop="author" itemscope itemtype="http://schema.org/Person"><meta itemprop="image" content="/images/avatar.jpg"><meta itemprop="name" content="Zhang Yangeng"><meta itemprop="description" content="保持独立思考，不卑不亢不怂，长成自己想要的样子！"></span><span hidden itemprop="publisher" itemscope itemtype="http://schema.org/Organization"><meta itemprop="name" content="Wrysmile 的博客"></span><header class="post-header"><h1 class="post-title" itemprop="name headline">学习笔记：jQuery（尚硅谷）</h1><div class="post-meta-container"><div class="post-meta"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar"></i> </span><span class="post-meta-item-text">发表于</span> <time title="创建时间：2021-03-21 20:46:32" itemprop="dateCreated datePublished" datetime="2021-03-21T20:46:32+08:00">2021-03-21</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-calendar-check"></i> </span><span class="post-meta-item-text">更新于</span> <time title="修改时间：2023-01-31 18:23:56" itemprop="dateModified" datetime="2023-01-31T18:23:56+08:00">2023-01-31</time> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="far fa-folder"></i> </span><span class="post-meta-item-text">分类于</span> <span itemprop="about" itemscope itemtype="http://schema.org/Thing"><a href="/categories/%E5%AD%A6%E4%B9%A0%E7%AC%94%E8%AE%B0/" itemprop="url" rel="index"><span itemprop="name">学习笔记</span></a> </span></span><span id="/Learn-jQuery.html" class="post-meta-item leancloud_visitors" data-flag-title="学习笔记：jQuery（尚硅谷）" title="阅读次数"><span class="post-meta-item-icon"><i class="far fa-eye"></i> </span><span class="post-meta-item-text">阅读次数：</span> <span class="leancloud-visitors-count"></span></span></div><div class="post-meta"><span class="post-meta-item" title="本文字数"><span class="post-meta-item-icon"><i class="far fa-file-word"></i> </span><span class="post-meta-item-text">本文字数：</span> <span>8.5k</span> </span><span class="post-meta-item" title="阅读时长"><span class="post-meta-item-icon"><i class="far fa-clock"></i> </span><span class="post-meta-item-text">阅读时长 ≈</span> <span>8 分钟</span></span></div></div></header><div class="post-body" itemprop="articleBody"><h1>介绍</h1><ul class="lvl-0"><li class="lvl-2">本文主要记录在学习尚硅谷的 jQuery 课程时的一些笔记</li><li class="lvl-2">尚硅谷前端学科全套课程请点击<a target="_blank" rel="external nofollow noopener noreferrer" href="https://pan.baidu.com/s/1BM_OKMXXAGxMNqaBN_7tRg">这里</a>进行下载，提取码：afyt</li></ul><span id="more"></span><h1>一、基础知识</h1><ul class="lvl-0"><li class="lvl-2"><p>官网地址：<a target="_blank" rel="external nofollow noopener noreferrer" href="https://jquery.com/">点击这里</a></p></li><li class="lvl-2"><p>jQuery 是一个优秀的 JS 函数库，封装了 BOM、DOM 等相关操作（CRUD）</p></li><li class="lvl-2"><p>特性：HTML元素选取（选择器）、HTML元素操作、CSS操作、HTML事件处理、JS动画效果、<strong style="color:red">链式调用</strong>、<strong style="color:red">读写合一</strong>、<strong style="color:red">隐式遍历（迭代）</strong>、浏览器兼容、易扩展插件、ajax封装</p></li></ul><h2 id="1-版本之间的区别">1.版本之间的区别</h2><ul class="lvl-0"><li class="lvl-2"><p><code>1.x</code>：兼容老版本IE、文件更大</p></li><li class="lvl-2"><p><code>2.x</code>：部分IE8及以下不支持，文件小，执行效率更高</p></li><li class="lvl-2"><p><code>3.x</code>：完全不再支持IE8及以下版本，提供了一些新的API，提供不包含ajax/动画API的版本</p></li></ul><h2 id="2-原生JS和jQuery的区别">2.原生JS和jQuery的区别</h2><ul class="lvl-0"><li class="lvl-2"><p>这里主要谈 <code>window.onload</code> 与 <code>$(document).ready() / $(function(){})</code></p></li><li class="lvl-2"><p><code>window.onload</code>：</p><ul class="lvl-2"><li class="lvl-4">包括页面的图片加载完后才会回调（晚）</li><li class="lvl-4">只能有一个监听回调（其余的会覆盖）</li></ul></li><li class="lvl-2"><p><code>$(document).ready()</code>：</p><ul class="lvl-2"><li class="lvl-4">等同于: <code>$(function(){})</code></li><li class="lvl-4">页面加载完就回调（早）</li><li class="lvl-4">可以有多个监听回调</li></ul></li></ul><h2 id="3-基本操作">3.基本操作</h2><h3 id="1-引入-jQuery-库">(1).引入 jQuery 库</h3><ul class="lvl-0"><li class="lvl-2"><p>可选如下两种方式：</p></li></ul><h4 id="1-服务器本地库">1).服务器本地库</h4><ul class="lvl-0"><li class="lvl-2"><p>使用 <code><script></code> 标签从本地引入</p></li></ul><h4 id="2-CDN-远程库">2).CDN 远程库</h4><ul class="lvl-0"><li class="lvl-2"><p>项目上线时，一般使用比较靠谱的CDN资源库，用来减轻服务器压力</p></li><li class="lvl-2"><p>BootCDN：<a target="_blank" rel="external nofollow noopener noreferrer" href="https://www.bootcdn.cn/">查看链接</a></p></li></ul><h3 id="2-使用-jQuery">(2).使用 jQuery</h3><ul class="lvl-0"><li class="lvl-2"><p>我们需要使用 jQuery 核心函数和 jQuery 核心对象</p><ul class="lvl-2"><li class="lvl-4"><strong>jQuery 核心函数</strong>：向外直接暴露的 $/jQuery</li><li class="lvl-4"><strong>jQuery 核心对象</strong>：执行jQuery函数返回的对象，我们一般在对象名前加 <code>$</code> 符号来标明</li></ul></li><li class="lvl-2"><p>案例文本请点击 <a href="/demo/JSex/jQuery01.html" target="_blank">这里</a> 查看（为了体验到完整功能，请使用PC打开，源码右键“查看网页源代码”即可）</p></li></ul><h1>二、核心函数</h1><h2 id="1-使用方式">1.使用方式</h2><h3 id="1-作为一般函数调用">(1).作为一般函数调用</h3><ul class="lvl-0"><li class="lvl-2"><p>语法：<code>$(param)</code></p></li><li class="lvl-2"><p>参数为函数：当DOM加载完成后，执行此回调函数（文档加载完成的监听）</p></li><li class="lvl-2"><p>参数为选择器字符串: 查找所有匹配的标签，并将它们封装成jQuery对象</p></li><li class="lvl-2"><p>参数为DOM对象: 将dom对象封装成jQuery对象</p></li><li class="lvl-2"><p>参数为html标签字符串(用得少): 创建标签对象并封装成jQuery对象</p></li></ul><h3 id="2-作为对象使用">(2).作为对象使用</h3><ul class="lvl-0"><li class="lvl-2"><p>语法：<code>$.xxx()</code></p></li><li class="lvl-2"><p><code>$.each()</code>: 隐式遍历对象/数组</p></li><li class="lvl-2"><p><code>$.trim()</code>: 去除两端的空格</p></li></ul><h2 id="2-选择器">2.选择器</h2><ul class="lvl-0"><li class="lvl-2"><p>选择器本身只是一个有特定语法规则的字符串，没有实质用处</p></li><li class="lvl-2"><p>它的基本语法规则使用的就是CSS的选择器语法，并对其进行了扩展</p></li><li class="lvl-2"><p>只有调用<code>$()</code>, 并将选择器作为参数传入才能起作用</p></li><li class="lvl-2"><p><code>$(selector)</code>作用：根据选择器规则在整个文档中查找所有匹配的标签的数组, 并封装成jQuery对象返回</p></li></ul><h3 id="1-基本选择器">(1).基本选择器</h3><ul class="lvl-0"><li class="lvl-2"><p><code>#id</code>：id选择器</p></li><li class="lvl-2"><p><code>element</code>：元素选择器</p></li><li class="lvl-2"><p><code>.class</code>：属性选择器</p></li><li class="lvl-2"><p><code>*</code>：任意标签</p></li><li class="lvl-2"><p><code>selector1,selector2,selectorN</code>：取多个选择器的并集(组合选择器)</p></li><li class="lvl-2"><p><code>selector1selector2selectorN</code>：取多个选择器的交集(相交选择器)</p></li></ul><h3 id="2-层次选择器">(2).层次选择器</h3><ul class="lvl-0"><li class="lvl-2"><p><code>ancestor descendant</code>：在给定的祖先元素下匹配所有的后代元素</p></li><li class="lvl-2"><p><code>parent>child</code>：在给定的父元素下匹配所有的子元素</p></li><li class="lvl-2"><p><code>prev+next</code>：匹配所有紧接在 prev 元素后的 next 元素</p></li><li class="lvl-2"><p><code>prev~siblings</code>：匹配 prev 元素之后的所有 siblings 元素</p></li></ul><h3 id="3-过滤选择器">(3).过滤选择器</h3><ul class="lvl-0"><li class="lvl-2"><p>在原有选择器匹配的元素中进一步进行过滤的选择器</p></li><li class="lvl-2"><p>多个过滤选择器不是同时执行的，而是依次过滤的</p></li></ul><h4 id="a-基本">a).基本</h4><ul class="lvl-0"><li class="lvl-2"><p><code>:first</code>：获取匹配的第一个元素</p></li><li class="lvl-2"><p><code>:last</code>：获取匹配的最后一个元素</p></li><li class="lvl-2"><p><code>:not(selector)</code>：去除所有与给定选择器匹配的元素</p></li><li class="lvl-2"><p><code>:lt/gt(index)</code>：匹配所有小于/大于给定索引值的元素</p></li></ul><h4 id="b-内容">b).内容</h4><ul class="lvl-0"><li class="lvl-2"><p><code>:contains(text)</code>：匹配包含给定文本的元素</p></li></ul><h4 id="c-可见性">c).可见性</h4><ul class="lvl-0"><li class="lvl-2"><p><code>:hidden</code>：匹配所有不可见元素，或者type为hidden的元素</p></li></ul><h4 id="d-属性">d).属性</h4><ul class="lvl-0"><li class="lvl-2"><p><code>[attribute]</code>：匹配包含给定属性的元素</p></li><li class="lvl-2"><p><code>[attribute=value]</code>：匹配给定的属性是某个特定值的元素</p></li></ul><h3 id="4-表单选择器">(4).表单选择器</h3><h4 id="a-表单">a).表单</h4><ul class="lvl-0"><li class="lvl-2"><p><code>:input</code>：匹配所有 input, textarea, select 和 button 元素</p></li><li class="lvl-2"><p><code>:text</code>：匹配所有的单行文本框</p></li><li class="lvl-2"><p><code>:checkbox</code>：匹配所有复选框</p></li><li class="lvl-2"><p><code>:submit</code>：匹配所有提交按钮</p></li></ul><h4 id="b-表单对象属性">b).表单对象属性</h4><ul class="lvl-0"><li class="lvl-2"><p><code>:enabled</code>：匹配所有可用元素</p></li><li class="lvl-2"><p><code>:disabled</code>：匹配所有不可用元素</p></li><li class="lvl-2"><p><code>:checked</code>：匹配所有选中的被选中元素(复选框、单选框等，不包括select中的option)</p></li><li class="lvl-2"><p><code>:selected</code>：匹配所有选中的option元素</p></li></ul><h2 id="3-工具">3.工具</h2><ul class="lvl-0"><li class="lvl-2"><p><code>$.each()</code>：遍历数组或对象中的数据</p></li><li class="lvl-2"><p><code>$.trim()</code>：去除字符串两边的空格</p></li><li class="lvl-2"><p><code>$.type(obj)</code>：得到数据的类型</p></li><li class="lvl-2"><p><code>$.isarray(obj)</code>：判断是否是数组</p></li><li class="lvl-2"><p><code>$.isFunction(obj)</code>：判断是否是函数</p></li><li class="lvl-2"><p><code>$.parseJSON(json)</code>: 解析json字符串转换为js对象/数组</p></li></ul><h1>三、核心对象</h1><ul class="lvl-0"><li class="lvl-2"><p>即执行 jQuery 核心函数返回的对象</p></li><li class="lvl-2"><p>jQuery 对象内部包含的是 DOM元素对象的伪数组（可能只有一个元素）</p></li><li class="lvl-2"><p>jQuery 对象拥有很多有用的属性和方法，让程序员能方便的操作 DOM</p></li><li class="lvl-2"><p>特点：</p><ul class="lvl-2"><li class="lvl-4">链式调用：调用 jQuery 对象的任何方法后返回的还是当前 jQuery 对象</li><li class="lvl-4">读写合一：读内部第一个 dom 元素、写内部所有的 dom 元素</li></ul></li></ul><h2 id="0-伪数组">0.伪数组</h2><ul class="lvl-0"><li class="lvl-2"><p>是一个Object对象</p></li><li class="lvl-2"><p>有length属性、数值下标属性</p></li><li class="lvl-2"><p>没有数组特别的方法：forEach()、push()、pop()、splice()</p></li><li class="lvl-2"><p>自定义伪数组如下：</p></li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br><span class="line">9</span><br><span class="line">10</span><br></pre></td><td class="code"><pre><span class="line">let weiArr = {};</span><br><span class="line">weiArr.length = 0;</span><br><span class="line">weiArr[0] = 'wrysmile';</span><br><span class="line">weiArr.length = 1;</span><br><span class="line">weiArr[1] = 980378775;</span><br><span class="line">weiArr.length = 2;</span><br><span class="line">for(let i = 0; i < weiArr.length; i++){</span><br><span class="line"> let obj = weiArr[i];</span><br><span class="line"> console.log(i,obj);</span><br><span class="line">}</span><br></pre></td></tr></table></figure><h2 id="1-基本行为">1.基本行为</h2><ul class="lvl-0"><li class="lvl-2"><p><s>size()</s>/length: 包含的 DOM 元素个数<strong style="color:red">（注意：size()在jQuery1.8已废弃）</strong></p></li><li class="lvl-2"><p>[index]/get(index): 得到对应位置的DOM元素</p></li><li class="lvl-2"><p>each(): 遍历包含的所有DOM元素</p></li><li class="lvl-2"><p>index(): 得到在所在兄弟元素中的下标</p></li></ul><h2 id="2-属性">2.属性</h2><h3 id="1-操作任意属性">(1).操作任意属性</h3><ul class="lvl-0"><li class="lvl-2"><p><code>attr()</code>：设置或返回被选元素的属性值</p></li><li class="lvl-2"><p><code>removeAttr()</code>：从每一个匹配的元素中删除一个属性</p></li><li class="lvl-2"><p><code>prop()</code>：获取在匹配的元素集中的第一个元素的属性值</p></li></ul><h4 id="strong-style-color-red-引申：attr和prop的区别-strong"><strong style="color:red">引申：attr和prop的区别</strong></h4><ul class="lvl-0"><li class="lvl-2"><p>attr() 操作属性值为非布尔值的属性</p></li><li class="lvl-2"><p>prop() 操作属性值为布尔值的属性，如 checked, selected 或者 disabled</p></li></ul><h3 id="2-操作class属性">(2).操作class属性</h3><ul class="lvl-0"><li class="lvl-2"><p><code>addClass()</code>：为每个匹配的元素添加指定的类名</p></li><li class="lvl-2"><p><code>removeClass()</code>：从所有匹配的元素中删除全部或者指定的类</p></li></ul><h3 id="3-操作HTML代码-文本-值">(3).操作HTML代码/文本/值</h3><ul class="lvl-0"><li class="lvl-2"><p><code>html()</code>：取得第一个匹配元素的html内容</p></li><li class="lvl-2"><p><code>val()</code>：获得匹配元素的当前值</p></li></ul><h2 id="3-CSS">3.CSS</h2><h3 id="1-读取-设置css样式">(1).读取/设置css样式</h3><ul class="lvl-0"><li class="lvl-2"><p><code>css()</code>：设置css样式/读取css值</p></li><li class="lvl-2"><p>设置多个样式时，应当封装为一个对象</p></li><li class="lvl-2"><p><strong style="color:red">注意：当设置CSS样式中的宽高时，可以不写 px 单位</strong></p></li></ul><h3 id="2-读取-设置标签的位置">(2).读取/设置标签的位置</h3><ul class="lvl-0"><li class="lvl-2"><p><code>offset()</code>：相对页面左上角的坐标</p></li><li class="lvl-2"><p><code>position()</code>：相对于父元素左上角的坐标</p></li><li class="lvl-2"><p><code>scrollTop()</code>：获取匹配元素相对滚动条顶部的偏移</p><ul class="lvl-2"><li class="lvl-4">得到页面滚动条的坐标：<code>$(document.body).scrollTop()+$(document.documentElement).scrollTop()</code></li><li class="lvl-4">设置滚动条的新坐标：<code>$('body,html').scrollTop(60)</code></li></ul></li><li class="lvl-2"><p><code>scrollLeft()</code>：获取匹配元素相对滚动条左侧的偏移</p></li></ul><h3 id="3-读取-设置标签的尺寸">(3).读取/设置标签的尺寸</h3><ul class="lvl-0"><li class="lvl-2"><p><code>heigh()/width()</code>：只计算内容尺寸</p></li><li class="lvl-2"><p><code>innerHeight()/innerWidth()</code>：计算内部尺寸（height/width + padding）</p></li><li class="lvl-2"><p><code>outerHeight()/outerWidth()</code>：计算外部尺寸（height/width + padding + border）</p></li><li class="lvl-2"><p><code>outerHeight(true)/outerWidth(true)</code>：计算外部尺寸（height/width + padding + border + margin）</p></li></ul><h2 id="4-筛选">4.筛选</h2><h3 id="1-过滤">(1).过滤</h3><ul class="lvl-0"><li class="lvl-2"><p>作用：在 jQuery 对象中的元素对象数组中过滤出一部分元素来，并封装成新的 jQuery 对象返回</p></li><li class="lvl-2"><p>下面中前三个是通过下标来过滤，后三个是根据选择器来过滤</p><ul class="lvl-2"><li class="lvl-4"><code>first()</code>：获取第一个元素</li><li class="lvl-4"><code>last()</code>：获取最后一个元素</li><li class="lvl-4"><code>eq(index|-index)</code>：获取第N个元素</li><li class="lvl-4"><code>filter(selector)</code>：筛选出与指定表达式匹配的元素集合</li><li class="lvl-4"><code>not(selector)</code>：删除与指定表达式匹配的元素</li><li class="lvl-4"><code>has(selector)</code>：保留包含特定后代的元素，去掉那些不含有指定后代的元素</li></ul></li></ul><h3 id="2-查找">(2).查找</h3><ul class="lvl-0"><li class="lvl-2"><p>作用：在已经匹配出的元素集合中根据选择器查找孩子/父母/兄弟标签</p><ul class="lvl-2"><li class="lvl-4"><code>children()</code>：查找当前元素的子标签中符合条件的元素</li><li class="lvl-4"><code>find()</code>：查找当前元素的后代标签中符合条件的元素</li><li class="lvl-4"><code>parent()</code>：查找当前元素的父元素</li><li class="lvl-4"><code>prevAll()</code>：查找当前元素之前所有的同辈元素</li><li class="lvl-4"><code>nextAll()</code>：查找当前元素之后所有的同辈元素</li><li class="lvl-4"><code>siblings()</code>：查找当前元素前后所有的兄弟元素</li></ul></li></ul><h2 id="5-文档">5.文档</h2><h3 id="1-添加节点">(1).添加节点</h3><ul class="lvl-0"><li class="lvl-2"><p><code>append(content)</code>：向当前匹配的所有元素内部的最后插入指定内容</p></li><li class="lvl-2"><p><code>prepend(content)</code>：向当前匹配的所有元素内部的最前面插入指定内容</p></li><li class="lvl-2"><p><code>before(content)</code>：将指定内容插入到当前所有匹配元素的前面</p></li><li class="lvl-2"><p><code>after(content)</code>：将指定内容插入到当前所有匹配元素的后面</p></li></ul><h3 id="2-替换节点">(2).替换节点</h3><ul class="lvl-0"><li class="lvl-2"><p><code>replaceWith(content)</code>：用指定内容替换所有匹配的标签</p></li><li class="lvl-2"><p><code>replaceAll(selector)</code>：用匹配的元素替换掉所有 selector 匹配到的元素</p></li></ul><h3 id="3-删除节点">(3).删除节点</h3><ul class="lvl-0"><li class="lvl-2"><p><code>empty()</code>：删除所有匹配元素的子元素</p></li><li class="lvl-2"><p><code>remove()</code>：删除所有匹配的元素</p></li></ul><h2 id="6-事件">6.事件</h2><h3 id="1-事件处理">(1).事件处理</h3><ul class="lvl-0"><li class="lvl-2"><p><code>on()</code>：在选择元素上绑定一个或多个事件的事件处理函数</p></li><li class="lvl-2"><p><code>off()</code>：在选择元素上移除一个或多个事件的事件处理函数</p></li><li class="lvl-2"><p><code>click()</code>：触发每一个匹配元素的click事件</p></li><li class="lvl-2"><p><code>mouseenter()</code>：当鼠标指针穿过元素时，会发生 mouseenter 事件</p></li><li class="lvl-2"><p><code>mouseleave()</code>：当鼠标指针离开元素时，会发生 mouseleave 事件</p></li></ul><h3 id="2-事件切换">(2).事件切换</h3><ul class="lvl-0"><li class="lvl-2"><p><code>hover()</code>：同时绑定鼠标移入和移出监听，它只需要接收两个回调函数</p></li></ul><h3 id="3-事件委派-委托">(3).事件委派(委托)</h3><h4 id="a-简介">a).简介</h4><ul class="lvl-0"><li class="lvl-2"><p>将多个子元素的事件监听委托给父辈元素处理，并且将监听回调加在了父辈元素上</p></li><li class="lvl-2"><p>当操作任何一个子元素时，事件会冒泡到父辈元素上面去</p></li><li class="lvl-2"><p><strong style="color:red">父辈元素不会直接处理事件，而是根据 event.target 得到发生事件的子元素，通过这个子元素调用事件回调函数</strong></p></li><li class="lvl-2"><p>优势：新增的元素没有事件监听、减少监听的数量</p></li></ul><h4 id="b-委派方法">b).委派方法</h4><ul class="lvl-0"><li class="lvl-2"><p><code>delegate()</code>：设置事件委托，参数为(childrenSelector, eventName, callback)</p></li><li class="lvl-2"><p><code>undelegate()</code>：移除事件委托</p></li></ul><h3 id="4-事件对象">(4).事件对象</h3><ul class="lvl-0"><li class="lvl-2"><p><code>event.clientX/Y</code>：事件坐标，相对视口左上角</p></li><li class="lvl-2"><p><code>event.pageX/Y</code>：事件坐标，相对页面左上角</p></li><li class="lvl-2"><p><code>event.offsetX/Y</code>：事件坐标，相对元素左上角</p></li><li class="lvl-2"><p><code>event.stopPropagation()</code>：阻止事件冒泡</p></li><li class="lvl-2"><p><code>event.preventDefault()</code>：取消事件的默认行为</p></li></ul><h3 id="strong-style-color-red-引申：区别-mouseover-与-mouseenter-strong"><strong style="color:red">引申：区别 mouseover 与 mouseenter</strong></h3><ul class="lvl-0"><li class="lvl-2"><p>mouseover: 在移入子元素时也会触发，对应 mouseout</p></li><li class="lvl-2"><p>mouseenter: 只在移入当前元素时才触发，对应 mouseleave</p><ul class="lvl-2"><li class="lvl-4">hover() 使用的就是 mouseenter() 和 mouseleave()</li></ul></li></ul><h3 id="strong-style-color-red-引申：区别-on-‘xxx’-fun-与-xxx-fun-strong"><strong style="color:red">引申：区别 on(‘xxx’,fun) 与 xxx(fun)</strong></h3><ul class="lvl-0"><li class="lvl-2"><p>前者通用但编码麻烦</p></li><li class="lvl-2"><p>后者编码简单，但有的事件没有对应的方法</p></li></ul><h2 id="7-效果">7.效果</h2><ul class="lvl-0"><li class="lvl-2"><p>以下效果都可以不传参数（代表默认值），也可以传数字、字符串、回调函数</p><ul class="lvl-2"><li class="lvl-4">数字：动画效果时长</li><li class="lvl-4">字符串：需要传入固定字符串 —— slow、normal、fast</li><li class="lvl-4">回调函数：动画执行完毕的回调</li></ul></li></ul><h3 id="1-淡入淡出动画">(1).淡入淡出动画</h3><ul class="lvl-0"><li class="lvl-2"><p>不断改变元素的透明度来实现的</p></li><li class="lvl-2"><p><code>fadeIn()</code>：实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数</p></li><li class="lvl-2"><p><code>fadeOut()</code>：实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数</p></li><li class="lvl-2"><p><code>fadeToggle()</code>：开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数</p></li></ul><h3 id="2-上下滑动动画">(2).上下滑动动画</h3><ul class="lvl-0"><li class="lvl-2"><p>不断改变元素的高度来实现的</p></li><li class="lvl-2"><p><code>slideUp()</code>：动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数</p></li><li class="lvl-2"><p><code>slideDown()</code>：动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数</p></li><li class="lvl-2"><p><code>slideToggle()</code>：切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数</p></li></ul><h3 id="3-显示隐藏动画">(3).显示隐藏动画</h3><ul class="lvl-0"><li class="lvl-2"><p>不断改变元素的尺寸和透明度来实现</p></li><li class="lvl-2"><p><code>show()</code>：(不)带动画的显示隐藏的匹配元素</p></li><li class="lvl-2"><p><code>hide()</code>：(不)带动画的隐藏显示的元素</p></li><li class="lvl-2"><p><code>toggle()</code>：(不)带动画的切换显示/隐藏</p></li></ul><h3 id="4-自定义动画">(4).自定义动画</h3><ul class="lvl-0"><li class="lvl-2"><p><code>animate()</code>：自定义动画效果的动画，里面可以传一个对象用来设置动画结束时的样式，这里不需要设置单位</p></li><li class="lvl-2"><p><code>stop()</code>：停止动画</p></li></ul><h1>四、多库共存</h1><ul class="lvl-0"><li class="lvl-2"><p>如果我们的项目中需要引入多个库且其中都使用到了 <code>$</code> 来进行调用，就会存在冲突，导致其余库和jQuery库无法执行</p></li><li class="lvl-2"><p>jQuery 库中可以使用相应的 API 来释放 <code>$</code> 的使用权，让另一个库可以正常使用，此时 jQuery 库就只能使用 jQuery 来进行调用了</p></li><li class="lvl-2"><p><code>jQuery.noConflict()</code> ：释放使用权</p></li></ul><h1>五、jQuery插件</h1><h2 id="1-扩展插件">1.扩展插件</h2><ul class="lvl-0"><li class="lvl-2"><p>扩展jQuery的工具方法：<code>jQuery.extend(object)</code></p></li><li class="lvl-2"><p>扩展jQuery对象的方法：<code>jQuery.fn.extend(object)</code></p></li><li class="lvl-2"><p>案例：将全选、全不选、反选封装到扩展插件中供别人使用</p><ul class="lvl-2"><li class="lvl-4">请点击 <a href="/demo/JSex/jQuery09.html" target="_blank">这里</a> 查看（为了体验到完整功能，请使用PC打开，源码右键“查看网页源代码”即可）</li></ul></li></ul><h2 id="2-jQuery插件">2.jQuery插件</h2><ul class="lvl-0"><li class="lvl-2"><p>是基于 jQuery 编写的扩展库，官方插件地址请点击 <a target="_blank" rel="external nofollow noopener noreferrer" href="https://plugins.jquery.com/">这里</a></p></li></ul><h3 id="1-jquery-validation">(1).jquery-validation</h3><ul class="lvl-0"><li class="lvl-2"><p>功能：是一款表单验证插件</p><ul class="lvl-2"><li class="lvl-4">一种声明式验证：程序员只需要声明各种验证规则。可以自定义验证错误信息</li></ul></li><li class="lvl-2"><p>可参考 <a target="_blank" rel="external nofollow noopener noreferrer" href="https://www.runoob.com/jquery/jquery-plugin-validate.html">菜鸟教程</a> 进行学习</p></li></ul><h4 id="插件使用方法">!插件使用方法</h4><ul class="lvl-0"><li class="lvl-2"><p>去<a target="_blank" rel="external nofollow noopener noreferrer" href="https://github.com/jquery-validation/jquery-validation">Github</a>下载该插件最新版<strong style="color:red">（jQuery官网已不再更新该插件了，所以需要自行去Github上下载）</strong></p></li><li class="lvl-2"><p>将如下3个 js文件引入到自己的项目里</p><ul class="lvl-2"><li class="lvl-4"><code>jquery-1.xx.x.js</code>：jQuery的js库</li><li class="lvl-4"><code>jquery.validate.js</code>：验证的js库</li><li class="lvl-4"><code>messages_zh.js</code>：错误信息的中文提示库</li></ul></li><li class="lvl-2"><p>可以对照该插件的 demo 直接在标签中设置相应的属性</p></li><li class="lvl-2"><p>设置好后需要调用一下该插件才可以正常运行</p></li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br></pre></td><td class="code"><pre><span class="line">$('form的id').validate();</span><br></pre></td></tr></table></figure><ul class="lvl-0"><li class="lvl-2"><p>也可以在以上的代码中传入一个对象，在对象中设置规则或者错误信息提示规则等</p></li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br><span class="line">4</span><br><span class="line">5</span><br><span class="line">6</span><br><span class="line">7</span><br><span class="line">8</span><br></pre></td><td class="code"><pre><span class="line">$('#form').validate({</span><br><span class="line"> messages: {</span><br><span class="line"> username: {</span><br><span class="line"> required: '必须的哈哈哈',</span><br><span class="line"> minlength: '你不够长'</span><br><span class="line"> }</span><br><span class="line"> }</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h3 id="2-jquery-UI">(2).jquery UI</h3><ul class="lvl-0"><li class="lvl-2"><p>功能：可以构建精选的用户界面交互，效果，小部件和主题等</p></li><li class="lvl-2"><p>请点击<a target="_blank" rel="external nofollow noopener noreferrer" href="https://jqueryui.com/">这里</a>进行相应主题的下载</p></li><li class="lvl-2"><p>将如下3个 js文件引入到自己的项目里</p><ul class="lvl-2"><li class="lvl-4"><code>jquery-1.xx.x.js</code>：jQuery的js库</li><li class="lvl-4"><code>jquery-ui.js</code>：该插件的js库</li><li class="lvl-4"><code>jquery-ui.css</code>：该插件的css文件</li></ul></li><li class="lvl-2"><p>想要用哪个UI组件，就去刚刚下载的插件中去直接复制然后自行修改样式</p><ul class="lvl-2"><li class="lvl-4">例如：Accordion为手风琴式效果，主要用来实现导航的切换</li></ul></li><li class="lvl-2"><p>然后使用 jQuery 对象调用相应方法即可</p></li></ul><h2 id="3-原生js插件">3.原生js插件</h2><h3 id="1-layDate">(1).layDate</h3><ul class="lvl-0"><li class="lvl-2"><p>功能：一款被广泛使用的高级 Web 日历组件</p></li><li class="lvl-2"><p>请点击<a target="_blank" rel="external nofollow noopener noreferrer" href="https://www.layui.com/laydate/?alone">这里</a>进行下载</p></li><li class="lvl-2"><p>将 layDate 下的所有文件全都复制到自己的项目中</p></li><li class="lvl-2"><p>将 <code>laydate.js</code> 引入到自己的项目中</p></li><li class="lvl-2"><p>创建一个表单元素并给其绑定一个id</p></li><li class="lvl-2"><p>使用如下语法进行调用：</p></li></ul><figure class="highlight plaintext"><table><tr><td class="gutter"><pre><span class="line">1</span><br><span class="line">2</span><br><span class="line">3</span><br></pre></td><td class="code"><pre><span class="line">laydate.render({</span><br><span class="line"> elem: 'id选择器'</span><br><span class="line">});</span><br></pre></td></tr></table></figure><h1>六、案例分析</h1><h2 id="1-多Tab切换功能">1.多Tab切换功能</h2><h3 id="1-思路">(1).思路</h3><h4 id="a-Tab实现">a).Tab实现</h4><ul class="lvl-0"><li class="lvl-2"><p>将Tab放入多级列表中，将Tab对应的内容放在盒子容器中</p></li><li class="lvl-2"><p>使用定位使两个内容连接在一起</p></li><li class="lvl-2"><p>使用 <code>display</code> 属性来控制内容的显示与否</p></li></ul><h4 id="b-切换Tab实现">b).切换Tab实现</h4><ul class="lvl-0"><li class="lvl-2"><p>先给3个li添加点击监听</p></li><li class="lvl-2"><p>隐藏当前已显示的内容</p></li><li class="lvl-2"><p>显示对应内容的div，得到当前点击的li在兄弟中的下标</p></li><li class="lvl-2"><p>找到对应内容的div并修改 <code>display</code> 属性</p></li></ul><h3 id="2-代码">(2).代码</h3><ul class="lvl-0"><li class="lvl-2"><p>请点击 <a href="/demo/JSex/jQuery02.html" target="_blank">这里</a> 查看（为了体验到完整功能，请使用PC打开，源码右键“查看网页源代码”即可）</p></li></ul><h2 id="2-回到顶部功能">2.回到顶部功能</h2><ul class="lvl-0"><li class="lvl-2"><p>瞬间滚动到顶部只需要将 scrollTop 值设置为0即可，以下主要说的是平滑滚动到顶部</p></li></ul><h3 id="1-思路-2">(1).思路</h3><ul class="lvl-0"><li class="lvl-2"><p>获取到总距离、总时间、间隔时间、间隔距离等数据</p></li><li class="lvl-2"><p>使用循环定时器不断滚动</p></li><li class="lvl-2"><p>当到达顶部时，停止定时器</p></li></ul><h3 id="2-代码-2">(2).代码</h3><ul class="lvl-0"><li class="lvl-2"><p>请点击 <a href="/demo/JSex/jQuery03.html" target="_blank">这里</a> 查看（为了体验到完整功能，请使用PC打开，源码右键“查看网页源代码”即可）</p></li></ul><h2 id="3-爱好选择功能">3.爱好选择功能</h2><h3 id="1-思路-3">(1).思路</h3><ul class="lvl-0"><li class="lvl-2"><p>点击’全选’: 选中所有爱好，并勾选’全选/全不选’</p></li><li class="lvl-2"><p>点击’全不选’: 所有爱好都不勾选，并取消勾选’全选/全不选’</p></li><li class="lvl-2"><p>点击’反选’: 改变所有爱好的勾选状态，并更新’全选/全不选’的选中状态</p></li><li class="lvl-2"><p>点击’全选/全不选’: 选中所有爱好, 或者全不选中</p></li><li class="lvl-2"><p>点击某个爱好时，必要时更新’全选/全不选’的选中状态</p></li><li class="lvl-2"><p>点击’提交’: 提示所有勾选的爱好</p></li></ul><h3 id="2-代码-3">(2).代码</h3><ul class="lvl-0"><li class="lvl-2"><p>请点击 <a href="/demo/JSex/jQuery04.html" target="_blank">这里</a> 查看（为了体验到完整功能，请使用PC打开，源码右键“查看网页源代码”即可）</p></li></ul><h2 id="4-表单的添加删除功能">4.表单的添加删除功能</h2><h3 id="1-思路-4">(1).思路</h3><ul class="lvl-0"><li class="lvl-2"><p>添加功能：</p><ul class="lvl-2"><li class="lvl-4">先收集表单中需要填写的数据</li><li class="lvl-4">生成对应的<code><tr></code>标签结构，并插入到表单的的<code><tbody></code>中</li><li class="lvl-4">给新添加的<code><tr></code>标签中的超链接设置点击事件，并传入删除的回调函数</li><li class="lvl-4">清除表单输入框中的内容</li></ul></li><li class="lvl-2"><p>删除功能：</p><ul class="lvl-2"><li class="lvl-4">找到表单后代中所有的超链接元素</li><li class="lvl-4">为这些超链接元素绑定点击事件，并传入删除的回调函数</li></ul></li><li class="lvl-2"><p>删除的回调函数：</p><ul class="lvl-2"><li class="lvl-4">使用 confirm() 方法来提示用户是否删除</li><li class="lvl-4">取消默认行为</li><li class="lvl-4">将删除功能中的回调函数单独封装出来，用来供添加功能使用</li></ul></li></ul><h3 id="2-代码-4">(2).代码</h3><ul class="lvl-0"><li class="lvl-2"><p>请点击 <a href="/demo/JSex/jQuery05.html" target="_blank">这里</a> 查看（为了体验到完整功能，请使用PC打开，源码右键“查看网页源代码”即可）</p></li></ul><h3 id="3-代码优化">(3).代码优化</h3><ul class="lvl-0"><li class="lvl-2"><p>以上的思路是将点击事件绑定给了当前元素，在新增元素时，需要额外的代码去将点击事件绑定给新加元素</p></li><li class="lvl-2"><p>可以使用事件委派来优化代码，将点击事件绑定给其父元素，优化后的页面代码如下：</p></li><li class="lvl-2"><p>请点击 <a href="/demo/JSex/jQuery06.html" target="_blank">这里</a> 查看（为了体验到完整功能，请使用PC打开，源码右键“查看网页源代码”即可）</p></li></ul><h2 id="5-轮播图自动切换功能">5.轮播图自动切换功能</h2><ul class="lvl-0"><li class="lvl-2"><p>轮播图虽然展示出来可能比较单调，就是一直轮播，但是其中的小逻辑也很多，我们可以分步骤来逐步实现</p></li><li class="lvl-2"><p>前端的HTML、CSS相关编写不赘述，主要讲述JS逻辑</p></li></ul><h3 id="1-思路-5">(1).思路</h3><ul class="lvl-0"><li class="lvl-2"><p>我们一般将相关功能放入匿名函数中，使其在页面加载完成以后才会加载</p></li><li class="lvl-2"><p>在实现功能前，我们最好先在全局中定义好我们需要的全局变量</p></li><li class="lvl-2"><p>首先先给轮播图左右的按钮绑定点击事件，使其平滑切换到下(上)一页</p></li><li class="lvl-2"><p>其次实现无限循环切换，即第一页的上一页为最后页，最后一页的下一页是第一页</p><ul class="lvl-2"><li class="lvl-4">这里主要是在结构中单独在将最后一张图片复制到第一位，把第一张图片复制到最后一位，在到达这一位置时，迅速切换图片下标，做到无缝切换</li></ul></li><li class="lvl-2"><p>一般轮播图都会自动进行切换，这时就需要用定时器来使其自动切换</p></li><li class="lvl-2"><p>但是在其自动切换时当用户的鼠标进入图片区域时，自动切换就会停止；当鼠标离开后，又开始自动切换</p></li><li class="lvl-2"><p>切换图片的时候下面的导航点也需要跟随图片进行切换，这里就需要使导航点的下标和图片的下标保持一致</p></li><li class="lvl-2"><p>导航点不仅会自动切换，还会跟随用户的点击切换到相应的图片，这里就需要对上面的逻辑进行一定程度的修改</p></li><li class="lvl-2"><p>最后我们需要对功能进行一定程度的测试，发现快速点击左右按钮时会出现半个图片，这里我们只需要设置个状态来判断是否点击即可</p></li></ul><h3 id="2-代码-5">(2).代码</h3><ul class="lvl-0"><li class="lvl-2"><p>请点击 <a href="/demo/JSex/jQuery07.html" target="_blank">这里</a> 查看（为了体验到完整功能，请使用PC打开，源码右键“查看网页源代码”即可）</p></li></ul><h2 id="6-导航栏显示折叠功能">6.导航栏显示折叠功能</h2><h3 id="1-思路-6">(1).思路</h3><ul class="lvl-0"><li class="lvl-2"><p>只要找到需要显示或折叠的多级列表</p></li><li class="lvl-2"><p>给这个多级列表绑定hover()事件</p></li><li class="lvl-2"><p>在移入移出时调用上下滑动动画即可（为了功能的完美体验，应该在每次动画前都停止到之前的所有动画）</p></li></ul><h3 id="2-代码-6">(2).代码</h3><ul class="lvl-0"><li class="lvl-2"><p>请点击 <a href="/demo/JSex/jQuery08.html" target="_blank">这里</a> 查看（为了体验到完整功能，请使用PC打开，源码右键“查看网页源代码”即可）</p></li></ul><h2 id="7-京东商品详情页综合案例">7.京东商品详情页综合案例</h2></div><footer class="post-footer"><div class="my_post_copyright"><script src="//cdn.bootcss.com/clipboard.js/1.5.10/clipboard.min.js"></script><script src="https://cdn.bootcss.com/jquery/2.0.0/jquery.min.js"></script><script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script><p><span>本文标题:</span><a href="/Learn-jQuery.html">学习笔记：jQuery（尚硅谷）</a></p><p><span>文章作者:</span><a href="/" title="访问 Zhang Yangeng 的个人博客">Zhang Yangeng</a></p><p><span>发布时间:</span>2021年03月21日 - 20:03</p><p><span>最后更新:</span>2023年01月31日 - 18:01</p><p><span>许可协议:</span><i class="fab fa-creative-commons"></i> <a rel="external nofollow noopener noreferrer" href="https://creativecommons.org/licenses/by-nc-nd/4.0/" target="_blank" title="Attribution-NonCommercial-NoDerivatives 4.0 International (CC BY-NC-ND 4.0)">署名-非商业性使用-禁止演绎 4.0 国际</a></p><p><span>注意事项:</span>转载请保留原文链接及作者，请尊重作者的劳动成果</p><p><span>原始链接:</span><a href="/Learn-jQuery.html" title="学习笔记：jQuery（尚硅谷）">https://www.wrysmile.cn/Learn-jQuery.html</a> <span class="copy-path" title="点击复制文章链接"><i class="fa fa-clipboard" data-clipboard-text="https://www.wrysmile.cn/Learn-jQuery.html" aria-label="复制成功！"></i></span></p></div><script>var clipboard=new Clipboard(".fa-clipboard");$(".fa-clipboard").click(function(){clipboard.on("success",function(){swal({title:"",text:"复制成功",icon:"success",showConfirmButton:!0})})})</script><div class="reward-container"><div>坚持原创技术分享，您的支持将是对我最大的鼓励！</div><button onclick='document.querySelector(".post-reward").classList.toggle("active")'>赞赏</button><div class="post-reward"><div><img src="https://s2.ax1x.com/2019/01/28/kKrX7T.png" alt="Zhang Yangeng 微信"> <span>微信</span></div><div><img src="https://i.loli.net/2019/01/25/5c4ac75f2e5b7.jpg" alt="Zhang Yangeng 支付宝"> <span>支付宝</span></div></div></div><div class="post-tags"><a href="/tags/%E5%89%8D%E7%AB%AF/" rel="tag"><i class="fa fa-tag"></i> 前端</a> <a href="/tags/%E5%AD%A6%E4%B9%A0/" rel="tag"><i class="fa fa-tag"></i> 学习</a></div><div class="post-nav"><div class="post-nav-item"><a href="/ShortcutKey.html" rel="prev" title="强烈推荐：快捷键集合"><i class="fa fa-chevron-left"></i> 强烈推荐：快捷键集合</a></div><div class="post-nav-item"><a href="/Learn-NodeJS.html" rel="next" title="学习笔记：NodeJS（尚硅谷）">学习笔记：NodeJS（尚硅谷） <i class="fa fa-chevron-right"></i></a></div></div></footer></article></div><div class="comments" id="lv-container" data-id="city" data-uid="MTAyMC80MjQ5Ni8xOTA0Mw=="></div></div></main><footer class="footer"><div class="footer-inner"><div class="copyright">© 2019 – <span itemprop="copyrightYear">2023</span> <span class="with-love"><i class="fa fa-heart"></i> </span><span class="author" itemprop="copyrightHolder">Wrysmile</span></div><div class="wordcount"><span class="post-meta-item"><span class="post-meta-item-icon"><i class="fa fa-chart-line"></i> </span><span>站点总字数：</span> <span title="站点总字数">413k</span> </span><span class="post-meta-item"><span class="post-meta-item-icon"><i class="fa fa-coffee"></i> </span><span>站点阅读时长 ≈</span> <span title="站点阅读时长">6:15</span></span></div><div class="busuanzi-count"><span class="post-meta-item" id="busuanzi_container_site_uv"><span class="post-meta-item-icon"><i class="fa fa-user"></i> </span><span class="site-uv" title="总访客量"><span id="busuanzi_value_site_uv"></span> </span></span><span class="post-meta-item" id="busuanzi_container_site_pv"><span class="post-meta-item-icon"><i class="fa fa-eye"></i> </span><span class="site-pv" title="总访问量"><span id="busuanzi_value_site_pv"></span></span></span></div><script color="0,0,255" opacity="0.5" zindex="-1" count="99" src="https://cdn.jsdelivr.net/npm/canvas-nest.js@1/dist/canvas-nest.js"></script><script type="text/javascript">!function(e,r){function t(){for(var e=0;e<n.length;e++)n[e].alpha<=0?(r.body.removeChild(n[e].el),n.splice(e,1)):(n[e].y--,n[e].scale+=.004,n[e].alpha-=.013,n[e].el.style.cssText="left:"+n[e].x+"px;top:"+n[e].y+"px;opacity:"+n[e].alpha+";transform:scale("+n[e].scale+","+n[e].scale+") rotate(45deg);background:"+n[e].color+";z-index:99999");requestAnimationFrame(t)}var o,n=[];e.requestAnimationFrame=e.requestAnimationFrame||e.webkitRequestAnimationFrame||e.mozRequestAnimationFrame||e.oRequestAnimationFrame||e.msRequestAnimationFrame||function(e){setTimeout(e,1e3/60)},function(t){var a=r.createElement("style");a.type="text/css";try{a.appendChild(r.createTextNode(t))}catch(e){a.styleSheet.cssText=t}r.getElementsByTagName("head")[0].appendChild(a)}(".heart{width: 10px;height: 10px;position: fixed;background: #f00;transform: rotate(45deg);-webkit-transform: rotate(45deg);-moz-transform: rotate(45deg);}.heart:after,.heart:before{content: '';width: inherit;height: inherit;background: inherit;border-radius: 50%;-webkit-border-radius: 50%;-moz-border-radius: 50%;position: fixed;}.heart:after{top: -5px;}.heart:before{left: -5px;}"),o="function"==typeof e.onclick&&e.onclick,e.onclick=function(e){var t,a;o&&o(),t=e,(a=r.createElement("div")).className="heart",n.push({el:a,x:t.clientX-5,y:t.clientY-5,scale:1,alpha:1,color:"rgb("+~~(255*Math.random())+","+~~(255*Math.random())+","+~~(255*Math.random())+")"}),r.body.appendChild(a)},t()}(window,document)</script><script type="text/javascript">var titleTime,OriginTitle=document.title;document.addEventListener("visibilitychange",function(){document.hidden?($('[rel="icon"]').attr("href","/img/TEP.ico"),document.title="╭(°A°`)╮ 页面崩溃啦 ~",clearTimeout(titleTime)):($('[rel="icon"]').attr("href","/favicon.ico"),document.title="(ฅ>ω<*ฅ) 噫又好了~"+OriginTitle,titleTime=setTimeout(function(){document.title=OriginTitle},2e3))})</script></div></footer><script src="https://cdn.jsdelivr.net/npm/[email protected]/lib/anime.min.js" integrity="sha256-XL2inqUJaslATFnHdJOi9GfQ60on8Wx1C2H8DYiN1xY=" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script><script src="https://cdn.jsdelivr.net/npm/@fancyapps/[email protected]/dist/jquery.fancybox.min.js" integrity="sha256-yt2kYMy0w8AbtF89WXb2P1rfjcP/HTHLT7097U8Y5b8=" crossorigin="anonymous"></script><script src="/js/comments.js"></script><script src="/js/utils.js"></script><script src="/js/motion.js"></script><script src="/js/next-boot.js"></script><script src="/js/bookmark.js"></script><script src="/js/third-party/search/local-search.js"></script><script class="next-config" data-name="nprogress" type="application/json">{"enable":true,"spinner":false}</script><script src="/js/third-party/nprogress.js"></script><script async src="https://busuanzi.ibruce.info/busuanzi/2.3/busuanzi.pure.mini.js"></script><script class="next-config" data-name="leancloud_visitors" type="application/json">{"enable":true,"app_id":"mzhbgeWR9BA3SvqtvaAJulC1-gzGzoHsz","app_key":"xcGndtx2gmyop5yrT6euUk9G","server_url":null,"security":false}</script><script src="/js/third-party/statistics/lean-analytics.js"></script><script src="/js/third-party/comments/livere.js"></script></body></html>