首页 > Web开发 > 详细

js一点代码备用

时间:2016-02-08 09:42:25      阅读:239      评论:0      收藏:0      [点我收藏+]
加载次序
1.1等页面加载完毕
<script type="text/javascript">
jQuery(window).load(function(){
    ...
});
</script>
$(window).load(function(){...})   
1.2一开始加载
$(document).ready(function(){}),或简写为$(function(){})  
1.3在所有DOM元素加载之前执行的jQuery代码
<script type="text/javascript">
(function() {
alert("DOM还没加载哦!");
        })(jQuery)
</script>

2. toggle函数
var myAudio = document.getElementById("myAudio");
    $("#pic1").toggle(function () {
        myAudio.src = "upfiles/music/01.mp3";
        myAudio.play();
        $("#pic1").removeClass(navout);
        $("#pic1").addClass(navOn);
    }, function () {
        myAudio.pause();
        $("#pic1").removeClass(navOn);
        $("#pic1").addClass(navout);
    });
3.添加css
$("#creatbox, #creatboxType2").css("display", "none");
document.getElementById("btn1").className="down_btn1 font18bg";

4.mouseover函数
$(.title-list li).mouseover(function(){
        var liindex = $(.title-list li).index(this);
        $(this).addClass(on).siblings().removeClass(on);
        $(.product-wrap div.product).eq(liindex).fadeIn(150).siblings(div.product).hide();
        var liWidth = $(.title-list li).width();
        $(.lanrenzhijia .title-list p).stop(false,true).animate({left : liindex * liWidth + px},300);
    });

5.click函数
$(document).ready(function(){
    //页面中的DOM已经装载完成时,执行的代码
    $("#Mul > li > a").click(function(){
        //找到主菜单项对应的子菜单项
        var ulNode = $(this).next("ul");
        ulNode.slideToggle();
        changeIcon($(this));
    });
});

在元素上加onclick()
<a class="bootstro" onclick="SeachByBytton();" id="btnSearch">
    function SeachByBytton() {
        AssessmentVModel.GetData();
    }
或者
<input type="button" id="btnPrint" value="Export" />
        $(document).on(click, #btnPrint, function () {
            ExportToPDF($(#divtoPrint),[], 导出标题, PDFPageType.Portrait);
        });
6.开关灯
            $(".SoundHuaLi ul li").hover(
                    function () {
                        $(this).siblings().find(".li_bg_02").fadeIn(250)
                    },
                    function () {
                        $(this).siblings().find(".li_bg_02").fadeOut(50)
                    }
                )

7. getElementsByTagName
var aBtn=oDiv.getElementsByTagName(input);

8.元素选中状态
<script>
window.onload = function(){
    var oNav = document.getElementById(nav);
    var aLi  = oNav.getElementsByTagName(a);
    for( var i = aLi.length; i--;){
        aLi[i].onclick = function(){
             for( var i = aLi.length; i--;){
                 aLi[i].className = ‘‘;
             }
             this.className = active;
        }
    }
}
    </script>
<script type="text/javascript">
(function() {
    var radioWrap = document.getElementById("radio_wrap"),
        li = radioWrap.getElementsByTagName("li");
      for(var i = 0; i < li.length; i++){
        li[i].onclick = function() {
            for(var i = 0; i < li.length; i++){
                li[i].className = "";
            }
            this.className = "checked";
        }
    }
})();
</script>

9.添加多个样式属性
var oDiv=document.getElementById(div1);    
    oDiv.style.width=300px;
    oDiv.style.height=300px;
    oDiv.style.background=green;

10.让titile滚动
 <script language=javascript>
        var text = document.title
        var timerID
        function newtext() {
            clearTimeout(timerID)
            document.title = text.substring(1, text.length) + text.substring(0, 1)
            text = document.title.substring(0, text.length)
            timerID = setTimeout("newtext()", 200)
        }
        $(window).load(function () { newtext() })
    </script>

$(div).css({ height: 200px, background: #0094ff }); 
11.下拉导航
<script>
            $(document).ready(function () {
                $(li.nLi).mousemove(function () {
                    $(this).find(ul).slideDown();//you can give it a speed
                });
                $(li.nLi).mouseleave(function () {
                    $(this).find(ul).slideUp("fast");
                });
            });
        </script>

12.滚动事件
$(window).scroll(function(){
        if($(this).scrollTop() > 100){                
            $(#updown).fadeIn(300);             
            $("#logowraper").hide();
            
        } else if($(this).scrollTop() < 100) {    
            $(#updown).fadeOut(300);             
            $("#logowraper").show();
        };
    });


13.相对于页面固定
html中:
<script type="text/javascript"> 
$(".navbg").capacityFixed();
</script>
js中:
(function($){
    $.fn.capacityFixed = function(options) {
        var opts = $.extend({},$.fn.capacityFixed.deflunt,options);
        var FixedFun = function(element) {
            var top = opts.top;
            element.css({
                "top":top
            });
            $(window).scroll(function() {
                var scrolls = $(this).scrollTop();
                if (scrolls > top) {
                    if (window.XMLHttpRequest) {
                        element.css({
                            position: "fixed",
                            top: 0                            
                        });
                    } else {
                        element.css({
                            top: scrolls
                        });
                    }
                }else {
                    element.css({
                        position: "absolute",
                        top: top
                    });
                }
            });
            element.find(".close-ico").click(function(event){
                element.remove();
                event.preventDefault();
            })
        };
        return $(this).each(function() {
            FixedFun($(this));
        });
    };
    $.fn.capacityFixed.deflunt={
        right : 0,//相对于页面宽度的右边定位
        top:95
    };
})(jQuery);

14.固定图片的最大宽
var maxwidth = 580;
$(".news_text img").each(function(){
  if ($(this).width() > maxwidth) {
   $(this).width(maxwidth);}
   }); 

15.判空
if(send==‘‘ || send==undefined || send==null)
if (send.length>0) 

16.禁用右键
<script type="text/javascript">
    function stop() {
        return false;
    }
    document.oncontextmenu = stop;
    document.onselectstart = stop;
    document.oncopy = stop;
    document.oncut = stop;
    document.onpaste = stop;
</script>

17.密码输入框样式
<p>密<em style="padding:0 1em;"></em>码:<input name="passwd" type="password" id="passwd"  class="log_txt" style="display:none" /><input name="txt_passwd" type="text" id="txt_passwd" value="默认密码:888888" class="log_txt" />
                        <script>
                            $("#txt_passwd").focus(function () {
                                $("#txt_passwd").hide();
                                $("#passwd").show();
                                $("#passwd").focus();
                            });
                            $("#passwd").blur(function () {
                                if ($("#passwd").val() == "") {
                                    $("#txt_passwd").show();
                                    $("#passwd").hide()
                                }
                            });
                        </script>
                    </p>

18.输入框选中与失去时样式
<script language="javascript" type="text/javascript">
function glb_searchTextOnfocus(obj) {
    if (obj.value == 请输入您想要的作品...)
        obj.value = ‘‘;
    obj.style.color = #333;
}
function glb_searchTextOnBlur(obj) {
    if (obj.value == ‘‘) {
        obj.value = 请输入您想要的作品...;
        obj.style.color = #98BC00;
    } else {
        obj.style.color = #333;
    }
}
</script>
<input name="q" type="text" class="searchkey " value="请输入您想要的作品..." onfocus="glb_searchTextOnfocus(this);"  onblur="glb_searchTextOnBlur(this);" maxlength="70" />

19.监听回车 
    $(document).keydown(function(e) {
    if (e.keyCode == 13) {
        $("#btnLogin").click();
    }
    })

20点击隐藏与显示切换
20.1隐藏的为选择元素只有一个同级
        <script>
        $(function () {
            $(".showbo").each(function () {
                $(this).click(function () {
                    if ($(this).next().css("display") == "none") {
                        $(this).next().css("display", "block");
                    } else {
                        $(this).next().css("display", "none");
                    }
                });
            });
        })
    </script>
     <div class="showbo">
                                <a href="javascript:void(0)" title="@item.DContent.Title">
                                    <span>@(++i)、</span>
                                    @(new HtmlString(GetSubString(item.DContent.Title, 62)))
                                </a>
                                <span class="time">@item.DContent.AddDate.ToString("yyyy-MM-dd")</span>
                            </div>
                            <div class="qusans"><span class="qpre">解疑:</span>@item.DContent.Summary</div>

20.2隐藏的为选择元素多个同级
                $(".ziyuanmingtit").each(function () {
                    $(this).click(function () {
                        if ($(this).siblings(".zyhih").css("display") == "none") {
                            $(this).siblings(".zyhih").css("display", "block");
                        } else {
                            $(this).siblings(".zyhih").css("display", "none");
                        }
                    });
                });

        <div class="ziyuanming ziyuanmingtit"><a>@item.DContent.Title</a></div>
                            <div class="ziyuanda">@item.DContent.AddDate.ToString("yyyy-MM-dd")</div>
                            <div class="zyhih">
                                <span class="prepre">推荐理由:</span><div class="ppcot">@item.DContent.CustomField09</div>
                                <span class="prepre">馆员回复:</span><div class="ppcot">@item.DContent.CustomField10</div>
                            </div>
21. js除法四舍五入保留小数点后两位写法
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">   
<html> <head><title>floatDecimal.html</title>           
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">      
<meta http-equiv="description" content="this is my page">      
<meta http-equiv="content-type" content="text/html; charset=UTF-8">   
    <script type="text/javascript">          
//保留两位小数    
        //功能:将浮点数四舍五入,取小数点后2位          
function toDecimal(x) {   
            var f = parseFloat(x);              
if (isNaN(f)) {   
                return;              
}              
f = Math.round(x*100)/100;              
return f;          
}       
        //制保留2位小数,如:2,会在2后面补上00.即2.00          
function toDecimal2(x) {              
var f = parseFloat(x);              
if (isNaN(f)) {   
                return false;              
}              
var f = Math.round(x*100)/100;              
var s = f.toString();              
var rs = s.indexOf(.);              
if (rs < 0) {   
                rs = s.length;                  
      s += .;   
            }              
while (s.length <= rs + 2) {   
                s += 0;              
}              
return s;   
}                     
function fomatFloat(src,pos){      
             return Math.round(src*Math.pow(10, pos))/Math.pow(10, pos);             
}          
//四舍五入          
alert("保留2位小数:" + toDecimal(3.14159267));          
alert("强制保留2位小数:" + toDecimal2(3.14159267));          
alert("保留2位小数:" + toDecimal(3.14559267));          
alert("强制保留2位小数:" + toDecimal2(3.15159267));          
alert("保留2位小数:" + fomatFloat(3.14559267, 2));          
alert("保留1位小数:" + fomatFloat(3.15159267, 1));   
                   //五舍六入          
alert("保留2位小数:" + 1000.003.toFixed(2));          
alert("保留1位小数:" + 1000.08.toFixed(1));   
alert("保留1位小数:" + 1000.04.toFixed(1));          
alert("保留1位小数:" + 1000.05.toFixed(1));                     
//科学计数          
alert(3.1415.toExponential(2));          
alert(3.1455.toExponential(2));   
alert(3.1445.toExponential(2));          
alert(3.1465.toExponential(2));          
alert(3.1665.toExponential(1));   
        //精确到n位,不含n位          
alert("精确到小数点第2位" + 3.1415.toPrecision(2));          
alert("精确到小数点第3位" + 3.1465.toPrecision(3));          
alert("精确到小数点第2位" + 3.1415.toPrecision(2));          
alert("精确到小数点第2位" + 3.1455.toPrecision(2));          
alert("精确到小数点第5位" + 3.141592679287.toPrecision(5));      
</script>      
</head>         
<body>      
This is my HTML page. <br>    
</body>  
</html>
22.清空文本输入框的值:
     function ResetValue() {
        var obj = $("input");
        for (var i = 0; i < obj.length; i++)
        {
            if (obj[i].type == "text")
            {
                obj[i].value = "";
            }
        }
}

 

js一点代码备用

原文:http://www.cnblogs.com/shy1766IT/p/5184887.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!