js/jquery/htmlフロントエンド開発常用コードクリップ

1.IE条件コメント
条件コメントの概要

IE中の条件注釈(Conditional comments)はIEのバージョンとIE非IEに対して優れた区別能力を持ち、WEB設計でよく使われるhack方法である.条件注記はIE 5以上でのみ使用でき、IE 10以上ではサポートされていません.

複数のIEがインストールされている場合、条件コメントは最高バージョンのIEを基準にします.

条件注釈の基本構造はHTMLの注釈()と同じです.そのためIE以外のブラウザはそれらを普通の注釈と見なして完全に無視します.

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]–>

 
抜粋リンク:http://segmentfault.com/blog/liangyi/1190000002409131
2.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();//      

});

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

 
4.jsユーザーが微信ブラウザを使っているかどうかをどのように判断するか
キーワードMicroMessengerに基づいて、微信内蔵のブラウザかどうかを判断します.判断関数は次のとおりです.

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

 
 
5.JS,Jquery各種画面の幅と高さを取得する
Javascript:
Webページの表示領域の幅:document.body.ClientWidth Webページの表示領域の高さ:document.body.ClientHeightウェブページの表示領域幅:document.body.offsetWidth(境界線の幅を含む)Webページの表示領域の高さ:document.body.offsetHeight(エッジ線の高さを含む)ページ本文全文幅:document.body.scrollWidthホームページ本文全文高:document.body.scrollHeightウェブページが巻かれた高さ:document.body.scrollTopのページが巻かれた左:document.body.scrollLeftのホームページの本文の部分の上で:window.screenTopのホームページの本文の部分の左:window.スクリーン解像度の高さ: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

})

 
6.jqueryテキストボックスの読み取り専用状態と読み取り可能状態の相互変換

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

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

8.現在の日付の取得

var calculateDate = function(){

    var date = newDate();

var weeks = [" "," "," "," "," "," "," "];

return date.getFullYear()+" "+(date.getMonth()+1)+" "+

      date.getDate()+"    "+weeks[date.getDay()];

}

$(function(){

$("#dateSpan").html(calculateDate());

})

9.時間カウントダウン(固定カウントダウンの終了時間)

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

10.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();

 
11.ブラウザを判断する簡単な有効な方法

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     
    }    
} 

 
12.0.1 s毎に画像の経路を変更する

<divid="tt"><imgsrc="images/1.jpg"alt=""/></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);

})() 

 
13.ある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();
    }
}) 

 
14.jsある年ある月のどの日が土曜日と日曜日であるかを取得する

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

 

 
<scripttype="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>

 
 
15.携帯電話でブラウザのWebページのスクロールを禁止する方法
方法1:

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

 
方法2:

 <script type="text/javascript">

  document.addEventListener('touchmove', function(event) {

    event.preventDefault();

})

 </script>

 
 
16.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">