jquery学堂,jquery怎么获取当前元素的父元素
jquery中$ready和window.onload的区别
做web开发时常用Jquery中$(document).ready()和J*aScript中的window.onload方法,两者都是要在页面加载完成以后加载的方法,但是这两者还是有很大区别的。最近遇到了这样的问题,查询了多篇文章,做一下总结。
简单来说,要以用以下张表来表示:
Jquery的ready()与J*ascrpit的load()
window.onload()$(document).ready()
加载时机
必须等待网页全部加载完毕(包括图片等),然后再执行JS代码
只需要等待网页中的DOM结构加载完毕,就能执行JS代码
执行次数
只能执行一次,如果第二次,那么第一次的执行会被覆盖
可以执行多次,第N次都不会被上一次覆盖
举例
以下代码无法正确执行:
window.onload= function(){ alert(“text1”);};
window.onload= function(){ alert(“text2”);};
结果只输出第二个
以下代码正确执行:
$(document).ready(function(){alert(“Hello”)});
$(document).ready(function(){alert(“Hello”)});
结果两次都输出
简写方案无$(function(){})
一般情况下window的load()都是用来设置body标签的onload*.但onload*是要在页面的元素全部加载完了才触发的,这也包括页面上的图片,以及大的表格数据。如果页面上图片较多或图片太大,加载需要较多时间,就会导致页面无响应,或者用户做了其它*作了。
而Jeuery中的ready()则是在页面的dom(节点)加载完后就可以做相应的*作,而不用等待全部元素加载完成.比如只知道页面某处有一张图片,而不一定要等它显示出来就可以为它绑定点击方法。
load()一般不建议使用,这里主要讲一下($(selector).ready())。
原理:
在jquery脚本加载的时候,会设置一个isReady的标记,监听DOMContentLoaded*(这个不是什么浏览器都有的,不同浏览器,jquery运作方式不一样).当然遇到调用ready函数的时候,如果isReady未被设置,那就是说页面未加载完,就会把要执行的函数用一个数组缓存起来,当页面加载完后,再把缓存的函数一一执行.
Jquery中的详细代码分析:
ready: function(fn){//绑定监听器bindReady();//如果 DOM加载完成if( jQuery.isReady)//马上运行此函数fn.call( document, jQuery);//否则保存起来else//把函数加入缓存数组中jQuery.readyList.push( function(){ return fn.call(this, jQuery);});return this;
}
当然,jquery对不同的浏览器dom加载完成的通知 bindReady()函数也是不同的
var readyBound= false;function bindReady(){if( readyBound) return;
readyBound= true;// Mozilla,opera,webkitnightlies支持DOMContentLoaded*if( document.addEventListener&&!jQuery.browser.opera)//直接使用*回调即可document.addEventListener("DOMContentLoaded", jQuery.ready, false);//如果是ie并且不是嵌在frame中//就需要不断地检查文档是否加载完if( jQuery.browser.msie&& window== top)(function(){if(jQuery.isReady) return;try{document.documentElement.doScroll("left");
} catch( error){setTimeout( arguments.callee, 0);return;
}// and execute any waiting functionsjQuery.ready();
})();if( jQuery.browser.opera)
document.addEventListener("DOMContentLoaded", function(){if(jQuery.isReady) return;for(var i= 0; i< document.styleSheets.length; i++)
if(document.styleSheets[i].disabled){
setTimeout( arguments.callee, 0);return;
}// and execute any waiting functionsjQuery.ready();
}, false);if( jQuery.browser.safari){var numStyles;
(function(){if(jQuery.isReady) return;if( document.readyState!="loaded"&& document.readyState!="complete"){
setTimeout( arguments.callee, 0);return;
}if( numStyles=== undefined)
numStyles= jQuery("style, link[rel=stylesheet]").length;if( document.styleSheets.length!= numStyles){
setTimeout( arguments.callee, 0);return;
}// and execute any waiting functionsjQuery.ready();
})();
}// A fallback to window.onload, that will always workjQuery.event.add( window,"load", jQuery.ready);
}
}
有什么好的学习j*ascript的网站
基础性的学习网站:
w3school:**w3school**/
w3cplus:*w3cplus*
菜鸟教程网:**runoob*
易百教程:**yiibai*/
脚本之家:**jb51*
视频类的学习网站:
尚学堂:**bjsxt*/
慕课网:**imooc*/
扣丁课堂:**codingke*/
极客学院:**jikexueyuan*/
个人博客类的学习网站:
张鑫旭:**zhangxinxu*/
阮一峰:**ruanyifeng*/home.html
廖雪峰:**liaoxuefeng*/
辰辰:**chennoted*/
轩枫阁:**xuanfengge*/
社区类的学习网站:
segmentfault:*segmentfault*/
掘金:*juejin.im/
简书:**jianshu*/
Stack Overflow:*stackoverflow*/
CSDN:**csdn*/
博客园:**cnblogs*/
希望对你有帮助!
jquery在实际开发中,一般推荐使用什么版本
这个并没有一个固定的答案,需要根据项目需求来定(就是你这个项目要兼容哪些平台,具体的兼容情况是怎么样的),不同的版本对浏览器的支持程度是不一样的。
jQuery1.x版本的框架时兼容所有IE浏览器的,而2.x版本的jQuery框架并不支持低端IE浏览器。此处的低端IE浏览器指的是IE8版本以及8版本以下。所以,对于需要全兼容的项目,就不得不使用1.x版本啦。
当前3.2.1版本支持情况:
PC端
Chrome:(Current- 1) and Current
Edge:(Current- 1) and Current
Firefox:(Current- 1) and Current
Internet Explorer: 9+
Safari:(Current- 1) and Current
Opera: Current
移动端
Stock browser on Android 4.0+
Safari on iOS 7+
资料来源:
HTML5学堂
jquery哪个版本 ie10 兼容性
jQuery1.x版本的框架时兼容所有IE浏览器的,而2.x版本的jQuery框架并不支持低端IE浏览器。此处的低端IE浏览器指的是IE8版本以及8版本以下。所以,对于需要全兼容的项目,就不得不使用1.x版本啦。
资料来源:HTML5学堂(wx+号)
jquery怎么获取当前元素的父元素
这样:
<ul class="parent1">
<li><a href="#" id="item1">jquery获取父节点</a></li>
<li><a href="#">jquery获取父元素</a></li>
</ul>
扩展资料:
注意事项
parent是指取得一个包含着所有匹配元素的唯一父元素的元素集合。
parents则是取得一个包含着所有匹配元素的祖先元素的元素集合(不包含根元素)。可以通过一个可选的表达式进行筛选。
可以看出parent的取值很明确,就是当前元素的父元素;parents则是当前元素的祖先元素。
<div id='div1'>
<div id='div2'><p></p>
</div><div id='div3' class='a'><p></p></div>
<div id='div4'><p></p></div>
</div>
web前端是自学好还是去培训机构学好
Web前端培训可以选择自学也可以选择参加培训机构的,具体要根据个人的情况选择适合自己的方式。
自学与参加培训的区别在于:
自学需要有较好的自我约束能力,较好的逻辑能力以及较强的学习能力,相较于参加培训虽然是节省了费用,但是学习周期相对于培训还是要长一些的,且遇到学习上的问题没人能够探讨或及时帮忙解答,只能自己找寻答案;
选择一家靠谱的前端培训机构,会让自己的学习效率提升上来,且会有老师指导学习,遇到问题有同学可以相互沟通,相互督促学习氛围较好。学习周期相对自学要短一些,但是培训就需要一定的费用的。
即便想要参加培训也不要着急于报名,可以先自学一点时间试试看,若是自学可以坚持那就选择自学,若是不成再参加培训也不迟。
web前端是做什么的
前端是在浏览浏览器的时候,它是网络前台的部分,运行在pc端。
移动端等浏览器上展示给用户浏览的页面,利用完美的动态设计,能够给用户带来极高的用户体验。
前端前端技术一般分为前端设计和前端开发,前端设计一般可以理解为网站上面的视觉设计,前端开发则是网站的前台代码实现。
前端开发又最基本的三个核心,这也是必须掌握的三个重要的核心,分别是HTML、CSS、J*aScript这三个,在日常的生活中我们接触到的也很多,掌握了这三个,在前端开发应付也会很轻松。
本文链接:http://www.lanmudan.com/html/87957871.html
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件举报,一经查实,本站将立刻删除。