Onelong

分享知识,与你一起进步......
RSS icon Home icon
  • jquery与传统javascript

    post by onelong / 2009-10-12 19:40 Monday [jquery]

    js:window.onload=fn
    jquery:$(window).onload=fn
    注意onload只能加载一个的,window是一个对象
    $(document).ready(fn)  这句是文档的DOM加载完后执行fn,而onload事件是整个网页的内容加载完后执行,就效率而言后者高!
    js:document.getElementById("msg")
    jquery:$("#msg")
       等等,你想了解跟多吗?
               http://docs.jquery.com/Main_Page
     

  • js事件处理机制

    post by onelong / 2009-10-12 0:44 Monday [javascript]

    document.getElementById("Div").onclick = showmsg;
     function showmsg(){
         alert("!!!")
    }
      等效于:
     <div id="Div" onclick="alert("!!!");">单击事件</div>

    阅读全文>>

  • Jquery拒绝非数字输入

    post by onelong / 2009-10-11 18:48 Sunday [jquery]

    <html>
    <head>
    <script language="javascript" src="jquery/jquery_min.js"></script>
    <script language="javascript">
    $(document).ready(function(){
    $('input').keypress(function(event) {
          if (!$.browser.mozilla) {
           if (event.keyCode && (event.keyCode < 48 || event.keyCode > 57)) // IE
            event.preventDefault();
          }
          else {
           if (event.charCode && (event.charCode < 48 || event.charCode > 57)) //firefox
            event.preventDefault();
          }
         });}) </script>
    </head>
    <body>
    <input type="text" />
    </body>
    </html>
      数字的keyCode为48--57
      大写字母的keyCode为97--122;小写字母的keyCode为65--90
      这样就可以把用法扩展开来了

  • js实现跨域调用

    post by onelong / 2009-10-11 2:03 Sunday [javascript]

    主调文件index.html
    <script type="text/javascript">
    function getProfile(str) {
        var arr = str;
        document.getElementById('nick').innerHTML = arr.nick;
    }
    </script>
    <body><div id="nick"></div></body>
    <script type="text/javascript" src="http://www.ways2u.com/demo/profile.php"></script>

    阅读全文>>

  • 网页的经典布局

    post by onelong / 2009-10-11 1:55 Sunday [网页配色设计]

  • javascript 让你的文本框只输入数字

    post by onelong / 2009-10-10 20:22 Saturday [javascript]

    这是个例子:
    <html>
    <body>
    只能输入数字:<input id='txt' value="" maxlength="20" />
    <script language="javascript">
    function $(id){return document.getElementById(id)}
    function ie(){if(navigator.userAgent.indexOf("MSIE")>0){return true}else{return false}}
    function addevent(){
    if(ie()==true){
      $('txt').attachEvent("onpropertychange",txChange);
    }else{
      $('txt').addEventListener("input",txChange,false);
    }}
    function deleteevent(){
     if(ie()==true){
     $('txt').detachEvent("onpropertychange",txChange);}
     else{
     $('txt').removeEventListener("input",txChange,false)
     }
     }
    function txChange(){
     deleteevent();
     var txt=$('txt').value;
     txt=txt.replace(/\D+/g,'');
     $('txt').value=txt;
     addevent();
    }
    window.onload=addevent();
    </script>
    </body>
    </html>
         演示

  • javascript eval()的使用

    post by onelong / 2009-10-10 19:12 Saturday [javascript]

    <script language="javascript">
     var define = "{name:'onelong',email:'zzfeihua@163.com'}";
     eval("data = "+define);  //字符要通过运算才能转为对象或数组!
     alert("name:"+data.name);
     alert("email:"+data.email);
    </script>
    这个函数在ajax+json的处理中很有用!

  • js判断是否图片加载完了

    post by onelong / 2009-10-10 18:39 Saturday [javascript]

    <script>
    function SImage(callback){
        var img = new Image();
        this.img = img;
        var appname = navigator.appName.toLowerCase();
        if (appname.indexOf("netscape") == -1){
           //ie
            img.onreadystatechange = function () {
                if (img.readyState == "complete")
                {
                    callback(img);
                }
            };
        } else {
           //firefox
            img.onload = function () {
                if (img.complete == true)
                {
                    callback(img);
                }
            }
        }
    }

    阅读全文>>

  • 可筛选下拉框

    post by onelong / 2009-10-9 23:05 Friday [jquery插件]

    使用方法:
    <script type='text/javascript' src='sfilter.js'></script>
    <link rel="stylesheet" href='sfilter.css' type="text/css" />

    调用如下:
    <script type="text/javascript">
    $(document).ready(function(){
     $("#test").sfilter();   //test是select的id名
    }
    );
    </script>

    附件下载:
    sfilter.rar 1.86KB
    jquery.rar 18.81KB

  • JS预览客户端图片

    post by onelong / 2009-10-9 16:35 Friday [javascript]

    <html>
    <head>
    <style>
    #preview {
    width: 270px;
    height: 129px;
    }
    </style>
    <!--[if IE]>
    <style>
    #preview {
    filter:progid:DXImageTransform.Microsoft.AlphaImageLoader(sizingMethod=image);
    }
    </style>
    <![endif]-->
    <script>
    function preview(image)
    {
    if ("Microsoft Internet Explorer" == navigator.appName) {
    document.getElementById("image").style.display = "none";
    document.getElementById("preview").filters.item("DXImageTransform.Microsoft.AlphaImageLoader").src = image.value;
    } else if ("Netscape" == navigator.appName){
    document.getElementById("image").src = image.files[0].getAsDataURL();
    } else {
    alert("Not Support!");
    }
    }
    </script>
    </head>
    <body>
    <input type="file" onChange="preview(this);" />
    <div id="preview">
    <img id="image" src="http://www.baidu.com/img/baidu_logo.gif" />
    </div>
    </body>
    </html>

  • js-scrollLeft,clientWidth,offsetLeft

    post by onelong / 2009-10-8 22:25 Thursday [javascript]

    obj.scrollLeft:设置或获取位于对象左边界和窗口中目前可见内容的最左端之间的距离
    obj.scrollTop:设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离

    阅读全文>>

  • css技巧

    post by onelong / 2009-10-8 17:35 Thursday [html+css]

    1.vertical-align:middle; 将行距增加到和整个DIV一样高 line-height:200px; 然后插入文字,就垂直居中了。
    2.设置为float的div在ie下设置的margin会加倍。这是一个ie6都存在的bug。解决方案是在这个div里面加上display:inline;
    #float{
    float:left;
    margin:5px;/*IE下理解为10px*/
    display:inline;/*IE下再理解为5px*/
    }
    3.IE不认得min-这个定义
    4.float的div闭合;清除浮动;自适应高度。.clear{ clear:both;}
    5.a链接加边框和背景色,需设置 display: block, 同时设置 float: left 保证不换行。
    6.如果实在没有办法解决一些细节问题,可以用这个方法.FF对于”!important”会自动优先解析,然而IE则会忽略。div{margin:30px!important;margin:28px;}
    7.使用IE专用的条件注释
    <link rel=”stylesheet” type=”text/css” href=”css.css” />
    <!–[if IE 7]>
    <link rel=”stylesheet” type=”text/css” href=”ie7.css” />
    <![endif]–>

    <!–[if lte IE 6]>
    <link rel=”stylesheet” type=”text/css” href=”ie.css” />
    <![endif]–>