脚本宝典收集整理的这篇文章主要介绍了javascript代码实例教程-现代浏览器中内置的可以等效替代jQuery的功能，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

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

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

@H_304_4@ document.queryselector

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

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

.代码

2. • Pink
   • Salmon
   • Blue
   • Green
   • red
4. <script>
5. // 创建全局的 '$' 变量
6. window.$ = function(selector) {
7. return document.querySelector(selector);
8. };
9. (function() {
10. // 通过id查找ITem1，将它的背景颜色修改为浅红
11. VAR item = $("#salmon").style.backgroundColor="salmon";
12. console.LOG(item);
13. }());
14. </script>

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

    原生DOM节点有时候会比封装后的jquery对象更好用。例如，如果你想修改一个图片的src属性，比较一下下面使用jQuery的做法和直接使用DOM节点的做法。 分享一个最好用的UI前端框架！

    .代码
    1. // jQuery方式
    2. $("#picture").attr("src", "https://placekitten.COM/200/200");
    3. //使用将querySelector映射为$的原生js方式
    4. $("#picture").src = "https://placekitten.com/200/200";

       DOM对象能让你直接访问图片的src属性，相反，所有的jQuery对象都需要你通过attr函数来操作。document.querySelector方法只返回一个元素。如果你的选择目标是一堆元素，它只会返回符合条件的第一个节点。要想返回所有节点，你需要使用document.querySelectorAll方法。

       document.queryselectorall

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

       .代码

       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. // 注意，IE8不支持这种做法
       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. // 添加一些额外的属性，让它更像一个Array
       22. items.length = length;
       23. items.splice = [].splice();
       24. // 添加 'each' 方法
       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. // 查找green项，修改字体大小
       36. $("#green").style.fontSize = "2em";
       37. // 通过id查找，修改背景色
       38. $$("li").each(function() {
       39. this.style.backgroundColor = this.id;
       40. });
       41. }());
       42. </script>

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

           classList

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

           .代码
           1. window.$ = function(selector) {
           2. return document.querySelector(selector);
           3. };
           4. //----增加CSS类------
           5. /* jQuery */
           6. $(".main-content").addClass("someClass");
           7. /* 等效内置方法 */
           8. $(".main-content").classList.add("someClass");
           9. //----删除一个CSS类-----
           10. /* jQuery */
           11. $(".main-content").removeClass("someClass");
           12. /* 等效内置方法 */
           13. $(".main-content").classList.remove("someClass");
           14. //----判断是否存在一个CSS类---
           15. /* jQuery */
           16. if($(".main-content").hasClass("someClass"))
           17. /* 等效内置方法 */
           18. if($(".main-content").classList.contains("someClass"))

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

               最后要提醒的是，这些内置方法在不同的浏览器和不同的版本中支持程度不一样，下面是它们的支持程度参考表。分享一个最好用的UI前端框架！

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

               vci9xdWVyeVNlbGVjdG9yQWxstcS85sjd1qez1g==" title="点击查看原始大小图片" class="alignnone size-full wp-image-6534 overflow-img overflow-img-right magplus" src="/uploaDFile/Collfiles/20140918/20140918090524156.jpg">

               附图1：各种浏览器对classlist的兼容支持

               

               觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！&nbsp;js脚本，巧夺天工，精雕玉琢。小宝典献丑了！

               脚本宝典总结

               以上是脚本宝典为你收集整理的javascript代码实例教程-现代浏览器中内置的可以等效替代jQuery的功能全部内容，希望文章能够帮你解决javascript代码实例教程-现代浏览器中内置的可以等效替代jQuery的功能所遇到的问题。

               如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

               本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
               如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。