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

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

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

2013-10-29

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

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

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


 

00 <!DOCTYPE HTML>

01

02 中

03

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> <p>  </p> <hr /> <p> jQuery的核心是滋滋选择器引擎。这是什么让jQuery的横向的DOM的能力,并选择你想要什么。您可以使用的滋滋声在jQuery选择器创建自己的选择器。30行显示了如何做到这一点。通过使用$。表达式[':'],通知jQuery的,你要建立一个选择。添加第三指示的jQuery选择器如何将访问。这四个变量在匿名函数创建一个自定义的选择标准。每个变量中已经解释的意见,以帮助你了解每一个持有。</p> <p> 这个例子不使用可自定义选择的所有可能性。喇嘛参数传递给它不具有的功能。使用代码注释里面的指针,你可以详细说明的可能性。</p> <p> 看,<a href="https://api.mefanw.com/">网站制作</a>是不是很有趣呀?学会用,用好工具对于网站建设可是会如虎添翼哦。</p> </div> <div class="w-full bg-gray-200 mb-7 h-[1px] md:mb-10"></div> </div> <div class="hidden fixed bottom-44 rounded-full md:grid place-items-center transition-all duration-300 right-[20px] z-[9999] w-[48px] h-[48px]"> <div class="rounded-full bg-[#31a918] grid place-items-center w-[48px] h-[48px] cursor-pointer" id="weixin"> <div class="w-full h-full flex justify-center items-center transition-all duration-300 hover:opacity-70 hover:-translate-y-1"> <svg width="24" height="24" viewBox="0 0 20 20" color="#ffffff" data-icon="uiw:weixin"> <symbol id="ai:uiw:weixin"><path fill="currentColor" d="M14 7.3c3.2 0 6 2.258 6 5.007c0 1.472-1.1 2.846-2.5 3.926L18 18l-1.9-1.08c-.7.196-1.4.393-2.1.393c-3.4 0-6-2.258-6-5.006C8 9.558 10.7 7.3 14 7.3M7 2c3.5 0 6.5 2.061 7.3 4.81h-.7c-3.4 0-5.999 2.454-5.999 5.497c0 .49.1.981.2 1.472h-.7c-.9 0-1.6-.196-2.5-.393l-2.5 1.178l.699-2.06C1.1 11.324 0 9.753 0 7.89C0 4.552 3.1 2 7 2m5.1 8.049c-.3 0-.7.393-.7.687c0 .392.3.687.7.687c.5 0 .9-.392.9-.687c0-.393-.4-.687-.9-.687m3.8 0c-.3 0-.7.393-.7.687c0 .392.4.687.7.687c.6 0 .9-.392.9-.687c0-.393-.4-.687-.9-.687M4.8 4.846c-.6 0-1.1.393-1.1.884c0 .589.6.884 1.1.884c.5 0 .8-.295.9-.884c0-.59-.4-.884-.9-.884m4.9 0c-.6 0-1.1.393-1.1.884c0 .589.6.884 1.1.884c.5 0 .9-.295.9-.884c0-.59-.4-.884-.9-.884"/></symbol><use xlink:href="#ai:uiw:weixin"></use> </svg> </div> </div> </div> <div class="hidden fixed bottom-28 rounded-full md:grid place-items-center transition-all duration-300 right-[20px] z-[9999] w-[48px] h-[48px]" id="backToTop"> <a class="rounded-full bg-primary grid place-items-center w-[48px] h-[48px]" href="#top"> <img src="/images/icons/icon-up.svg" alt="to top icon" width="14" height="15"> </a> </div> <footer class="mt-[92px] lg:mt-[150px] xl:mt-[200px] mb-[30px]"> <div class="px-[12px] md:px-[36px] mt-[70px] xl:px-0"> <div class="w-full bg-gray-200 h-[1px] mb-[52px]"></div> <div class="text-gray-600 grid gird-cols-1 gap-8 mb-[48px] md:grid-cols-2 lg:grid-cols-3 xl:gap-[98px]"> <div> <h2 class="text-heading-5 font-chivo font-bold text-gray-900 mb-5 text-[18px]"> 联系我们 </h2> <ul> <li class="mb-2"> <span class="transition-all duration-200 hover:text-green-900 hover:pl-[3px] cursor-pointer"> 三亚市吉阳区恒大御府写字楼 1 栋 6D </span> </li><li class="mb-2"> <a class="transition-all duration-200 hover:text-green-900 hover:pl-[3px]" href="tel://0898-36694566" aria-label="电话号码"> 电话:0898-36694566 </a> </li><li class="mb-2"> <a class="transition-all duration-200 hover:text-green-900 hover:pl-[3px]" href="tel://15607661051" aria-label="手机号码"> 手机:15607661051 </a> </li><li class="mb-2"> <a class="transition-all duration-200 hover:text-green-900 hover:pl-[3px]" href="mailto:hi@mefanw.com" aria-label="邮箱"> 邮箱:hi@mefanw.com </a> </li> </ul> </div> <div> <h2 class="text-heading-5 font-chivo font-bold text-gray-900 mb-5 text-[18px]"> 关于米饭 </h2> <ul> <li class="mb-2"> <a class="transition-all duration-200 hover:text-green-900 hover:pl-[3px]" href="https://www.zhipin.com/gongsi/f74a104468edd0431X142Nw~.html" target="_blank" rel="nofollow noopener" aria-label="加入我们"> 加入我们 </a> </li> </ul> </div> <div> <h2 class="text-heading-5 font-chivo font-bold text-gray-900 mb-5 text-[18px]"> 发现 </h2> <ul> <li class="mb-2"> <a class="transition-all duration-200 hover:text-green-900 hover:pl-[3px]" href="/news/mefan" aria-label="新闻动态"> 新闻动态 </a> </li><li class="mb-2"> <a class="transition-all duration-200 hover:text-green-900 hover:pl-[3px]" href="/news/blog" aria-label="技术博客"> 技术博客 </a> </li><li class="mb-2"> <a class="transition-all duration-200 hover:text-green-900 hover:pl-[3px]" href="/news/it" aria-label="行业动态"> 行业动态 </a> </li> </ul> </div> </div> <div class="w-full bg-gray-200 h-[1px] mb-[46px]"></div> <div class="text-gray-400 md:flex md:items-center md:justify-between"> <div class="md:flex md:items-center md:gap-6"> <p class="text-lead font-bold"> ©meFan Technology 2012-2024 </p> <div class="flex items-center justify-between md:gap-6"> <a class="text-text" href="http://beian.miit.gov.cn" target="_blank" rel="nofollow noopener" aria-label="备案号"> 琼ICP备15000195号 </a> </div> </div> <div class="flex items-center justify-center gap-5 mt-5 md:mt-0"> <a class="w-8 h-8 transition-all duration-300 hover:opacity-70 hover:-translate-y-1" href="https://weibo.com/u/5369925806?from=myfollow_all" aria-label="微博" target="_blank"> <svg width="32" height="32" viewBox="0 0 24 24" color="#dd2430" data-icon="mdi:sina-weibo"> <symbol id="ai:mdi:sina-weibo"><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 xlink:href="#ai:mdi:sina-weibo"></use> </svg> </a> <a class="w-8 h-8 transition-all duration-300 hover:opacity-70 hover:-translate-y-1" href="https://v.douyin.com/DYoVwKE/" aria-label="抖音" target="_blank"> <svg width="32" height="32" viewBox="0 0 24 24" color="#000000" data-icon="ic:baseline-tiktok"> <symbol id="ai:ic:baseline-tiktok"><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 xlink:href="#ai:ic:baseline-tiktok"></use> </svg> </a> </div> </div> </div> </footer> <div id="mask" class="w-screen h-screen fixed top-0 left-0 z-[99999] bg-black bg-opacity-80 hidden"> <div id="model" class="w-full h-full flex justify-center items-center cursor-pointer"> <picture> <source srcset="/images/qrcode.png" type="image/webp"><source srcset="/images/qrcode.png" type="image/png"> <img src="/images/qrcode.png" class="max-w-[200px] max-h-[242px]" alt="微信客服" width="200" height="242" loading="lazy" decoding="async"> </picture> </div> </div> <div class="md:hidden fixed bottom-5 bg-white shadow-md opacity-95 text-xs rounded-full w-2/3 -translate-x-1/2 left-1/2 z-50 text-primary flex p-2"> <div class="flex-1 flex justify-center"> <a href="https://work.weixin.qq.com/kfid/kfc1a9f2405292cbd9b" target="_blank" class="flex flex-col items-center"> <svg t="1690365454904" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4019" width="24" height="24" fill="currentColor"><path d="M693.12 347.264c11.776 0 23.36 0.896 35.008 2.176-31.36-146.048-187.456-254.528-365.696-254.528C163.2 94.912 0 230.656 0 403.136c0 99.52 54.272 181.248 145.024 244.736L108.8 756.864l126.72-63.488c45.312 8.896 81.664 18.112 126.912 18.112 11.392 0 22.656-0.512 33.792-1.344-7.04-24.256-11.2-49.6-11.2-76.032C385.088 475.776 521.024 347.264 693.12 347.264zM498.304 249.024c27.392 0 45.376 17.984 45.376 45.248 0 27.136-17.984 45.312-45.376 45.312-27.072 0-54.336-18.176-54.336-45.312C443.968 266.944 471.168 249.024 498.304 249.024zM244.672 339.584c-27.2 0-54.592-18.176-54.592-45.312 0-27.264 27.392-45.248 54.592-45.248S289.92 266.944 289.92 294.272C289.92 321.408 271.872 339.584 244.672 339.584zM1024 629.76c0-144.896-145.024-262.976-307.904-262.976-172.48 0-308.224 118.144-308.224 262.976 0 145.28 135.808 262.976 308.224 262.976 36.096 0 72.512-9.024 108.736-18.112l99.392 54.528-27.264-90.624C969.728 783.872 1024 711.488 1024 629.76zM616.128 584.384c-17.984 0-36.224-17.92-36.224-36.224 0-18.048 18.24-36.224 36.224-36.224 27.52 0 45.376 18.176 45.376 36.224C661.504 566.464 643.648 584.384 616.128 584.384zM815.488 584.384c-17.856 0-36.032-17.92-36.032-36.224 0-18.048 18.112-36.224 36.032-36.224 27.264 0 45.376 18.176 45.376 36.224C860.864 566.464 842.752 584.384 815.488 584.384z" p-id="4020"></path></svg> <span>客服</span> </a> </div> <div class="flex-1 flex justify-center"> <a href="/" class="flex flex-col items-center"> <svg t="1690364973301" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2306" width="24" height="24" fill="currentColor"><path d="M1006.1 412.7l-187.5-141c0-0.2 0.1-0.3 0.1-0.4V121.4c0-2.3-1.9-4.2-4.2-4.2h-92.4c-2.3 0-4.2 1.9-4.2 4.2V196L535.3 58.8c-7.3-5.5-16-8.4-25.1-8.4-9.2 0-17.9 2.9-25.2 8.5L16.7 412.5C7.8 419.2 2.1 429 0.5 440.1c-2.1 14.8 3.8 29.5 16.2 39.3 4.3 3.3 9.2 5.7 14.5 7 13 3.2 25.8 0.6 36-7.1L505 148.6c3.1-2.3 7.4-2.3 10.4 0l441.8 332c7.3 5.5 16 8.4 25.1 8.4 13.7 0 26.3-6.5 34.2-17.7 13.3-18.8 7.9-44.9-10.4-58.6z" p-id="2307"></path><path d="M906.7 499.4l-193.2-140-196.7-142.5c-3.4-2.5-8.1-2.5-11.5 0L308.7 359.4l-193.2 140c-5.6 4.1-9 10.6-9 17.6v392.1c0 35.5 29 64.5 64.5 64.5h246.7V716.2c0-30 24.6-54.6 54.6-54.6h77.5c30 0 54.6 24.6 54.6 54.6v257.4h246.7c35.5 0 64.5-29 64.5-64.5V517c0.1-6.9-3.3-13.5-8.9-17.6z" p-id="2308"></path></svg> <span>主页</span> </a> </div> <div class="flex-1 flex justify-center"> <a class="flex flex-col items-center" href="tel://0898-36694566"> <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 20 20" fill="currentColor"> <path d="M2 3a1 1 0 011-1h2.153a1 1 0 01.986.836l.74 4.435a1 1 0 01-.54 1.06l-1.548.773a11.037 11.037 0 006.105 6.105l.774-1.548a1 1 0 011.059-.54l4.435.74a1 1 0 01.836.986V17a1 1 0 01-1 1h-2C7.82 18 2 12.18 2 5V3z"></path> </svg> <span>电话</span> </a> </div> </div> </div> <script type="text/javascript" src="/scripts/vendors/jquery-3.6.0.min.js"> </script> <script type="text/javascript" src="/scripts/vendors/slick.min.js"></script> <script> (function(){var bp = document.createElement('script');var curProtocol = window.location.protocol.split(':')[0];if (curProtocol === 'https') {bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';}else{bp.src = 'http://push.zhanzhang.baidu.com/push.js';}var s = document.getElementsByTagName("script")[0];s.parentNode.insertBefore(bp, s); })(); </script> <script src="/jquery.la.min.js"></script> </body> <div style="clear:both;padding:10px;text-align:center;margin:5"><a href="/sitemap.xml" target="_blank">XML 地图</a></div> </html>