jQuery和原生js的区别

2024-09-01

jQuery和原生JS的对比

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

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

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

通过游戏认识 --- 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与原生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学习：jquery对象和js对象区别和转换

JQuery对象与JS对象区别与转换 1.JQuery对象在操作时,更加方便 2.JQuery对象和js对象方法不通用 3.两者相互转换 * jq -- > js:jq对象[索引] 或者 jq对象.ge(索引) * js -- > jq:$(js对象) <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta na

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

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

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与原生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

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

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

jquery与原生js比较

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

jQuery与原生JS相互转化

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

Rails Guide--Working with JavaScript in Rails; 如何把jquery转化为原生js

1 An Introduction to Ajax 打开网页的的过程也叫:request response cycel. JavaScript也可以request然后parse the response,还可以更新网页上的信息. 因此JS可以部分更新网页.这个技术称为Ajax. Rails默认使用CoffeeScript.包括应用JS.例子: $.ajax(url: "/test").done (html) -> $("#results").append ht

原生js实现类的添加和删除,以及对数据的add和update、view ，ajax请求，页面离开的操作

1 类操作 function hasClass(cla, element) { if(element.className.trim().length === 0) return false; var allClass = element.className.trim().split(" "); return allClass.indexOf(cla) > -1; } function addClass(cla,element){ if(!hasClass(cla,element)

ToDoList(原生JS)了解一下

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>ToDoList—最简单的待办事项列表</title> <link rel="shortcut icon" href="../img/panda.ico"> <link rel="style

原生js使用forEach()与jquery使用each遍历数组，return false 的区别

原生js使用forEach()与jquery使用each()遍历数组,return false 的区别: 1.使用each()遍历数组a,如下: var a=[20,21,22,23,24]; $.each(a, function(index,val) { console.log('index='+index); if(index==2){ return false; } console.log('val='+val); }); 结果如下: 从运行的效果可以看出,return 相当于循环中的br

原生JS和jQuery操作DOM的区别小结

一.Js原生对象和jQuery实例对象的相互转化: (1).原生JS对象转JQ对象: $(DOM对象); (2). JQ对象转原生JS对象: $(DOM对象).get(index); //注意区分eq(index)是jQuery实例对象; 直接下标访问, $(DOM对象)[index]; 二.两者操作DOM的对比一.创建元素节点 1.1 原生JS创建元素/文本节点 document.createElement("p"); 1.2 jQuery创建元素/文本节点 $('<p>

onload事件与ready事件的区别，原生js与jquery的区别

onload事件与ready事件分别是原生js与jquery的入口函数原生js入口函数写法: window.onload=function(){ } jquery入口函数写法: $(document).ready(function(){ }); 二者的区别主要有: 1.加载模式不同: 原生js会等待页面dom元素加载完毕,并且页面图片也加载完毕才会执行: jquery会等到dom元素都加载完毕,但不会等到图片也加载完毕就执行: 2. 通过原生js可以获取到dom元素的属性值: 通过jquery

原生JS事件绑定方法以及jQuery绑定事件方法bind、live、on、delegate的区别

一.原生JS事件绑定方法: 1.通过HTML属性进行事件处理函数的绑定如: <a href="#" onclick="f()"> 2.通过JavaScript对象属性进行绑定: var a=document.getElementById("a"); a.onclick=function(){alert("你好!")};//这里也可以不用匿名的函数直接赋方法名也是可以的通过以上这种方式进行事件函数的绑定有个缺点就是

jQuery和原生js的区别

热门专题