资讯频道 → Web前端
阅读更多

6顶
0踩

Web前端

转载新闻 一些可以替代 jQuery 的浏览器内置功能

2013-05-27 18:06 by 副主编 WnouM 评论(1) 有10667人浏览
jquery javascript 浏览器 chrome
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标准的选择器 

<div class="container">
  <ul>
    <li id="pink">Pink</li>
    <li id="salmon">Salmon</li>

    <li id="blue">Blue</li>
    <li id="green">Green</li>
    <li id="red">Red</li>
  </ul>  

</div>

<script>

  // 创建全局的 '$' 变量
  window.$ = function(selector) {
    return document.querySelector(selector);
  };

  (function() {
    // 通过id查找item1，将它的背景颜色修改为浅红
    var item = $("#salmon").style.backgroundColor="salmon";
    console.log(item);
  }());  
</script>


你需要使用原生的“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)方法加工一下，让它更方便。 

<div class="container">
  <ul>
    <li id="pink">Pink</li>
    <li id="salmon">Salmon</li>
    <li id="blue">Blue</li>
    <li id="green">Green</li>
    <li id="red">Red</li>
  </ul>  
</div>
<script>
  window.$ = function(selector) {
    return document.querySelector(selector);
  };
  window.$$ = function(selector) {
    var items = {},
    results = [],
    length = 0,
    i = 0;
    // 注意，IE8不支持这种做法
    results = Array.prototype.slice.call(document.querySelectorAll(selector));

    length = results.length;
    // add the results to the items object
    for ( ; i < length; ) {
      items[i] = results[i];
      i++;
    }
    // 添加一些额外的属性，让它更像一个Array
    items.length = length;
    items.splice = [].splice();
    // 添加 'each' 方法
    items.each = function(callback) {
      var i = 0;
      for ( ; i < length; ) {
        callback.call(items[i]);
        i++;
      }
    }
    return items;
  };

  (function() {
    // 查找green项，修改字体大小
    $("#green").style.fontSize = "2em";
    // 通过id查找，修改背景色
    $$("li").each(function() {
      this.style.backgroundColor = this.id;
    });
  }());
</script>

注意，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的兼容支持



参考资料：

  • 大小: 63.4 KB
  • 大小: 53.3 KB
来自: 外刊IT评论
6
顶
0
踩
评论 共 1 条 请登录后发表评论
1 楼 hailongshih 2013-05-29 17:10
内容不错哦

发表评论

您还没有登录,请您登录后再发表评论

相关推荐

  • 机器翻译研究现状与展望

    本文回顾机器翻译研究的历史，介绍典型的机器翻译方法，包括：基于规则、基于统计以及基于实例的机器翻译方法；针对机器翻译的研究现状，详细介绍和分析了基于混合策略的机器翻译方法，对统计以及机器学习方法在机器翻译中的应用进行了描述；论文还介绍了当前机器翻译评测技术；最后对机器翻译进行总结和展望。

  • 基于Transformers的自然语言处理入门【十】-机器翻译

    基于Transformers的自然语言处理入门【十】-机器翻译1 机器翻译背景2 机器翻译模型训练 1 机器翻译背景 机器翻译，是指使用计算机将一种自然语言转换为另一种自然语言的过程。这里，自然语言是指日常使用的人类语言（如中文、英语），区别于人工为特定目的创造的语言（如计算机编程语言）。 机器翻译是自然语言处理（NLP）的一个研究分支，是人工智能的终极目标之一，具有重要的科学研究价值。 2017年，谷歌在论文《Attention Is All You Need》中提出了Transformer模型。这种基于

  • 《机器翻译研究》简介

    机器翻译研究——翻译理论与实务丛书 Douban.prettify_form(document.getElementById(ssform)); 豆瓣采用的描述　· · · · · ·　  

  • 机器翻译的前世今生

    简 介： 本文从机器翻译领域的历史入手，介绍了机器翻译提出以来的发展历史，包括早期的基于规则的翻译、后来的基于统计语言模型的机器翻译，尤其是当代的神经网络机器翻译。神经网络机器翻译早期的人工神经网络 RNN、LSTM出发，到如今发展到 Transformer模型，本文综合叙述了这部分的发展历程以及发展趋势，并对未来进行了展望。 关键词： 经网络机器翻译，编码器，-解码器，注意力机制，Transformer 作者：赵俞廷 #mermaid-svg-rND7U6ZySAp5ZViP .label{fo..

  • 机器翻译技术的含义、发展和应用

    数年前，搜索引擎公司先后上线了机器翻译业务，并凭借其强大的数据挖掘和机器学习能力，不断扩充语言数量、提高翻译质量，提升整体的机器翻译水平。以百度翻译为例，目前已扩充至16种语言，186个语言方向，并支持对文本和网页的翻译，某些场景准确率已经达到实用水平。■ 机器翻译是什么？机器翻译是计算语言学的一个分支，也是人工智能领域的一个重要应用，其最早的相关研究可以追溯到20世纪50年代。随着互联网的飞...

  • 机器翻译技术现状评述与展望 | 行业观察

    今天，你AI了没？关注：决策智能与机器学习，每天学点AI干货正文共：2497字7图预计阅读时间：7分钟近年来，机器翻译等语言智能技术迅猛发展，语言智能技术落地、机器翻...

  • 机器翻译 -- Neural Machine Translation

    本文是基于吴恩达老师《深度学习》第五课第三周练习题所做。 0.背景介绍  为探究机器翻译的奥秘，我们首先从日期翻译着手。本程序所需的第三方库、数据集及辅助程序，可点击此处下载。 from keras.layers import Bidirectional, Concatenate, Permute, Dot, Input, LSTM, Multiply from keras.layers ...

  • 目前机器翻译，发展到哪个阶段了？

    从机器翻译的发展历程来看，其实最早也是语言学的研究范围（包括语音识别，也包含语言学的内容）。过去几十年来，为了实现机器翻译的梦想，以IBM、谷歌、微软为代表的国外科研机构和企业均相继成立机器翻译团队，专门从事智能翻译研究，矢志打破语言的巴别塔，但突破发生在2014年起，机器翻译领域开始有了翻天覆地的变化，这期间发生的大事，是以机器学习神经网络作为基础的机器翻译，开始在全面超越此前以统计模型为基础的...

  • 关于机器翻译，看这一篇就够了

    机器翻译技术的发展一直与计算机技术、信息论、语言学等学科的发展紧密相随。从早期的词典匹配，到词典结合语言学专家知识的规则翻译，再到基于语料库的统计机器翻译，随着计算机运算能力的提升和多语言信息资源的爆发式增长，机器翻译技术逐渐走出象牙塔，开始为普通用户提供实时便捷的翻译服务。 本文将简单介绍机器翻译技术的发展，包含机器翻译的演进历史与基本思想、端到端的神经翻译网络内部细节、技术落地过程中的...

  • 机器翻译的流程（原理）是怎么样的？

    目前最重要的两种机器翻译方式：规则法和统计法1. 规则法（rule based machine translation, RBMT），依据语言规则对文本进行分析，再借助计算机程序进行翻译。多数商用机器翻译系统采用规则法。规则法机器翻译系统的运作通过三个连续的阶段实现：分析，转换，生成，根据三个阶段的复杂性分为三级。- 直接翻译：简单的词到词的翻译。- 转换翻译：翻译过程要参考并兼顾到原文的词法、句...

  • 机器翻译小结

    机器翻译小结        机器翻译主要是通过计算机将一种语言翻译到其他语言，也就是最基本的序列到序列的问题。传统的机器翻译主要是基于统计的机器翻译，一般能够在精确度上做的比较好，但是在译文流畅度上有很大的不足，往往是只是翻译出对应单词的意思而缺少句子的整体信息。近几年，出现了基于神经网络的机器翻译，在译文流畅度和精确度上均有较好的表现。目前，主流的神经网络翻译架构有 CNN(facebook)...

  • 阿里巴巴机器翻译在跨境电商场景下的应用和实践

    摘要：阿里机器翻译团队在阿里巴巴业务场景主要应用在电商、沟通等垂直领域，服务的业务方包括AliExpress、Lazada、ICBU、天猫国际、淘宝海外、钉钉、阿里云等重要国际化业务，帮助这些业务解决在国际化发展中各国家本地化过程最基本的语言问题。本文将与大家分享机器翻译相关背景知识，再深入介绍机器翻译在阿里生态中的具体应用实践，介绍基于机器翻译技术搭建...

  • 基于Encoder-Decoder模式的机器翻译模型原理及实现

    基于Encoder-Decoder模式的机器翻译模型原理及实现理论背景代码实现 关键词: Encoder-Decoder, LSTM, WordEmbedding 在机器学习领域，有很多任务是把一种样式的序列映射成另外一种样式的序列，比如把一种语言翻译成另一种语言，把一段语音转换成一段文本，给一段文字生成一句话简介，或者把一张图片转换成一段对图片内容的文字描述等。这些任务都可以看作是Seq2Se...

  • 基于Attention的机器翻译模型，论文笔记

    论文题目：Neural Machine Translation by Jointly Learning to Align and Translate 论文地址：http://pdfs.semanticscholar.org/071b/16f25117fb6133480c6259227d54fc2a5ea0.pdf GIF来源：https://jalammar.github.io/visuali...

  • 关于如何构建一个面向垂直领域的机器翻译引擎思路分享

    机器翻译技术应用日愈火热，越来越多的场景开始考虑应用机器翻译技术来解决语言转换的效率问题，很多行业的企业用户都存在这样的的应用需求，这个应用场景存在一个痛点，人工翻译代价（资金和时间）过高，但通用领域机器翻译（比如大家所熟悉的在线翻译服务Google翻译）在某一个具体领域内翻译品质还差太远，难以满足实用的需求。 面对这样的需求，用户、机器翻译厂商和机器翻译技术研究者就提出了打造垂直领域的机器翻译引...

  • 纪念机器翻译概念的诞生：重新认识瓦伦·韦弗先生

    来源：AI科技评论作者：张家俊编辑：丛 末机器翻译旨在利用计算机实现自然语言之间的自动翻译，一直是自然语言处理与人工智能领域的重要研究方向，近年来更是取得了突破性进展，已成为大众较为熟...

  • 机器学习介绍及在金融领域的应用.zip

    机器学习

  • 麦肯锡-xx股份组织结构设计方案gl.ppt

    麦肯锡-xx股份组织结构设计方案gl.ppt

  • 目前机器人基于ChatGPT进行开发 使用机器人可以让你轻松进行对话， 后续机器人的更新升级一个命令即可搞定

    目前机器人基于ChatGPT进行开发 使用机器人可以让你轻松进行对话， 后续机器人的更新升级一个命令即可搞定， 无需再上服务器进行升级机器人.zip

Global site tag (gtag.js) - Google Analytics