网站制作技术之jQuery的技巧：创建自定义的选择

作为三亚网站制作的一份子，米饭工作室也来普及下网站制作方面的知识啦。相信大家对Jquery也不陌生了那么，你 [...]

作为三亚网站制作的一份子，米饭工作室也来普及下网站制作方面的知识啦。
相信大家对Jquery也不陌生了那么，你知道么？

jQuery的提示：创建自定义的选择，你可以添加你自己的选择器形式的伪选择包含（）。写你自己的选择，帮助您了解他们的性能问题，对大型数据集工作。如果你知道如何来解决这些性能问题，通过预选的元素，你仍然可以利用其优雅的符号。

清单2.10创建自定义选择的所有第三个元素

00 <！DOCTYPE HTML>

02 中

04 自定义选择</ TITLE></p> <p> 05 </ HEAD></p> <p> 06 <BODY></p> <p> 07</p> <p> 08 <H2>每三线得到一个蓝色的背景颜色</ H2></p> <p> 09</p> <p> 10 <UL></p> <p> 11 <LI> </ LI></p> <p> 12 <LI> </ LI></p> <p> 13 <LI>三</ LI></p> <p> 14 <LI>四</ LI></p> <p> 15 <LI>五</ LI></p> <p> 16 <LI>六</ LI></p> <p> 17 <LI>七</ LI></p> <p> 18 <LI>八</ LI></p> <p> 19 <LI>九</ LI></p> <p> 20 <LI>十大</ LI></p> <p> 21 </ UL></p> <p> 22</p> <p> 23</p> <p> 24 <script src="http://code.jquery.com/jquery-1.7.2.min.js"> </ SCRIPT></p> <p> 25</p> <p> 26 <SCRIPT></p> <p> 27 / /请外部代码外部js文件</p> <p> 28 $（文件）准备就绪（函数（）{</p> <p> 29</p> <p> 30元表达式['：'] =功能（OBJ，索引，元，堆栈）{第三</p> <p> 31</p> <p> 32 / / obj包含当前元素</p> <p> 33</p> <p> 34 / /索引包含0 – N，根据当前的</p> <p> 35 / /元素的元素数</p> <p> 36</p> <p> 37 / /元包含数组以下值：</p> <p> 38 / / [“：三分之一（'喇嘛'）”，“第三”，“'”，“喇嘛”]</p> <p> 39</p> <p> 40 / /堆栈包含一个节点列表，这可以转化成</p> <p> 41 / /一个数组，使用$。makeArray（堆栈）</p> <p> 42</p> <p> 43回（索引+ 1）％3 == 0;</p> <p> 44};</p> <p> 45</p> <p> 46 $（'李：第三（\'喇嘛\'）'），CSS（'背景颜色'，'蓝'）;</p> <p> 47</p> <p> 48 / /李：第n个孩子（3N）当然会做同样的</p> <p> 49 / /这个例子展示如何实现一个自定义</p> <p> 50 / /选择器</p> <p> 51</p> <p> 52}）;</p> <p> 53</p> <p> 54 </ SCRIPT></p> <p> 55 </ BODY></p> <p> 56 </ HTML></p> </div> <hr /> <p> jQuery的核心是滋滋选择器引擎。这是什么让jQuery的横向的DOM的能力，并选择你想要什么。您可以使用的滋滋声在jQuery选择器创建自己的选择器。30行显示了如何做到这一点。通过使用$。表达式['：']，通知jQuery的，你要建立一个选择。添加第三指示的jQuery选择器如何将访问。这四个变量在匿名函数创建一个自定义的选择标准。每个变量中已经解释的意见，以帮助你了解每一个持有。</p> <p> 这个例子不使用可自定义选择的所有可能性。喇嘛参数传递给它不具有的功能。使用代码注释里面的指针，你可以详细说明的可能性。</p> <p> 看，<a href="https://api.mefanw.com/">网站制作</a>是不是很有趣呀？学会用，用好工具对于网站建设可是会如虎添翼哦。</p> </div> <div class="mf-detail__footer-action astro-p5zaeqd4"> <div class="astro-p5zaeqd4"> <p class="astro-p5zaeqd4">继续了解米饭科技。</p> <span class="astro-p5zaeqd4">看看案例，了解我们的设计、开发和交付方式。</span> </div> <nav aria-label="详情页操作" class="astro-p5zaeqd4"> <a href="/news" class="astro-p5zaeqd4">返回动态</a> <a class="is-primary astro-p5zaeqd4" href="/case">查看案例</a> </nav> </div> </div> </section> </article> </main> <script type="module">const r=()=>{document.querySelectorAll(".mf-detail__content table").forEach(e=>{if(!e.parentElement?.classList.contains("mf-table-wrap")){const t=document.createElement("div");t.className="mf-table-wrap",e.parentNode?.insertBefore(t,e),t.appendChild(e)}}),document.querySelectorAll(".mf-detail__content iframe").forEach(e=>{if(!e.parentElement?.classList.contains("mf-embed")){const t=document.createElement("div");t.className="mf-embed",e.parentNode?.insertBefore(t,e),t.appendChild(e)}}),document.querySelectorAll(".mf-detail__content img").forEach(e=>{e.loading=e.loading||"lazy",e.decoding=e.decoding||"async";const t=()=>{const n=e.parentElement;e.dataset.mfBroken="true",e.remove(),n&&["P","FIGURE"].includes(n.tagName)&&!n.textContent?.trim()&&!n.querySelector("img, video, iframe, table")&&n.remove()};e.addEventListener("error",t,{once:!0}),e.complete&&e.naturalWidth===0&&t()}),document.querySelectorAll(".mf-detail__cover img").forEach(e=>{const t=()=>e.closest(".mf-detail__cover")?.remove();e.addEventListener("error",t,{once:!0}),e.complete&&e.naturalWidth===0&&t()})};document.readyState==="loading"?document.addEventListener("DOMContentLoaded",r,{once:!0}):r();</script> <footer class="mf-site-footer astro-sz7xmlte"> <div class="mf-site-footer__inner astro-sz7xmlte"> <div class="mf-site-footer__top astro-sz7xmlte"> <div class="astro-sz7xmlte"> <p class="mf-site-footer__eyebrow astro-sz7xmlte">MEFAN TECHNOLOGY</p> <p class="mf-site-footer__summary astro-sz7xmlte">数字产品开发、AI 应用落地、GEO 与持续技术服务。</p> </div> <div class="mf-site-footer__social astro-sz7xmlte" aria-label="社交媒体"> <a href="https://weibo.com/u/5369925806?from=myfollow_all" aria-label="微博" target="_blank" rel="noopener noreferrer" class="astro-sz7xmlte"> <svg width="20" height="20" class="astro-sz7xmlte" data-icon="mdi:sina-weibo"> <symbol id="ai:mdi:sina-weibo" viewBox="0 0 24 24"><path fill="currentColor" d="M9.82 13.87c1.07 0 1.95.87 1.95 1.95a1.95 1.95 0 0 1-1.95 1.95c-1.08 0-1.95-.88-1.95-1.95c0-1.08.87-1.95 1.95-1.95M14.5 3.34l.68-.03c3.76 0 6.82 3.06 6.82 6.82l-.05.82l-1.19-.37l.02-.45c0-3.09-2.51-5.6-5.6-5.6l-.35.01zm.82 2.89c2.06.07 3.73 1.77 3.76 3.83l-1.24-.38c-.19-1.12-1.06-2-2.17-2.18zM2 15.41c-.03-.61.07-2.77 2.95-5.44c3.4-3.16 4.87-2.92 4.87-2.92s3.18-.3 1.24 3.41h.07c.47-.5 1.49-1.25 3.56-1.46c2.08-.21 2.08 1.5 1.81 2.7c1.88.94 3.06 2.33 3.06 3.88c0 2.82-3.93 5.11-8.78 5.11h-.28c-3.5 0-6.5-1.27-7.79-3.1c-.46-.62-.71-1.3-.71-2.01zm7.82-3.49c-3.23 0-5.85 1.75-5.85 3.9s2.62 3.9 5.85 3.9s5.85-1.75 5.85-3.9s-2.62-3.9-5.85-3.9"/></symbol><use href="#ai:mdi:sina-weibo"></use> </svg> </a> <a href="https://v.douyin.com/DYoVwKE/" aria-label="抖音" target="_blank" rel="noopener noreferrer" class="astro-sz7xmlte"> <svg width="20" height="20" class="astro-sz7xmlte" data-icon="ic:baseline-tiktok"> <symbol id="ai:ic:baseline-tiktok" viewBox="0 0 24 24"><path fill="currentColor" d="M16.6 5.82s.51.5 0 0A4.278 4.278 0 0 1 15.54 3h-3.09v12.4a2.592 2.592 0 0 1-2.59 2.5c-1.42 0-2.6-1.16-2.6-2.6c0-1.72 1.66-3.01 3.37-2.48V9.66c-3.45-.46-6.47 2.22-6.47 5.64c0 3.33 2.76 5.7 5.69 5.7c3.14 0 5.69-2.55 5.69-5.7V9.01a7.35 7.35 0 0 0 4.3 1.38V7.3s-1.88.09-3.24-1.48"/></symbol><use href="#ai:ic:baseline-tiktok"></use> </svg> </a> </div> </div> <div class="mf-site-footer__contact astro-sz7xmlte"> <span class="astro-sz7xmlte">三亚市吉阳区恒大御府写字楼 1 栋 6D</span><a href="mailto:hi@mefanw.com" aria-label="邮箱" class="astro-sz7xmlte"> 邮箱：hi@mefanw.com </a><a href="tel://0898-36694566" aria-label="电话号码" class="astro-sz7xmlte"> 电话：0898-36694566 </a> </div> <div class="mf-site-footer__bottom astro-sz7xmlte"> <nav aria-label="底部导航" class="astro-sz7xmlte"> <a href="/service" class="astro-sz7xmlte">服务</a> <a href="/case" class="astro-sz7xmlte">案例</a> <a href="/news/" aria-label="新闻动态" class="astro-sz7xmlte"> 新闻动态 </a><a href="/news/blog/" aria-label="技术博客" class="astro-sz7xmlte"> 技术博客 </a> <a href="/about" class="astro-sz7xmlte">关于</a> </nav> <div class="mf-site-footer__legal astro-sz7xmlte"> <p class="astro-sz7xmlte">© 三亚米饭网络科技有限公司 2014-2026</p> <a href="http://beian.miit.gov.cn" target="_blank" rel="nofollow noopener" aria-label="备案号" class="astro-sz7xmlte"> 琼ICP备15000195号 </a> </div> </div> </div> </footer> </div> </body></html>