原生javascript等价于jQuery .attr(...).load()？ - 腾讯云开发者社区

文章/答案/技术大牛

发布

抛弃jQuery，拥抱原生JavaScript

Why not jQuery 1....同时不但要移除 jQuery，在很多场合也要避免直接操作 DOM。 3. 原生 API 足够好用由于浏览器的历史原因，曾经的前端开发为了兼容不同浏览器怪癖，需要增加很多成本。...jQuery 由于提供了非常易用的 API，屏蔽了浏览器差异，极大地提高了开发效率。这也导致很多前端只懂 jQuery。...原生 API 选择器相比 jQuery 丰富很多，如 document.getElementsByClassName 性能是 $(classSelector) 的 50 多倍！ ?...但条件成熟的情况下，移除 jQuery，参照 You Don’t Need jQuery 拥抱原生 JavaScript 能同样保证开发效率，也可以给产品带来更好的性能，同时也能提高开发者水平。

1.4K8 0

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'); //===...$('.el').filter(':first').attr('key', 'value'); $('.el').filter(':first').attr('key'); //====...('.el').nextElementSibling; 修改CSS属性总是通过Javascript修改和检索CSS属性，这样会比使用jQuery CSS函数更加简单快速，并且没有任何不必要的代码。

1.8K6 0

您找到你想要的搜索结果了吗？

是的

没有找到

JQuery 学了不亏

介绍 jQuery是JavaScript的工具库，对原生JavaScript中的DOM操作、事件处理、包括数据处理和Ajax技术等进行封装,提供更完善，更便捷的方法。...jQuery对象原生JavaScript对象与jQuery对象的属性和方法不能混用。...可以根据需要，互相转换 : 原生JavaScript转换jQuery对象 $(原生对象)，返回 jQuery 对象 jQuery对象转换原生JavaScript对象方法一 : 根据下标取元素,取出即为原生对象...匹配下标小于index的元素 :gt(index) 匹配下标大于index的元素 :not(选择器) 否定筛选,除()中选择器外,其他元素操作元素内容 html() //设置或读取标签内容,等价于原生...innerHTML,可识别标签语法 text() //设置或读取标签内容,等价于innerText,不能识别标签 val() //设置或读取表单元素的值,等价于原生value属性操作标签属性 attr

2.1K3 0

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

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

6.5K2 0

JQuery快速入门

其是由John Resig于2006创建的开源项目，极大的简化了javascript开发人员遍历HTML文档、操作DOM、处理事件、开发Ajax等操作，最有特色的形式是$(document).ready...Ajax方法示例 .load() 参数：url[,data][,callback] $('#resText').load('test.html'); $.get()/$.post() 参数包括url...json.jsonp,text) beforeSend, complete, success, error, global 序列化元素 $(#form01).serialize()序列化为字符串,其等价于...在jQuery中，通常事件绑定是通过bind(type[,data],fn)方法实现的，其第一个参数为事件类型，非常丰富，包括blur,focus,load,resize,unload,click,dblclick...对于jQuery中的事件来说，其均使用事件冒泡机制，而不支持时间捕获机制(可以用原生js)。

3.1K10 0

jquery要怎么写才能速度最快？（转…

其他语句的测试，比如.attr("value")和.val()，也是新版本的jQuery表现好于老版本。 2. 用对选择器在jquery中，你可以用多种选择器，选择同一个网页元素。...（2）较慢的选择器：class选择器 $('.className')的性能，取决于不同的浏览器。...不要过度使用jquery jQuery速度再快，也无法与原生的javascript方法相比。所以有原生方法可以使用的场合，尽量避免使用jQuery。...更正确的写法是，直接采用javascript原生方法，调用this.id：　　$('a').click(function(){ 　　　　alert(this.id); 　　}); 根据测试，this.id...javascript原生循环方法for和while，要比jQuery的.each()方法快，应该优先使用原生方法。 10.

1.9K3 0

jQuery最佳实践

其他语句的测试，比如.attr("value")和.val()，也是新版本的jQuery表现好于老版本。 2. 用对选择器在jQuery中，你可以用多种选择器，选择同一个网页元素。...（2）较慢的选择器：class选择器 $('.className')的性能，取决于不同的浏览器。...不要过度使用jQuery jQuery速度再快，也无法与原生的javascript方法相比。所以有原生方法可以使用的场合，尽量避免使用jQuery。...更正确的写法是，直接采用javascript原生方法，调用this.id： $('a').click(function(){ alert(this.id); }); 根据测试，this.id的速度比$(...javascript原生循环方法for和while，要比jQuery的.each()方法快，应该优先使用原生方法。 10.

1.5K2 0

JQuery 摘要

#' in math modeYou can't use 'macro parameter character #' in math mode(‘myId’)[0] (‘#myId’).get(0) 等价于...event可以是： blur change click dbclick error focus keydown keypress keyup load mousedown...trigger(): 使用javascript去触发某个事件效果 .css(): 参数可以是(“attr”, “value”)，也可以是({“attr”: “value”, “attr”: “value...”})，修改JQuery对象的css .hide(): 将JQuery对象的内联css属性”display”设置为”none” .show(): 将JQuery对象的内联css属性”display”...({“attr”: “value”, “attr”: “value”}, {duration: “value”, easing: “value”, complete: functiong(){}, queue

4041 0

2.基础核心学习

‘#box’); //进行执行的ID元素选择 $(‘#box’).css(‘color’,‘red’); //执行功能函数由于$本身就是jQuery对象的缩写形式，则等价于 jQuery(function...在延迟等待加载，JavaScript提供了一个事件为load，方法如下： window.onload = function () {}; //JavaScript等待加载 $(document).ready...三，对象互换 jQuery 对象虽然是 jQuery 库独有的对象，但它也是通过 JavaScript 进行封装而来的。我们可以直接输出来得到它的信息。 ...也需要返回原生的 DOM 对象时： alert(document.getElementById('box')); //[objectHTMLDivElement] jQuery 想要达到获取原生的 DOM...，比如 prototype、还有我们 JavaScript 课程开发的 Base 库，都使用“$”作为基准起始符，如果想和 jQuery 共容有两种方法： 1.将 jQuery 库在 Base 库之前引入

3872 0

jQuery操作DOM元素

实现上述两个功能当然可以使用原生js来完成，但在实际开发过程中很少这样做，通常会使用一些别人封装好的js库来辅助我们的工作，jQuery就是这些辅助库中的一员。...input:not(:empty)")，所有不为空的 input 元素 ---- input 说明 :input 选取页面上的所有input元素，返回类型是DOM元素数组 :type $(":text")等价于...DOM对象和jQuery对象的相互转换 //DOM转jQuery var win=$(window);//将window转换为jQuery对象 //jQuery对象win转DOM对象 win.get[0...]; //或 win[0]; 样式属性说明 attr() $('#key').attr('id'),获取id属性值;$('#key').attr('name','tag'),设置name属性值为tag...() 发送AJAX请求，重新获取标签要呈现的内容$('#lessonList').empty().load('/Lesson/UnionSearch/conditions?'

3.2K4 0

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

很多的 JavaScript 开发人员，包括我在内，都很喜欢 jQuery。...然而，另一方面，作为前端开发的基础框架，jQuery 包含大量的兼容性代码和扩展功能，其中有很多在你的整个项目中可能都不会用到。...其实如果你只是针对现代浏览器，很多功能使用原生的 JavaScript 就可以实现，即使是拖后腿的低版本 IE 浏览器，兼容性也是很容易处理的。 ? 　　...下面就带大家一起看看在 IE 浏览器环境中如果使用原生 JavaScript 代码实现 jQuery 中的功能。如果你打算自己开发一个小的基础框架，可以好好参考一下这些代码的实现。 ...： $(el).attr('tabindex'); $(el).html(); $('').append($(el).clone()).html(); $(el).text(); IE8+：

1.3K1 0

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

jquery方式 ---- 前端： $.ajax({ url: 'http://m.xxx.tv/goLottery', data: { data: data...'})'; } html变化： image.png 　　利用script的src不受域名限制的特点，jquery在head内动态插入一个script标签，src指向我们要请求的接口，并带上了一个callback...参数，callback值为jquery产生的一个随机字符串(也可以自定义)，在jsonp请求结束后，jquery立马删除了这个script标签。...服务器收到请求，拿到callback的函数名，然后把后台数据作为参数包在函数里面返回给前端，jquery拿到数据返回到success接口给我们处理 javascript方式处理jsonp ---- 前端...callback=jsonpHandler"; var script = document.createElement('script'); script.type = 'text/javascript

1K7 0

jquery $(document).ready()与window.onload的区别

本文链接：https://ligang.blog.csdn.net/article/details/42068199 jQuery中$(document).ready()的作用类似于传统JavaScript...在常规的 Javascript 代码中，通常使用 window.onload 方法，而在jQuery中，使用的是$(document).ready() 方法，极大的提高Web应用程序的速度。...要解决这个问题，可以使用 Jquery 中另一个关于页面加载的方法 ---load()方法。 Load()方法会在元素的onload 事件中绑定一个处理函数。...jQuery 代码如下： $(window).load(function (){ // 编写代码 }); //等价于 JavaScript 中的以下代码 Window.onload...JavaScript实现jQuery的ready()方法请注意，如果事件已经被触发，回调将不会被执行。

2.6K3 1

脚本语言知识总结.

与 matches方法等价的那个方法，是 RegExp 对象提供test方法例如：/^\d+$/.test("1234") --- 返回true /^\d+$/ 等价于 new RegExp(...;// 八进制 var d2 = 0x10; // 十六进制 // match方法类似 Java中 matches，有区别 //alert(/^\d+$/.test("1234abc")); // 等价于...等价于$(document).ready(function(){...}); ①：jQuery基本使用传统Js写法： javascript"> window.onload...","true") 等价于 prop("checked") 练习1： ² 点击一个button，动态设置 div的属性 id name class ² 尝试能否设置一个不存在的属性？...①：load方法 load方法是jQuery中最为简单和常用的Ajax方法，处理HTML片段此方法最为合适。

6K13 0

如何编写高效的jQuery代码（转载）

jQuery的编写原则： ---- 一、不要过度使用jQuery 1. jQuery速度再快，也无法与原生的javascript方法相比，而且建立的jQuery对象包含的信息量很庞大。...所以有原生方法可以使用的场合，尽量避免使用jQuery。　　...jQuery对象的变量名要加上"$"的前缀以区分javascript对象，当然若变量存储的并非对象，则不要添加该前缀。...三、高效循环　　循环总是一种比较耗时的操作，javascript原生循环方法for和while，要比jQuery的".each()"快。并且关于for循环，以下这种写法效率最高。...你可以通过将jQuery函数绑定到 $(window).load 事件的方法来减少页面载入时的cpu使用率。

9172 0

与Ajax同样重要的jQuery（2）

/jquery-1.8.3.min.js"> javascript"> $(function(){ // 点击button 打印radio checkbox...样式操作 css(name,value) css({name:value,name:value}); 同时修改多个CSS样式基本过滤选择器与筛选过滤 API功能是相同 $("tr:first") 等价于...对象 ②：属性操作设置属性 attr(name,value) 读取属性 attr(name) 同时设置多个属性 attr({name:value,name:value... }); attr("checked...","true") 等价于 prop("checked") 练习1： ² 点击一个button，动态设置 div的属性 id name class ² 尝试能否设置一个不存在的属性？...③：CSS操作通过attr属性设置/获取 style属性 attr('style','color:red'); // 添加style属性设置CSS样式属性 css(name, value) 设置一个

6.8K5 0

ajaxFileUpload+ThinkPHP+jqGrid 图片上传与显示

array('id'=>$id)); } } } 因为 thinkphp 自带的 ajaxReturn 返回的数据带有pre标签,会导致ajaxFIleUpload 解析不了,所以用了原生的...(oldElement).clone(); jQuery(oldElement).attr('id', fileId); jQuery(oldElement).before...('#' + formId); jQuery(form).attr('action', s.url); jQuery(form).attr('method...} jQuery('#' + frameId).load(uploadCallback); return {abort: function(){...( data ); // Get the JavaScript object, if JSON is used.

2.6K4 0

jquery对象和javascript对象相互转换

jQuery 对象是 jQuery 独有的，其可以使用 jQuery 里的方法，但是不能使用 DOM 的方法；例如： $("#img").attr("src","test.jpg"); 这里的 $("#...DOM对象就是Javascript 固有的一些对象操作。DOM 对象能使用Javascript 固有的方法，但是不能使用 jQuery 里的方法。...$("#img").attr("src","test.jpg"); 和 document.getElementById("img").src=\'#\'" 是等价的，是正确的，但是 $("#img")....再说一个例子，就是this, 在写 jQuery 时经常这样写： this.attr("src","test.jpg")；可是就是出错，其实this 是DOM对象，而.attr("src","test.jpg...要解决这个问题就要将 DOM对象转换成 jQuery 对象，例如 $(this).attr("src","test.jpg"); 1.

5861 0

前端学习笔记—JavaScript和jQuery

原生JavaScript需要控制CSS样式显示需要通过.style属性设置，如document.getElementById("endid").style.backgroundColor='#66ffff...使用 1、简介： jQuery是一个javaScript封装框架是一个函数库，能够简化原生JavaScript的使用。...jQuery是围绕DOM树设计的，它是一个集JavaScript、CSS、DOM、AJAX于一体的强大框架，能够处理 HTML/JSP/XML、CSS、DOM、事件、实现动画效果，也能提供异步 AJAX...(document).ready()与()、jQuery()、window,jQuery()是等价的，所以(document).ready()可以写成 (function() { alert(“Hello...).val(值)和(选择器).text(值)设置 $(选择器).append("我动态添加的 div") 4、网络请求 //原生JavaScript ajax网络请求

4991 0

前端之jQuery

一、jQuery介绍 jQuery是一个轻量级的、兼容多浏览器的JavaScript库。...原生的js对象如何转换成jQuery对象？...$(原生的js对象) 类似于Python中的str([1,2,3,4,]) 三、jQuery基础语法 $(selector).action() 3.1查找标签 3.1.1基本选择器 id选择器： $("...$("div").find("p") 等价于$("div p") 筛选筛选出与指定表达式匹配的元素集合。这个方法用于缩小匹配的范围。用逗号分隔多个表达式。...$("div").filter(".c1") // 从结果集中过滤出有c1样式类的等价于 $("div.c1") 补充： .first() // 获取匹配的第一个元素 .last() // 获取匹配的最后一个元素

5.5K2 1

点击加载更多

抛弃jQuery，拥抱原生JavaScript

jQuery VS JavaScript原生API

JQuery 学了不亏

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

JQuery快速入门

jquery要怎么写才能速度最快？（转…

jQuery最佳实践

JQuery 摘要

2.基础核心学习

jQuery操作DOM元素

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

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

jquery $(document).ready()与window.onload的区别

脚本语言知识总结.

如何编写高效的jQuery代码（转载）

与Ajax同样重要的jQuery（2）

ajaxFileUpload+ThinkPHP+jqGrid 图片上传与显示

jquery对象和javascript对象相互转换

前端学习笔记—JavaScript和jQuery

前端之jQuery

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐