Built-in functions in modern browsers can replace jQuery.

Built-in functions in modern browsers can replace jQuery.

The size of jQuery is constantly increasing. New features must be constantly added, which is an inevitable result. Although the slimming effect has been obvious since version 1.8.3, it is undeniable that it is still unacceptable for the development of web pages on mobile phones. Of course, jQuery is not a piece of iron. You can customize it and package it into the components you want, but some of the code used to be compatible with older browsers cannot be removed.

As far as my personal habits are concerned, no matter what projects I develop, even a very simple demo, the first thing I do is to introduce jQuery, in this way, we want to use the DOM selector function provided by it. This method is obvious for some older browsers such as IE6/IE7, but now modern browsers have built in the complete DOM selector function, this allows you to use the methods provided by the native browser to implement jQuery functions. Share the best UI front-end framework!

Document. queryselector

The modern browser here refers to the new generation of browsers such as Firefox, Google, Opera, and Safri. If it is IE, you must at least IE8 or later. You can map the document. querySelector () function$It returns the first element found in the DOM that matches the selection condition. Any CSS selector can be used as its parameter.

Note: IE 8 only supports the CSS2.1 standard selector.

. Code

2. • Pink
   • Salmon
   • Blue
   • Green
   • Red
4. <Script>
5. // Create a global '$' variable
6. Window. $ = function (selector ){
7. Return document. querySelector (selector );
8. };
9. (Function (){
10. // Search for item1 by id and change its background color to light red
11. Var item = $ ("# salmon"). style. backgroundColor = "salmon ";
12. Console. log (item );
13. }());
14. </Script>

    You need to use the native "style" method, and the chain call in jQuery cannot be used here. Console. log () Outputs "salmon" returned by the backgroundColor method ".

    The native DOM node is sometimes better than the encapsulated jQuery object. For example, if you want to modify the src attribute of an image, you can compare the jQuery method and the DOM Node Method. Share the best UI front-end framework!

    . Code
    1. // JQuery
    2. $ ("# Picture"). attr ("src", "http://placekitten.com/200/200 ");
    3. // Use the native js method that maps querySelector to $
    4. $ ("# Picture"). src = "http://placekitten.com/200/200 ";

       DOM objects allow you to directly access the src attribute of images. On the contrary, all jQuery objects need to be operated through the attr function. The document. querySelector method returns only one element. If your selection target is a bunch of elements, it will only return the first node that meets the conditions. To return all nodes, you must use the document. querySelectorAll method.

       Document. queryselectorall

       A clever practice is to map querySelector to $ and querySelectorAll to $. However, it returns a node list, which is not as easy as the Array format returned by jQuery. We can use the Array. prototype. slice. call (nodeList) method for processing to make it more convenient.

       . Code
       2. • Pink
          • Salmon
          • Blue
          • Green
          • Red
       4. <Script>
       5. Window. $ = function (selector ){
       6. Return document. querySelector (selector );
       7. };
       8. Window. $ = function (selector ){
       9. Var items = {},
       10. Results = [],
       11. Length = 0,
       12. I = 0;
       13. // Note that IE8 does not support this method
       14. Results = Array. prototype. slice. call (document. querySelectorAll (selector ));
       15. Length = results. length;
       16. // Add the results to the items object
       17. For (; I <length ;){
       18. Items [I] = results [I];
       19. I ++;
       20. }
       21. // Add some additional attributes to make it more like an Array
       22. Items. length = length;
       23. Items. splice = []. splice ();
       24. // Add the 'REACH' Method
       25. Items. each = function (callback ){
       26. Var I = 0;
       27. For (; I <length ;){
       28. Callback. call (items [I]);
       29. I ++;
       30. }
       31. }
       32. Return items;
       33. };
       34. (Function (){
       35. // Search for the green option and modify the font size
       36. $ ("# Green"). style. fontSize = "2em ";
       37. // Use id Search to modify the background color
       38. $ ("Li"). each (function (){
       39. This. style. backgroundColor = this. id;
       40. });
       41. }());
       42. </Script>

           Note that IE8 does not support converting a nodeList to an Array.

           ClassList

           JQuery is very convenient for CSS class operations. Fortunately, modern browsers also have built-in methods to operate them conveniently, mainly using classList objects. The following is a comparison of the two basic operations. Share the best UI front-end framework!

           . Code
           1. Window. $ = function (selector ){
           2. Return document. querySelector (selector );
           3. };
           4. // ---- Add the CSS class ------
           5. /* JQuery */
           6. $ (". Main-content"). addClass ("someClass ");
           7. /* Equivalent built-in method */
           8. $ (". Main-content"). classList. add ("someClass ");
           9. // ---- Delete a CSS class -----
           10. /* JQuery */
           11. $ (". Main-content"). removeClass ("someClass ");
           12. /* Equivalent built-in method */
           13. $ (". Main-content"). classList. remove ("someClass ");
           14. // ---- Determine whether a CSS class exists ---
           15. /* JQuery */
           16. If ($ (". main-content"). hasClass ("someClass "))
           17. /* Equivalent built-in method */
           18. If ($ (". main-content"). classList. contains ("someClass "))

               Compared with jQuery's rich methods, the built-in functions in the modern browsers mentioned above are very simple. However, if the requirements in the project are not high, these alternative methods can greatly reduce your application dependencies.

               Note that these built-in methods are supported differently in different browsers and versions. The following table lists their support levels. Share the best UI front-end framework!

               Figure 1: Compatibility of various browsers with querySelector/querySelectorAll

               Preview = "title =" click to view original size picture "class =" alignnone size-full wp-image-6534 overflow-img-right magplus "src =" http://www.bkjia.com/uploads/allimg/140921/042P5M33-0.jpg ">

               Figure 1: Compatibility of various browsers with classlist