jquery比较原生

2026-09-10

原生javascript与jquery 的比较

JavaScript的优点和缺点: 优点: 性能:由于JavaScript运行在客户端,节省了web服务器的请求时间和带宽轻量级的脚本语言,比较容易学习运行在用户机器上,运行结果和处理相对比较快. 可以使用第三方附加组件来检查代码片段. 缺点: 安全问题:由于JavaScript在客户端运行,可能被用于黑客目的. 渲染问题:在不同浏览器中的处理结果可能不同. jQuery的优点和缺点: 使用jQuery最大的好处是少量的代码做更多的事情.看个简单例子,获取元素的值,使用JavaScript:

jQuery与原生js实现banner轮播图

jQuery与原生js实现banner轮播图: (jq需自己加载)(图片需自己加载) <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>banner轮播图</title> <style type="text/css"> * { margin: 0; padding: 0; list-style: none; } #

通过游戏认识 --- JQuery与原生JS的差异

前言 jQuery是一个快速.简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库( 或JavaScript框架).jQuery设计的宗旨是“write Less,Do More”,即倡导写更少的代码,做更多的事情.它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,优化HTML文档操作.事件处理.动画设计和Ajax交互. 今天,影子就通过一个小游戏,剪刀石头布,来给大家介绍下,两者之间的区别. 1.原生JS实现游

原生JS的使用，包括jquery和原生JS获取节点、jquery和原生JS修改属性的比较

一.前言相比于JS这条直达终点.满是荆棘的小路,jquery无疑是康庄大道了,足够的简洁.易用给了它辉煌的地位.然而,毕竟是绕着道的插件,当小路走着走着变成大路的时候,曾经的大路也就失去了他自身的优势了. 原生JS虽然没有jquery那么的好用.便捷,或者说没有jquery那样让我们使用的如此顺手,甚至是无法舍弃的依赖.可是我们依然不得不扔掉手中这根陪伴我们多年的拐杖,我们不是瘸子,我们不曾腐朽,我们还可以独立前行. 二.正文 1. jquery和原生JS获取节点的比较 //这是HTML代码,

jQuery的原生替代

jQuery的原生替代,参考自你不需要jQuery,对其进行了更清晰的总结与分类,现代游览器基本都支持(ie10+以上),只整理了最简洁实用的原生代码,过分累赘的实现没有加入元素获取 jQuery 原生 $(selector) document.querySelectorAll(selector) $(el).find(selector) el.querySelectorAll(selector) $(el).prev() el.previousElementSibling $(el).nex

通过案例来剖析JQuery与原生JS

首先来个例子: 我们在登陆或者注册一些网站时,如果某一项点过了但没填,鼠标移走后是不是经常看到网站有相应的红色字体提示呢? 那下面我们就以这个为例来剖析下jQuery和原生JS的一些区别,来上代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src=

用jQuery基于原生js封装的轮播

我发现轮播在很多网站里面都用到过,一个绚丽的轮播可以为网页增色不少,最近闲来无事,也用原生js封装了一个轮播,可能不像网上的插件那么炫,但是也有用心去做.主要用了闭包的思想.需要传递的参数有:图片地址的数组,图片宽度,上一页,下一页的id,图片列表即ul的id(这儿使用无序列表排列的图片),自动轮播间隔的时间.功能:实现了轮播的自动轮播,可以点击上一页,下一页进行切换. 下面是html中的代码,只需要把存放的容器写好,引入jquery即可: <!DOCTYPE px;"> </

抛弃jQuery 深入原生的JavaScript

虽然我已经做网站建设工作10多年了,但我从最近3年才开始更多地学习如何更好的将纯JavaScript用于工作中,而不总是将jQuery考虑在第一位.现在我每天学习很多东西.这个过程让我觉得Adtile的JavaScript SDK 更像是在创建一个开源工程,而不是“具体的工作”,不得不说,我很喜欢那样. 今天,我准备将在过去几年学到的一些基础东西与大家一起分享,这将可能帮你深入纯 JavaScript的世界,让你能更简单的做出决定——jQuery在你下个工程中是否需要. 逐步增强虽然像jQue

【jQuery、原生】键盘键入两位小数

jquery的处理办法 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script src="jquery.min.js"></script> </head> <body> <input typ

JQuery和原生JS跨域加载JSON数据或HTML。

前提:有时候需要在网页上,加载另一个网站上的数据.或者加载另一个网站上的一个页面.Js的Ajax请求不具备跨域功能,可以使用JQuery来实现. 网页端JS代码: $(function () { $.ajax({ type: "get", async: false, url: "http://localhost:13964/getpage.ashx?callback=?",//服务端URL,该URL返回一段JS数据.如需返回HTML,只需把HTML组织成JSON即可

不要使用jQuery触发原生事件

原文链接: DO NOT TRIGGER REAL EVENT NAMES WITH JQUERY! 原文日期: 2014年02月26日翻译日期: 2014年03月2日翻译人员: 铁锚 JavaScript 框架提供了如此多的功能,以至于一不小心就会掉进坑里去. 对工具库依赖得越多,在修改或维护时一个小小的改的很可能就会影响到其他的功能(俗称处处是地雷,走路需谨慎),特别是维护多年前的遗留代码时. 我经常看到的一个错误是关于 jQuery的 trigger, trigger允许开发者手动触

jQuery与原生JS相互转化

前端发展很快,现代浏览器原生 API 已经足够好用.我们并不需要为了操作 DOM.Event 等再学习一下 jQuery 的 API.同时由于 React.Angular.Vue 等框架的流行,直接操作 DOM 不再是好的模式,jQuery 使用场景大大减少.总结了大部分 jQuery API 替代的方法,暂时只支持 IE10 以上浏览器. Query Selector 常用的 class.id.属性选择器都可以使用 document.querySelector 或 document.quer

jquery与原生JS实现增加、减小字号功能

预览效果: 实现代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatib

类似jQuery的原生JS封装的ajax方法

一,前言: 前文,我们介绍了ajax的原理和核心内容,主要讲的是ajax从前端到后端的数据传递的整个过程. Ajax工作原理和原生JS的ajax封装真正的核心就是这段代码: var xhr = new XMLHTTPRequest(); xhr.open("method", "url", "async"); xhr.send(null); xhr.onreadystatechange = function(){ if(xhr.readystat

jQuery和原生JS的对比

原生JS的缺点: 不能添加多个入口函数(window.onload),如果添加了多个,后面的会把前面的覆盖掉原生js的api名字太长,难以书写,不易记住原生js有的代码冗余原生js中的属性或者方法有些浏览器无法兼容原生js容错率比较低,前面的代码出现问题,后面的代码执行不到 jQuery的优点: 可以写多个入口函数 jQuery的api名字容易记住 jQuery的代码简洁 jQuery帮我们解决了浏览器兼容问题容错率比较高,前面的代码出现问题,不影响后面的代码

JavaWeb_Ajax通过JQuery和原生js异步传输数据

菜鸟教程传送门 AJAX 优点:在不重新加载整个页面的情况下,可以与服务器交换数据并更新部分网页内容 XMLHttpRequest 对象传送门 (一) [JQuery]定时发送ajax请求 (二) [JQuery]发送ajax时客户端服务端进行数据传递 (三) [原生JS]使用原生js代码完成ajax请求 (四)通过Ajax检测用户注册信息重复 [JQuery]定时发送ajax请求 JQuery.ajax()文档 <%@ page language="java" conten

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

jquery方式前端: $.ajax({ url: 'http://m.xxx.tv/goLottery', data: { data: data }, type: 'GET', dataType: 'jsonp', beforeSend: function() { }, success: function(data) { //data格式不变,正常处理 } }) 后台(php): public function actionGoLottery(){ $result = '后台数据'; //正

JQuery和原生JavaScript实现网页定位导航特效

慕课网的一个小课程,练习了一遍,不足之处,欢迎指正(照片在本地,大家可以着重看代码哈): <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>爱淘气购物网-JQuery网页定位导航特效</title> <style> /*All tag*/ html, body, div, ul, li, img

jquery和原生js-ajax

form表单 $('#submit').click(function(){ $('#form').serialize(); //会根据input里面的name,把数据序列化成字符串:eg:name=yang $('#form').serializeArray(); //会根据input里面的name,把数据序列化成数组:eg:[object] //注意:没有name会获取不到值 //下面原生js的方法 JSON.parse() //json字符串转化为json对象 JSON.stringify(

jquery与原生js比较

以选择符为例,类似于这种 $(".class") 方式,在ie里面,肯定比$("#id") 低很多,而对于chrome和firefox,则因为提供了getElementsByClassName 接口,所以速度不会特别慢,不需要遍历所有元素查看class,所以考虑一个综合的方案,应优先使用id选择符. 测试方法:对于一次处理一个对象的函数,循环执行3000次,对于批量处理函数,一次处理3000个对象. 结果见下图,时间单位是毫秒: 结果分析:大部分时候,原生js的确比

jQuery -原生如何互转

今天研究源码的时候发现,不需要用get() 也能进行原生转换,使用原生方法. 原生- jQuery对象 var obj=document.xxx $(obj).css(); 也可以直接 $(document.xxx) jQuery对象 - 原生方法一 : get() $('li').get(); 这是吧jq获取的元素的集合转换成了原生对象,get()中也可以放参数代表当前被转换的那一个可以是使用原生方法了. 很多问eq() 和get()的区别: 很简单,你用了eq()那么后面就无法使用原

jquery比较原生

热门专题