归纳边线和滚动条的高,条件注释使用方法言传身教

IE条件注释

规格注释简介

  1. IE中的条件注释(Conditional
    comments)对IE的本子和IE非IE有美妙的区分能力,是WEB设计中常用的hack方法。
    标准注释只好用来IE5以上,IE10之上不支持。

  2. 假诺你安装了八个IE,条件注释将会以最高版本的IE为专业。

  3. 规范注释的中坚协会和HTML的注释(<!–
    –>)是相同的。因而IE以外的浏览器将会把它们当做是日常的笺注而浑然忽略它们。

  4. IE将会依据if条件来判断是还是不是如解析普通的页面内容千篇一律解析条件注释里的故事情节。

原则注释使用办法言传身教

<!–-[if IE 5]>仅IE5.5可见<![endif]–->
<!–-[if gt IE 5.5]>仅IE 5.5以上可见<![endif]–->
<!–-[if lt IE 5.5]>仅IE 5.5以下可见<![endif]–->
<!–-[if gte IE 5.5]>IE 5.5及以上可见<![endif]–->
<!–-[if lte IE 5.5]>IE 5.5及以下可见<![endif]–->
<!–-[if !IE 5.5]>非IE 5.5的IE可见<![endif]–->

document.body.clientWidth – 网页可知区域宽
document.body.clientHeight – 网页可见区域高

html代码用js动态加载进页面

<script type="text/html" id="T-pcList">
 //这里面是你要放的html代码,例如放一个div的内容
</script>

把地点的js动态参加到页面中

$(function(){
var s=$("#T-pcList").html();//获得js的html内容
$(".picScroll-left .bd").html(s);//把s的内容放到class为bd内
thisstyle();//执行某个函数
});

document.body.offsetWidth – 网页可知区域宽,包含边线和滚动条的宽
document.body.offsetHeight –
网页可知区域高,包罗边线和滚动条的高[FF,chrom下是百分之百页面高,IE opera
下符合规律]

js判断用户访问的是PC照旧mobile

var 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/";
} 

document.body.scrollWidth – 网页总宽
document.body.scrollHeight – 网页总高

js怎么着判断用户是不是是用微信浏览器

依照重点字 MicroMessenger 来判定是不是是微信内置的浏览器。判断函数如下:

function isWeiXin(){ 
    var ua = window.navigator.userAgent.toLowerCase(); 
    if(ua.match(/MicroMessenger/i) == 'micromessenger'){ 
        return true; 
    }else{ 
        return false; 
    } 
} 

document.body.scrollTop –
有滚动条的时候,向下拖动滚动条,上方不显得的那部分中度
document.body.scrollLeft – 同上

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.availWidth

JQuery:

$(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
})

window.innerHeight – 浏览器窗口的内部中度

jquery对文本框只读状态与可读状态的相互转化

  $('input').removeAttr('Readonly');
  $('input').attr('Readonly','true');

window.innerWidth – 浏览器窗口的其中宽度

js/jquery已毕密码框输入聚焦,失焦难点

js完结格局: 

html代码:

<input id="i_input" type="text" value='会员卡号/手机号'  />

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代码:

<input type="text"class="oldpsw" id="showPwd"value="请输入您的注册密码"/>
<input type="password" name="psw"class="oldpsw" id="password"value="" style="display:none;"/>

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();
    }
}); 

window.screenTop –
网页正文部分上[网页文档的最上方距离显示屏最下边的相距,但FF不辅助,Chrom,IE,Opera表现都不可同日而语,慎用]
window.screenLeft –
网页正文部分左[网页文档的最右侧距离显示屏最左侧的相距,但FF不辅助,Chrom,IE,Opera表现都不一致,慎用]

收获当明天期

var calculateDate = function(){
var date = newDate();
var weeks = ["日","一","二","三","四","五","六"];
return date.getFullYear()+"年"+(date.getMonth()+1)+"月"+
      date.getDate()+"日 星期"+weeks[date.getDay()];
}
$(function(){
  $("#dateSpan").html(calculateDate());
})

window.screen.height – 屏幕分辨率的惊人
window.screen.width – 屏幕分辨率的大幅度

岁月倒计时(固定倒计时的利落时间)

functioncountdown(){
    var endtime = newDate("Jan 18, 2015 23:50:00");
    var nowtime = newDate();
    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);

window.screen.availHeight –
可用工作区中度[全套屏幕但不包罗下方义务栏]
window.screen.availWidth – 可用工作区宽度[一切屏幕的增幅]

10秒倒计时跳转

html代码:

<divid="showtimes"></div>

js代码:

//设定倒数秒数  var t = 10;  
//显示倒数秒数  functionshowTime(){  
    t -= 1;  
    document.getElementById('showtimes').innerHTML= t;  
    if(t==0){  
        location.href='error404.asp';  
    }  
    //每秒执行一次,showTime()  
    setTimeout("showTime()",1000);  
}  
//执行showTime()  
showTime();

window.screen.clorDepth – 屏幕色彩,常用的16,3四个人等
window.screen.deviceXDPI – 显示屏像素/英寸【IE协助,其余不协助】

判断浏览器的粗略有效办法

functiongetInternet(){    
    if(navigator.userAgent.indexOf("MSIE")>0) {    
      return"MSIE";       //IE浏览器  
    }  

    if(isFirefox=navigator.userAgent.indexOf("Firefox")>0){    
      return"Firefox";     //Firefox浏览器  
    }  

    if(isSafari=navigator.userAgent.indexOf("Safari")>0) {    
      return"Safari";      //Safan浏览器  
    }  

    if(isCamino=navigator.userAgent.indexOf("Camino")>0){    
      return"Camino";   //Camino浏览器  
    }  
    if(isMozilla=navigator.userAgent.indexOf("Gecko/")>0){    
      return"Gecko";    //Gecko浏览器  
    }    
} 

JavaScript 获取页面宽高的主意

每隔0.1s改变图片的路子

<divid="tt"><imgsrc="images/1.jpg"alt="图片 1"/></div>

js代码:

(function(){
    functionchagesimagesrc(t){
        document.getElementById("tt").childNodes[0].src="images/"+t+".jpg";
    }
    setInterval(function(){
        for(var i=0;i<2;i++){
            setTimeout((function(t){
                returnfunction(){
                    chagesimagesrc(t);
                }
            })(i+1),i*100)
        }
    },1000);
})() 
<script>
function getInfo()
{
  var s = "";
  s += " 网页可见区域宽:"+ document.body.clientWidth;
  s += " 网页可见区域高:"+ document.body.clientHeight;
  s += " 网页可见区域宽:"+ document.body.offsetWidth + " (包括边线和滚动条的宽)";
  s += " 网页可见区域高:"+ document.body.offsetHeight + " (包括边线的宽)";
  s += " 网页正文全文宽:"+ document.body.scrollWidth;
  s += " 网页正文全文高:"+ document.body.scrollHeight;
  s += " 网页被卷去的高(ff):"+ document.body.scrollTop;
  s += " 网页被卷去的高(ie):"+ document.documentElement.scrollTop;
  s += " 网页被卷去的左:"+ document.body.scrollLeft;
  s += " 网页正文部分上:"+ window.screenTop;
  s += " 网页正文部分左:"+ window.screenLeft;
  s += " 屏幕分辨率的高:"+ window.screen.height;
  s += " 屏幕分辨率的宽:"+ window.screen.width;
  s += " 屏幕可用工作区高度:"+ window.screen.availHeight;
  s += " 屏幕可用工作区宽度:"+ window.screen.availWidth;
  s += " 你的屏幕设置是 "+ window.screen.colorDepth +" 位彩色";
  s += " 你的屏幕设置 "+ window.screen.deviceXDPI +" 像素/英寸";
  //alert (s);
}
getInfo();
</script>

点击有些div区域之外,隐藏该div

$(document).bind("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 1
    some code...   // 功能代码
  }
});
/* Mark 1 的原理:
判断点击事件发生在区域外的条件是:
1. 点击事件的对象不是目标区域本身
2. 事件对象同时也不是目标区域的子元素
*/ 

在本人本地测试当中:
在IE、FireFox、Opera下都可以采纳

js获取某年某月的怎么天是星期四和星期四

<p id="text"></p>


<script type="text/javascript">
functiontime(y,m){
    var tempTime = newDate(y,m,0);
    var time = newDate();
    var saturday = newArray();
    var sunday = newArray();
    for(var i=1;i<=tempTime.getDate();i++){
        time.setFullYear(y,m-1,i);
        var day = time.getDay();
        if(day == 6){
            saturday.push(i);
        }elseif(day == 0){
            sunday.push(i);
        }
    }
    var text = y+"年"+m+"月份"+"<br />"
                +"周六:"+saturday.toString()+"<br />"
                +"周日:"+sunday.toString();
    document.getElementById("text").innerHTML = text;
}

time(2014,7);
</script>
document.body.clientWidth
document.body.clientHeight

怎么样在小叔子大上禁止浏览器的网页滚动

方法一:

<body ontouchmove="event.preventDefault()" >

方法二:

 <script type="text/javascript">
  document.addEventListener('touchmove', function(event) {
    event.preventDefault();
})
 </script>

即可获取,很简单,很有利。
而在商店项目当中:
Opera如故选取

更改type=file默许样式,”浏览”等字体

<input type="file" id="browsefile" style="visibility:hidden" onchange="filepath.value=this.value">
<input type="button" id="filebutton" value="" onclick="browsefile.click()">
<input type="textfield" id="filepath">
document.body.clientWidth
document.body.clientHeight

js判断变量是还是不是未定义的代码

 一般如果变量通过var评释,可是从未初叶化的时候,变量的值为undefined,而未定义的变量则须求经过
“typeof 变量”的款型来判断,否则会时有发生错误。
实际应用:
variable有的页面大家不定义,但有些页面定义了,就足以需求那样的判断方法,没有概念的就不履行。

if("undefined" != typeof variable){ 
    if(variable=="abc"){ 
        console.log('成功'); 
    } 
}

可是IE和FireFox则使用

本着IE6,7的hack,该怎么写

你或然会这么回答:使用
“>”,“_”,“*”等五花八门的记号来写hack。是的,那样做没错,不过急需牢记每一种符号分别被如何浏览器识别,并且只要写的太乱将招致代码
阅读起来十三分困难。学习CSS必须抱有一种怀疑精神,有没有一种hack方法可以不写那些一塌糊涂的号子,并且代码易维护易读吧?大家可以看看好搜首页是怎么办的:在页面顶端有这么一句话:

<!DOCTYPE html>
<html>
<meta charset="utf-8"/>
<head>
<!--[if lt IE 7 ]><html class="ie6"><![endif]-->
<!--[if IE 7 ]><html class="ie7"><![endif]-->
<!--[if IE 8 ]><html class="ie8"><![endif]-->
<!--[if IE 9 ]><html class="ie9"><![endif]-->
<!--[if (gt IE 9)|!(IE)]><!--><html class="w3c"><!--<![endif]-->
</head>

在页面的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
}
document.documentElement.clientWidth
document.documentElement.clientHeight

行内级元素得以设置宽高吗?有啥样?

在面试时,当被问到行内级成分可不可以设置宽高时,依照大家的经验往往会回复不能。不过这么频仍着了面试官的道,因为有一对特殊的行内成分,比如img,input,select等等,是足以被安装宽高的。1个内容不受CSS视觉格式化模型控制,CSS渲染模型并不考虑对此内容的渲染,且成分本人一般装有固有尺寸(宽度,中度,宽高比)的要素,被称为换来成分。比如img是贰个置换到分,当不对它设置宽高时,它会依照本身的宽高举办突显。所以那些标题标正确性答案应该是沟通元素得以,非置换来分不得以

原先是W3C的标准在作祟啊

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){ //IE
        var 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) { //IE
    style.styleSheet.cssText = '/*..css content here..*/';
} else { //w3c
    style.innerHTML = '/*..css content here..*/';
}
document.getElementsByTagName('head')[0].appendChild(style);

<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN”
http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd“>
一旦在页面中添加那行标记的话

form表单提交时设置编码格式

<form name="form" method="post" action="XXXX" accept-charset="utf-8"  onsubmit="document.charset='utf-8';">  
 //内容
</form>  

在IE中:

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("加入收藏失败,Ctrl+D进行添加");
        }
    }
}
    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('<div>' + el.innerHTML + '</div>');
doc.close();
iframe.contentWindow.focus();
iframe.contentWindow.print();
if (navigator.userAgent.indexOf("MSIE") > 0)
{
document.body.removeChild(iframe);
}
}

参考地址:

http://www.cnblogs.com/yeminglong/archive/2012/12/03/2799957.html

http://www.cnblogs.com/jikey/archive/2011/06/22/2087683.html

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

js强制手机页面横屏显示

<script>
        // Bind an event to window.orientationchange that, when the device is turned,
        // gets the orientation and displays it to on screen.
        $( window ).on( "orientationchange", function( event ) {
             //alert (event.orientation )
            if (event.orientation=='portrait') {
                $('body').css('transform', 'rotate(90deg)');
            } else {
                $('body').css('transform', 'rotate(0deg)');
            }
        });

        // You can also manually force this event to fire.
        $( window ).orientationchange();
</script>

在FireFox中:

jquery获得select中option的索引

html代码:

<select class="select-green">
    <option value="0">高级客户经理</option>
    <option value="1">中级客户经理</option>
</select> 

jquery代码:

$(".select-green").change(function(){
    var _indx = $(this).get(0).selectedIndex;
    $(".selectall .selectCon").hide();
    $(".selectall .selectCon").eq(_indx).fadeIn();
});

注:其中$(this).get(0) 与$(this)[0]等价

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

获取上传文件的尺寸

html代码:

<input type="file" id="filePath" onchange="getFileSize(this)"/>

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控件与页面交互,点击了否,就无法获取size
            console.log(e.message); //Automation 服务器不能创建对象
            filesize = 'error'; //无法获取
        }
    }
    return filesize;
}

在Opera中:

范围上传文件的门类

一旦是高版本浏览器,一般在HTML代码中写就能落实,如:

<input type="file" name="filePath" accept=".jpg,.jpeg,.doc,.docxs,.pdf">

只要界定上传文件为图片类型,如下:

<input type="file" class="file" value="上传" accept="image/*"/>

只是在其余低版本浏览器就不管用了,要求js来判定。

html代码:

<input type="file" id="filePath" onchange="limitTypes()"/>

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 = '';
    }
}
document.body.clientWidth ==> 可见区域宽度
document.body.clientHeight ==> 可见区域高度
document.documentElement.clientWidth ==> 页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==> 页面对象高度(即BODY对象高度加上Margin高)

私下发生lowwer – upper之间的人身自由数

function selectFrom(lower, upper) {
   var sum = upper - lower + 1; //总数-第一个数+1
   return Math.floor(Math.random() * sum + lower);
};

而即使没有定义W3C的正规,则

保存后端传递到前者页面的空格

var objt = {
        name:' aaaa    这是一个空格多的标签   这是一个空格多的标签'
    }
    objt.name = objt.name.replace(/\s/g,'&nbsp;');
    console.log(objt.name);

用firebug查看结果:

图片 2

IE为:

怎么Image对象的src属性要写在onload事件背后?

var image=new Image();
imgae.onload = funtion;
imgae.src = 'url'

js内部是按顺序逐行执行的,可以认为是手拉手的
给imgae赋值src时,去加载图片那几个进度是异步的,这些异步进度一鼓作气后,假若有onload,则执行onload

万一先赋值src,那么那几个异步进程或然在您赋值onload之前就做到了(比如图片缓存,可能是js由于有些原因被打断了),那么onload就不会执行
恰恰相反,js同步实施规定onload赋值达成后才会赋值src,可以确保那些异步进程在onload赋值达成后才起来展开,也就确保了onload一定会被执行到

document.documentElement.clientWidth ==> 0
document.documentElement.clientHeight ==> 0

跨浏览器添加事件

//跨浏览器添加事件
    function addEvent(obj,type,fn){
        if(obj.addEventListener){
            obj.addEventListener(type,fn,false);
        }else if(obj.attachEvent){//IE
            obj.attchEvent('on'+type,fn);
        }
    }

FireFox为:

跨浏览器移除事件

//跨浏览器移除事件
function removeEvent(obj,type,fn){
    if(obj.removeEventListener){
        obj.removeEventListener(type,fn,false);
    }else if(obj.detachEvent){//兼容IE
        obj.detachEvent('on'+type,fn);
    }
}

复制代码 代码如下:

跨浏览器阻止默许行为

//跨浏览器阻止默认行为
    function preDef(ev){
        var e = ev || window.event;
        if(e.preventDefault){
            e.preventDefault();
        }else{
            e.returnValue =false;
        }
    }

document.documentElement.clientWidth ==>
页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==>
页面对象中度(即BODY对象中度加上Margin高)

跨浏览器获取目的对象

//跨浏览器获取目标对象
function getTarget(ev){
    if(ev.target){//w3c
        return ev.target;
    }else if(window.event.srcElement){//IE
        return window.event.srcElement;
    }
} 

Opera为:

跨浏览器获取滚动条地方

//跨浏览器获取滚动条位置,sp == scroll position
    function 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
                }
            }
        },

document.documentElement.clientWidth ==>
页面对象宽度(即BODY对象宽度加上Margin宽)
document.documentElement.clientHeight ==>
页面对象中度(即BODY对象中度加上Margin高)

js 对象冒充

<script type = 'text/javascript'>

    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: 20 

</script>

以上所述就是本文的全体内容了,希望我们可以欣赏。

js 异步加载和协办加载

异步加载也叫非阻塞格局加载,浏览器在下载js的同时,同时还会进行后续的页面处理。
script标签内,用js开创1个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); 
})();

一路加载

平常默许用的都是联名加载。如:

<script src="http://yourdomain.com/script.js"></script>

联脚格局又称阻塞情势,会阻碍流览器的存续处理。甘休了继承的公文的分析,执行,如图像的渲染。浏览器之所以会拔取一块格局,是因为加载的js文件中有对dom的操作,重定向,输出document等暗许行为,所以同步才是最安全的。
平凡会把要加载的js放到body利落标签在此之前,使得js可在页面最终加载,尽量减弱阻塞页面的渲染。那样可以先让页面突显出来。

共同加载流程是瀑布模型,异步加载流程是出新模型。

你或者感兴趣的篇章:

js获取显示屏坐标

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7"/>
    <meta name="auther" content="fq" />
    <title>获取鼠标坐标</title>
</head>
<body>
<script type="text/javascript">
    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;
</script>
X:<input id="xxx" type="text" /> Y:<input id="yyy" type="text" />
</body>
</html>  

注释:
1.documentElement 属性可回到文档的根节点。
2.scrollTop() 为滚动条向下活动的相距
3.document.documentElement.scrollTop 指的是滚动条的垂直坐标
4.document.documentElement.clientHeight 指的是浏览器可知区域高度

DTD已扬言的情景下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

假使在页面中添加那行标记的话

IE

document.body.clientWidth ==> BODY对象宽度
document.body.clientHeight ==> BODY对象高度
document.documentElement.clientWidth ==> 可见区域宽度
document.documentElement.clientHeight ==> 可见区域高度

Firefox

document.documentElement.scrollHeight ==> 浏览器所有内容高度
document.body.scrollHeight ==> 浏览器所有内容高度
document.documentElement.scrollTop ==> 浏览器滚动部分高度
document.body.scrollTop ==>始终为0
document.documentElement.clientHeight ==>浏览器可视部分高度
document.body.clientHeight ==> 浏览器所有内容高度

Chrome

document.documentElement.scrollHeight ==> 浏览器所有内容高度
document.body.scrollHeight ==> 浏览器所有内容高度
document.documentElement.scrollTop==> 始终为0
document.body.scrollTop==>浏览器滚动部分高度
document.documentElement.clientHeight ==> 浏览器可视部分高度
document.body.clientHeight ==> 浏览器所有内容高度

浏览器所有内容高度即浏览器整个框架的可观,包涵滚动条卷去部分+可视部分+底部隐藏部分的高度总和

浏览器滚动部分高度即滚动条卷去一些中度即可视顶端距离整个对象顶端的莫大。

 

综上

1、document.documentElement.scrollTopdocument.body.scrollTop一向有三个为0,所以可以用那八个的和来求scrollTop

2、scrollHeight、clientHeight
DTD已扬言的情景下用documentElement,未注明的动静下用body

clientHeight在IE和FF下,该属性没什么差别,都是指浏览器的可视区域,即除去浏览器的那些工具栏状态栏剩下的页面展示空间的高度。

PageX和clientX

PageX:鼠标在页面上的地方,从页面左上角开头,即是以页面为参考点,不随滑动条移动而生成

clientX:鼠标在页面上可视区域的任务,从浏览器可视区域左上角开头,即是以浏览器滑动条此刻的滑行到的地方为参考点,随滑动条移动
而变化.

然而喜剧的是,PageX只有FF特有,IE则尚未这么些,所以在IE下使用那一个:

PageY=clientY+scrollTop-clientTop;(只讨论Y轴,X轴同理,下同)

scrollTop表示的是被浏览器滑动条滚过的尺寸

offsetX:IE特有,鼠标相比较于触发事件的元素的位置,以元素盒子模型的内容区域的左上角为参考点,如果有boder,大概出现负值

只有clientXscreenX
大快人心是W3C标准.其余的,都纠结了.
最给力的是,chromesafari一条龙通杀!完全帮衬具备属性

图片 3

js拖拽效果

<!doctype html>
<html lang="zn-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
    <title></title>
    <style type="text/css">
        #login{
            height: 100px;
            width: 100px;
            border: 1px solid black;
            position: relative;
            top:200px;
            left: 200px;
            background: red;
        }
    </style>
</head>
<body>
<div id="login"></div>
<script type="text/javascript">
    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;
        }
    }
</script>
</body> 
</html>

offsetTop 重回的是数字,而 style.top
重返的是字符串,除了数字外还隐含单位:px

js实现insertAfter方法

DOM里还有1个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成分的同级下1个节点是不是存在,若是存在就在该节点前边添加bullet节点,尽管不存在,就印证target是终极3个节点了,直接在前边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 m=3;
var n=5;
var sum=m+n;
var result = sum.toString(2);
console.log(result); //1000

二进制输出:toString函数

js使用console.log在console中打印音信影响属性吗?

问:小编看许多的网站在生产环境并不曾注释掉开发的时候利用的console.log,那样会影响网站加载的性质吗?影响多大?
答:其实若是调用函数,就会有总体性的难点,只是影响大与小的题材。可以用console.timeconsole.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).selectedindex=index;//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 =》 false
  • null =》
    false
  • 布尔值 =》 不用转换
  • 数字=》 0NaN转化成false,其余数字类型转换来true
  • 字符串=》 只有空字符串''转换成false,其余都转换来true
  • 对象 =》 全部转换为true

JS 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

 

相关文章