726 lines
87 KiB
HTML
726 lines
87 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/front-end/jquery/">
|
||
|
||
|
||
<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/4d4ea9c6.css">
|
||
|
||
<meta name="generator" content="Hexo 6.3.0"></head>
|
||
|
||
<body id="app">
|
||
<!-- 响应式布局按钮 -->
|
||
<a class="side-navigation btn-hover btn-hover-bg tip left" data-tip="Expand">
|
||
<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">
|
||
<rect x="4" y="4" width="16" height="16" rx="2"></rect>
|
||
<path d="M9 4v16"></path>
|
||
</g>
|
||
</svg>
|
||
</a>
|
||
<aside>
|
||
<div>
|
||
|
||
<link rel="stylesheet" href="/css/5bfc518f.css">
|
||
|
||
|
||
<div class="home-bar">
|
||
<a href="/" class="tip" data-tip="Home">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||
<path
|
||
d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z"
|
||
fill="currentColor"></path>
|
||
</svg>
|
||
<span>Mozzie</span>
|
||
</a>
|
||
<!-- 切换主题 -->
|
||
<a id="toggle-theme" class="tip left" data-tip="Switch Theme">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||
<path d="M256 118a22 22 0 0 1-22-22V48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill="currentColor"></path>
|
||
<path d="M256 486a22 22 0 0 1-22-22v-48a22 22 0 0 1 44 0v48a22 22 0 0 1-22 22z" fill="currentColor"></path>
|
||
<path
|
||
d="M369.14 164.86a22 22 0 0 1-15.56-37.55l33.94-33.94a22 22 0 0 1 31.11 31.11l-33.94 33.94a21.93 21.93 0 0 1-15.55 6.44z"
|
||
fill="currentColor"></path>
|
||
<path
|
||
d="M108.92 425.08a22 22 0 0 1-15.55-37.56l33.94-33.94a22 22 0 1 1 31.11 31.11l-33.94 33.94a21.94 21.94 0 0 1-15.56 6.45z"
|
||
fill="currentColor"></path>
|
||
<path d="M464 278h-48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill="currentColor"></path>
|
||
<path d="M96 278H48a22 22 0 0 1 0-44h48a22 22 0 0 1 0 44z" fill="currentColor"></path>
|
||
<path
|
||
d="M403.08 425.08a21.94 21.94 0 0 1-15.56-6.45l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.55 37.56z"
|
||
fill="currentColor"></path>
|
||
<path
|
||
d="M142.86 164.86a21.89 21.89 0 0 1-15.55-6.44l-33.94-33.94a22 22 0 0 1 31.11-31.11l33.94 33.94a22 22 0 0 1-15.56 37.55z"
|
||
fill="currentColor"></path>
|
||
<path d="M256 358a102 102 0 1 1 102-102a102.12 102.12 0 0 1-102 102z" fill="currentColor"></path>
|
||
</svg>
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||
<path
|
||
d="M264 480A232 232 0 0 1 32 248c0-94 54-178.28 137.61-214.67a16 16 0 0 1 21.06 21.06C181.07 76.43 176 104.66 176 136c0 110.28 89.72 200 200 200c31.34 0 59.57-5.07 81.61-14.67a16 16 0 0 1 21.06 21.06C442.28 426 358 480 264 480z"
|
||
fill="currentColor"></path>
|
||
</svg>
|
||
|
||
</a>
|
||
</div>
|
||
|
||
|
||
|
||
<script src="/js/ae2a0e7b.js"></script>
|
||
|
||
<!-- search -->
|
||
|
||
|
||
<link rel="stylesheet" href="/css/3320a187.css">
|
||
|
||
<form class="search-group">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 20 20">
|
||
<g fill="currentColor">
|
||
<path d="M8.5 3a5.5 5.5 0 0 1 4.383 8.823l4.147 4.147a.75.75 0 0 1-.976 1.133l-.084-.073l-4.147-4.147A5.5 5.5 0 1 1 8.5 3zm0 1.5a4 4 0 1 0 0 8a4 4 0 0 0 0-8z" fill="currentColor"></path>
|
||
</g>
|
||
</svg>
|
||
<span id="search-input">Search...</span>
|
||
<div class="short-key">
|
||
<kbd class="key-cap"><span>Ctrl K</span></kbd>
|
||
</div>
|
||
</form>
|
||
|
||
<script>
|
||
window.algolia = {
|
||
appId: "5DTW808BZ8",
|
||
SearchOnlyAPIKey: "27845b245efc8a2853cc0bdc7366ea26"
|
||
}
|
||
window.search = {
|
||
enable: "true"
|
||
}
|
||
</script>
|
||
|
||
|
||
<script src="/js/9f145c31.js"></script>
|
||
|
||
|
||
<!-- navigation -->
|
||
|
||
<link rel="stylesheet" href="/css/3efc6cb5.css">
|
||
|
||
|
||
<section class="category-nav scrollbar-obtrusive">
|
||
<ul class="nav-items">
|
||
<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 24 24">
|
||
<g fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
|
||
<path d="M12 7v14"></path>
|
||
<path d="M9 18l3 3l3-3"></path>
|
||
<circle cx="12" cy="5" r="2"></circle>
|
||
</g>
|
||
</svg>
|
||
<div class="ellipsis">Timeline</div>
|
||
</a>
|
||
</li>
|
||
<li data-path="roadmap">
|
||
<a href="/roadmap">
|
||
<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="M10.5 20.4l-6.9-6.9c-.781-.781-.781-2.219 0-3l6.9-6.9c.781-.781 2.219-.781 3 0l6.9 6.9c.781.781.781 2.219 0 3l-6.9 6.9c-.781.781-2.219.781-3 0z"></path>
|
||
<path d="M9 14v-2c0-.59.414-1 1-1h5"></path>
|
||
<path d="M13 9l2 2l-2 2"></path>
|
||
</g>
|
||
</svg>
|
||
<div class="ellipsis">Roadmap</div>
|
||
</a>
|
||
</li>
|
||
<li data-path="resume">
|
||
<a href="/resume">
|
||
<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="M14 3v4a1 1 0 0 0 1 1h4"></path>
|
||
<path d="M5 8V5a2 2 0 0 1 2-2h7l5 5v11a2 2 0 0 1-2 2h-5"></path>
|
||
<circle cx="6" cy="14" r="3"></circle>
|
||
<path d="M4.5 17L3 22l3-1.5L9 22l-1.5-5"></path>
|
||
</g>
|
||
</svg>
|
||
<div class="ellipsis">Resume</div>
|
||
</a>
|
||
</li>
|
||
</ul>
|
||
<p>Category</p>
|
||
<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/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/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>
|
||
|
||
</ul>
|
||
</section>
|
||
|
||
|
||
<script src="/js/f8b20eb9.js"></script>
|
||
|
||
<!-- icp -->
|
||
|
||
<div class="icp">
|
||
<a target="_blank" rel="noopener" href="http://beian.miit.gov.cn/">苏ICP备19008833号-4</a>
|
||
</div>
|
||
|
||
</div>
|
||
</aside>
|
||
<main>
|
||
|
||
<link rel="stylesheet" href="/css/3d0c4c23.css">
|
||
|
||
|
||
<div class="post-container">
|
||
<div class="content">
|
||
<header>
|
||
|
||
<link rel="stylesheet" href="/css/de5de8fb.css">
|
||
|
||
<nav class="breadcrumb">
|
||
<a href="/" class="home tip btn-hover right" data-tip="Home">
|
||
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 512 512">
|
||
<path d="M172.2 226.8c-14.6-2.9-28.2 8.9-28.2 23.8V301c0 10.2 7.1 18.4 16.7 22c18.2 6.8 31.3 24.4 31.3 45c0 26.5-21.5 48-48 48s-48-21.5-48-48V120c0-13.3-10.7-24-24-24H24c-13.3 0-24 10.7-24 24v248c0 89.5 82.1 160.2 175 140.7c54.4-11.4 98.3-55.4 109.7-109.7c17.4-82.9-37-157.2-112.5-172.2zM209 0c-9.2-.5-17 6.8-17 16v31.6c0 8.5 6.6 15.5 15 15.9c129.4 7 233.4 112 240.9 241.5c.5 8.4 7.5 15 15.9 15h32.1c9.2 0 16.5-7.8 16-17C503.4 139.8 372.2 8.6 209 0zm.3 96c-9.3-.7-17.3 6.7-17.3 16.1v32.1c0 8.4 6.5 15.3 14.8 15.9c76.8 6.3 138 68.2 144.9 145.2c.8 8.3 7.6 14.7 15.9 14.7h32.2c9.3 0 16.8-8 16.1-17.3c-8.4-110.1-96.5-198.2-206.6-206.7z" fill="currentColor"></path>
|
||
</svg>
|
||
</a>
|
||
|
||
|
||
<em>
|
||
<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="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>
|
||
</em>
|
||
<a href="/categories/Front-End/">
|
||
Front-End
|
||
</a>
|
||
|
||
|
||
|
||
<em>
|
||
<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="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>
|
||
</em>
|
||
<span class="ellipsis">
|
||
jQuery
|
||
</span>
|
||
|
||
</nav>
|
||
|
||
|
||
<script src="/js/31d6cfe0.js"></script>
|
||
|
||
</header>
|
||
<main class="scrollbar-obtrusive">
|
||
<div class="article-container">
|
||
<!-- 文章tags -->
|
||
|
||
<!-- 渲染文章内容 -->
|
||
<article><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>
|
||
</article>
|
||
|
||
|
||
<link rel="stylesheet" href="/css/80d65618.css">
|
||
|
||
|
||
<div class="copyright">
|
||
<a target="_blank" href="https://mozzie.cn/2023/11/06/front-end/jquery/">
|
||
<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="M3 19a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
|
||
<path d="M3 6a9 9 0 0 1 9 0a9 9 0 0 1 9 0"></path>
|
||
<path d="M3 6v13"></path>
|
||
<path d="M12 6v13"></path>
|
||
<path d="M21 6v13"></path>
|
||
</g>
|
||
</svg>
|
||
<span>jQuery</span>
|
||
</a>
|
||
<ul>
|
||
<li>
|
||
<span>Author</span>
|
||
<p> Mozzie</p>
|
||
</li>
|
||
<li>
|
||
<span>Published on</span>
|
||
<p>2023-11-06</p>
|
||
</li>
|
||
<li>
|
||
<span>License</span>
|
||
<p><a target="_blank" rel="noopener" href="https://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY-NC-SA 4.0</a></p>
|
||
</li>
|
||
</ul>
|
||
</div>
|
||
|
||
|
||
<script src="/js/31d6cfe0.js"></script>
|
||
|
||
|
||
<!-- 评论 -->
|
||
<div id="vcomments"></div>
|
||
</div>
|
||
</main>
|
||
</div>
|
||
|
||
<div class="meta-container">
|
||
<div class="toc-wrapper content-dialog">
|
||
<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>Catalog</span>
|
||
</p>
|
||
<!-- 文章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>
|
||
|
||
</div>
|
||
|
||
<script>
|
||
window.katex = {
|
||
enable: "true",
|
||
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: "true",
|
||
cdn: "//cdn.jsdelivr.net/npm/mermaid@10.4.0/dist/mermaid.min.js",
|
||
}
|
||
window.valine = {
|
||
enable: "false",
|
||
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/a02fa72b.js"></script>
|
||
|
||
</main>
|
||
</body>
|
||
<script>
|
||
window.i18n = {
|
||
"tip-collapse": "Collapse",
|
||
"tip-expand": "Expand",
|
||
"text-select": "select",
|
||
"text-move": "movement",
|
||
"text-esc": "close",
|
||
"tip-status-done": "Done",
|
||
"tip-status-doing": "In Progress",
|
||
"tip-status-todo": "Todo",
|
||
"tip-status-other": "Duplicate",
|
||
"tip-status-default": "Default",
|
||
"tip-roadmap-today": "Positioning to the today",
|
||
"text-search": "Search...",
|
||
"text-today": "Today",
|
||
// month
|
||
"January": "January",
|
||
"February": "February",
|
||
"March": "March",
|
||
"April": "April",
|
||
"May": "May",
|
||
"June": "June",
|
||
"July": "July",
|
||
"August": "August",
|
||
"September": "September",
|
||
"October": "October",
|
||
"November": "November",
|
||
"December": "December",
|
||
}
|
||
</script>
|
||
|
||
<script src="/js/58c91c4e.js"></script>
|
||
|
||
|
||
</html> |