首页
学习
活动
专区
圈层
工具
发布

jQuery VS JavaScript原生API

在jQuery的温柔乡里,是否还能记得原生她javascript原生?如果仅为使用个选择器($)或者类似的东西,是否真的有必要加载jQuery?故此了解下JS常用原生写法还是蛮有必要的。...[update-2015-12-07]有看到抛弃jQuery,拥抱原生JavaScript一文中提到,jQuery 代表着传统的以 DOM 为中心的开发模式,但现在复杂页面开发流行的是以 React 为代表的以数据...Show me the code.直接看代码;以下是jQuery和JavaScript实现相同操作的等价代码: 选择元素 // jQuery var els = $('.el'); //===...; document.querySelector('.el').nextElementSibling; 修改CSS属性 总是通过Javascript修改和检索CSS属性,这样会比使用jQuery CSS...函数更加简单快速,并且没有任何不必要的代码。

1.8K60
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    jQuery 事件绑定 和 JavaScript 原生事件绑定

    总结一下:jQuery 事件绑定 和 JavaScript 原生事件绑定 及 区别 jQuery 事件绑定 jQuery 中提供了四种事件监听绑定方式,分别是 bind、live、delegate、on...可选 function:监听函数,可传入event对象,这里的event是 jQuery 封装的 event 对象,与原生的event对象有区别,使用时需要注意 使用:$("#div li").bind...事件绑定和 JavaScript 事件绑定的区别 jQuery 中的事件绑定具有叠加性,JavaScript 的事件绑定则是可覆盖的。...可以发现: 使用 jQuery 的事件绑定方法,对同一个元素的 click 事件先后绑定了三个处理函数,结果按顺序都输出了,说明了 jQuery 的事件处理函数是叠加的; 而使用 JavaScript...原生的事件绑定,可以发现只执行了最后一个相同的绑定事件,后面绑定的事件处理函数覆盖了前面的事件处理函数。

    6.5K20

    前端系列 |原生JS和jQuery循环遍历函数

    前言 之前总是不清楚原生JS和jQuery中有哪些循环遍历函数,而且有时候还总是把原生JS方法当成jQuery方法来用,以致于项目总是报错,并且还不知道是什么原因。...DOM对象和jQuery对象如何互相转换? 首先,先说一下DOM对象和jQuery对象如何转换?这样原生JS和jQuery的方法,我们就可以随意使用了。...2.jQuery对象—>DOM对象 有两种方法: (1)jQuery对象[0],如$(“.cls”)[0]; (2)jQuery对象.get(0),如$(“.cls”).get(0)。...原生JS循环遍历函数 1.for() for循环得知道数组的长度才能循环。它比较常用,这里就不多说了。 2.forEach () 不需要知道数组长度,也可以对数组中每一个元素进行操作。...jQuery循环遍历函数 1.each() var arr = ["x","y","z"]; $(arr).each(function (index,item) { console.log(index)

    7K20

    检查原生 JavaScript 函数是否被覆盖

    /[1] 作者:https://mmazzarolo.com/about/[2] 你如何确定一个JavaScript原生函数是否被覆盖?...JavaScript原生函数 在JavaScript中,原生函数指的是其源代码已经被编译进原生机器码的函数。...原生函数可以在JavaScript 标准内置对象[3](比如说eval(), parseInt()等等),以及浏览器Web API[4](比如说fetch(), localStorage.getItem...由于JavaScript的动态特性,开发者可以覆盖浏览器暴露的原生函数。这种技术被称为"猴子补丁[5]"。 猴子补丁 猴子补丁主要用于修改浏览器内置API和原生函数的默认行为。...基于此,有时你可能需要测试一个给定的函数是否为原生函数,或者它是否被猴子补丁过......但你能做到吗?

    93920

    jquery和原生dom对象的转换&常用函数方法

    一、jquery和原生dom对象的转换 1、新建jquery对象和长度 var $p= $('p')新建一个jquery对象,一般在新建jquery对象的时候,加上一个$,以便好认。...页面上没有id=abc的元素,选中原生js对象时,返回的是null,我们可以知道选中这个元素不存在。...,一般来说对应的元素都是原生dom,要执行jQuery的text方法需要加$转换成jquery对象 2、jQuery.each( collection, callback(indexInArray, valueOfElement...虽然JavaScript提供了load事件,当页面呈现时用来执行这个事件,直到所有的东西,如图像已被完全接收前,此事件不会被触发。 在大多数情况下,只要DOM结构已完全加载时,脚本就可以运行。...传递处理函数给.ready()方法,能保证DOM准备好后就执行这个函数,因此,这里是进行所有其它事件绑定及运行其它 jQuery 代码的最佳地方。

    2.5K30

    你可能不需要 jQuery!使用原生 JavaScript 进行开发

    很多的 JavaScript 开发人员,包括我在内,都很喜欢 jQuery。...因为它的简单,因为它有很多丰富的插件可供使用,和其它优秀的工具一样,jQuery 让我们开发人员能够更轻松的开发网站和 Web 应用。   ...然而,另一方面,作为前端开发的基础框架,jQuery 包含大量的兼容性代码和扩展功能,其中有很多在你的整个项目中可能都不会用到。...其实如果你只是针对现代浏览器,很多功能使用原生的 JavaScript 就可以实现,即使是拖后腿的低版本 IE 浏览器,兼容性也是很容易处理的。 ?   ...下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能。如果你打算自己开发一个小的基础框架,可以好好参考一下这些代码的实现。

    1.3K10

    jquery及原生javascript对jsonp解决跨域问题实例详解

    jquery方式 ---- 前端: $.ajax({ url: 'http://m.xxx.tv/goLottery', data: { data: data...参数,callback值为jquery产生的一个随机字符串(也可以自定义),在jsonp请求结束后,jquery立马删除了这个script标签。...服务器收到请求,拿到callback的函数名,然后把后台数据作为参数包在函数里面返回给前端,jquery拿到数据返回到success接口给我们处理 javascript方式处理jsonp ----  前端...callback=jsonpHandler"; var script = document.createElement('script'); script.type = 'text/javascript...setTimeout(function(){},0)的作用是最后执行这段代码,确保插入动态script后,请求接口回来的回调函数(jsonpHandler )可以找到,不会出现undefined的错误

    1K70

    《你不知道的JavaScript》:理解js原生函数

    本篇来看下js中的原生函数,也叫内置函数。...主要包括如下: String() Number() Boolean() Array() Object() Function() RegExp() Date() Error() Symbol() 原生函数可以被当作构造函数来用...多数情况下,对象的内部[[class]]属性和创建该对象的内建原生构造函数相对应。...// 常量形式创建数组 5console.log(b); // [4, 5, 6] 但相较于其他原生构造函数,Date()和Error()则不一样,因为没有对应的常量形式来作为它们的替代。...借助原型代理,所有的这些构造函数的"实例"对象都具有对应原型对象上的方法。 最后总结下,js为所有基本类型值提供了封装对象,它们也被称为原生函数(String、Number、Boolean等)。

    86620

    使用原生 JavaScript 在页面加载完成后处理多个函数

    网页中的 JavaScript 脚本运行是需要通过事件去触发的。一般的做法就是在网页中,直接编写几个函数,有的在代码被加载的时候就被浏览器处理,或者使用类似下面的代码来触发实现函数的相关功能。...JavaScript 正确的使用方法应该是 脚本与 HTML 元素分离、当页面加载完成之后再去执行。本文就来讲解如何使用原生 JavaScript 来实现。...以前需要在 HTML 中加上一些触发事件来触发 JavaScript 的相关函数,而现在直接在 JavaScript 中对某个元素的使用监听器,监听这个元素的事件,如果这个元素被触发了某些事件,在监听器中又定义了这个事件对应的处理函数...这样做虽然可以解决在网页内容加载完成之后执行对应 JavaScript 代码,但是很不方便,因为我们需要把所有要加载的函数名都写进去,修改起来就会很麻烦。...这个函数的使用方法也比较简单,把它放在 JavaScript 的最顶部,然后在下面编写功能函数,如果需要将某个功能函数使用这种方法加载,就可以把函数名作为参数调用这个自定义的 addLoadListener

    3.6K20

    前端之变(五):王者归来

    如同我在前面的文章所阐述的,JQuery与React,Vue完全不能类比。 JQuery是『前』前端时代最有名的框架,而React与Vue则是『后』前端时代最有名的框架。...v8引擎 v8引擎是一个JavaScript引擎,它是Chrome带来的一个开源的引擎。 JavaScript引擎是做什么用的?...如果用一句话来形容,就是 将JavaScript翻译成操作系统CPU能"读懂"的代码 在2021年的现在,这玩意并不多,主流的就下面几个: Chrome的v8引擎 Mozilla的SpiderMonkey...想像一下,如果没有这种与原生系统交互的能力,今天前端的主流的一些技术与工具,没有存在的可能性: React,依赖这种能力将JSX翻译成JS less,sass这些编程式css,没有办法翻译成css 前端的包管理...是由tsc将ts翻译成js文件,浏览器才能识别 事实上,只要你稍微想下,今天你在前端编码的几乎所有技术,都依赖于这种与原生操作系统交互的能力而存在。

    85830

    前端面试那些坑

    用原生JavaScript的实现过什么功能吗? Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是? 对JSON的了解?...数组和对象有哪些原生方法,列举一下? JS 怎么实现一个类。怎么实例化这个类 JavaScript中的作用域与变量声明提升? 如何编写高性能的Javascript? 那些操作会造成内存泄漏?...jquery中如何将数组转化为json字符串,然后再转化回来? jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?...jquery 中如何将数组转化为json字符串,然后再转化回来? jQuery和Zepto的区别?各自的使用场景? 针对 jQuery 的优化方法? Zepto的点透问题如何解决?...Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法? 解释JavaScript中的作用域与变量声明提升? 那些操作会造成内存泄漏?

    2.6K60

    前端工程师面试题汇总

    用原生JavaScript的实现过什么功能吗? Javascript中,有一个函数,执行时对象查找时,永远不会去查找原型,这个函数是? 对JSON的了解?...jquery中如何将数组转化为json字符串,然后再转化回来? jQuery 的属性拷贝(extend)的实现原理是什么,如何实现深拷贝?...jQuery里的fire函数是什么意思,什么时候用? jQuery 是通过哪个方法和 Sizzle 选择器结合的?...jquery 中如何将数组转化为json字符串,然后再转化回来? jQuery和Zepto的区别?各自的使用场景? 针对 jQuery 的优化方法? Zepto的点透问题如何解决?...Underscore 对哪些 JS 原生对象进行了扩展以及提供了哪些好用的函数方法? 解释JavaScript中的作用域与变量声明提升? 那些操作会造成内存泄漏?

    2.4K80

    原生JavaScript+CSS实现计算器(简单的介绍一下eval函数)

    最近几天家里的事情有点忙,导致一直没有更新博客,但是不代表一直没看技术,学习不能停止,正所谓活到老学到老ok,我们今天简单的介绍一个js里面的不常用到的函数,但是功能确实很强大的,eval()运算函数...为了看出来他的强大,我写了一个简单的计算器,来说明一下这个函数的巧妙和强大。...举W3Cshool的例子: javascript"> eval("x=10;y=20;document.write(x*y)") document.write(...如果传递给 eval() 的 Javascript 代码生成了一个异常,eval() 将把该异常传递给调用者 说明: 该方法只接受原始字符串作为参数,如果 string 参数不是原始字符串,那么该方法将不作任何改变地返回...因此请不要为 eval() 函数传递 String 对象来作为参数。

    69120
    领券