新浪微博 登陆  注册   设为首页 加入收藏

学PHP >> JQUERY >> 一些可以替代 jQuery 的浏览器内置功能

一些可以替代 jQuery 的浏览器内置功能

查看次数23231 发表时间2013-05-27 18:07:30

jQuery的体积在不断的增大。新功能要不断增加,这是必然结果。虽然从版本1.8.3开始的瘦身效果明显,但不可否认的是,对于移动手机端的网页开发,它仍然是不可接受的。当然,jQuery不是铁板一块,你可以对它进行定制,...
jQuery的体积在不断的增大。新功能要不断增加,这是必然结果。虽然从版本1.8.3开始的瘦身效果明显,但不可否认的是,对于移动手机端的网页开发,它仍然是不可接受的。当然,jQuery不是铁板一块,你可以对它进行定制,只打包进你想要的组件,但其中的一些用来兼容老式浏览器的代码你无法去除。

就我的个人习惯来说,不管开发什么项目,即使是一个很简单的demo,我做的第一件事就是引入jQuery,这样做主要是想使用它提供的DOM选择器功能。对于一些像IE6/IE7这样的老式浏览器,这种做法是显而易见的,但是,如今现代浏览器里已经内置了完整的DOM选择器功能,能让你使用原生的浏览器提供的方法来实现jQuery的功能。

document.queryselector

这里说的现代浏览器是指Firefox、Chrome、Opera、Safari等现代浏览器,如果是IE,你需要至少是IE8或以上。你可以简单的将document.querySelector()函数映射为$,它能返回在DOM中找到的第一个匹配选择条件的元素。任何的CSS选择符都可以作为它的参数。

注意:IE 8只支持 CSS2.1标准的选择器

  • Pink
  • Salmon
  • Blue
  • Green
  • Red


你需要使用原生的“style”方法,而且这里不能使用jQuery里的链式调用。console.log()输出的将会是backgroundColor方法返回的“salmon”。

原生DOM节点有时候会比封装后的jQuery对象更好用。例如,如果你想修改一个图片的src属性,比较一下下面使用jQuery的做法和直接使用DOM节点的做法。

// jQuery方式
$("#picture").attr("src", "http://placekitten.com/200/200");

//使用将querySelector映射为$的原生js方式
$("#picture").src = "http://placekitten.com/200/200";


DOM对象能让你直接访问图片的src属性,相反,所有的jQuery对象都需要你通过attr函数来操作。

document.querySelector方法只返回一个元素。如果你的选择目标是一堆元素,它只会返回符合条件的第一个节点。要想返回所有节点,你需要使用document.querySelectorAll方法。

document.queryselectorall

一个很巧妙的做法是将querySelector映射为$,而将querySelectorAll函数映射为$$。但它返回的是一个节点列表,不如jQuery里返回的Array格式好用,我们可以使用Array.prototype.slice.call(nodeList)方法加工一下,让它更方便。

  • Pink
  • Salmon
  • Blue
  • Green
  • Red

注意,IE8是不支持将一个nodeList转换为Array的。

classList

使用jQuery对CSS类操作十分方便,幸运的是,现代浏览器里也内置了一下方法能够很方便的操作它们,主要用到了classList对象。下面是一些基本操作两种方式的对比。

  window.$ = function(selector) {
    return document.querySelector(selector);
  };
  //----增加CSS类------
  /* jQuery */
  $(".main-content").addClass("someClass");
  /* 等效内置方法 */
  $(".main-content").classList.add("someClass");
  //----删除一个CSS类-----
  /* jQuery */
  $(".main-content").removeClass("someClass");
  /* 等效内置方法 */
  $(".main-content").classList.remove("someClass");
  //----判断是否存在一个CSS类---
  /* jQuery */
  if($(".main-content").hasClass("someClass"))
  /* 等效内置方法 */
  if($(".main-content").classList.contains("someClass"))

相对于jQuery提供大量丰富的方法,上面说的这几个现代浏览器里内置的功能显得很简单,但如果项目中的要求不高,这些替代方法能大大的减少你的应用依赖。

最后要提醒的是,这些内置方法在不同的浏览器和不同的版本中支持程度不一样,下面是它们的支持程度参考表。

附图1:各种浏览器对querySelector/querySelectorAll的兼容支持



附图2:各种浏览器对classlist的兼容支持



参考资料:


(转发请注明转自:学PHP)    


  相关推荐



1楼 Tonia说: 2021-02-16 22:59:41
Use SendBulkMails.com to run email campaigns from your own private dashboard. Cold emails are allowed and won't get you blocked :) - 1Mil emails / mo @ $99 USD - Dedicated IP and Domain Included - Detailed statistical reports (delivery, bounce, clicks etc.) - Quick and easy setup with extended support at no extra cost. - Cancel anytime! Regards, www.SendBulkMails.com
2楼 Garry说: 2021-02-24 10:20:23
Do you need more clients? We have amazing databases starting at $9.99 until the end of the Month! Visit us at StarDataGroup.com
3楼 Alexander说: 2021-04-20 10:12:38
Do you need clients? We compiled some of the world's top databases for you at ridiculous low prices. $49 for any of our databases or $99 for all 16 databases! Visit BestLocalData.com Regards, Alexander
4楼 Nichol说: 2021-06-20 00:27:23
Hello from FbCourses.net Want to pay $0.01 a click? We got you covered. A great team of Global Digital Marketing experts have compiled this list of 13 Best + Free Facebook Advertising Training, Classes and Courses to help you learn and excel at Facebook Ads & Marketing. Thousands of professionals have already benefited from this list on Facebook Training. Regards, Nichol
5楼 Leandra说: 2021-07-01 06:41:15
Hi , I am following up on my message below. Who would I speak with about handling your US order fulfillment and shipping? Regards, Leandra order-fulfillment.net ------------------------------------------------------------------------ Hi, Who would I speak with at your company that manages your product shipping and order fulfillment? We are US company, offering warehousing, order fulfillment and drop shipping to our customers since 2005. Here are some of the items we ship for clients: -Books, training manuals, guides -E-com product drop shipping -New member welcomes boxes and gifts -Product samples -Health and Medical supplements -Marketing materials -Medical program test kits -Follow up gifts to clients, leads, and prospects Do you have some time to discuss - phone / email ? Thanks, Fulfillment Specialist www.Order-Fulfillment.net
6楼 Lorenza说: 2021-08-28 00:31:37
We have an amazing database of leads for you. All countries are $99 and you can buy the entire world 165 countries for $179. This offer is valid till Friday. www.SunDataGroup.one
7楼 Dora说: 2021-09-02 14:07:06
Hi from Order-Fulfillment.net Who would I speak with at your company about any of your order fulfillment and drop shipping needs? My company Order-Fulfillment.net can warehouse, inventory, and manage your drop shipping / order fulfillment for your customer orders. Based in the USA for almost 2 decades, near major USA air and sea ports. Here are some of the items we currently pick, pack and ship for clients: -Books, training manuals, guides -New member welcomes boxes and gifts -Product samples -Marketing materials -Medical program test kits -Follow up gifts to clients, leads, and prospects Thank you! Fulfillment Warehouse Order-Fulfillment.net Drop Shipping and Order Fulfillment Specialists since 2003
8楼 Boris说: 2021-09-30 01:17:34
Hey! Get all the leads you ever need. We have a special offer running BusinessLeads101.com. Stop paying Facebook and Linkedin and get a once-off solution. Regards, Boris
9楼 Johan说: 2021-10-01 04:48:27
Hello, My name is Johan, I am a PHP programmer that specializes in data driven web applications. Anything related to PHP, MySQL, Data scraping etc. If you have any custom jobs you can add me on skype to discuss your requirements. Skype: cmsdevelopers Regards, Johan
10楼 Lilly说: 2021-10-08 05:59:20
Hi , Who would I contact at your company that handles ordering your logo products, t-shirts, and promotional items? For over 20 years we have been creating and supplying our clients with all their custom logo merchandise. We can put your logo onto anything including: -Custom Printed T-shirts / Hoodies -Pens -Mugs -T-shirts -Bags -Banners -Table Covers -Key chains -USB flash drives ---plus 350,000 other items! We also offer PPE items such as hand sanitizer and masks. Are there any upcoming projects that you need logo items for? Thanks in advance for your time. Regards, Lilly Custom Branded Product Specialist
11楼 Matilda说: 2021-10-27 01:53:42
Hi from Order-Fulfillment.net Who would I speak with at your company about any of your order fulfillment and drop shipping needs? My company Order-Fulfillment.net can warehouse, inventory, and manage your drop shipping / order fulfillment for your customer orders. Based in the USA for almost 2 decades, near major USA air and sea ports. Here are some of the items we currently pick, pack and ship for clients: -Books, training manuals, guides -New member welcomes boxes and gifts -Product samples -Marketing materials -Medical program test kits -Follow up gifts to clients, leads, and prospects Thank you! Fulfillment Warehouse Order-Fulfillment.net Drop Shipping and Order Fulfillment Specialists since 2003
12楼 Kay说: 2021-11-24 02:37:37
Hey, we are running a black friday special on leads.. The entire USA (93 million records for $79) The entire Australia (8 million records for AUD 99) The entire South African Database (4 Million records for R1000) The entire UK (16 million records for 49) Or take all 152 countries for $99! Instant access and delivery. Visit CompanyLeads.org Regards, Kay
13楼 tinyurl.com/ShutDownDeal说: 2021-12-01 20:27:58
Need Business Leads in 152 countries? We are having a shut down sale! tinyurl.com/ShutDownDeal
14楼 Nilda说: 2022-03-22 10:12:34
Hi, I am interested in some of your products. Please give me a call on +1 304-873-4360
15楼 Johan Fourie说: 2022-04-14 08:04:52
Hello. My name is Johan Fourie and I am looking to sell DataList.biz. We are a data company that has been in the industry for 12 years. We do around $170k/year in revenue. 1) I am looking to sell 50% of the business for $5k. 2) It would be helpful if you are knowledgeable about the Data Business. 3) I am looking for someone that is willing to take over administration, support, client relations. 4) I will continue to do the marketing for new products. 5) You will accept all future income and pay me from it. Please contact me on WhatsApp +27 72 280 1952 or my personal email: johanfourieinc@gmail.com if you are interested in this and we can have a call. Regards, Johan Fourie
16楼 Kelly说: 2022-04-15 03:14:26
ZippyLeads.org is running an easter special till the 18th of April. Get all the leads you need for your company with our easter special.
17楼 Arden说: 2022-05-05 12:49:59
Hello, from CustomData.shop we are a provider of unique databases that could help your business. Please visit us at CustomData.shop to see if we can help you. Regards, Arden
18楼 Windy说: 2022-05-20 04:44:36
Your go-to source for leads. We can provide business to business and business to consumer leads, custom-tailored to your needs. CustomDatabases.org
19楼 Dorcas说: 2022-06-24 05:21:57
Hello, did you know that there are 241,120 internet directories in the world. These websites are what drive traffic to YOUR business. Want more traffic? Want more Sales? We can help - today. Your website xuephp.com is listed in only 51 of these directories. Get more traffic for your Global audience. Our automated system adds your website to all of the directories. You can find it here: getlisted.directory/xuephp.com Act today, and we will expedite your listings and waive the processing charge!

  发表评论
昵称:
(不超过20个字符或10个汉字)
内容: