document.ready事件和document.load事件的区别
jQuery 面试问题和答案
![jQuery 面试问题和答案](https://img.taocdn.com/s3/m/0ac76f06f18583d048645902.png)
jQuery面试问题和答案
{
22.问题:body中的onload()函数和jQuery中的
document.ready()有什么区别?
回答:onload()和document.ready()的区别有以下两点:
1、我们可以在页面中使用多个document.ready(),但只能使用一次onload()。
2、document.ready()函数在页面DOM元素加载完以后就会被调用,而onload()函数则要在所有的关联资源(包括图像、音频)加载完毕后才会调用。
23问题:jQuery中有哪几种类型的选择器?
回答:从我自己的角度来讲,可以有3种类型的选择器,如下:
1、基本选择器:直接根据id、css类名、元素名返回匹配的dom元素。
2、层次选择器:也叫做路径选择器,可以根据路径层次来选择相应的DOM元素。
3、过滤选择器:在前面的基础上过滤相关条件,得到匹配的dom元素。
24.问题:请使用jQuery将页面上的所有元素边框设置为2px宽的虚线?
回答:这正是jQuery选择器上场的时候了,代码如下:
<script language="javascript"type="text/javascript">
$("*").css("border", "2px dotted red");。
jq基础笔记
![jq基础笔记](https://img.taocdn.com/s3/m/e1f2f25e336c1eb91a375d98.png)
JQuery等价于$$(document).ready(function(){});简写==$(function(){});返回值都为[object Object]容错,jQ发生错误不报错1,jq选择器1>基本选择器$(“#idName”)------通过id找元素$(“.className” )------通过class找元素$(“tagName”)-------通过标签找元素$(“*”)---------匹配所有的元素$(“li *”)----li下的全部一般用于局部环境内$(“selector1,selector2”)---群组匹配元素$(“box.div”)-----限定必须是box元素的div2,层级选择器$(“a b”)-----匹配a的后代中所有b元素$(“a>b”)----匹配a中子代b元素(只找儿子,不找孙子)$(“a+b”)----匹配紧邻的一个兄弟b元素(紧邻,一个)$(“a~b”)----匹配a之后的所有兄弟b元素(之后所有)3,过滤选择器1>基本选择器a>特定位置的过滤$(“li:first”)--- --匹配第一个li元素$(“li:last”) ---匹配找到的li中最后一个li元素$(“li:eq(index)”)---匹配找到的li中索引为index的li。
(index从零开始)b>指定范围的过滤$(“li:lt(index)”) --匹配index之前的所有li(不包含index位置的li);$(“li:gt(index)”)---匹配index之后的所有li(不包含index位置的li)$(“li:not(selector)”)---匹配除了not的li内元素$(“li:odd”)----匹配偶数行(索引为奇数)的li$(“li:even”)----匹配奇数行(索引为偶数)的li2>属性过滤$(“[标签属性]”)-----匹配有该属性的俄元素$(“[标签属性=值]”)---匹配属性=指定的元素$(“[标签属性^=value]”)$(“[标签属性$=value]”)$(“[标签属性!=value]”)3>子元素选择器$(“li:first”)------将所有匹配到的元素中只选第一个(返回第一个元素)$(“li:first-child”)----匹配每个li的父元素的第一个孩子(可返回多个元素)$(“li:last”)和(“li:last-child”)用法与以上类似$(“li:only-child”)------匹配li的父级只有一个孩子的li元素val=$(“#id”).val()---获取#id 的文本内容$("#btn").click(function(){var val=$("#txt").val();$("a:contains('"+val+"')").css("background","red");})4>内容过滤$(“li:contexts(text)”)--匹配内容中包含了text的文本的li$(“li:has(selector)”)---匹配内容中包含了selector元素的li$(“li:empty”)-----匹配内容为空的li元素$(“li:parent”)----匹配以li为父元素的DOM节点5>可见和隐藏选择器$(“div:hidden”)----匹配div中设置了display为none的元素,通过其他方式不可见的元素匹配不到;$(“div:visible”)---匹配div中没有设置display为none的元素,只认display设置不为none的元素备注:此选择器只以display设置的结果为准4,表单选择器$(“:input”) ------所有的表单中的控件:input button select$(“:text”)-------文本输入框---所有的input标签type属性值之前加冒号--表示相应的input元素$(“:disable”)---所有表单控件中设置了disable属性的元素$(“:enable”)----所有的表单控件中没有设置disable属性的元素$(“:checked”)---匹配被选中的单选按钮或者复选框$(“:selected”)---匹配被选中的option元素2,获取文本text( )------只获取到文本内容html( )-----获取包含标签在内的所有内容val( ) -----获取表单控件的文本设置内容text(“内容”)------设置内容,不解析标签html( “内容”)-----获取包含标签在内的所有内容val( “内容”) -----获取表单控件的文本.val([“check”,”radio”])----通过数组传递设置选定状态3,获取和设置元素的特性attr(“标签属性”)------获取该属性attr(“标签属性“,”属性值)-----设置该属性设置多个属性:attr({ 属性:属性值,属性:属性值});备注:多个属性设置之间用逗号分隔,最后一个无任何符号删除属性:removeAttr(“标签属性”)4,获取和设置DOM对象的属性property获取:prop( “属性”)设置:Prop(“属性””属性值”)备注:互补与attr( ),, 更适应结果为boolth的类型,5,attrbute和property区别1,区别:表示的意思不一样attrbute特性--所有设置的标签属性都存在attrbute类关联数组中获取:attrbute[ i ] 或者attrbute[“特性名”]property 属性标签有的特性,并已经设置了,可以通过property的方式获取获取:对象.属性名设置:如果对象没有该属性,可以通过对象.属性名=属性值jq:通过prop()方式设置的属性,通过attr()的方式获取不到对象没有的,通过attr()方式设置的,通过prop()的方式获取不到;联系:DOM元素有该特性,并且已经设置了,两种方式度可以获取到补充:通过attr( )获取不到的或设置不了的特殊属性,我们可以通过prop( )获取和设置例如:表单控件的checked属性;6,each( )----遍历每一个匹配到的元素使用语法:each(function(i,ele){ 执行内容});i-----表示每一个元素的索引Ele-----表示匹配到的每一个元素$(Ele)---将获取到的DOM元素转换成jq对象----用jq的API数组与遍历结合使用var arr=["#000","#0f0","#00f","#0ff","#f0f"];$(".warp").each(function(i){$(".warp").eq(i).css("backgroundColor",arr[i]);}); 这里不能使用this7,修改css属性的方法:attr(“class”,”类名”)addClass(“类名”)--------追加样式removeClass(“类名”)-----删除指定的类名removeclass( )------删除所有的类名toggleClass(“类名”)-------切换类名(在有和没有该类名之间切换)hasClasscss(“css属性”)--------获取一个css属性的值css(“css属性”,”属性值”)---设置一个csss属性css({属性:“属性值”,属性:“属性值”});8,获取索引:index( )-----在同辈中找索引index(“selector”)---在指定的同类(同辈)中找索引9,js对象和jq对象相互转换js-----jq 适用$( )工厂函数------$( js对象)jq----js $(“”)[index] 或者$(“”).get( index )转换之后的对象可以用彼此的API10,节点的遍历children( )/children( selector )----子代/子代中某个find( selector )-------在子孙后代中查找指定元素next( )/next( selector )------之后紧跟的一个兄弟元素/筛选某个紧邻的元素nextALL( )/nextAll( selector )----之后所有的兄弟元素prev( )/prev( selector )prevALL/prevALL( selector )siblings( )-----所有兄弟元素不包含自身parent( )------父元素输出---遍历到的内容console.log--只能输出一个,,用each( )11,创建元素$() 工厂函数创建var tr=$("<tr></tr>");$("#oDiv table").append(tr);添加元素父.append(子)----------子元素插入在父元素内容的后面父.preppend(子)--------子元素插入在父元素的内容的前面父.before(子)-----------子元素插入在父元素容器的前面父.after(子)--------------子元素插入在父元素容器的后面补充:反方向操作子.apppendTo(父)preppendTo(父)insertBefore(父)insertAfter(父)12, 替换被替换元素.replaceWith(替换的内容);替换的内容.replaceAll(被替换元素);13,删除要删除的元素.remove();-----------------将匹配到的元素全部删除要删除的元素.remove(“selector”)-----匹配到的元素筛选后再删除14,复制jq对象.clone()------------------将匹配到的jq对象复制如果:jq对象使用嵌入的绑定事件,连同事件一起被复制如果:jq对象使用的分离式绑定事件,绑定的事件不会被复制如果想将分离式绑定的事件一起被复制:jq对象.clone(true);备注:clone()紧紧是复制,并没有挂在DOM树上15,页面加载事件全写:jQuery(document).ready(function(){js语句})简写:$(function(){js语句})16,js的load事件和jq的ready事件的区别js中多个load事件只执行最后一个,jq的多个ready事件都会执行执行时机不同:js的load事件是在页面解析完毕之后执行jq的ready事件在DOM树生成的时候执行ready先于load执行17,$符号与其他框架发生冲突交出$的使用权:$.noConflict()交权的同时可以使用其他符号代替,例如:var Q=$.noConflict(); 收回$的使用权:jQuery(function($){此处可以使用$})18,鼠标经过事件总结mouseovermouseout以上两个事件绑定给father:鼠标经过father 到son也会触发mouseenter可解决mouseleave以上两个事件绑定给father,经过son时不会触发hover将mousenter和mouseleave两个事件封装成一个事件执行jq对象.hover(function(){ 鼠标移入时执行},function(){ 鼠标移出时执行});$("#warp").hover(function(){$("#inner").stop().animate({bottom:0},1000)},function(){$("#inner").stop().animate({bottom:"-200px"},1000)});jq对象.hover(function(){鼠标移入移出都执行此函数---套路:此方法中实现的切换功能})19,事件的绑定方式:1, jq对象.事件名称(fn);eg:$(“#btn”).click(function(){})2, 用on绑定jq对象.on(“事件名称”,执行任务)写法有多种:$(“#btn”).on(“click mouseover”,fn);$(“#btn”).on({click:fn,moueover:fn});20,解除事件绑定:jq对象.off(“事件名称”,fn)------解绑事件名称执行的fn任务jq对象.off(“事件名称”)---------解绑事件名称执行的所有任务jq对象off()----------------解绑该对象的所有事件的所有任务星星评价二级出现增加21,on绑定事件实现的事件代理---------给未来的元素添加事件父.on(“type”,“子元素”,fn)以上父元素将事件类型代理给子元素(未来的),执行fn任务22,jq的事件对象:注意:jq事件对象中阻止事件冒泡和事件的默认行为只需使用事件对象的方法,兼容性已经处理(2.0)trigger 事件自动只执行(冒泡)triggerHander阻止冒泡23,事件的自动执行jq对象.事件名称()------$(“#btn”).clickjq对象.trigger(“type”)------$(“btn”).trigger(“click”)备注:trgger会执行对象的默认行为,也会发生冒泡jq对象.triggerHandler(“type”)定时轮播备注:不会执行事件的默认行为,会阻止事件冒泡24,动画效果show( )hide( )toggle( )---切换执行show( ) hide( )可以传的速度参数:nomal slow fast 数字slideDown----向下滑开slideUp--------向上收齐animition-delay:数字----------延迟动画执行时间stop 当事件中断时,停止动画继续执行多事件合并执行---------节点1 . 方法1 . 节点2 . 方法2节点2 由节点1确定方法从前到后依次执行$(".banner .bg").fadeTo("fast",.6).attr("src",arr[idx]).fadeTo("fast",1);函数的调用方法:function fun(){}var mytime=setInterval(function(){$("#btn").click()},1000); var mytime=setInterval("$('#btn').click()",1000);var mytime=setInterval(fun,1000);var mytime=setInterval("fun()",1000);25,.offset ( ) 获取元素的当前坐标,坐标相对于文档25,获取窗口的相关尺寸js方法:clientHeight || document.documentElement.clientHeight-------获取页面内容所占的高度document.body.scrollHeight || document.documentElement.scrollHeight ------获取页面滚动的高度jq方法:var h=$(window).outHeight( )=$(window).innerHeight( )-----获取的是窗口的可见高度总结:js无法正常获取,只能通过jq获取窗口的可见高度jq无法获取,只能js获取页面的滚动高度outerHeight()获取窗口可见的边框以内的尺寸offsetHeight$(document).ready(function(){alert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).height()); //浏览器当前窗口文档的高度alert($(document.body).height());//浏览器当前窗口文档body的高度alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度包括border padding margin alert($(window).width()); //浏览器当前窗口可视区域宽度alert($(document).width());//浏览器当前窗口文档对象宽度alert($(document.body).width());//浏览器当前窗口文档body的宽度alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度包括border padding margin})事件放在引号内购物车--全选解除a标签的自身方法模态框视频1,视频标签<video></video>两种链接资源的方式:1,<video src=”视频资源”>2,<video><source src=”视频资源.mp4”><source src=””视频资源.avi></video>2,可通过标签属性来设置的属性control 控制视屏的控件muted 设置静音autoplay设置视频自动播放以上三个属性直接设置属性表示属性为true 不设置表示false poster 设置视屏暂停是的封面缺点:无法正常设置图片的尺寸解决:不使用该属性,而用定位的方式解决3,视屏中是通过js获取或者设置的属性currentTime视频当前播放时间,可以设置和获取paused获取当前是否处于暂停状态true--暂停false---播放ended 获取视屏是否播放到结尾true----播放完duration 获取视频的整个播放时长只能获取不能设置4,视频播放与暂停的方法play( )------播放pause( )-------暂停var w=$("v1").offsetWidth; 获取内容宽度var h=$("v1").offsetHeight; 获取内容高度补充:.get( index ) 根据索引获取html内容返回值:Element、Array.get() 方法允许我们直接访问jQuery对象中相关的DOM节点。
交互式web前端开发课后答案
![交互式web前端开发课后答案](https://img.taocdn.com/s3/m/270a3c0a3069a45177232f60ddccda38376be127.png)
交互式web前端开发课后答案前端开发面试题及答案1、对Web标准以及W3C的认知与重新认识?答:标签闭合、标签小写、不乱嵌套、提高搜索机器人搜索几率、使用外链CSS和JS 脚本、结构行为表现的分离、文件下载与页面速度更快、内容能被更多的用户所访问、内容能被更广泛的设备所访问、更少的代码和组件、容易维护、改版方便,不需要变动页面内容、提供打印版本而水需要复制内容、提高网站易用性。
2、XHTML和HTML存有什么区别?答:HTML是一种基本的WEB网页设计语言,XHTML是一个基于XML的置标语言最主要的不同:XHTML元素必须被正确地嵌套;XHTML元素必须被关闭;标签名必须用小写字母;XHTML文档必须拥有根元素。
3、Doctype?严苛模式与夹杂模式-如何引爆这两种模式,区分它们有何意义? 请问:Doctype用作声明文档采用哪种规范(HTML/XHTML)该标签可声明三种DTD类型,分别为严格版本、过度版本以及基于框架的HTML文档。
重新加入XML声明可以引爆,解析方式更改成IE5.5具有IE5.5的bug。
4、行内元素有哪些?块级元素有哪些?CSS的盒模型?请问:行内元素:a b br i span input select块级元素:div p h1 h2 h3 h4 form ulCSS盒模型:内容,border margin padding5、CSS引入的方式有哪些?link和@import的区别是?请问:方式:内联嵌入外链引入区别:同时加载前者并无兼容性,后者CSS2.1以下浏览器不积极支持Link支持使用javascript 改变样式,后者不可。
6.CSS选择符存有哪些?哪些属性可以承继?优先级算法如何排序?内联和important哪个优先级低?答:标签选择符、类选择符、id选择符承继不如选定 id>class>标签挑选后者优先级高7、前端页面存有哪三层形成,分别就是什么?促进作用就是什么?答:结构层HTML 表示层CSS 行为层JS8、你搞的页面在哪些浏览器测试过?这些浏览器的内核分别就是什么? 请问:Ie(Ie 内核)火狐(Gecko)谷歌(webkit)opear(Presto)9、img标签上title与 alt属性的区别就是什么?答:Alt当图片不显示时,用文字代表Title为该属性提供更多信息。
HTML事件中的load事件
![HTML事件中的load事件](https://img.taocdn.com/s3/m/265a57c377a20029bd64783e0912a21614797fbd.png)
HTML事件中的load事件
定义load事件监听的两种⽅法:
⼀是通过addEventListener,把load事件绑定到window上。
window.addEventListener('load', function() {
console.log('window onload');
});
⼆是直接在body上添加onload属性。
<body onload="console.log('onload')">
</body>
Tips
根据⽂档的描述,load事件应该在document⽽⾮window上被触发。
然⽽由于所有的浏览器都已经实现了在window上触发load事件,为了向后兼容性的考虑,在浏览器中load事件的触发和spec上描述不⼀致。
两种定义load事件监听⽅式的执⾏顺序
如果在页⾯中同时添加这两种⽅式,谁会先被触发呢?触发点取决于何时加载注册load事件的脚本。
按照HTML页⾯的加载顺序,如果把脚本放到head⾥加载,那么在window上注册的load事件会先触发,如果把脚本放到body⾥加载,那body上的onload事件会被先触发。
⼀般来说,任何在window上注册的事件,都可以通过在body上定义相应的事件属性来触发,这是因为在HTML⾥⽆法访问window元素。
推荐的做法是尽可能的使⽤Javascript的⽅式注册事件。
全面解析jQuery中的$(window)与$(document)的用法区别
![全面解析jQuery中的$(window)与$(document)的用法区别](https://img.taocdn.com/s3/m/4ec98093e43a580216fc700abb68a98271feacb6.png)
全⾯解析jQuery中的$(window)与$(document)的⽤法区别[window对象]它是⼀个顶层对象,⽽不是另⼀个对象的属性,即表⽰浏览器中打开的窗⼝。
1、属性 defaultStatus 缺省的状态条消息 document 当前显⽰的⽂档(该属性本⾝也是⼀个对象) frame 窗⼝⾥的⼀个框架((FRAME>)(该属性本⾝也是⼀个对象)frames array 列举窗⼝的框架对象的数组,按照这些对象在⽂档中出现的顺序列出(该属性本⾝也是⼀个对象)history 窗⼝的历史列表(该属性本⾝也是⼀个对象)length 窗⼝内的框架数location 窗⼝所显⽰⽂档的完整(绝对)URL(该属性本⾝也是⼀个对象)不要把它与如document.location混淆,后者是当前显⽰⽂档的URL。
⽤户可以改变window.location(⽤另⼀个⽂档取代当前⽂档),但却不能改变document.location (因为这是当前显⽰⽂档的位置)name 窗⼝打开时,赋予该窗⼝的名字opener 代表使⽤window.open打开当前窗⼝的脚本所在的窗⼝(这是Netscape Navigator 3.0beta 3所引⼊的⼀个新属性)parent 包含当前框架的窗⼝的同义词。
frame和window对象的⼀个属性self 当前窗⼝或框架的同义词status 状态条中的消息top 包含当前框架的最顶层浏览器窗⼝的同义词window 当前窗⼝或框架的同义词,与self相同 2、⽅法alert() 打开⼀个Alert消息框 clearTimeout() ⽤来终⽌setTimeout⽅法的⼯作 close() 关闭窗⼝ confirm() 打开⼀个Confirm消息框,⽤户可以选择OK或Cancel,如果⽤户单击OK,该⽅法返回true,单击Cancel返回false blur() 把焦点从指定窗⼝移开(这是Netscape Navigator 3.0 beta 3引⼊的新⽅法) focus() 把指定的窗⼝带到前台(另⼀个新⽅法) open() 打开⼀个新窗⼝ prompt() 打开⼀个Prompt对话框,⽤户可向该框键⼊⽂本,并把键⼊的⽂本返回到脚本 setTimeout() 等待⼀段指定的毫秒数时间,然后运⾏指令事件处理程序事件处理程序 Onload() 页⾯载⼊时触发 Onunload() 页⾯关闭时触发[document 对象] 该对象是window和frames对象的⼀个属性,是显⽰于窗⼝或框架内的⼀个⽂档。
前端面试题及答案2020
![前端面试题及答案2020](https://img.taocdn.com/s3/m/dee81adc59eef8c75ebfb34e.png)
前端面试题及答案20201. 浏览器篇1.1 常用那几种浏览器测试?主流浏览器的内核有哪些?Q1:IE、Safari、Chrome、Mozilla Firefox、OperaQ2:1、Trident内核代表产品为Internet Explorer,又称其为IE内核。
Trident(又称为MSHTML),是微软开发的一种排版引擎。
2、Gecko内核代表作品为Mozilla Firefox。
Gecko是一套开放源代码的、以C++编写的网页排版引擎,是最流行的排版引擎之一,仅次于Trident。
使用它的最著名浏览器有Firefox。
3、WebKit内核代表作品有Safari、Chrome。
WebKit是一个开源项目,主要用于Mac OS系统,它的特点在于源码结构清晰、渲染速度极快。
缺点是对网页代码的兼容性不高,导致一些编写不标准的网页无法正常显示。
4、Presto内核代表作品Opera。
Presto是由Opera Software开发的浏览器排版引擎,供Opera 7.0及以上使用。
1.2 说说你对浏览器内核的理解?浏览器内核主要包括以下三个技术分支:排版渲染引擎、JavaScript引擎,以及其他。
排版渲染引擎:主要负责取得网页的内容(HTML、XML、图像等)、整理信息,以及计算网页的显示方式,然后输出至显示器JavaScript引擎:是用来渲染JavaScript的,JavaScript的渲染速度越快,动态网页的展示也越快1.3 一个页面从输入URL 到页面加载显示完成,这个过程中都发生了什么?1.浏览器根据请求的URL交给DNS域名解析,找到真实IP;2.浏览器根据IP 地址向服务器发起TCP 连接,与浏览器建立TCP 三次握手a.客户端向服务器发送一个建立连接的请求b.服务器接到请求后发送同意连接的信号c.客户端接到同意连接的信号后,再次向服务器发送了确认信号,然后客户端与服务器的连接建立成功3.浏览器发送HTTP请求浏览器根据URL 内容生成HTTP 请求,请求中包含请求文件的位置、请求文件的方式等等;4.服务器处理请求并返回HTTP报文(HTTP响应报文也是由三部分组成: 状态码, 响应报头和响应报文。
jquery$(document).ready()与window.onload的区别
![jquery$(document).ready()与window.onload的区别](https://img.taocdn.com/s3/m/1b8268eef605cc1755270722192e453610665b35.png)
jquery$(document).ready()与window.onload的区别Jquery中$(document).ready()的作⽤类似于传统JavaScript中的window.onload⽅法,不过与window.onload⽅法还是有区别的。
1.执⾏时间window.onload必须等到页⾯内包括图⽚的所有元素加载完毕后才能执⾏。
$(document).ready()是DOM结构绘制完毕后就执⾏,不必等到加载完毕。
2.编写个数不同window.onload不能同时编写多个,如果有多个window.onload⽅法,只会执⾏⼀个$(document).ready()可以同时编写多个,并且都可以得到执⾏3.简化写法window.onload没有简化写法$(document).ready(function(){})可以简写成$(function(){});在我以前的开发中,⼀般⽤到javascript,我都是采⽤jquery的模式,也就是⼤多数时候,第⼀⾏写的是:复制代码代码如下:$(document).ready(function(){...});这个时候,不⼀定要等所有的js和图⽚加载完毕,就可以执⾏⼀些⽅法,不过有些时候,必须要等所有的元素都加载完毕,才可以执⾏⼀些⽅法的时候,⽐如说,部分图⽚或者什么其他⽅⾯还没有加载好,这个时候,点击某些按钮,会导致出现意外的情况,这个时候,就需要⽤到:复制代码代码如下:$(window).load(function() {$("#btn-upload").click(function(){ //⽐如说:uploadPhotos();});});下⾯是转载的内容,⽤$(window).load(function(){...})⽽不⽤body.onload()的⼏个理由⾸先它们都是在页⾯所有元素(包括html标签以及引⽤到得所有图⽚,Flash等媒体)加载完毕后执⾏的,这是它们的共同点.不⽤body.Onload()理由1:如果我们想同时加载多个函数,我们必须这样写<body onload="fn1(),fn2()"></body>看起来极其丑陋,如果⽤$(window).load()我们可以这样加载多个函数复制代码代码如下:$(window).load(function() {alert("hello,我是jQuery!");});$(window).load(function() {alert("hello,我也是jQuery");});这样写它会从上往下执⾏这两个函数,并且看起来漂亮多了.不⽤body.Onload()理由2:⽤body.Onload()不能够做到js和html完全分离,这是⼀个很严重的问题.另外⽤$(window).load(function(){...})和body.onload()都存在同样⼀个问题,因为开始也说到了,它们都需要等到页⾯的所有内容加载完毕才执⾏,但是如果当⽹速⽐较慢的时候,加载⼀个页⾯往往需要较长的时间(⼏秒到⼗⼏秒不等,甚⾄更长...),所以我们经常会遇到页⾯还没有完全加载完毕⽽⽤户已经在操作页⾯了这种情况,这样页⾯表现出来的效果就跟我们预期的效果不⼀样了,所以在这⾥我推荐使⽤$(document).ready(function(){}),或简写为$(function(){}),因为他会在页⾯的dom元素加载完毕后就执⾏,⽽⽆需等到图⽚或其他媒体下载完毕.但是有时候确实我们有需要等到页⾯的所有东西都加载完后再执⾏我们想执⾏的函数,所以是该使⽤$(window).load(function(){...})还是该使⽤$(function(){})往往需要结合具体需要⽽作不同的选择.最后附上⼀段在所有DOM元素加载之前执⾏的jQuery代码复制代码代码如下:<script type="text/javascript">(function() {alert("DOM还没加载哦!");})(jQuery)</script>呵呵,有时候我们也有这个需求!以浏览器装载⽂档为例,在页⾯加载完毕后,浏览器会通过 Javascript 为 DOM 元素添加事件。
JQuery入门
![JQuery入门](https://img.taocdn.com/s3/m/c516524c5fbfc77da369b181.png)
效果:看一个JQ写 的tab切换的代码
jQuery选择器
jQuery选择器的优势 ➢ 简洁的写法 ➢ 支持CSS1到CSS3选择器 ➢ 完善的处理机制 jQuery选择器的分类 ➢ 基本选择器 ➢ 层次选择器 ➢ 过滤选择器
基本选择器
选择器 #id .class element
描述
返回
示例
根据给定的id匹配一个元素 单个元素 $(“#test”)选取id为test的元素
选取不包含子元素或者文 本的空元素
$(‘div:empty’)选取 集合元素 不包含子元素和文本的
空元素<div>
选取含有选择器所匹配的 元素的元素
$(‘div:has(p)’)选取 集合元素 含有<p>元素的<div>
元素
选取含有子元素或者文本 的元素(非空元素)
$(“div:parent”)选取 集合元素 拥有子元素或文本元素
集合元素
$(“div,span,p.myClass”)选取 所有<div>,<span>和拥有class 为myClass的<p>标签的一组元素
层次选择器
两个标签名之 间用空格分隔
选择器
描述
返回值
示例
$(“ancestor desendant”)
选取ancestor元素里的所有 descendant(后代)元素
如今,jQuery已经成为最流行的javascript库。
配置jQuery环境
获取jQuery类库 进入jQuery官网,下载jQuery文件。 2.0及之后的版本,不兼容IE6 7 8
在页面中引入jQuery 和其他JS文件引入一样:
JQuery实例--事件
![JQuery实例--事件](https://img.taocdn.com/s3/m/bcf15cbcc77da26925c5b03c.png)
JQuery語法與實例--------事件一. 載入:ready(fn): 当DOM载入就绪可以查询及操纵时绑定一个要执行的函数.这是事件模块中最重要的一个函数,因为它可以极大地提高web应用程序的响应速度.简单地说,这个方法纯粹是对向window.load事件注册事件的替代方法。
通过使用这个方法,可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数,而99.99%的JavaScript函数都需要在那一刻执行.有一个参数--对jQuery函数的引用--会传递到这个ready事件处理函数中. 可以给这个参数任意起一个名字,并因此可以不再担心命名冲突而放心地使用$别名。
请确保在元素的onload事件中没有注册函数,否则不会触发$(document).ready()事件.可以在同一个页面中无限次地使用$(document).ready()事件。
其中注册的函数会按照(代码中的)先后顺序依次执行.1. 在DOM加载完成时运行的代码,可以这样写:$(document).ready(function(){// 在这里写你的代码...});2. 使用$(document).ready() 的简写,同时内部的jQuery 代码依然使用$ 作为别名,而不管全局的$为何.jQuery(function($) {// 你可以在这里继续使用$作为别名...});二. 事件處理:1. bind(type,[data],fn): 为每个匹配元素的特定事件绑定事件处理函数。
.bind() 方法是用于往文档上附加行为的主要方式。
所有JavaScript事件对象,比如focus, mouseover, 和resize,都是可以作为type参数传递进来的。
jQuery还提供了一些绑定这些标准事件类型的简单方式,比如.click()用于简化.bind('click')。
一共有以下这些:blur, focus, focusin, focusout, load, resize, scroll, unload, click, dblclick, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change, select, submit, keydown, keypress, keyup, error 。
JQuery中$(document)是什么意思有什么作用
![JQuery中$(document)是什么意思有什么作用](https://img.taocdn.com/s3/m/e8264138cec789eb172ded630b1c59eef8c79a68.png)
JQuery中$(document)是什么意思有什么作⽤
⾸先我解释⼀下jQuery jQuery有⼀个⽤来作为DOM快速载⼊javascript的得⼼应⼿的⼩函数,那就是ready… 他在页⾯加载完成之前执⾏。
为什么不⽤window.onload(),因为window.onload函数执⾏的时候,要说明所有东西已经载⼊,包括图像和横幅等等。
要知道较⼤的图⽚下载速度会⽐较慢,因此⽤户必须等待⼤图⽚下载完毕才能看到window.onload()执⾏的代码效果,这样就花费了很长的等待时间,这不是我们想要的。
但是 $(document).ready(fn):当DOM载⼊就绪可以查询及操纵时绑定⼀个要执⾏的函数。
这是事件模块中最重要的⼀个函数,因为它可以极⼤地提⾼web应⽤程序的响应速度。
简单地说,这个⽅法纯粹是对向window.load事件注册事件的替代⽅法。
通过使⽤这个⽅法,可以在DOM载⼊就绪能够读取并操纵时⽴即调⽤你所绑定的函数. $(document).ready(function(){ // 你的代码 });
$(document)意思是说,获取整个⽹页⽂档对象(类似的于window.document),
$(document).ready意思就是说,获取⽂档对象就绪的时候。
上⾯这段代码的意思是检查⽂档对象直到它能够允许被操作(译者注:这样做⽐window.onload()函数要快的多,因为只要⽂档对象载⼊完成就能够执⾏代码了,⽽不需要等待页⾯中的图⽚下载是否已经完成)---这是我们想要的。
JQ中$(window).load和$(document).ready区别与执行顺序
![JQ中$(window).load和$(document).ready区别与执行顺序](https://img.taocdn.com/s3/m/0c8e1ae8fbb069dc5022aaea998fcc22bcd143a3.png)
JQ中$(window).load和$(document).ready区别与执⾏顺序JQ中的$(document).ready()⼤家应该⽤的⾮常多,基本每个JS脚本中都有这个函数的出现有时甚⾄会出现多个,那么另⼀个加载函数$(window).load相对出现的次数就很少了,下⾯为⼤家介绍⼀下两者的区别与他们的执⾏顺序⼀般情况下⼀个页⾯响应加载的基本顺序是:域名解析 -> 加载html -> 加载js和css -> 加载图⽚等其他信息。
那么我们在编写JS脚本时什么情况下使⽤$(document).ready()⼜在什么情况下使⽤$(window).load呢,我们先来了解⼀下两者的功能⼀、$(document).ready()从字⾯的意思上理解,就是⽂档准备好了。
也就是浏览器已经加载并解析完整个html⽂档,dom树已经建⽴起来了,然后执⾏此函数原⽣JavaScript中的写法如下:document.ready=function(){alert("ready");}jQuery中的写法如下:$(document).ready(function(){alert("ready");});或$(function(){alert("ready");});⼆、$(window).load在⽹页中所有元素(包括页⾯中图⽚,css⽂件等所有关联⽂件)完全加载到浏览器后才执⾏原⽣JavaScript中的写法如下:window.onload = function(){alert("onload");};jQuery中的写法如下:$(window).load(function(){alert("onload");});两者的区别在于:1.执⾏时间不同$(document).ready()是在页⾯完成HTML的加载并建⽴了DOM树之后就开始执⾏,但这并不代表页⾯的所有数据已经全部加载完成,⼀些⼤的图⽚有会在建⽴DOM树之后很长⼀段时间才⾏加载完成,⽽$(window).load()就是整个页⾯已经加载完毕后才执⾏,包括图⽚等⼀些关联⽂件。
jQuery开发技术笔记
![jQuery开发技术笔记](https://img.taocdn.com/s3/m/00a9532b86c24028915f804d2b160b4e767f816f.png)
jQuery开发技术笔记HTML DOM 加载步骤1、解析 HTML 结构2、加载外部脚本和样式表⽂件3、解析并执⾏脚本代码4、构造 HTML DOM 模型5、加载图⽚等外部⽂件6、页⾯加载⼀、总体架构1.1:jQuery 的核⼼特征:兼容主流浏览器:⽀持 IE 6.0+、Chrome、Firefox 3.6+、Safari 5.0+、Opera等。
具有的特的链式语法和短⼩清晰的多功能接⼝。
具有⾼效灵活的 CSS 选择器,并且可对 CSS 选择器进⾏扩展。
拥有便捷的插件扩展机制和丰富的插件。
1.2:总体架构jQuery 的模块可以分为 3 个部分:⼊⼝模块、底层模块、功能模块。
在底层⽀持模块中,回调函数列表模块⽤于增强对回调函数的管理,⽀持添加、移除、触发、锁定、禁⽤回调函数等功能;异步队列模块⽤于解耦异步任务和回调函数,它在回调函数刘表的基础上为回调函数增加了状态,并提供了多个回调函数列表,⽀持传播任意同步或异步回调函数的成功或失败状态;数据缓存模块⽤于为 DOM 元素和 JavaScript 对象附加任意类型的数据;队列模块⽤于管理⼀组函数,⽀持函数的⼊队和出队操作,并确保函数按顺序执⾏,它基于数据缓存模块实现。
在功能模块中,事件系统提供了统⼀的时间绑定、响应、⼿动触发和移除机制,它并没有将事件直接绑定到 DOM 元素上,⽽是基于数据缓存模块来管理事件;ajax 模块允许从服务器上加载数据,⽽不⽤刷新页⾯,它基于异步队列模块来管理和触发回调函数;动画模块⽤于向⽹页中添加动画效果,它基于队列模块来管理和执⾏动画函数;属性操作模块⽤于对 HTML 属性和 DOM 属性惊醒读取、设置和移除操作;DOM 遍历模块⽤于在 DOM 树中遍历⽗元素、⼦元素和兄弟元素;DOM 操作模块⽤于插⼊、移除、复制和替换 DOM元素;样式操作模块⽤于获取计算样式或设置内联样式;坐标模块⽤于读取或设置 DOM 元素的⽂档坐标;尺⼨模块⽤于获取 DOM 元素的⾼度和宽度。
$(document).ready的js写法
![$(document).ready的js写法](https://img.taocdn.com/s3/m/a86b12832dc58bd63186bceb19e8b8f67c1cef19.png)
$(document).ready的js写法在编写JavaScript代码的过程中,经常会用到$(document).ready()这个函数,它是jQuery中的一个非常重要的函数,用来确保在DOM 完全加载后再执行JavaScript代码。
而在最新的jQuery版本中,推荐使用箭头函数的写法来代替传统的写法,使代码更加简洁和易读。
接下来我们就来详细介绍一下$(document).ready的js写法。
一、传统的写法:在jQuery早期的版本中,我们通常会这样写$(document).ready()函数:```javascript$(document).ready(function() {// 在这里编写代码});```这种写法可以确保在DOM加载完成后再执行JavaScript代码,但是在最新的jQuery版本中,推荐使用箭头函数的写法来代替。
二、使用箭头函数的写法:在最新的jQuery版本中,推荐使用箭头函数的写法来代替传统的写法,如下所示:```javascript$(document).ready(() => {// 在这里编写代码});```使用箭头函数的写法,使代码更加简洁和易读,而且不会改变作用域,避免了传统写法中this指向的问题。
三、在jQuery中使用箭头函数的注意事项:在jQuery中使用箭头函数时,需要注意以下几点:1. 箭头函数不会改变this的指向,所以在箭头函数内部,this仍然指向定义时的对象。
2. 箭头函数没有自己的this,所以在使用this时,指的是定义时所在的作用域的this。
3. 箭头函数不能作为构造函数使用,不可以使用new关键字。
四、使用箭头函数的优点:相比传统的写法,使用箭头函数有以下几个优点:1. 语法更加简洁,减少了代码的冗余。
2. 不会改变this的指向,避免了传统写法中this指向的问题。
3. 使代码更加易读,提高了代码的可维护性。
总结:在编写JavaScript代码时,我们经常会用到$(document).ready()这个函数,它是jQuery中的一个非常重要的函数,用来确保在DOM完全加载后再执行JavaScript代码。
js页面初始化方法
![js页面初始化方法](https://img.taocdn.com/s3/m/db21d52c03020740be1e650e52ea551810a6c960.png)
js页面初始化方法
JavaScript 页面初始化方法是指在页面加载时执行的 JavaScript
代码。
这些代码可以用来设置页面的初始状态、绑定事件、加载数据等等。
以下是一些常见的 JavaScript 页面初始化方法:1. window.onload:这
是最常用的页面初始化方法之一。
它会在页面所有资源(包括图片、样式表、脚本等)都加载完成后执行。
可以在这个方法中执行一些需要等待资
源加载完成后才能执行的操作。
2. document.ready:这是 jQuery 提供
的一个方法,它会在 DOM 树构建完成后执行。
与 window.onload 不同的是,它不需要等待所有资源加载完成,因此会更快地执行。
可以在这个方
法中执行一些与 DOM 相关的操作,比如绑定事件、修改元素属性等。
3.
自执行函数:这是一种常见的 JavaScript 技巧,可以在页面加载时立即
执行一些代码。
它的语法是 (function(){ /* code */ })(),其中 /* code */ 是要执行的代码。
这种方法可以用来初始化一些全局变量、定义
一些常量等。
4. 模块化加载器:如果你的项目使用了模块化开发,可以
使用一些模块化加载器(比如 RequireJS、Webpack 等)来管理模块的加
载和初始化。
这些加载器会在页面加载时异步加载模块,并在加载完成后
执行相应的初始化代码。
总之,JavaScript 页面初始化方法有很多种,
选择哪种方法取决于你的项目需求和个人喜好。
深入理解js中的加载事件
![深入理解js中的加载事件](https://img.taocdn.com/s3/m/2f69bec5c0c708a1284ac850ad02de80d4d80673.png)
深⼊理解js中的加载事件前⾯的话提到加载事件,可能想到了window.onload,但实际上,加载事件是⼀⼤类事件,本⽂将详细介绍加载事件loadload事件是最常⽤的⼀个事件,当页⾯完全加载后(包括所有图像、javascript⽂件、CSS⽂件等外部资源),就会触发window 上的load事件[注意]IE8-浏览器不会为该事件设置srcElement属性,⽽其他浏览器的target属性指向documentwindow.onload = function(e){e = e || event;var target = e.target || e.srcElement;//IE8-浏览器返回null,其他浏览器返回documentconsole.log(target);}load事件不仅发⽣在document对象,还发⽣在各种外部资源上⾯。
浏览⽹页就是⼀个加载各种资源的过程,图像(image)、样式表(style sheet)、脚本(script)、视频(video)、⾳频(audio)、Ajax请求(XMLHttpRequest)等等。
这些资源和document对象、window对象、XMLHttpRequestUpload对象,都会触发load事件[注意]如果页⾯从浏览器缓存加载,并不会触发load事件图像和框架iframe也可以触发load事件[注意]要在指定图像的src属性之前先指定事件,图像是从设置src属性之后开始下载var img = new Image();img.onload = function(){document.body.appendChild(img);}img.src="/uploads/rs/26/ddzmgynp/chunfen.jpg";<iframe id="test" src="" frameborder="0"></iframe><script>test.onload = function(){console.log(666);}</script>script元素也可以触发load事件,以便开发⼈员确定动态加载的javascript⽂件是否加载完毕。
前端埋点与监控方案
![前端埋点与监控方案](https://img.taocdn.com/s3/m/211e3ba3767f5acfa1c7cdf0.png)
事件(event):应用中发生了什么,例如用户操作、系统事件或系统错误。 以 你 拍 一 产 品 为 例 ,包 含 以 下 事 件 :ente r_p age( 进 入 页 面 )、leav e_p age (离开页面)。
属性(param):为了描述用户群细分而定义的属性,例如语言偏好或地理 位 置 。 以 “ 进 入 课 后 练 习 ” 事 件 为 例 , 它 包 含 如 下 事 件 属 性 : enter_from (从哪个页面来),class_id(课程 id)等。
如果传输层在开始请求之后失败并且连接被重开,该属性将会被数制成新 rt
的请求的相对应的发起时间
secureConne HTTPS 返回浏览器与服务器开始安全链接的握手时的时间戳。如果当前网 ctionStart 页不要求安全连接,则返回 0。
unloadEvent 和 unloadEventStart 相对应,unload 事件处理完成时的时间戳。如果没
数据噪声大,不管有用没有,数据都会被收集
无法定制化埋点,无法采集到指定事件和业务属性
可供 DA 使用的信息较少
接入简单,几乎无侵入,不需要额外的开发成本
用户操作行为收集非常完整,几乎不会遗漏
优点:
缺点:
代码埋点,前端开发人员在代码中自定义监听和收集
工作量大,而且对代码侵入性很大,后期维护也不是很方便
ng”、相应的 readystatechange 事件触发时)的时间戳。
domainLooku DNS 域名查询完成的时间。如果使用了本地缓存(即无 DNS 查询)或持久
pEnd
连接,则与 fetchStart 值相等
document.readyState
![document.readyState](https://img.taocdn.com/s3/m/0046f27526d3240c844769eae009581b6bd9bd12.png)
document对象还有个事件onreadyStateChange,一旦readyState发生改变,便会触发一次相应的方法。使用如:
document.onreadyStateChange = hidedom; hidedom() {
最常用的就是4completed通过documentreadystate获取到的值为complete这中状态下就可以对所有dom元素进行修改
document.readyState
document对象的readyState有5种取值:
0-UNINITIALIZED:XML 对象被产生,但没有任何文件被加载。 1-LOADING:加载程序进行中,但文件尚未开始解析。 2-LOADED:部分的文件ቤተ መጻሕፍቲ ባይዱ经加载且进行解析,但对象模型尚未生效。 3-INTERACTIVE:仅对已加载的部分文件有效,在此情况下,对象模型是有效但只读的。 4-COMPLETE:文件已完全加载,代表加载成功。
if( document.readyState == 'complete' ) {
alert(document.readyState); } }
运行后会弹出窗口,显示当前readyState是’complete‘。
DOMContentLoaded与load的区别
![DOMContentLoaded与load的区别](https://img.taocdn.com/s3/m/cd6870d688eb172ded630b1c59eef8c75fbf9505.png)
DOMContentLoaded与load的区别(1)在chrome浏览器的开发过程中,我们会看到network⾯板中有这两个数值,分别对应⽹络请求上的标志线,这两个时间数值分别代表什么?(2)我们⼀再强调将css放在头部,将js⽂件放在尾部,这样有利于优化页⾯的性能,为什么这种⽅式能够优化性能?(3)在⽤jquery的时候,我们⼀般都会将函数调⽤写在ready⽅法内,这是什么原理?⾸先看⼀下DOMContentLoaded顾名思义,就是dom内容加载完毕。
那什么是dom内容加载完毕呢?我们从打开⼀个⽹页说起。
当输⼊⼀个URL,页⾯的展⽰⾸先是空⽩的,然后过⼀会,页⾯会展⽰出内容,但是页⾯的有些资源⽐如说图⽚资源还⽆法看到,此时页⾯是可以正常的交互,过⼀段时间后,图⽚才完成显⽰在页⾯。
从页⾯空⽩到展⽰出页⾯内容,会触发DOMContentLoaded事件。
⽽这段时间就是HTML⽂档被加载和解析完成。
这时候问题⼜来了,什么是HTML⽂档被加载和解析完成。
要解决这个问题,我们就必须了解浏览器渲染原理。
当我们在浏览器地址输⼊URL时,浏览器会发送请求到服务器,服务器将请求的HTML⽂档发送回浏览器,浏览器将⽂档下载下来后,便开始从上到下解析,解析完成之后,会⽣成DOM。
如果页⾯中有css,会根据css的内容形成CSSOM,然后DOM和CSSOM会⽣成⼀个渲染树,最后浏览器会根据渲染树的内容计算出各个节点在页⾯中的确切⼤⼩和位置,并将其绘制在浏览器上。
下⾯就是页⾯加载和解析过程中,浏览器的⼀个快照上⾯我们看到在解析html的过程中,html的解析会被中断,这是因为javascript会阻塞dom的解析。
当解析过程中遇到<script>标签的时候,便会停⽌解析过程,转⽽去处理脚本,如果脚本是内联的,浏览器会先去执⾏这段内联的脚本,如果是外链的,那么先会去加载脚本,然后执⾏。
在处理完脚本之后,浏览器便继续解析HTML⽂档。
前端页面生命周期
![前端页面生命周期](https://img.taocdn.com/s3/m/f0d3e79ddbef5ef7ba0d4a7302768e9951e76e7f.png)
前端页⾯⽣命周期前⾔对页⾯声明周期的总结与回忆。
下⽂均为个⼈测试得出的结论,如有不对望指出。
正⽂了解页⾯声明周期⾯前,需要了解⼏个概念。
1.在页⾯中dom加载与css加载是异步的。
但是呢,也不绝对,⽐如内联css是同步的。
2.页⾯中js加载与dom加载是同步的,但是也不绝对,这个⽐较复杂后⽂介绍。
先看下页⾯的⽣命周期:DomContentLoaded:dom加载完毕,但是外部资源可能没有加载完毕,如样式表、图⽚资源等。
load:浏览器所有资源加载完毕。
beforunload/unload 当⽤户离开页⾯的时候触发。
在我们写demo的时候,往往这样写:window.onload=function(){}可能会把我们初始化的资源都写在onload中,但是在正常项⽬中,这样写的效率是不⾼的。
因为DomContentLoaded 这个时候就已经加载完了我们的Dom,这个时候就可以操作dom了。
但是因为样式没有加载,如果需要动态去获取样式的⼀些属性,那么就需要在onload中了。
DOMContentLoaded⽤法:document.addEventListener("DOMContentLoaded",ready);function ready(){console.log("ready");}因为前⾯提及到dom加载与资源加载是异步的,这时候不要去拿取资源,所以不要去拿取资源⽂件。
前⾯提及UI渲染线程与JS引擎是互斥的,即使script 引⽤是以资源⽂件src⽅式引⽤的,这时候依然会等待js的加载。
这时候就会有⼀些⼩问题,如果js加载时候过程过于漫长,那么这样⽤户会不会以为宕机了,会不会怀疑有⼈删库跑路了?如何提⾼⽤户体验度?这时候就有async 与 defer 来帮助了。
<script type="text/javascript" src="demo_async.js" async="async"></script><script type="text/javascript" defer="defer">alert(document.getElementById("p1").firstChild.nodeValue);</script>对了,async只是针对外部资源,也就是对src有效,内联js⽆效,defer对内联与src都有效。
- 1、下载文档前请自行甄别文档内容的完整性,平台不提供额外的编辑、内容补充、找答案等附加服务。
- 2、"仅部分预览"的文档,不可在线预览部分如存在完整性等问题,可反馈申请退款(可完整预览的文档不适用该条件!)。
- 3、如文档侵犯您的权益,请联系客服反馈,我们会尽快为您处理(人工客服工作时间:9:00-18:30)。
}
dom.Ready = function(fn){
dom.initReady();//如果没有建成DOM树,则走第二步,存储起来一起杀
if(dom.isFunction(fn)){
if(dom.isReady){
fn();//如果已经建成DOM,则来一个杀一个
3.用个最常用的例子说明Dom Ready和Dom Load两者的区别
Dom Ready是在dom加载完成后就可以直接对dom进行操作,比如一张图片只要<img>标签完成,不用等这个图片加载完成,就可以设置图片的宽高的属性或样式等;
Dom Load是在整个document文档(包括了加载图片等其他信息)加载完成后就可以直接对dom进行操作,比如一张图片要等这个图标加载完成之后才能设置图片的宽高的属性或样式等;
比如一个图片浏览的效果,通常如果图片尺寸很大的情况下,为了防止图片把页面撑开通常会限定图片的宽度或高度,如果是单张图片或者是多张规格比例统一的图片下我们可以直接在<img>上价格宽度或者高度的属性<img src=“img.jpg” alt=”码头的大照片” width=“100” height=“90”>,比如(推荐)或者可以在css样式中加宽度或者高度的属性。但是如果这些张规格比例不统一的图片要浏览呢?那就有问题,你设置宽高很可能造成图片严重失真。在ie6之后ie7,ie8还有其他主流浏览器支持css2.1中min-width,max-width,min-height,max-width,这样我们就可以用min-width,max-width,min-height,max-width解决这些问题,但是ie6除非是抛弃性能问题用css表达式(当然old9(/2008/10/26/css-expression-reloaded/)和怿飞(/2009/09/21/optimization_of_css_eexpression/)有关于css表达式性能问题的解决方案,大家可以看一下)。这个时候ie的做好解决方案就是用Dom Ready而不是Dom Load,因为通常大图片加载的时候会一点一点的加载,这个在尺寸大,字节多,网速慢的时候表现的非常明显,用Dom Load,通常是先把页面撑开,加载完成后再把图片重设宽高,图片加载多少时间,这个页面就会撑开多久,用户会非常难受!!
document.ready和onload的区别——JavaScript文档加载完成事件
页面加载完成有两种事件,一是ready,表示文档结构已经加载完成(不包含图片等非文字媒体文件),二是onload,指示页面包含图片等文件在内的所有元素都加载完成。
真不知道这个标题该怎么取,暂时就先凑活着用了。
document.getElementById("imgID").onload=function(){
//do something
}
这种就是Dom Load,他的作用或者意义就是:在document文档加载完成后就可以可以对DOM进行操作,document文档包括了加载图片等其他信息。
那么Dom Load就是在页面响应加载的顺序中的“加载图片等其他信息”之后,就可以操作Dom了。
document.write("<script id=\"ie-domReady\" defer='defer'src=\"//:\">< \/script>");
document.getElementById("ie-domReady").onreadystatechange = function() {
$().ready(function(){
//do something
})
这个就是jq ready()的方法就是Dom Ready,他的作用或者意义就是:在DOM加载完成后就可以可以对DOM进行操作。
一般情况先一个页面响应加载的顺序是,域名解析-加载html-加载js和css-加载图片等其他信息。
});
在原生的js中没有Dom Ready的直接方法,只有Dom Load的方法就是load事件。
有牛人封装了很多方法,jq,YUI等js库也是封装出来的,呵呵。
以下是来自/rubylouvre/archive/2009/12/30/1635645.html的一个Dom Ready的方法:
}else{
dom.push(fn);//存储加载事件
}
}
}
dom.fireReady =function(){
if (dom.isReady) return;
dom.isReady = true;
for(var i=0,n=dom.length;i<n ;i++){
这点可以看我做的一个的一个小demo:/demo/domready/(注意第二次测试的时候要清除缓存)
Dom Ready在jQ中的基本的写法:
$().ready(function() {
$("#big_A").width("100px");
if (this.readyState === "complete") {
dom.fireReady();
this.onreadystatechange = null;
this.parentNode.removeChild(this)
}
};
}
}
}
document.removeEventListener( "DOMContentLoaded", arguments.callee, false );//清除加载函数
dom.fireReady();
}, false );
}else{
if (document.getElementById) {
var fn = dom[i];
fn();
}
dom.length = 0;//清空事件
}
dom.initReady = function(){
if (document.addEventListener) {
document.addEventListener( "DOMContentLoaded", function(){
new function(){
dom = [];
dom.isReady = false;
dom.isFunction = function(obj){
return Object.prototype.toString.call(obj) === "[object Function]";
}
使用方法:
dom.Ready(function(){
alert("我的domReady!")
});
dom.Ready(function(){
alert("我的domReady测试多重加载1!")
});
dom.Ready(function(){
alert("我的domReady测试多重加载2!")
那么Dom Ready应该在“加载js和css”和“加载图片等其他信息”之间,就可以操作Dom了。
2、Dom Load
用原生的js的时候我们通常用onload时间来做一些事情,比如:
window.onload=function(){
//do something
}
//或者经常用到的图片,假设这个
用jQ的人很多人都是这么开始写脚本的:
$(function(){
// do something
});
其实这个就是jq ready()的简写,他等价于:
$(document).ready(function(){
//do something
})
//或者下面这个方法,jQuer的默认参数是:“document”;
});
dom.Ready(function(){
alert(document.getElementById("test").innerHTML)
});