657 lines
88 KiB
HTML
657 lines
88 KiB
HTML
<!DOCTYPE html>
|
||
<html lang="en">
|
||
|
||
<head>
|
||
<meta charset="UTF-8">
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||
<title>
|
||
jQuery
|
||
</title>
|
||
<meta name="description" content="">
|
||
<meta name="keywords" content="">
|
||
<meta name="author" content="Mozzie">
|
||
<link rel="canonical" href="https://mozzie.cn/2023/11/06/clqkoay71000z20z356kk5qf7/">
|
||
|
||
|
||
<link rel="icon" type="image/svg" href='data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M16 7h1a2 2 0 0 1 2 2v.5a.5.5 0 0 0 .5.5a.5.5 0 0 1 .5.5v3a.5.5 0 0 1-.5.5a.5.5 0 0 0-.5.5v.5a2 2 0 0 1-2 2h-2"></path><path d="M8 7H6a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h1"></path><path d="M12 8l-2 4h3l-2 4"></path></g></svg>'>
|
||
|
||
|
||
|
||
<link rel="stylesheet" href="/css/7265f98e.css">
|
||
|
||
<script>window.i18n = {"tip-status-done":"完成","tip-status-default":"全部","tip-status-todo":"计划","tip-status-doing":"进行","tip-status-other":"其他","text-select":"选择","text-move":"移动","text-esc":"退出","January":"一月","February":"二月","March":"三月","April":"四月","May":"五月","June":"六月","July":"七月","August":"八月","September":"九月","October":"十月","November":"十一月","December":"十二月"}</script>
|
||
<meta name="generator" content="Hexo 7.0.0"></head>
|
||
|
||
<body id="app">
|
||
<aside id="aside-box" class="left-aside">
|
||
<div class="header">
|
||
|
||
<link rel="stylesheet" href="/css/61875ce9.css">
|
||
|
||
<div class="profile">
|
||
<a class="badge" href="/">
|
||
<span>Hi</span>
|
||
<span>Mozzie</span>
|
||
</a>
|
||
<cosy-tooltip id="left-aside-button" placement="right">
|
||
<span slot="content">
|
||
<span>显示 / 隐藏 左侧导航</span>
|
||
<cosy-short-key>[</cosy-short-key>
|
||
</span>
|
||
<cosy-icon>
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||
<g fill="none">
|
||
<path d="M16 4c1.104-.019 2 .896 2 2v8a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2h12zm1 2a1 1 0 0 0-1-1h-2.995v10H16a1 1 0 0 0 1-1V6zm-4.995 9V5H4.001a1 1 0 0 0-1 1v8a1 1 0 0 0 1 1h8.004z" fill="currentColor"></path>
|
||
</g>
|
||
</svg>
|
||
</cosy-icon>
|
||
</cosy-tooltip>
|
||
</div>
|
||
|
||
<script src="/js/a66044b6.js"></script>
|
||
|
||
|
||
|
||
|
||
<cosy-search id="post-search" placeholder="搜索">
|
||
<div slot="short-key">
|
||
<cosy-short-key>⌘</cosy-short-key>
|
||
<cosy-short-key>K</cosy-short-key>
|
||
</div>
|
||
</cosy-search>
|
||
|
||
|
||
<script>
|
||
window.algolia = {
|
||
appId: "5DTW808BZ8",
|
||
SearchOnlyAPIKey: "27845b245efc8a2853cc0bdc7366ea26"
|
||
}
|
||
</script>
|
||
|
||
|
||
<script src="/js/5f00f278.js"></script>
|
||
|
||
</div>
|
||
<div class="aside-category">
|
||
|
||
<link rel="stylesheet" href="/css/db04a759.css">
|
||
|
||
|
||
<nav class="category-nav cosy-scrollbar">
|
||
<ul><li data-path="archives">
|
||
<a href="/archives">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"><g fill="none"><path d="M3.5 3A1.5 1.5 0 0 0 2 4.5v4A1.5 1.5 0 0 0 3.5 10h9A1.5 1.5 0 0 0 14 8.5v-4A1.5 1.5 0 0 0 12.5 3h-9zM3 4.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-4zm.5 6.5A1.5 1.5 0 0 0 2 12.5v4A1.5 1.5 0 0 0 3.5 18h9a1.5 1.5 0 0 0 1.5-1.5v-4a1.5 1.5 0 0 0-1.5-1.5h-9zM3 12.5a.5.5 0 0 1 .5-.5h9a.5.5 0 0 1 .5.5v4a.5.5 0 0 1-.5.5h-9a.5.5 0 0 1-.5-.5v-4zm14-.063a2.003 2.003 0 0 1-2.5-1.937A2 2 0 0 1 16 8.563a2.005 2.005 0 0 1 1 0a2 2 0 0 1 0 3.874zM16.5 3a.5.5 0 0 1 .5.5v4.041a3.02 3.02 0 0 0-1 0V3.5a.5.5 0 0 1 .5-.5zm0 10.5c-.17 0-.337-.014-.5-.041V17.5a.5.5 0 0 0 1 0v-4.041c-.163.027-.33.041-.5.041z" fill="currentColor"></path></g></svg>
|
||
<div class="ellipsis">归档</div>
|
||
</a>
|
||
</li><li data-path="cosy-roadmap">
|
||
<a href="/cosy-roadmap">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"><g fill="none"><path d="M9.384 2a1 1 0 0 0-.966.742L4.616 17H2.5a.5.5 0 0 0 0 1h15a.5.5 0 0 0 0-1h-2.116L11.582 2.742A1 1 0 0 0 10.616 2H9.384zM5.651 17l.8-3H11.5a.5.5 0 0 0 0-1H6.717l.534-2H10.5a.5.5 0 0 0 0-1H7.517l1.867-7h1.232l3.733 14H5.651z" fill="currentColor"></path></g></svg>
|
||
<div class="ellipsis">路线图</div>
|
||
</a>
|
||
</li><li data-path="cosy-resume">
|
||
<a href="/cosy-resume">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20"><g fill="none"><path d="M8.5 4.498a1.5 1.5 0 1 1 3 0a1.5 1.5 0 0 1-3 0zm1.5-2.5a2.5 2.5 0 0 0-2.43 3.086L5.471 4.15a1.761 1.761 0 0 0-2.317.88c-.4.882-.008 1.917.877 2.31L7 8.662v2.287l-1.877 4.645a1.75 1.75 0 0 0 3.245 1.311l1.556-3.849a.073.073 0 0 1 .028-.038a.086.086 0 0 1 .046-.012c.02 0 .035.005.046.012a.074.074 0 0 1 .028.038l1.555 3.849a1.75 1.75 0 0 0 3.245-1.311L13 10.96V8.662l2.968-1.322a1.74 1.74 0 0 0 .877-2.31a1.761 1.761 0 0 0-2.317-.88l-2.097.934a2.5 2.5 0 0 0-2.43-3.086zM4.065 5.444a.761.761 0 0 1 1-.38l3.918 1.744a2.5 2.5 0 0 0 2.034 0l3.918-1.744a.761.761 0 0 1 1 .38a.739.739 0 0 1-.373.983l-2.969 1.321a1 1 0 0 0-.593.914v2.298a1 1 0 0 0 .073.375l1.872 4.633a.75.75 0 0 1-1.39.562l-1.556-3.849c-.364-.9-1.639-.9-2.003 0l-1.555 3.85a.75.75 0 1 1-1.39-.562l1.876-4.646A1 1 0 0 0 8 10.95V8.662a1 1 0 0 0-.593-.914L4.438 6.427a.739.739 0 0 1-.373-.983z" fill="currentColor"></path></g></svg>
|
||
<div class="ellipsis">简历</div>
|
||
</a>
|
||
</li></ul>
|
||
<ul><li class="">
|
||
<a href="/categories/EQ/">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M5.636 5.636a9 9 0 0 1 13.397.747L13.414 12l5.619 5.617A9 9 0 1 1 5.636 5.636z"></path><circle cx="11.5" cy="7.5" r="1" fill="currentColor"></circle></g></svg>
|
||
<div class="ellipsis">
|
||
<span>EQ</span>
|
||
</div>
|
||
</a>
|
||
</li><li class="">
|
||
<a href="/categories/Finance/">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><circle cx="12" cy="12" r="9"></circle><path d="M14.8 9A2 2 0 0 0 13 8h-2a2 2 0 0 0 0 4h2a2 2 0 0 1 0 4h-2a2 2 0 0 1-1.8-1"></path><path d="M12 6v2m0 8v2"></path></g></svg>
|
||
<div class="ellipsis">
|
||
<span>Finance</span>
|
||
</div>
|
||
</a>
|
||
</li><li class="active">
|
||
<a href="/categories/Front-End/">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 4l-2 14.5l-6 2l-6-2L4 4z"></path><path d="M7.5 8h3v8l-2-1"></path><path d="M16.5 8H14a.5.5 0 0 0-.5.5v3a.5.5 0 0 0 .5.5h1.423a.5.5 0 0 1 .495.57L15.5 15.5l-2 .5"></path></g></svg>
|
||
<div class="ellipsis">
|
||
<span>Front-End</span>
|
||
</div>
|
||
</a>
|
||
</li><li class="">
|
||
<a href="/categories/Hexo/">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M4 17v1a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-1"></path><path d="M8 16h8"></path><path d="M8.322 12.582l7.956.836"></path><path d="M8.787 9.168l7.826 1.664"></path><path d="M10.096 5.764l7.608 2.472"></path></g></svg>
|
||
<div class="ellipsis">
|
||
<span>Hexo</span>
|
||
</div>
|
||
</a>
|
||
</li><li class="">
|
||
<a href="/categories/%E6%B1%82%E5%AD%A6%E4%B9%8B%E8%B7%AF/">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M7 4a2 2 0 0 0-2 2v3a2 3 0 0 1-2 3a2 3 0 0 1 2 3v3a2 2 0 0 0 2 2"></path><path d="M17 4a2 2 0 0 1 2 2v3a2 3 0 0 0 2 3a2 3 0 0 0-2 3v3a2 2 0 0 1-2 2"></path></g></svg>
|
||
<div class="ellipsis">
|
||
<span>求学之路</span>
|
||
</div>
|
||
</a>
|
||
</li><li class="">
|
||
<a href="/categories/%E8%87%AA%E5%AA%92%E4%BD%93/">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24"><path d="M9 12a4 4 0 1 0 4 4V4a5 5 0 0 0 5 5" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>
|
||
<div class="ellipsis">
|
||
<span>自媒体</span>
|
||
</div>
|
||
</a>
|
||
</li></ul>
|
||
</nav>
|
||
|
||
|
||
<script src="/js/118098c2.js"></script>
|
||
|
||
</div>
|
||
<div class="bottom">
|
||
<cosy-tooltip id="button-preference" placement="right">
|
||
<span slot="content">
|
||
<span>偏好</span>
|
||
<cosy-short-key>⌘</cosy-short-key>
|
||
<cosy-short-key>p</cosy-short-key>
|
||
</span>
|
||
<cosy-icon bordered id="button-about-cosy-theme">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 16 16">
|
||
<g fill="none">
|
||
<path d="M8 6a2 2 0 1 0 0 4a2 2 0 0 0 0-4zM7 8a1 1 0 1 1 2 0a1 1 0 0 1-2 0zm3.618-3.602a.708.708 0 0 1-.824-.567l-.26-1.416a.354.354 0 0 0-.275-.282a6.072 6.072 0 0 0-2.519 0a.354.354 0 0 0-.275.282l-.259 1.416a.71.71 0 0 1-.936.538l-1.359-.484a.355.355 0 0 0-.382.095c-.569.627-1 1.367-1.262 2.173a.352.352 0 0 0 .108.378l1.102.931a.704.704 0 0 1 0 1.076l-1.102.931a.352.352 0 0 0-.108.378A5.986 5.986 0 0 0 3.53 12.02a.355.355 0 0 0 .382.095l1.36-.484a.708.708 0 0 1 .936.538l.258 1.416c.026.14.135.252.275.281a6.075 6.075 0 0 0 2.52 0a.353.353 0 0 0 .274-.281l.26-1.416a.71.71 0 0 1 .936-.538l1.359.484c.135.048.286.01.382-.095c.569-.627 1-1.367 1.262-2.173a.352.352 0 0 0-.108-.378l-1.102-.931a.703.703 0 0 1 0-1.076l1.102-.931a.352.352 0 0 0 .108-.378A5.985 5.985 0 0 0 12.47 3.98a.355.355 0 0 0-.382-.095l-1.36.484a.71.71 0 0 1-.111.03zm-6.62.58l.937.333a1.71 1.71 0 0 0 2.255-1.3l.177-.97a5.105 5.105 0 0 1 1.265 0l.178.97a1.708 1.708 0 0 0 2.255 1.3L12 4.977c.255.334.467.698.63 1.084l-.754.637a1.704 1.704 0 0 0 0 2.604l.755.637a4.99 4.99 0 0 1-.63 1.084l-.937-.334a1.71 1.71 0 0 0-2.255 1.3l-.178.97a5.099 5.099 0 0 1-1.265 0l-.177-.97a1.708 1.708 0 0 0-2.255-1.3L4 11.023a4.987 4.987 0 0 1-.63-1.084l.754-.638a1.704 1.704 0 0 0 0-2.603l-.755-.637c.164-.386.376-.75.63-1.084z" fill="currentColor"></path>
|
||
</g>
|
||
</svg>
|
||
</cosy-icon>
|
||
</cosy-tooltip>
|
||
</div>
|
||
</aside>
|
||
<main>
|
||
|
||
<link rel="stylesheet" href="/css/9fa090c7.css">
|
||
|
||
|
||
<div class="post-container">
|
||
<header>
|
||
<div class="left">
|
||
|
||
<link rel="stylesheet" href="/css/7d333f9e.css">
|
||
|
||
<nav class="breadcrumb">
|
||
<section>
|
||
<cosy-tooltip placement="bottom-left">
|
||
<span slot="content"><span>首页</span>
|
||
<cosy-short-key>⌘</cosy-short-key>
|
||
<cosy-short-key>H</cosy-short-key>
|
||
</span>
|
||
<cosy-icon href="/">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||
<g fill="none">
|
||
<path d="M8.998 2.388a1.5 1.5 0 0 1 2.005 0l5.5 4.942A1.5 1.5 0 0 1 17 8.445V15.5a1.5 1.5 0 0 1-1.5 1.5H13a1.5 1.5 0 0 1-1.5-1.5V12a.5.5 0 0 0-.5-.5H9a.5.5 0 0 0-.5.5v3.5A1.5 1.5 0 0 1 7 17H4.5A1.5 1.5 0 0 1 3 15.5V8.445c0-.425.18-.83.498-1.115l5.5-4.942zm1.336.744a.5.5 0 0 0-.668 0l-5.5 4.942A.5.5 0 0 0 4 8.445V15.5a.5.5 0 0 0 .5.5H7a.5.5 0 0 0 .5-.5V12A1.5 1.5 0 0 1 9 10.5h2a1.5 1.5 0 0 1 1.5 1.5v3.5a.5.5 0 0 0 .5.5h2.5a.5.5 0 0 0 .5-.5V8.445a.5.5 0 0 0-.166-.371l-5.5-4.942z" fill="currentColor"></path>
|
||
</g>
|
||
</svg>
|
||
</cosy-icon>
|
||
</cosy-tooltip>
|
||
|
||
|
||
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||
<g fill="none">
|
||
<path d="M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill="currentColor"></path>
|
||
</g>
|
||
</svg>
|
||
<a class="ellipsis" href="/categories/Front-End/">
|
||
Front-End
|
||
</a>
|
||
|
||
|
||
|
||
<svg class="arrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||
<g fill="none">
|
||
<path d="M7.733 4.207a.75.75 0 0 1 1.06.026l5.001 5.25a.75.75 0 0 1 0 1.035l-5 5.25a.75.75 0 1 1-1.087-1.034L12.216 10l-4.51-4.734a.75.75 0 0 1 .027-1.06z" fill="currentColor"></path>
|
||
</g>
|
||
</svg>
|
||
<span class="ellipsis">
|
||
jQuery
|
||
</span>
|
||
|
||
</section>
|
||
</nav>
|
||
|
||
|
||
<script src="/js/31d6cfe0.js"></script>
|
||
|
||
</div>
|
||
<div class="right">
|
||
|
||
<cosy-tooltip id="toc-show-button" placement="left">
|
||
<span slot="content">
|
||
<span>显示 / 隐藏 文章目录</span>
|
||
<cosy-short-key>]</cosy-short-key>
|
||
</span>
|
||
<cosy-icon>
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||
<g fill="none">
|
||
<path d="M4 4c-1.104-.019-2 .896-2 2v8a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2H4zM3 6a1 1 0 0 1 1-1h2.995v10H4a1 1 0 0 1-1-1V6zm4.995 9V5h8.004a1 1 0 0 1 1 1v8a1 1 0 0 1-1 1H7.995z" fill="currentColor"></path>
|
||
</g>
|
||
</svg>
|
||
</cosy-icon>
|
||
</cosy-tooltip>
|
||
|
||
</div>
|
||
</header>
|
||
<div class="content">
|
||
<main class="cosy-scrollbar">
|
||
<div class="article-container">
|
||
<!-- 渲染文章内容 -->
|
||
<article>
|
||
<!-- 文章标题 -->
|
||
<h1 class="post-title">jQuery</h1>
|
||
<div class="last-updated">
|
||
上次更新: 2023-11-06 16:02:35
|
||
</div>
|
||
<!-- 文章 -->
|
||
<h1 id="基础"><a href="#基础" class="headerlink" title="基础"></a>基础</h1><p>在 <code>window</code> 对象中挂载了 <code>$</code>和<code>jQuery</code></p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">window<span class="token punctuation">.</span><span class="token function">jQuery</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
window<span class="token punctuation">.</span>$ <span class="token operator">=</span> window<span class="token punctuation">.</span>jQuery<span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="模块化"><a href="#模块化" class="headerlink" title="模块化"></a>模块化</h1><h2 id="原始写法"><a href="#原始写法" class="headerlink" title="原始写法"></a>原始写法</h2><p>只要把不同的函数（以及记录状态的变量）简单地放在一起，就算是一个模块。</p>
|
||
<blockquote>
|
||
<p>缺点很明显：”污染”了全局变量，无法保证不与其他模块发生变量名冲突，而且模块成员之间看不出直接关系。</p>
|
||
</blockquote>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">m1</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">//...</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">function</span> <span class="token function">m2</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">//...</span>
|
||
<span class="token punctuation">}</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="对象写法"><a href="#对象写法" class="headerlink" title="对象写法"></a>对象写法</h2><p>把模块写成一个对象</p>
|
||
<blockquote>
|
||
<p>写法会暴露所有模块成员，内部状态可以被外部改写。</p>
|
||
</blockquote>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> module1 <span class="token operator">=</span> <span class="token keyword">new</span> <span class="token class-name">Object</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token literal-property property">_count</span><span class="token operator">:</span> <span class="token number">0</span><span class="token punctuation">,</span>
|
||
|
||
<span class="token function-variable function">m1</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">//...</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
|
||
<span class="token function-variable function">m2</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">//...</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 使用</span>
|
||
module1<span class="token punctuation">.</span><span class="token function">m1</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="IIFE-立即执行函数写法-推荐"><a href="#IIFE-立即执行函数写法-推荐" class="headerlink" title="IIFE 立即执行函数写法[推荐]"></a>IIFE 立即执行函数写法[推荐]</h2><blockquote>
|
||
<p>外部代码无法读取内部的成员变量</p>
|
||
</blockquote>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> module1 <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">var</span> _count <span class="token operator">=</span> <span class="token number">0</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">var</span> <span class="token function-variable function">m1</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">//...</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">var</span> <span class="token function-variable function">m2</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">//...</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token keyword">return</span> <span class="token punctuation">{</span>
|
||
<span class="token literal-property property">m1</span><span class="token operator">:</span> m1<span class="token punctuation">,</span>
|
||
<span class="token literal-property property">m2</span><span class="token operator">:</span> m2<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
console<span class="token punctuation">.</span><span class="token function">info</span><span class="token punctuation">(</span>module1<span class="token punctuation">.</span>_count<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//undefined</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="宽-放大模式"><a href="#宽-放大模式" class="headerlink" title="(宽)放大模式"></a>(宽)放大模式</h2><p>如果一个模块很大，必须分成几个部分，或者一个模块需要继承另一个模块，这时就有必要采用”放大模式”</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> module1 <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">mod</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
mod<span class="token punctuation">.</span><span class="token function-variable function">m3</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">//...</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">;</span>
|
||
<span class="token keyword">return</span> mod<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>module1<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p>mod 可能存在异步，不知道内部哪个部分会先加载，如果采用上面的写法，第一个执行的部分有可能加载一个不存在空对象，这时就要采用”宽放大模式”。</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> module1 <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">mod</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">//...</span>
|
||
<span class="token keyword">return</span> mod<span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>window<span class="token punctuation">.</span>module1 <span class="token operator">||</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="输入全局变量-推荐"><a href="#输入全局变量-推荐" class="headerlink" title="输入全局变量[推荐]"></a>输入全局变量[推荐]</h2><p>为了在模块内部调用全局变量，必须显式地将其他变量输入模块</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">var</span> module1 <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">$<span class="token punctuation">,</span> <span class="token constant">YAHOO</span></span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">//...</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>jQuery<span class="token punctuation">,</span> <span class="token constant">YAHOO</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="链式操作"><a href="#链式操作" class="headerlink" title="链式操作"></a>链式操作</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'#child'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'red'</span><span class="token punctuation">)</span>
|
||
<span class="token comment">// end() 函数返回上一级</span>
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'div'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">'#child'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">'red'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">end</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span>addClass（<span class="token string">'yellow'</span>）<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="选择器"><a href="#选择器" class="headerlink" title="选择器"></a>选择器</h1><h2 id="筛选器"><a href="#筛选器" class="headerlink" title="筛选器"></a>筛选器</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// $('li').first()</span>
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"li:first"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//第一个元素</span>
|
||
<span class="token comment">// $('li').last()</span>
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"li:last"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//最后一个元素</span>
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"tr:even"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//索引为偶数的元素，从 0 开始</span>
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"tr:odd"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//索引为奇数的元素，从 0 开始</span>
|
||
<span class="token comment">// $("tr").eq(1)</span>
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"tr:eq(1)"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//给定索引值的元素</span>
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"tr:gt(0)"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//大于给定索引值的元素</span>
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"tr:lt(2)"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//小于给定索引值的元素</span>
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">":focus"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//当前获取焦点的元素</span>
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">":animated"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//正在执行动画效果的元素</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="内容选择器"><a href="#内容选择器" class="headerlink" title="内容选择器"></a>内容选择器</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"div:contains('nick')"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//包含nick文本的元素</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"td:empty"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//不包含子元素或者文本的空元素</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"div:has(p)"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//含有选择器所匹配的元素</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"td:parent"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//含有子元素或者文本的元素</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="表单选择器"><a href="#表单选择器" class="headerlink" title="表单选择器"></a>表单选择器</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">":input"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//匹配所有 input, textarea, select 和 button 元素</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">":text"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//所有的单行文本框</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">":password"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//所有密码框</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">":radio"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//所有单选按钮</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">":checkbox"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//所有复选框</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">":submit"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//所有提交按钮</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">":reset"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//所有重置按钮</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">":button"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//所有button按钮</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">":file"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//所有文件域</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"input:radio[name=sex]:checked"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//所有name 尾input选中的元素</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"select option:selected"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//select中所有选中的option元素</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="查找"><a href="#查找" class="headerlink" title="查找"></a>查找</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#xxx"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//返回 一个 jquery 对象</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#xxx"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">".xxx"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//查找#xxx里的.xxx元素</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#xxx"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">parent</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//获取父类</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#xxx"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">parents</span><span class="token punctuation">(</span><span class="token string">"xxx"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//获取xxx祖先</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#xxx"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">children</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//获取子类</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#xxx"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">siblings</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//获取同一父类的其他元素</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#xxx"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">next</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//获取下一个元素</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#xxx"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prev</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//获取上一个元素</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="属性操作"><a href="#属性操作" class="headerlink" title="属性操作"></a>属性操作</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"img"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">"src"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//返回文档中所有图像的src属性值</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"img"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">"src"</span><span class="token punctuation">,</span> <span class="token string">"test.jpg"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//设置所有图像的src属性</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"img"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeAttr</span><span class="token punctuation">(</span><span class="token string">"src"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//将文档中图像的src属性删除</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"input[type='checkbox']"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token string">"checked"</span><span class="token punctuation">,</span> <span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//选中复选框</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"input[type='checkbox']"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token string">"checked"</span><span class="token punctuation">,</span> <span class="token boolean">false</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"img"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeProp</span><span class="token punctuation">(</span><span class="token string">"src"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//删除img的src属性</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="css-操作"><a href="#css-操作" class="headerlink" title="css 操作"></a>css 操作</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">addClass</span><span class="token punctuation">(</span><span class="token string">"selected"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//为p元素加上 'selected' 类</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">removeClass</span><span class="token punctuation">(</span><span class="token string">"selected"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//从p元素中删除 'selected' 类</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">toggleClass</span><span class="token punctuation">(</span><span class="token string">"selected"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//如果存在就删除,否则就添加</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"color"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//访问查看p元素的color属性</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">"color"</span><span class="token punctuation">,</span> <span class="token string">"red"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//设置p元素的color属性为red</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token punctuation">{</span> <span class="token literal-property property">color</span><span class="token operator">:</span> <span class="token string">"red"</span><span class="token punctuation">,</span> <span class="token literal-property property">background</span><span class="token operator">:</span> <span class="token string">"yellow"</span> <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 设置多个属性</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="文档处理"><a href="#文档处理" class="headerlink" title="文档处理"></a>文档处理</h2><p>内部插入</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">"<b>nick</b>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//每个p元素内后面追加内容</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">appendTo</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//p元素追加到div内后</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prepend</span><span class="token punctuation">(</span><span class="token string">"<b>Hello</b>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//每个p元素内前面追加内容</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prependTo</span><span class="token punctuation">(</span><span class="token string">"div"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//p元素追加到div内前</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p>外部插入</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">after</span><span class="token punctuation">(</span><span class="token string">"<b>nick</b>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//每个p元素同级之后插入内容</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">before</span><span class="token punctuation">(</span><span class="token string">"<b>nick</b>"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//在每个p元素同级之前插入内容</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">insertAfter</span><span class="token punctuation">(</span><span class="token string">"#test"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//所有p元素插入到id为test元素的后面</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">insertBefore</span><span class="token punctuation">(</span><span class="token string">"#test"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//所有p元素插入到id为test元素的前面</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="复制"><a href="#复制" class="headerlink" title="复制"></a>复制</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">clone</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//克隆元素并选中克隆的副本</span>
|
||
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">clone</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//布尔值指事件处理函数是否会被复制</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="attr-和-prop-区别"><a href="#attr-和-prop-区别" class="headerlink" title="attr 和 prop 区别"></a>attr 和 prop 区别</h1><p>prop 和 attr 均可获取属性值，但 prop 获取的是 <code>DOM 对象内置属性</code>。</p>
|
||
<blockquote>
|
||
<p>!! 例如 input，radio，slect 元素，请使用 prop 获取</p>
|
||
</blockquote>
|
||
<pre class="line-numbers language-markup" data-language="markup"><code class="language-markup"><span class="token tag"><span class="token tag"><span class="token punctuation"><</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>https://www.runoob.com/images/pulpit.jpg<span class="token punctuation">"</span></span> <span class="token punctuation">/></span></span>
|
||
<span class="token tag"><span class="token tag"><span class="token punctuation"><</span>p</span> <span class="token attr-name">tinyval</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">"</span>12<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token tag"><span class="token tag"><span class="token punctuation"></</span>p</span><span class="token punctuation">></span></span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// 因为页面源代码中没有设置 width 属性</span>
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"img"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">"width"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined</span>
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"img"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token string">"width"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 284</span>
|
||
|
||
<span class="token comment">// 由于 tinyval 并非 HTML 标准属性</span>
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token string">"tinyval"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// undefined</span>
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"p"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">attr</span><span class="token punctuation">(</span><span class="token string">"tinyval"</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 12</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="事件"><a href="#事件" class="headerlink" title="事件"></a>事件</h1><h2 id="事件委托"><a href="#事件委托" class="headerlink" title="事件委托"></a>事件委托</h2><ul>
|
||
<li>可极大减少事件绑定次数，提高性能</li>
|
||
<li>可让动态加入的子元素绑定相同的命令</li>
|
||
</ul>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token parameter">event</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token comment">// this 表示当前单击的元素</span>
|
||
<span class="token function">alert</span><span class="token punctuation">(</span><span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">html</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token comment">// 把子级li元素的单击事件委托在父级ul身上</span>
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"ul"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">delegate</span><span class="token punctuation">(</span><span class="token string">"li"</span><span class="token punctuation">,</span> <span class="token string">"click"</span><span class="token punctuation">,</span> handleClick<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="单事件单元素"><a href="#单事件单元素" class="headerlink" title="单事件单元素"></a>单事件单元素</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||
$xxx<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> handleClick<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="单事件多元素"><a href="#单事件多元素" class="headerlink" title="单事件多元素"></a>单事件多元素</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||
$xxx<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token string">"#aaa, .bbb"</span><span class="token punctuation">,</span> handleClick<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="多事件多元素"><a href="#多事件多元素" class="headerlink" title="多事件多元素"></a>多事件多元素</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||
<span class="token keyword">function</span> <span class="token function">handleMounseEnter</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||
$xxx<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">click</span><span class="token operator">:</span> handleClick<span class="token punctuation">,</span>
|
||
<span class="token literal-property property">mounseenter</span><span class="token operator">:</span> handleMounseEnter<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token string">"#aaa, .bbb"</span>
|
||
<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h2 id="一夜情事件"><a href="#一夜情事件" class="headerlink" title="一夜情事件"></a>一夜情事件</h2><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token keyword">function</span> <span class="token function">handleClick</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span><span class="token punctuation">}</span>
|
||
$xxx<span class="token punctuation">.</span><span class="token function">one</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> handleClick<span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="对象操作"><a href="#对象操作" class="headerlink" title="对象操作"></a>对象操作</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript">$<span class="token punctuation">.</span><span class="token function">trim</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//去除字符串两端的空格</span>
|
||
|
||
$<span class="token punctuation">.</span><span class="token function">each</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//遍历一个数组或对象，for循环</span>
|
||
|
||
$<span class="token punctuation">.</span><span class="token function">inArray</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//返回一个值在数组中的索引位置，不存在返回-1</span>
|
||
|
||
$<span class="token punctuation">.</span><span class="token function">grep</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//返回数组中符合某种标准的元素</span>
|
||
|
||
$<span class="token punctuation">.</span><span class="token function">extend</span><span class="token punctuation">(</span><span class="token boolean">true</span><span class="token punctuation">,</span> <span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">,</span> a<span class="token punctuation">,</span> b<span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">// 深浅拷贝合并 a、b 到 {} 上</span>
|
||
|
||
$<span class="token punctuation">.</span><span class="token function">makeArray</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//将对象转化为数组</span>
|
||
|
||
$<span class="token punctuation">.</span><span class="token function">type</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//判断对象的类别（函数对象、日期对象、数组对象、正则对象等等</span>
|
||
|
||
$<span class="token punctuation">.</span><span class="token function">isArray</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//判断某个参数是否为数组</span>
|
||
|
||
$<span class="token punctuation">.</span><span class="token function">isEmptyObject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//判断某个对象是否为空(不含有任何属性)</span>
|
||
|
||
$<span class="token punctuation">.</span><span class="token function">isFunction</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//判断某个参数是否为函数</span>
|
||
|
||
$<span class="token punctuation">.</span><span class="token function">isPlainObject</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//判断某个参数是否为用"{}"或"new Object"建立的对象</span>
|
||
|
||
$<span class="token punctuation">.</span><span class="token function">support</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span> <span class="token comment">//判断浏览器是否支持某个特性</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="禁止右键功能菜单"><a href="#禁止右键功能菜单" class="headerlink" title="禁止右键功能菜单"></a>禁止右键功能菜单</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
|
||
<span class="token function-variable function">contextmenu</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token function-variable function">keydown</span><span class="token operator">:</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token keyword">if</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>ctrlKey <span class="token operator">||</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>metaKey <span class="token operator">&&</span> <span class="token punctuation">(</span>e<span class="token punctuation">.</span>keyCode <span class="token operator">===</span> <span class="token number">67</span> <span class="token operator">||</span> e<span class="token punctuation">.</span>keyCode <span class="token operator">===</span> <span class="token number">8</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">)</span>
|
||
<span class="token keyword">return</span> <span class="token boolean">false</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="自动修改破损图像"><a href="#自动修改破损图像" class="headerlink" title="自动修改破损图像"></a>自动修改破损图像</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"img"</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"error"</span><span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
<span class="token function">$</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">prop</span><span class="token punctuation">(</span><span class="token string">"src"</span><span class="token punctuation">,</span> <span class="token string">"img/broken.png"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<h1 id="模块化-jquery-最佳实践"><a href="#模块化-jquery-最佳实践" class="headerlink" title="模块化 jquery 最佳实践"></a>模块化 jquery 最佳实践</h1><pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// xx 视图模块 #xx</span>
|
||
<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">$<span class="token punctuation">,</span> $view</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>$ <span class="token operator">+</span> <span class="token string">"has been imported"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 缓存 dom需要用到的 dom，提高性能</span>
|
||
<span class="token keyword">var</span> $partA <span class="token operator">=</span> $view<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">".partA"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
$partB <span class="token operator">=</span> $view<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">".partB"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 链式表结构，事件委托</span>
|
||
$view
|
||
<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"focus"</span><span class="token punctuation">,</span> <span class="token string">"#btnFocusPartA"</span><span class="token punctuation">,</span> handleBtnFocusPartA<span class="token punctuation">)</span>
|
||
<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">"click"</span><span class="token punctuation">,</span> <span class="token string">".btnClickPartB"</span><span class="token punctuation">,</span> handleBtnClickPartB<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 方法，建议函数式</span>
|
||
<span class="token keyword">function</span> <span class="token function">handleBtnFocusPartA</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>$partA <span class="token operator">+</span> <span class="token string">"handler"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">function</span> <span class="token function">handleBtnClickPartB</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>$partB <span class="token operator">+</span> <span class="token string">"handler"</span><span class="token punctuation">,</span> <span class="token string">"，click 的 e.target"</span> <span class="token operator">+</span> e<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>jQuery <span class="token operator">||</span> window<span class="token punctuation">.</span>jQuery <span class="token operator">||</span> window<span class="token punctuation">.</span>$<span class="token punctuation">,</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#viewModule"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<p>更骚的<code>路由表</code>的写法，搭配模块化开发更优雅，更方便管理</p>
|
||
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token comment">// xx 视图模块 #xx</span>
|
||
<span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">$<span class="token punctuation">,</span> $view</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>$ <span class="token operator">+</span> <span class="token string">"has been imported"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 缓存 dom需要用到的 dom，提高性能</span>
|
||
<span class="token keyword">var</span> $partA <span class="token operator">=</span> $view<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">".partA"</span><span class="token punctuation">)</span><span class="token punctuation">,</span>
|
||
$partB <span class="token operator">=</span> $view<span class="token punctuation">.</span><span class="token function">find</span><span class="token punctuation">(</span><span class="token string">".partB"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// $view 视图的事件委托表</span>
|
||
<span class="token keyword">var</span> eventTable <span class="token operator">=</span> <span class="token punctuation">[</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"focus"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">elem</span><span class="token operator">:</span> <span class="token string">"#btnFocusPartA"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">handler</span><span class="token operator">:</span> handleBtnFocusPartA<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">{</span>
|
||
<span class="token literal-property property">name</span><span class="token operator">:</span> <span class="token string">"click"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">elem</span><span class="token operator">:</span> <span class="token string">".btnClickPartB"</span><span class="token punctuation">,</span>
|
||
<span class="token literal-property property">handler</span><span class="token operator">:</span> handleBtnClickPartB<span class="token punctuation">,</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">,</span>
|
||
<span class="token punctuation">]</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 注册事件</span>
|
||
eventTable<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token keyword">function</span> <span class="token punctuation">(</span><span class="token parameter">item</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
$view<span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span>item<span class="token punctuation">.</span>name<span class="token punctuation">,</span> item<span class="token punctuation">.</span>elem<span class="token punctuation">,</span> item<span class="token punctuation">.</span>handler<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
|
||
<span class="token comment">// 方法，建议函数式</span>
|
||
<span class="token keyword">function</span> <span class="token function">handleBtnFocusPartA</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>$partA <span class="token operator">+</span> <span class="token string">"handler"</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
|
||
<span class="token keyword">function</span> <span class="token function">handleBtnClickPartB</span><span class="token punctuation">(</span><span class="token parameter">e</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
|
||
console<span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>$partB <span class="token operator">+</span> <span class="token string">"handler"</span><span class="token punctuation">,</span> <span class="token string">"，click 的 e.target"</span> <span class="token operator">+</span> e<span class="token punctuation">.</span>target<span class="token punctuation">)</span><span class="token punctuation">;</span>
|
||
<span class="token punctuation">}</span>
|
||
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">(</span>jQuery <span class="token operator">||</span> window<span class="token punctuation">.</span>jQuery <span class="token operator">||</span> window<span class="token punctuation">.</span>$<span class="token punctuation">,</span> <span class="token function">$</span><span class="token punctuation">(</span><span class="token string">"#viewModule"</span><span class="token punctuation">)</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>
|
||
|
||
<div class="post-tags">
|
||
<!-- 文章tags -->
|
||
|
||
</div>
|
||
<p class="motto">重拾纯粹的写作</p>
|
||
</article>
|
||
<!-- 评论 -->
|
||
<div id="vcomments"></div>
|
||
</div>
|
||
</main>
|
||
<!-- toc -->
|
||
|
||
<cosy-drag-box id="toc-drag-box" trigger="left" min-width="220" uid="toc-box">
|
||
<div class="meta-container">
|
||
<div class="toc-wrapper cosy-scrollbar">
|
||
<cosy-tooltip placement="right">
|
||
<p class="catalog">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M4 6h16"></path>
|
||
<path d="M4 12h16"></path>
|
||
<path d="M4 18h12"></path>
|
||
</g>
|
||
</svg>
|
||
<span>目录</span>
|
||
</p>
|
||
<span slot="content">
|
||
<span>隐藏目录</span>
|
||
<cosy-short-key>]</cosy-short-key>
|
||
</span>
|
||
</cosy-tooltip>
|
||
<!-- 文章toc -->
|
||
<ol class="toc"><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%9F%BA%E7%A1%80"><span class="toc-number">1.</span> <span class="toc-text">基础</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96"><span class="toc-number">2.</span> <span class="toc-text">模块化</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8E%9F%E5%A7%8B%E5%86%99%E6%B3%95"><span class="toc-number">2.1.</span> <span class="toc-text">原始写法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E5%86%99%E6%B3%95"><span class="toc-number">2.2.</span> <span class="toc-text">对象写法</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#IIFE-%E7%AB%8B%E5%8D%B3%E6%89%A7%E8%A1%8C%E5%87%BD%E6%95%B0%E5%86%99%E6%B3%95-%E6%8E%A8%E8%8D%90"><span class="toc-number">2.3.</span> <span class="toc-text">IIFE 立即执行函数写法[推荐]</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%AE%BD-%E6%94%BE%E5%A4%A7%E6%A8%A1%E5%BC%8F"><span class="toc-number">2.4.</span> <span class="toc-text">(宽)放大模式</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%BE%93%E5%85%A5%E5%85%A8%E5%B1%80%E5%8F%98%E9%87%8F-%E6%8E%A8%E8%8D%90"><span class="toc-number">2.5.</span> <span class="toc-text">输入全局变量[推荐]</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%93%BE%E5%BC%8F%E6%93%8D%E4%BD%9C"><span class="toc-number">3.</span> <span class="toc-text">链式操作</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">4.</span> <span class="toc-text">选择器</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E7%AD%9B%E9%80%89%E5%99%A8"><span class="toc-number">4.1.</span> <span class="toc-text">筛选器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%86%85%E5%AE%B9%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">4.2.</span> <span class="toc-text">内容选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E8%A1%A8%E5%8D%95%E9%80%89%E6%8B%A9%E5%99%A8"><span class="toc-number">4.3.</span> <span class="toc-text">表单选择器</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%9F%A5%E6%89%BE"><span class="toc-number">4.4.</span> <span class="toc-text">查找</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%B1%9E%E6%80%A7%E6%93%8D%E4%BD%9C"><span class="toc-number">4.5.</span> <span class="toc-text">属性操作</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#css-%E6%93%8D%E4%BD%9C"><span class="toc-number">4.6.</span> <span class="toc-text">css 操作</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E6%96%87%E6%A1%A3%E5%A4%84%E7%90%86"><span class="toc-number">4.7.</span> <span class="toc-text">文档处理</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%8D%E5%88%B6"><span class="toc-number">4.8.</span> <span class="toc-text">复制</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#attr-%E5%92%8C-prop-%E5%8C%BA%E5%88%AB"><span class="toc-number">5.</span> <span class="toc-text">attr 和 prop 区别</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6"><span class="toc-number">6.</span> <span class="toc-text">事件</span></a><ol class="toc-child"><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%BA%8B%E4%BB%B6%E5%A7%94%E6%89%98"><span class="toc-number">6.1.</span> <span class="toc-text">事件委托</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%95%E4%BA%8B%E4%BB%B6%E5%8D%95%E5%85%83%E7%B4%A0"><span class="toc-number">6.2.</span> <span class="toc-text">单事件单元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%8D%95%E4%BA%8B%E4%BB%B6%E5%A4%9A%E5%85%83%E7%B4%A0"><span class="toc-number">6.3.</span> <span class="toc-text">单事件多元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E5%A4%9A%E4%BA%8B%E4%BB%B6%E5%A4%9A%E5%85%83%E7%B4%A0"><span class="toc-number">6.4.</span> <span class="toc-text">多事件多元素</span></a></li><li class="toc-item toc-level-2"><a class="toc-link" href="#%E4%B8%80%E5%A4%9C%E6%83%85%E4%BA%8B%E4%BB%B6"><span class="toc-number">6.5.</span> <span class="toc-text">一夜情事件</span></a></li></ol></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E5%AF%B9%E8%B1%A1%E6%93%8D%E4%BD%9C"><span class="toc-number">7.</span> <span class="toc-text">对象操作</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E7%A6%81%E6%AD%A2%E5%8F%B3%E9%94%AE%E5%8A%9F%E8%83%BD%E8%8F%9C%E5%8D%95"><span class="toc-number">8.</span> <span class="toc-text">禁止右键功能菜单</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E8%87%AA%E5%8A%A8%E4%BF%AE%E6%94%B9%E7%A0%B4%E6%8D%9F%E5%9B%BE%E5%83%8F"><span class="toc-number">9.</span> <span class="toc-text">自动修改破损图像</span></a></li><li class="toc-item toc-level-1"><a class="toc-link" href="#%E6%A8%A1%E5%9D%97%E5%8C%96-jquery-%E6%9C%80%E4%BD%B3%E5%AE%9E%E8%B7%B5"><span class="toc-number">10.</span> <span class="toc-text">模块化 jquery 最佳实践</span></a></li></ol>
|
||
</div>
|
||
</div>
|
||
</cosy-drag-box>
|
||
|
||
</div>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
window.page = {
|
||
use: ''
|
||
}
|
||
window.katex = {
|
||
enable: "",
|
||
jsCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.js",
|
||
cssCdn: "//cdn.jsdelivr.net/npm/katex@0.13.18/dist/katex.min.css"
|
||
}
|
||
window.mermaid = {
|
||
enable: "",
|
||
theme: "",
|
||
cdn: "//cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js",
|
||
}
|
||
window.valine = {
|
||
enable: "",
|
||
appId: 'TisMit6uhflounFqAN3ZGjgq-MdYXbMMI',
|
||
appKey: 'CdjirjYdz07U5i62ElsJvXUh',
|
||
avatar: 'monsterid',
|
||
cdn: '//unpkg.com/valine@latest/dist/Valine.min.js',
|
||
serverURLs: '//tismit6u.api.lncldglobal.com'
|
||
};
|
||
</script>
|
||
|
||
|
||
<script src="/js/0af3d6bb.js"></script>
|
||
|
||
</main>
|
||
</body>
|
||
|
||
<script>
|
||
window.theme = {
|
||
color: 'hsl(238,50%,56%)'
|
||
}
|
||
</script>
|
||
|
||
|
||
<script src="/js/9c8197f9.js"></script>
|
||
|
||
|
||
</html> |