网站设计作品,合肥建设网络网站网站,网站不被收录的原因,广州刚刚通报IE条件注释条件注释简介IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力#xff0c;是WEB设计中常用的hack方法。条件注释只能用于IE5以上#xff0c;IE10以上不支持。如果你安装了多个IE#xff0c;条件注释将会以最高版本的IE为标准。条件注释的…IE条件注释条件注释简介IE中的条件注释(Conditional comments)对IE的版本和IE非IE有优秀的区分能力是WEB设计中常用的hack方法。条件注释只能用于IE5以上IE10以上不支持。如果你安装了多个IE条件注释将会以最高版本的IE为标准。条件注释的基本结构和HTML的注释()是一样的。因此IE以外的浏览器将会把它们看作是普通的注释而完全忽略它们。IE将会根据if条件来判断是否如解析普通的页面内容一样解析条件注释里的内容。条件注释使用方法示例仅IE5.5可见仅IE 5.5以上可见仅IE 5.5以下可见IE 5.5及以上可见IE 5.5及以下可见非IE 5.5的IE可见html代码用js动态加载进页面//这里面是你要放的html代码例如放一个div的内容把上面的js动态加入到页面中$(function(){var s$(#T-pcList).html();//获得js的html内容$(.picScroll-left .bd).html(s);//把s的内容放到class为bd内thisstyle();//执行某个函数});js判断用户访问的是PC还是mobilevar browser{versions:function(){var u navigator.userAgent, app navigator.appVersion;var sUserAgent navigator.userAgent;return {trident: u.indexOf(Trident) -1,presto: u.indexOf(Presto) -1,isChrome: u.indexOf(chrome) -1,isSafari: !u.indexOf(chrome) -1 (/webkit|khtml/).test(u),isSafari3: !u.indexOf(chrome) -1 (/webkit|khtml/).test(u) u.indexOf(webkit/5) ! -1,webKit: u.indexOf(AppleWebKit) -1,gecko: u.indexOf(Gecko) -1 u.indexOf(KHTML) -1,mobile: !!u.match(/AppleWebKit.*Mobile.*/),ios: !!u.match(/\(i[^;];( U;)? CPU.Mac OS X/),android: u.indexOf(Android) -1 || u.indexOf(Linux) -1,iPhone: u.indexOf(iPhone) -1,iPad: u.indexOf(iPad) -1,iWinPhone: u.indexOf(Windows Phone) -1};}()}if(browser.versions.mobile || browser.versions.iWinPhone){window.location http:/www.baidu.com/m/;}js如何判断用户是否是用微信浏览器根据关键字 MicroMessenger 来判断是否是微信内置的浏览器。判断函数如下function isWeiXin(){var ua window.navigator.userAgent.toLowerCase();if(ua.match(/MicroMessenger/i) micromessenger){return true;}else{return false;}}JS,Jquery获取各种屏幕的宽度和高度Javascript:文档可视区域宽 document.documentElement.clientWidth文档可视区域高 document.documentElement.clientHeight网页可见区域宽 document.body.clientWidth网页可见区域高 document.body.clientHeight网页可见区域宽 document.body.offsetWidth (包括边线的宽)网页可见区域高 document.body.offsetHeight (包括边线的高)网页正文全文宽 document.body.scrollWidth网页正文全文高 document.body.scrollHeight网页被卷去的高 document.body.scrollTop网页被卷去的左 document.body.scrollLeft网页正文部分上 window.screenTop网页正文部分左 window.screenLeft屏幕分辨率的高 window.screen.height屏幕分辨率的宽 window.screen.width屏幕可用工作区高度 window.screen.availHeight屏幕可用工作区宽度 window.screen.availWidthJQuery:$(document).ready(function(){alert($(window).height()); //浏览器当前窗口可视区域高度alert($(document).height()); //浏览器当前窗口文档的高度alert($(document.body).height());//浏览器当前窗口文档body的高度alert($(document.body).outerHeight(true));//浏览器当前窗口文档body的总高度 包括border padding marginalert($(window).width()); //浏览器当前窗口可视区域宽度alert($(document).width());//浏览器当前窗口文档对象宽度alert($(document.body).width());//浏览器当前窗口文档body的宽度alert($(document.body).outerWidth(true));//浏览器当前窗口文档body的总宽度 包括border padding margin})jquery对文本框只读状态与可读状态的相互转化$(input).removeAttr(Readonly);$(input).attr(Readonly,true);js/jquery实现密码框输入聚焦失焦问题js实现方法html代码js代码window.onload function(){var oIpt document.getElementById(i_input);if(oIpt.value 会员卡号/手机号){oIpt.style.color #888;}else{oIpt.style.color #000;}oIpt.onfocus function(){if(this.value 会员卡号/手机号){this.value;this.style.color #000;this.type password;}else{this.style.color #000;}};oIpt.onblur function(){if(this.value ){this.value会员卡号/手机号;this.style.color #888;this.type text;}};}jquery实现方法:html代码jquery代码$(#showPwd).focus(function() {var text_value$(this).val();if (text_value 请输入您的注册密码) {$(#showPwd).hide();$(#password).show().focus();}});$(#password).blur(function() {var text_value $(this).val();if (text_value ) {$(#showPwd).show();$(#password).hide();}});获取当前日期var calculateDate function(){var date new Date();var weeks [日,一,二,三,四,五,六];return date.getFullYear()年(date.getMonth()1)月date.getDate()日 星期weeks[date.getDay()];}$(function(){$(#dateSpan).html(calculateDate());})时间倒计时(固定倒计时的结束时间)function countdown() {var endtime new Date(Jan 18, 2015 23:50:00);var nowtime new Date();if (nowtime endtime) {document.getElementById(_lefttime).innerHTML 倒计时间结束;return;}var leftsecond parseInt((endtime.getTime() - nowtime.getTime()) / 1000);if (leftsecond 0) {leftsecond 0;}__d parseInt(leftsecond / 3600 / 24);__h parseInt((leftsecond / 3600) % 24);__m parseInt((leftsecond / 60) % 60);__s parseInt(leftsecond % 60);document.getElementById(_lefttime).innerHTML __d 天 __h 小时 __m 分 __s 秒;}countdown();setInterval(countdown, 1000);10秒倒计时跳转html代码js代码//设定倒数秒数var t 10;//显示倒数秒数function showTime(){t - 1;document.getElementById(showtimes).innerHTML t;if(t0){location.hreferror404.asp;}//每秒执行一次,showTime()setTimeout(showTime(),1000);}//执行showTime()showTime();判断浏览器的简单有效方法function getInternet(){if(navigator.userAgent.indexOf(MSIE)0) {return MSIE; //IE浏览器}if(isFirefoxnavigator.userAgent.indexOf(Firefox)0){return Firefox; //Firefox浏览器}if(isSafarinavigator.userAgent.indexOf(Safari)0) {return Safari; //Safan浏览器}if(isCaminonavigator.userAgent.indexOf(Camino)0){return Camino; //Camino浏览器}if(isMozillanavigator.userAgent.indexOf(Gecko/)0){return Gecko; //Gecko浏览器}}每隔0.1s改变图片的路径js代码(function(){function chagesimagesrc(t){document.getElementById(tt).childNodes[0].srcimages/t.jpg;}setInterval(function(){for(var i0;i2;i){setTimeout((function(t){return function(){chagesimagesrc(t);}})(i1),i*100)}},1000);})()点击某个div区域之外隐藏该div一般写法$(document).on(click,function(e){var target $(e.target);if(target.closest(.city_box,#city_select a.selected).length 0){$(.city_box).hide();}})更全的方式$(document).click(function(e){var _con $( 目标区域 ); // 设置目标区域if(!_con.is(e.target) _con.has(e.target).length 0){ // Mark 1some code... // 功能代码}});/* Mark 1 的原理判断点击事件发生在区域外的条件是1. 点击事件的对象不是目标区域本身2. 事件对象同时也不是目标区域的子元素*/js获取某年某月的哪些天是周六和周日function time(y,m){var tempTime new Date(y,m,0);var time new Date();var saturday new Array();var sunday new Array();for(var i1;itempTime.getDate();i){time.setFullYear(y,m-1,i);var day time.getDay();if(day 6){saturday.push(i);}else if(day 0){sunday.push(i);}}var text y年m月份周六saturday.toString()周日sunday.toString();document.getElementById(text).innerHTML text;}time(2014,7);如何在手机上禁止浏览器的网页滚动方法一方法二document.addEventListener(touchmove, function(event) {event.preventDefault();})改变typefile默认样式浏览等字体js判断变量是否未定义的代码一般如果变量通过var声明但是并未初始化的时候变量的值为undefined而未定义的变量则需要通过 typeof 变量的形式来判断否则会发生错误。实际应用variable有的页面我们不定义,但有的页面定义了就可以需要这样的判断方法没有定义的就不执行。if(undefined ! typeof variable){if(variableabc){console.log(成功);}}针对IE67的hack该怎么写你可能会这么回答使用“”“_”“*”等各种各样的符号来写hack。是的这样做没错但是需要记住每个符号分别被哪些浏览器识别并且如果写的太乱将造成代码 阅读起来十分困难。学习CSS必须抱有一种质疑精神有没有一种hack方法可以不写这些乱七八糟的符号并且代码易维护易读呢我们可以看看好搜首页是怎么做的在页面顶端有这样一句话在页面的CSS中会看到这样的规则.ie7 #hd_usernav:before, .ie8 #hd_usernav:before {display: none}.ie6 .skin_no #hd_nav li, .ie7 .skin_no #hd_nav li, .ie8 .skin_no #hd_nav li {border-right-color: #c5c5c5}.ie6 .skin_no #hd_nav a, .ie7 .skin_no #hd_nav a, .ie8 .skin_no #hd_nav a {color: #c5c5c5}行内级元素可以设置宽高吗有哪些在面试时当被问到行内级元素可否设置宽高时根据我们的经验往往会回答不能。但是这样往往着了面试官的道因为有一些特殊的行内元素比如imginputselect等等是可以被设置宽高的。一个内容不受CSS视觉格式化模型控制CSS渲染模型并不考虑对此内容的渲染且元素本身一般拥有固有尺寸(宽度高度宽高比)的元素被称之为置换元素。比如img是一个置换元素当不对它设置宽高时它会按照本身的宽高进行显示。所以这个问题的正确答案应该是置换元素可以非置换元素不可以。js动态创建css样式添加到head内function addCSS(cssText){var style document.createElement(style);var head document.head || document.getElementsByTagName(head)[0];style.type text/css;if(style.styleSheet){ //IEvar func function(){try{//防止IE中stylesheet数量超过限制而发生错误style.styleSheet.cssText cssText;}catch(e){}}//如果当前styleSheet还不能用则放到异步中则行if(style.styleSheet.disabled){setTimeout(func,10);}else{func();}}else{ //w3c//w3c浏览器中只要创建文本节点插入到style元素中就行了var textNode document.createTextNode(cssText);style.appendChild(textNode);}//把创建的style元素插入到head中head.appendChild(style);}//使用addCSS(#demo{ height: 30px; background:#f00;});在IE8以及其低版本浏览器下IE独有属性styleSheet.cssText。所以一般的兼容简单写法var style document.createElement(style);style.type text/css;if (style.styleSheet) { //IEstyle.styleSheet.cssText /*..css content here..*/;} else { //w3cstyle.innerHTML /*..css content here..*/;}document.getElementsByTagName(head)[0].appendChild(style);form表单提交时设置编码格式//内容js 加入收藏代码function addFavorite(title, url) {url encodeURI(url);try {window.external.addFavorite(url, title);}catch (e) {try {window.sidebar.addPanel(title, url, );}catch (e) {alert(加入收藏失败,CtrlD进行添加);}}}addFavorite(document.title,window.location);打印方法(整个页面 window.print())function Printpart(id_str)//id-str 内容中的id{var el document.getElementById(id_str);var iframe document.createElement(IFRAME);var doc null;iframe.setAttribute(style, position:absolute;width:0px;height:0px;left:-500px;top:-500px;);document.body.appendChild(iframe);doc iframe.contentWindow.document;doc.write( el.innerHTML );doc.close();iframe.contentWindow.focus();iframe.contentWindow.print();if (navigator.userAgent.indexOf(MSIE) 0){document.body.removeChild(iframe);}}js强制手机页面横屏显示$( window ).on( orientationchange, function( event ) {if (event.orientationportrait) {$(body).css(transform, rotate(90deg));} else {$(body).css(transform, rotate(0deg));}});$( window ).orientationchange();jquery获得select中option的索引html代码高级客户经理中级客户经理jquery代码$(.select-green).change(function(){var _indx $(this).get(0).selectedIndex;$(.selectall .selectCon).hide();$(.selectall .selectCon).eq(_indx).fadeIn();});注其中(this).get(0)与(this)[0]等价获取上传文件的大小html代码js代码//兼容IE9低版本获取文件的大小function getFileSize(obj){var filesize;if(obj.files){filesize obj.files[0].size;}else{try{var path,fso;path document.getElementById(filePath).value;fso new ActiveXObject(Scripting.FileSystemObject);filesize fso.GetFile(path).size;}catch(e){//在IE9及低版本浏览器如果不容许ActiveX控件与页面交互点击了否就无法获取sizeconsole.log(e.message); //Automation 服务器不能创建对象filesize error; //无法获取}}return filesize;}限制上传文件的类型如果是高版本浏览器一般在HTML代码中写就能实现如如果限制上传文件为图片类型如下但是在其它低版本浏览器就不管用了需要js来判断。html代码js代码/* 通过扩展名检验文件格式。*parma filePath{string} 文件路径*parma acceptFormat{Array} 允许的文件类型*result 返回值{Boolen}true or false*/function checkFormat(filePath,acceptFormat){var resultBool false,ex filePath.substring(filePath.lastIndexOf(.) 1);ex ex.toLowerCase();for(var i 0; i acceptFormat.length; i){if(acceptFormat[i] ex){resultBool true;break;}}return resultBool;};function limitTypes(){var obj document.getElementById(filePath);var path obj.value;var result checkFormat(path,[bmp,jpg,jpeg,png]);if(!result){alert(上传类型错误请重新上传);obj.value ;}}随机产生lowwer - upper之间的随机数function selectFrom(lower, upper) {var sum upper - lower 1; //总数-第一个数1return Math.floor(Math.random() * sum lower);};保留后端传递到前端页面的空格var objt {name: aaaa 这是一个空格多的标签 这是一个空格多的标签}objt.name objt.name.replace(/\s/g, );console.log(objt.name);用firebug查看结果为什么Image对象的src属性要写在onload事件后面var imagenew Image();imgae.onload funtion;imgae.src urljs内部是按顺序逐行执行的可以认为是同步的给imgae赋值src时去加载图片这个过程是异步的这个异步过程完成后如果有onload则执行onload如果先赋值src那么这个异步过程可能在你赋值onload之前就完成了(比如图片缓存或者是js由于某些原因被阻塞了)那么onload就不会执行反之js同步执行确定onload赋值完成后才会赋值src,可以保证这个异步过程在onload赋值完成后才开始进行也就保证了onload一定会被执行到跨浏览器添加事件//跨浏览器添加事件function addEvent(obj,type,fn){if(obj.addEventListener){obj.addEventListener(type,fn,false);}else if(obj.attachEvent){//IEobj.attchEvent(ontype,fn);}}跨浏览器移除事件//跨浏览器移除事件function removeEvent(obj,type,fn){if(obj.removeEventListener){obj.removeEventListener(type,fn,false);}else if(obj.detachEvent){//兼容IEobj.detachEvent(ontype,fn);}}跨浏览器阻止默认行为//跨浏览器阻止默认行为function preDef(ev){var e ev || window.event;if(e.preventDefault){e.preventDefault();}else{e.returnValue false;}}跨浏览器获取目标对象//跨浏览器获取目标对象function getTarget(ev){if(ev.target){//w3creturn ev.target;}else if(window.event.srcElement){//IEreturn window.event.srcElement;}}跨浏览器获取滚动条位置//跨浏览器获取滚动条位置sp scroll positionfunction getSP(){return{top: document.documentElement.scrollTop || document.body.scrollTop,left : document.documentElement.scrollLeft || document.body.scrollLeft;}}跨浏览器获取可视窗口大小//跨浏览器获取可视窗口大小function getWindow () {if(typeof window.innerWidth !undefined) {return{width : window.innerWidth,height : window.innerHeight}} else{return {width : document.documentElement.clientWidth,height : document.documentElement.clientHeight}}}js 对象冒充function Person(name , age){this.name name ;this.age age ;this.say function (){return name : this.name age: this.age ;} ;}var o new Object() ;//可以简化为Object()Person.call(o , zhangsan , 20) ;console.log(o.say() );//name : zhangsan age: 20js 异步加载和同步加载异步加载也叫非阻塞模式加载浏览器在下载js的同时同时还会执行后续的页面处理。在script标签内用js创建一个script元素并插入到document中这种就是异步加载js文件了(function() {var s document.createElement(script);s.type text/javascript;s.async true;s.src http://yourdomain.com/script.js;var x document.getElementsByTagName(script)[0];x.parentNode.insertBefore(s, x);})();同步加载平常默认用的都是同步加载。如同步模式又称阻塞模式会阻止流览器的后续处理。停止了后续的文件的解析执行如图像的渲染。浏览器之所以会采用同步模式是因为加载的js文件中有对dom的操作重定向输出document等默认行为所以同步才是最安全的。通常会把要加载的js放到body结束标签之前使得js可在页面最后加载尽量减少阻塞页面的渲染。这样可以先让页面显示出来。同步加载流程是瀑布模型异步加载流程是并发模型。js获取屏幕坐标获取鼠标坐标function mousePosition(ev){if(ev.pageX || ev.pageY){return {x:ev.pageX, y:ev.pageY};}return {x:ev.clientX document.body.scrollLeft - document.body.clientLeft,y:ev.clientY document.body.scrollTop - document.body.clientTop};}function mouseMove(ev){ev ev || window.event;var mousePos mousePosition(ev);document.getElementById(xxx).value mousePos.x;document.getElementById(yyy).value mousePos.y;}document.onmousemove mouseMove;X: Y:注释1.documentElement 属性可返回文档的根节点。2.scrollTop() 为滚动条向下移动的距离3.document.documentElement.scrollTop 指的是滚动条的垂直坐标4.document.documentElement.clientHeight 指的是浏览器可见区域高度DTD已声明的情况下如果在页面中添加这行标记的话IEdocument.body.clientWidth BODY对象宽度document.body.clientHeight BODY对象高度document.documentElement.clientWidth 可见区域宽度document.documentElement.clientHeight 可见区域高度Firefoxdocument.documentElement.scrollHeight 浏览器所有内容高度document.body.scrollHeight 浏览器所有内容高度document.documentElement.scrollTop 浏览器滚动部分高度document.body.scrollTop 始终为0document.documentElement.clientHeight 浏览器可视部分高度document.body.clientHeight 浏览器所有内容高度Chromedocument.documentElement.scrollHeight 浏览器所有内容高度document.body.scrollHeight 浏览器所有内容高度document.documentElement.scrollTop 始终为0document.body.scrollTop浏览器滚动部分高度document.documentElement.clientHeight 浏览器可视部分高度document.body.clientHeight 浏览器所有内容高度浏览器所有内容高度即浏览器整个框架的高度包括滚动条卷去部分可视部分底部隐藏部分的高度总和浏览器滚动部分高度即滚动条卷去部分高度即可视顶端距离整个对象顶端的高度。综上1、document.documentElement.scrollTop和document.body.scrollTop始终有一个为0所以可以用这两个的和来求scrollTop2、scrollHeight、clientHeight 在DTD已声明的情况下用documentElement未声明的情况下用bodyclientHeight在IE和FF下该属性没什么差别都是指浏览器的可视区域即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。PageX和clientXPageX:鼠标在页面上的位置,从页面左上角开始,即是以页面为参考点,不随滑动条移动而变化clientX:鼠标在页面上可视区域的位置,从浏览器可视区域左上角开始,即是以浏览器滑动条此刻的滑动到的位置为参考点,随滑动条移动 而变化.可是悲剧的是,PageX只有FF特有,IE则没有这个所以在IE下使用这个PageYclientYscrollTop-clientTop;(只讨论Y轴,X轴同理,下同)scrollTop代表的是被浏览器滑动条滚过的长度offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,可能出现负值只有clientX和screenX 皆大欢喜是W3C标准.其他的,都纠结了.最给力的是chrome和safari一条龙通杀!完全支持所有属性js拖拽效果#login{height: 100px;width: 100px;border: 1px solid black;position: relative;top:200px;left: 200px;background: red;}var oDiv document.getElementById(login);oDiv.onmousedown function(e){var e e || window.event;//window.event兼容IE,当事件发生时有效var diffX e.clientX - oDiv.offsetLeft;//获取鼠标点击的位置到所选对象的边框的水平距离var diffY e.clientY - oDiv.offsetTop;document.onmousemove function(e){ //需设为document对象才能作用于整个文档var e e||window.event;oDiv.style.left e.clientX - diffX px;//style.left表示所选对象的边框到浏览器左侧距离oDiv.style.top e.clientY -diffY px;};document.onmouseup function(){document.onmousemove null;//清除鼠标释放时的对象移动方法document.onmouseup null;}}offsetTop 返回的是数字而 style.top 返回的是字符串除了数字外还带有单位px。js实现insertAfter方法DOM里还有一个insertBefore方法用于再节点前面附件内容通过insertBefore和appendChild我们可以实现自己的insertAfter函数// Target是DOM里已经存在的元素// Bullet是要插入的新元素function insertAfter(target, bullet) {target.nextSibling ?target.parentNode.insertBefore(bullet, target.nextSibling): target.parentNode.appendChild(bullet);}// 使用了3目表达式:// 格式条件?条件为true时的表达式条件为false时的表达式上面的函数首先检查target元素的同级下一个节点是否存在如果存在就在该节点前面添加bullet节点如果不存在就说明target是最后一个节点了直接在后面append新节点就可以了。DOM API没有给提供insertAfter是因为真的没必要了——我们可以自己创建。jquery中带命名空间的事件(namespaced events)带命名空间的事件(namespaced events)在jQuery 1.2就被加入了但是没有几个人用。举个例子$(a).on(click, function() {// Handler 1});$(a).on(click, function() {// Handler 2});如果我们想要移除第二个handler, 使用$(‘a’).off(‘click’)确会把两个handler都移除掉但是如果使用带命名空间的事件就可以搞定$(a).on(click.namespace1, function() {//Handler 1});$(a).on(click.namespace2, function() {//Handler 2});使用如下代码移除$(a).off(click.namespace2);求两个数的和 并以二进制输出var m3;var n5;var summn;var result sum.toString(2);console.log(result); //1000二进制输出toString函数js使用console.log在console中打印信息影响性能吗?问如上图所示我看很多的网站在生产环境并没有注释掉开发的时候使用的console.log这样会影响网站加载的性能吗影响多大答其实只要调用函数就会有性能的问题只是影响大与小的问题。可以用console.time和console.timeEnd中间代码执行时长来测试间隔时间。console.time(console);console.log(test);console.timeEnd(console);jQuery取得select选择的文本与值jquery获取select选择的文本与值获取select 获取select 选中的 text :$(#ddlregtype).find(option:selected).text();获取select选中的 value:$(#ddlregtype ).val();获取select选中的索引:$(#ddlregtype ).get(0).selectedindex;设置select:设置select 选中的索引$(#ddlregtype ).get(0).selectedindexindex;//index为索引值设置select 选中的value$(#ddlregtype ).attr(value,normal“);$(#ddlregtype ).val(normal);$(#ddlregtype ).get(0).value value;JS中的!!的作用该操作相当于Boolean()即转化为布尔型。如!!0 false; //true!!-1 true; //true这儿列举下其它类型转化为boolean型undefined 》 falsenull 》 false布尔值 》 不用转换数字 》 0NaN转化成false其他数字类型转换成true字符串 》 只有空字符串转换成false其他都转换成true对象 》 全部转换为trueJS replace()方法全局替换变量简单替换字符string.replace(a,b); (把 a 替换成 b)全局替换字符string.replace(/a/g,b);(全局把a替换成b)但是如果是全局替换一个变量内容如下,给一个电话号码中间加*号var phone 15512345678;var sliceNumber phone.slice(3,phone.length - 3);var newPhone phone.replace(new RegExp(sliceNumber,g),****);console.log(newPhone); //155****678
