关于js和JQuery的执行先后的问题 - ITeye问答
&script type="text/javascript"&
// 1
&&& var applyNo = '&c:out value="${applyNo}" /&';
&&& var applystatus = '&c:out value="${applystatus}" /&';
// 2
&&& $(function()
&&& {
&&&&&&& applyNo = '&c:out value="${applyNo}" /&';
&&&&&&& applystatus = '&c:out value="${applystatus}" /&';
&&&&&&& $("#ApplyNo").val(applyNo);
&&&&&&& initInputPage();//初始化页面
&&& });
&/script&
上面的代码中，是1先执行，还是2先执行？
不管1和2的顺序如何，都是1先执行。2中的$(function() {。。。});的意思同window.onload=function(){...}差不多，在整个html文档加载解析完了之后才会执行。而1在解析到那个地方的时候就会执行，而不是等文档加载完了之后。
&&& // 1 ,无论什么时候，程序跑到这里就会开始执行，因此这里是最优先的。
&&& var applyNo = '&c:out value="${applyNo}" /&';
&&& var applystatus = '&c:out value="${applystatus}" /&';
&&& // 2 执行完以后，程序跑到这里。就会开始执行这句，但是这里你如果是使用的jquery插件的话，它的意思是等文档加载完毕再运行，因此内部的匿名函数何时运行，还得取决于文档有没有记载完毕。但起码，肯定在1之后。
&&& $(function()
&&&&&&& applyNo = '&c:out value="${applyNo}" /&';
&&&&&&& applystatus = '&c:out value="${applystatus}" /&';
&&&&&&& $("#ApplyNo").val(applyNo);
&&&&&&& initInputPage();//初始化页面
从上至下.& 变量会被直接初始化.
函数不会执行.. 调用的时候才会执行.
$(function()
类似于你定义第三个变量,会被初始化一遍. 执行初始化触发事件.
lz可以用alert();来验证你的执行顺序. 在最下面alert出你定义的那两个对象
看值是哪个不就明白了.. 哈哈..
如果放在页面中肯定是(1)先执行，
&&& 要是如果放到js脚本中，在页面引用的话浏览器会报脚本错误！
1先执行，2后执行
按你写的顺序执行。
肯定是1, 我看楼主这个应该在jsp文件里写的
所以2中的applyNo = '&c:out value="${applyNo}" /&';
&&&&&&& applystatus = '&c:out value="${applystatus}" /&';
算是重复定义了吧
因为在1已定义了,而且值是一样的
如果你把这个放在页面的开始就是1先执行，因为浏览器是从上往下解析文档的，遇到1的时候就开始执行了，而2要等到调用这个方法的地方被解析到才执行
1先执行然后再执行2
已解决问题
未解决问题你正在使用的浏览器版本过低，将不能正常浏览和使用知乎。中国领先的IT技术网站
51CTO旗下网站
【前端性能】必须要掌握的原生JS实现JQuery
很多时候，我们经常听见有人说jquery有多快多快。在这个各种类库满天飞的时候，不得不说的是，能有原生JS快吗？
作者：ChokCoco来源：博客园| 15:13
很多时候，我们经常听见有人说jquery有多快多快。在这个各种类库满天飞的时候，不得不说的是，能有原生JS快吗？
是的，明显原生JS要更快，因为诸如JQuery这样的库必须要兼容各种浏览器和低版本和许多其他的东西，考虑通用性必然会导致性能的损耗。
当然，我不是提倡写代码纯用原生JS实现，我记得淘宝玉伯曾经说的一句话&框架能够让我们走的更快，但只有了解原生的JS才能让我们走的更远&。
一些感（fei）想（hua）：
1、原生的js，好比全真教的武功，一步步从基础开始（先练气再御剑），很长一段时间内和jquery有很大差距，掌握以后发现jquery只不过是另外一种武功，看一遍既会。且当学原生到一定程度之后，可以自创武功。但原生见效很慢，属于前期慢后期快，成长性高。
2、jquery，好比华山派的剑宗，直接取实用的部分（剑），拿来即用，实用快速为主（剑），原理部分的原生为辅（气）。jquery见效较快，属于前期较快后期较慢，没有气的支持，成长会越来越慢
3、网上找代码，好比赵敏找六大门派高手偷绝学，直接对症下药，需要什么拿什么用什么，只注重伤敌（结果），无所谓剑与气。见效奇快，属于前期快，后期慢。如果事后不研究原理，完全不会有成长
废话不多说，下面的代码示例是一些流行的常用的JQuery功能的原生JS实现。
便捷的找到我们想要的DOM元素是JQuery的核心功能，JQuery选择器的强大无需赘言。通过传递一个查询字符串给CSS选择器，它将会在DOM元素中检索所有的匹配。
然而在大多数的情况下，我们可以使用相同的代码量用原生JS轻易实现。
1.获取页面所有的div
&&&$(&div&)&&&&&&&&&document.getElementsByTagName(&div&)&
2.获取某类名相同的一群元素
&&&&$(&.my-class&)&&&&&&&&document.querySelectorAll(&.my-class&)&&&&&&&&document.getElementsByClassName(&my-class&)&
3.更复杂的一些选择器
&&&$(&.my-class&li:first-child&)&&&&&&&&document.querySelectorAll(&.my-class&li:first-child&)&
&&&$(&.my-class&).get(0)&&&&&&&&document.querySelector(&.my-class&)&
JQuery另一大频繁被使用到的功能就是操作DOM元素，诸如插入或删除一个元素。当然，如果使用原生JS实现这些功能，代码量肯定是会有所增加的，不过我们也可以将这些功能封装成函数，下面是一些常用的DOM操作的原生JS实现。
1.插入HTML元素
&&&$(document.body).append(&&div&id='myDiv'&&img&src='im.gif'/&&/div&&);&&&&&&&&document.body.innerHTML&+=&&&div&id='myDiv'&&img&src='im.gif'/&&/div&&;&&&&&&&&var&frag&=&document.createDocumentFragment();&&&&&var&myDiv&=&document.createElement(&div&);&&&myDiv.id&=&&myDiv&;&&&&&var&im&=&document.createElement(&img&);&&&im.src&=&&im.gif&;&&&&&myDiv.appendChild(im);&&&frag.appendChild(myDiv);&&&&&document.body.appendChild(frag);&
在JQuery中可以轻松实现对css的操作，增加属性、删除属性或是检测是否存在某个类。那么你是否觉得使用原生JS实现会很麻烦呢？其实不然，因为有classList。下面是一些关于JQuery css操作的JS原生实现。
&&&var&el&=&document.querySelector(&.main-content&);&&&&&&&&&&&&&$(el).addClass(&someClass&);&&&&&&&&el.classList.add(&someClass&);&&&&&&&&&&&&&$(el).removeClass(&someClass&);&&&&&&&&el.classList.remove(&someClass&);&&&&&&&&&&&&&if($(el).hasClass(&someClass&))&&&&&&&&if(el.classList.contains(&someClass&))&
当我们简单地逐个设置Css的属性，而并非将它们全部传递给JQuery的Css函数时，性能明显会快很多。而且，真的不会添加什么额外的代码。
&&&var&el&=&document.querySelector(&.main-content&);&&&&&&&&&&&&$(el).css({&&&&&background:&&#FF0000&,&&&&&&box-shadow&:&&1px&1px&5px&5px&red&,&&&&&width:&&100px&,&&&&&height:&&100px&,&&&&&display:&&block&&&&});&&&&&&&&el.style.background&=&&#FF0000&;&&&el.style.width&=&&100px&;&&&el.style.height&=&&100px&;&&&el.style.display&=&&block&;&&&el.style.boxShadow&=&&1px&1px&5px&5px&red&;&
show与hide
show()与hide()应该也是JQuery中十分常用的方法，原生JS实现同样轻松。
&&&var&el&=&document.querySelector(&.main-content&);&&&&&&&&&&&&$(el).show();&&&$(el).hide();&&&&&&&&el.style.display&=&'';&&&el.style.display&=&'none';&
&&&var&el&=&document.querySelector(&.main-content&);&&&&&&&&&&&&$(el).off(eventName,&eventHandler);&&&&&&&&el.removeEventListener(eventName,&eventHandler);&&&&&&&&&&&&&$(el).on(eventName,&eventHandler);&&&&&&&&el.addEventListener(eventName,&eventHandler);&
文中出现了诸如querySelector、classList等方法，确实需要考虑兼容问题，关于它们的兼容性，请猛戳这里：querySelector/querySelectorAll, classList, getElementsByClassName,createDocumentFragment.
最后不得不说的是JQuery的确是一个了不起的库。但是如果我们可以同样轻松的使用原生JS实现JQuery，何乐而不为呢？也许我有点吹毛求疵，这一点性能优化可能是可有可无，只不过最近在开发H5游戏，你会发现当你的游戏无法顺畅地跑60帧（60FPS，每秒刷新60次）的时候，每一丝性能的优化带来的提升都是宝贵的。
原创文章，文笔有限，才疏学浅，文中若有不正之处，万望告知。
原文链接：/coco1s/p/4484238.html【编辑推荐】【责任编辑： TEL：（010）】
大家都在看猜你喜欢
头条原创原创原创专题
24H热文一周话题本月最赞
讲师：1人学习过
讲师：26人学习过
讲师：0人学习过
精选博文论坛热帖下载排行
本书分为4个部分共24章，以插件开发为中心，围绕插件开发主要介绍SWT/JFace的应用、插件扩展点的实现，以及GEF、EMF和RCP的相关知识。本书...
订阅51CTO邮刊我在FreeCodeCamp上面看它的课程，jQuery是排在JS之前的，但是慕课的前端工程师计划，是先学JS再学jQuery
js是语言，jQ是基于js的轻量级框架，学习顺序自然是先学js，就像四则运算和一元一次方程，你一定不会先学方程吧。还有如果你要搞前端的话，除了要学jQ，目前很热门也很好用的框架angular是很值得学习的！配合jQ的学习，相信你一定能成为优秀的前端工程师！
你还没有登录，请先登录或注册慕课网帐号
JQ是JS的一种框架,主要为了解决原生JS中DOM操作中大量重复的代码量,以及实际开发中低版本浏览器兼容性处理的繁杂.直接从JS入门好还是从JQ入门好?首先有很多人是从JQ入门再回过头来学JS的.适合自己的才是最好的,条条大路通罗马!一般人的做法是先学习基本的JS,然后去学JQ,再回过头透彻深入学习JS!当然如果你能快速的掌握JS并深入理解,完全可以直接一步到位学习JS,当你你到掌握JS的水平,框架什么的看几天就能很好的掌握了!毕竟有些框架是直接用JS写的!JQ的源码中也有很多值得学习的东西,框架只是让你能避免重复的去码代码!前期考虑兼容 ,能迅速的做出东西!后期考虑性能,能更好的做出东西!
已被提问者采纳
你还没有登录，请先登录或注册慕课网帐号
当乌龟有了梦想
先学js，jq是在js的基础之上进行的扩展！jq的源码就是js，学会js有助于jq的理解，这样理解的会更深！(*^__^*) 嘻嘻……
你还没有登录，请先登录或注册慕课网帐号
我是自学，我是先学了JQ 才学JS 但我建议先学JS 比较容易理解。
你还没有登录，请先登录或注册慕课网帐号
肯定先js啦！！！jQuery是封装好的js库，先学了js才理解起来就会更快
你还没有登录，请先登录或注册慕课网帐号
先学baidu，学会baidu然后百度js和jquery
你还没有登录，请先登录或注册慕课网帐号
这位童鞋很懒，什么也没有留下～～！
如果你要深入学习的好，那毕竟是先学js再学jq。jq说白也是将通用的js功能进行封装，使其变得更容易用，但还是有jq做不到的地方，那时候就需要js了。只有jq做不到的事，没有Js做不好的事。如果有了，那jq也更加做不到
你还没有登录，请先登录或注册慕课网帐号
我拥有的都是侥幸，我失去的都是人生
js吧，这样也更能理解jQuery源码的意思，了解这种思想，以后学其他的新生的框架，都会有帮助吧
你还没有登录，请先登录或注册慕课网帐号
应该先学js 的，所有的那些所谓的框架都是由js写的，当你掌握了js大部分的知识，jq，vue，那些还会很难吗？
你还没有登录，请先登录或注册慕课网帐号
我先学的js，然后用了3天时间就学会了jQuery，js是基础，jQuery是基于js封装的库，先学会js，jQuery就很好理解了
你还没有登录，请先登录或注册慕课网帐号
应该要先学js的，因为jq是依据js写的框架，以便于编程的时候能快速实现需要js写几十行才能实现的功能。所以js是基础，学好js后再来读jq，会觉得容易很多
你还没有登录，请先登录或注册慕课网帐号
我爱的是学习
从js开始 懂了js 别的 一看就懂
你还没有登录，请先登录或注册慕课网帐号
PHP是世界上除了汉语以外最好的语言
（我想进世界...
作为一个PHP，我只会JQ不会JS。。。。
你还没有登录，请先登录或注册慕课网帐号
你可以先学JS的基础部分，然后再学JQuery，这样理解起来容易一些，然后再回头深入学习JS
你还没有登录，请先登录或注册慕课网帐号
找刺激，看刘强
肯定是先JS，再JQ。如果所有功能都能用原生的JS实现，是很牛的。
你还没有登录，请先登录或注册慕课网帐号
如果是刚入门的话，还是先学习js，因为js是基础的只是，jquery是由js进行封装起来的。
你还没有登录，请先登录或注册慕课网帐号
既然你问了这个问题，先把js学好吧，会js的人不会问这样的问题的
你还没有登录，请先登录或注册慕课网帐号
先学JS，你要先掌握这门语言的基础，才能在此基础上学习语言的框架。这样效果更好
你还没有登录，请先登录或注册慕课网帐号
建议你先学习JavaScript，先打基础，jQuery可以帮你建立另一种通过分装打包写代码的思路
你还没有登录，请先登录或注册慕课网帐号
js 可以这么说 js相当于基础公式 jq 相当于你使用的简便方法
连公式都不会 拿什么做题 而且我面试时搜狗的前端也是建议先学js
你还没有登录，请先登录或注册慕课网帐号
53665人关注
21323人关注
Copyright (C)
All Rights Reserved | 京ICP备 号-2