展开

关键词

抛弃jQuery,拥抱原生JavaScript

Why not jQuery 1. 当我们在尝试把现有应用改成同构时,因为代码要运行在服务器端,但服务器端没有 DOM,所以引用 jQuery 就会报错。这也是要移除 jQuery 的迫切原因。 jQuery 由于提供了非常易用的 API,屏蔽了浏览器差异,极大地提高了开发效率。这也导致很多前端只懂 jQuery。 数据来源 W3 Counter 如何移除 jQuery 1. 替换代码 移除 jQuery 可以很顺利,我们把整个过程详细整理了,并开源。 [endif]–> 总结 本文并不是强迫你一定要移除 jQueryjQuery 为支持旧浏览器节省了很多成本。

57880

移动端是时候考虑抛弃jQuery了?

反而是它庞大的体积,min版的也有90KB 现在很多人建议使用 Zeptojs 来代替,虽然它没有jQuery强大,但是压缩版只有25KB,因为 Zeptojs 拥有很多和 jQuery 一样的接口,代码编写非常方便 但是,Zepto的性能相比jQuery怎么样? --分别打开jquery和zepto--> <! -- <script src="https://cdnjs.cloudflare.com/ajax/libs/<em>jquery</em>/2.0.3/<em>jquery</em>.min.js"></script> --> <script 和zepto各执行5次,结果: zepto 24 26 27 24 26 jquery 10 11 7 9 9 可以看到,jquery的速度要比zepto快一倍左右了,是否要换掉jquery,就要综合考虑了

44550
  • 广告
    关闭

    《云安全最佳实践-创作者计划》火热征稿中

    发布文章赢千元好礼!

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

    jQuery遍历函数

    jQuery遍历函数包含了用于筛选、查找和串联元素的方法。 .add():将元素加入到匹配元素的集合中。 .andSelf():把堆栈中之前的元素集加入到当前集合中。 .each():对jQuery对象进行跌的,为每一个匹配元素运行函数。 .end():结束当前链中近期的一次筛选操作,并将匹配元素集合返回到前一次的状态。 .filter():将匹配元素集合缩减为匹配选择器或匹配函数返回值的新元素。 .find():获得当前匹配元素集合中每一个元素的后代,由选择器进行筛选。 .map():把当前ppys集合中的每一个元素传递给函数。产生包括返回值的新jQuery对象。 .next():获得ppys集合中的每一个元素紧邻的同辈元素。

    7120

    jQuery学习---入口函数

    Hello·多选参数"); // 不会弹窗 3 } 4 window.onload = function () { 5 alert("多选参数"); // 会弹窗 6 } · window.onload函数必须等待网页全部加载完毕 并且他可以简写为$(function () { }); ·在jQuery中满足下列等式 1window.jQuery = window.$ = jQuery; 所以jQuery的入口函数又可以写为: 可能有人会问,要是我先引入jQuery然后自己定义了一个$(如下),那么 jQuery 中的$ 访问符不就不能用了吗? 1<script src="https://cdn.staticfile.org/<em>jquery</em>/1.10.2/<em>jquery</em>.min.js"></script> 2<script> 3 var jQuery.noConflict(); 4 // 使用 jQuery 5 jQuery(function () { 6 alert("Hello

    16530

    jQuery的animate函数

    jQuery提供了一个animate函数,可以通过改变CSS属性来实现一些动画效果。 Step Function 步长函数 在animate的第二种调用方式中提供了一个step的选项,这是一个回调函数,可以在每一个step执行时被触发。 所有的jQuery动画效果,都可以使用 jQuery.fx.off = true 来关闭,实际上是设置了 duration 为0.更多的信息,可以参考 jQuery.fx.off。 利用jQuery的Animate函数和Effect插件,做了一个类似于IBM首页的焦点图切换效果,可以参考 https://github.com/cocowool/RoseFocus 参考资料: 1 、animate of jQuery 2、jQuery的Index方法 3、jQuery UI effect

    34130

    jQuery原理(入口函数

    jQuery.fn.init() } jQuery.prototype = { constructor: jQuery } jQuery.fn.init.prototype = jQuery.prototype; window.jQuery = window.$ = jQuery; })(window); jQuery的本质是一个闭包 为了避免多个框架的冲突 undefiend参数 为了方便后期压缩代码 IE9以下的浏览器undefined可以被修改,为了保证内部使用的undefined不被修改,所以需要接收一个正确的undefined 入口函数测试 传入 selector) { return this; } 处理函数 判断是否为函数,如果是则将传入的参数作为ready的回调函数传入。 ,arr=[]; [].push.apply(obj,arr); 伪数组转换为真数组 var obj = {}; var arr = [].slice.call(obj) 入口函数

    25320

    Jquery源码分析:初始化Jquery函数

    今天我们来分析一下jquery的源码,从关于初始化jquery这个函数开始。 版本:3.4.1 代码是从一个匿名执行函数开始的,我们直接找到jQuery函数,因为我们使用jq的时候都是$("#id")这样开头,在jquery里,$=jQuery。 所以我们直接先找jQuery这个函数。 ? 在代码的148行,这个jQuery其实是个变量,然后赋值了一个函数,这个函数就是我们jQuery的入口点,我们定位到这个init函数这里来看看代码,由于代码太多,我把代码化简来讲解。 第二行定义jQuery.fn来接收jQuery的原型,并写入了一些变量和函数。 第三行定义init这个变量等于jQuery.fn.init在赋值一个init操作的函数

    27620

    Jquery源码分析:初始化Jquery函数

    今天我们来分析一下jquery的源码,从关于初始化jquery这个函数开始。 版本:3.4.1 代码是从一个匿名执行函数开始的,我们直接找到jQuery函数,因为我们使用jq的时候都是$("#id")这样开头,在jquery里,$=jQuery。 所以我们直接先找jQuery这个函数。 在代码的148行,这个jQuery其实是个变量,然后赋值了一个函数,这个函数就是我们jQuery的入口点,我们定位到这个init函数这里来看看代码,由于代码太多,我把代码化简来讲解。 第二行定义jQuery.fn来接收jQuery的原型,并写入了一些变量和函数。 第三行定义init这个变量等于jQuery.fn.init在赋值一个init操作的函数

    39730

    jquery学习-- Day 1(引用jquery和入口函数)

    jquery学习 - Day 1 引用jquery 引用下载地址: jsdeliver -query引用地址:https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist /jquery.min.js 各版本引用地址: https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.min.js ? 隐藏元素-初次使用jquery(jquery入口函数) ? <! device-width, initial-scale=1.0"> <title>Document</title> <script src="https://cdn.jsdelivr.net/npm/<em>jquery</em> @3.5.1/dist/<em>jquery</em>.min.js"></script> <style> div { width: 200px;

    12230

    使用jQuery封装实用函数

    大多数时候,我们开发人员自己都是写一个全局函数,不考虑后期维护人员也会写相同的代码,然后造成代码之间的冲突。 但是为了代码可维护性,并且在我们写代码中,使用的$是jQuery对象,我们需要安全进行编写函数。因为有时项目的名字不同,我们还会使用命名空间才区分它们。 (function($){ $.say=function(what){ alert("I say "+what); } })(jQuery); 这里我们将jQuery对象传入到函数中 ,以确保我们在函数内部使用的$是jQuery对象。 三、一个复杂的示例 标签: jQuery,jQuery插件,javascript

    52750

    jQuery入口函数的写法

    需要引入jQuery文件 入口函数的标准 在<head> </head>标签中,jQuery入口函数必须要写,在<body> </body>可以不写,写上入口函数后不论放在哪个标签下都能去执行 一般建议在body标签中写入口函数,就是为了等页面加载完成后才执行入口函数。 案例: js的入口函数执行要比jQuery的入口函数执行得晚一些。 jquery的入口函数会等待页面的加载完成才执行,但是不会等待图片的加载。 js的入口函数会等待页面加载完成,并且等待图片加载完成才开始执行 <! -1.12.4.js"></script> <script> //js的入口函数执行要比jQuery的入口函数执行得晚一些。 () { console.log("这是jQuery入口函数的第一种写法"); }); $(function () { console.log("这是jQuery入口函数的第二种写法

    18930

    jQuery1.0.1 -- jQuery1.0.2 之函数表达式与函数声明

    如上图所示,这一个小版本的更新是函数声明 转变成了函数表达式。 在介绍这一内容之前,先说下声明提前,函数声明提前是函数声明和函数表达式的重要区别。 -- 函数声明 --> function sayTruth(){ alert('myvin is handsome.'); } 弹出:myvin is handsome 注:函数的声明提前是函数名称和函数体均提前 ,即脚本中所有函数函数中所有嵌套的函数都会提前在当前上下文中其他代码之前声明。 函数声明是在预执行期执行的,就是说函数声明是在浏览器准备执行代码的时候执行的。因为函数声明在预执行期被执行,所以到了执行期,函数声明就不再执行了。 之后会有“函数声明和函数表达式的异同”,“JavaScript的一等公民----函数”等文章。

    6720

    jquery教程之属性操作函数

    jquery教程之属性操作函数 一、html 取得第一个匹配元素的html内容 获取 $('p').html(); 设置 $('p').html('设置html内容'); 二、text 取得所有匹配元素的内容 /jquery.min.js"></script> <script> console.log($('#el').html()) $('#el p:first').html

    20120

    彻底抛弃PeopleEditor,SharePoint中利用Jquery Chosen创建新的人员选择器

    为了让客户满意,必须要对人员选择器进行改造,原生的PeopleEditor彻底抛弃。 只能另辟蹊径,寻找适合的JQuery插件,创建新的人员选择器,分析了一下需求,可以归纳新的人员选择器必须支持如下情况: 支持人员的多选,比如像会议、通知需要对多人进行发送,当然也要支持删除。 找来找去,发现Jquery Chosen功能十分强大,完全满足我的需求,更多的功能参照Chosen官网: http://harvesthq.github.io/chosen/ 利用Jquery Chosen 总结 Chosen是一个非常强大的 JQuery插件,利用Chosen完全可以让我们抛弃传统的PeopleEditor。

    49380

    JQuery中bind和unbind函数

    JQuery中bind和unbind函数 测试: 页面代码: <body> <input type="button" name="aaa" value="点击我"> <input type="checkbox " name="checkbox1"> </body> JQuery代码: $().ready(function(){ for (var i = 0; i < 3; i++) { $("input 能够移除所有的或被选的事件处理程序,或者当事件发生时终止指定函数的运行。 function 是用来绑定的处理函数。 和 添加p元素click事件后触发的test函数 $("p").unbind("click",test);$("p").bind("click",test); 注意:要定义 .bind() 必须指明什么事件和函数现在来看个简单的

    42220

    第69天:jQuery入口函数

    一、jQuery入口函数 1、$(document).ready(function(){}); 2、$(function(){}); ? 二、事件处理程序  1、事件源 Js方式:document.getElementById(“id”) jQuery方式:$(“#id”) 2、事件 Js方式 :document.getElementById (“id”).onclick jQuery方式: $(“#id”).click 区别:jQuery的事件不带on 3、事件处理程序 Js 书写方式: document.getElementById(“id ”).onclick = function(){// 语句} jQuery 书写方式: $(“#id”).click(function(){// 语句}); 三、jQuery和js入口函数的区别 1、Js 的window.onload事件是等到所有内容,以及我们的外部图片之类的文件加载完了之后,才回去执行 2、jQuery的入口函数 是在 html所有标签都加载之后,就回去执行。

    36320

    Jquery find与filter函数区别

    基本是find子元素找,filter是平级找 ·find 函数是在当前对象集合的子元素中进行查询; ·filter 函数是对当前对象集合进行过滤, 利用过滤条件缩小范围; ·find 函数的参数是 jQuery 选择器表达式; ·filter 的参数也是选择器表达式, 但可以有多个条件, 用逗号分隔(逻辑或关系); ·filter 的参数也可以是个函数, 调用函数时会自动传入 index 参数 , 函数需返回 true或false 以选中或排除元素. <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/<em>jquery</em>/1.3.2/<em>jquery</em>.js"></script

    48870

    jquery 自定义函数方法

    总结: * jQuery中添加自定义或函数方法1,如 $.fn.extend({'aa':function(){}}) 或 jQuery.fn.aa=function(){}, 这种调用时就得这样,$( "#**").aa() *jQuery中添加自定义或函数方法2,如$.extend({'aa':function(){}}),这种调用时就是这样$.aa() * jQuery中添加自定义或函数方法3,( 中添加自定义或函数方法1,如$.fn.extend({'aa':function(){}})或jQuery.fn.aa=function(){},这种调用时就得这样,$("#**").aa() }) /** * jQuery中添加自定义或函数方法2,如$.extend({'aa':function(){}}),这种调用时就是这样$.aa() ); } }) /** * jQuery中添加自定义或函数方法3,如 $.myFuncThree('/post/getsecurejsonpost

    38630

    jquery教程之查找筛选函数

    jquery教程之查找筛选函数 一、eq 获取当前链式操作中第N个jQuery对象,返回jQuery对象 $("p").eq(1) 从0开始 $("p:eq(1)") 二、hasClass 检查当前的元素是否含有某个特定的类

    20110

    JQuery之内置函数响应事件

    这个函数会调用执行绑定到blur事件的所有函数,包括浏览器的默认行为。可以通过返回false来防止触发浏览器的默认行为。 这个函数会调用执行绑定到select事件的所有函数,包括浏览器的默认行为。可以通过在某个绑定的函数中返回false来防止触发浏览器的默认行为。 src="js/jquery-1.8.0.min.js"></script> <body> <input type="button" value="按钮" id="button_id"> <script ,只要将click换成相应的函数就可以实现其功能了,是不是特别简单啊! 如果想要再继续深入学习每个函数的具体用法,可以参考JQuery中的官方API。里面介绍都很详细,我这里就不多介绍了。 如对内容有问题或有疑义,请及时提出,不甚感谢。本人QQ:208017534

    35860

    相关产品

    • 云函数

      云函数

      云函数(Serverless Cloud Function,SCF)是腾讯云为企业和开发者们提供的无服务器执行环境,帮助您在无需购买和管理服务器的情况下运行代码。您只需使用平台支持的语言编写核心代码并设置代码运行的条件,即可在腾讯云基础设施上弹性、安全地运行代码。SCF 是实时文件处理和数据处理等场景下理想的计算平台。

    相关资讯

    热门标签

    活动推荐

    扫码关注腾讯云开发者

    领取腾讯云代金券