js/jquery/html前端开发常用到代码片段

最新推荐文章于 2022-07-01 16:52:01 发布

h_qingyi

最新推荐文章于 2022-07-01 16:52:01 发布

阅读量744

点赞数

分类专栏： html javascript jquery 文章标签： js web jquery

html 同时被 3 个专栏收录

6 篇文章 1 订阅

订阅专栏

javascript

6 篇文章 0 订阅

订阅专栏

jquery

2 篇文章 0 订阅

订阅专栏

js/jquery/html前端开发常用到代码片段

1.IE条件注释

条件注释简介

IE中的条件注释（Conditional comments）对IE的版本和IE非IE有优秀的区分能力，是WEB设计中常用的hack方法。
条件注释只能用于IE5以上，IE10以上不支持。
如果你安装了多个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:

网页可见区域宽： 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

})

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.1s改变图片的路径

<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.如何在手机上禁止浏览器的网页滚动

方法一：

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

方法二：

 <script type="text/javascript">

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

    event.preventDefault();

})

 </script>

16.改变type=file默认样式，"浏览"等字体

<input type="file" id="browsefile" style="visibility:hidden" οnchange="filepath.value=this.value">

<input type="button" id="filebutton" value="" οnclick="browsefile.click()">

<input type="textfield" id="filepath">

        
        
         
         作者：
         
         风雨后见彩虹
        
        
        
        
         
         出处：
         
         http://www.cnblogs.com/moqiutao/