Onelong

分享知识,与你一起进步......
RSS icon Home icon
  • CSS HACK

    post by onelong / 2009-10-8 15:01 Thursday [html+css]

    .class{
    color:#FFF;/* FF,OP,IE8 */
    [;color:#0F0;]/* Sa,CH */
    *color:#FF0;/* IE7 */
    _color:#F00;/* IE6 */
    }
    .class{
    background-color:#332200;/* 所有浏览器*/
    }
    html* .class{
    background-color:#FF00FF;/* Sa IE7 CH */

    *+html .class{
    *background-color:#0000FF;/* IE7 */
    }

    * html .class{
    background-color:#00FFFF;/* IE6 */
    }

    html*~/**/body .class{
    background-color:#055000;/* IE8 */
    }

    @media all and(min-width:0){
    .class{
     background-color:#FF5500;/* OP10版本以上无效  */
       }
    }

  • javascript创建事件

    post by onelong / 2009-10-7 21:12 Wednesday [javascript]

    <html>
    <body>
    <div id="obj" style="width:200px; height:200px; background-color:#999" onmousemove="this.style.backgroundColor='red'"></div><br />
    <input type="button" value="点击" onclick="check()" />//点击button就会创建obj的onmousemove
    <script language="javascript">
    function check(){
      var obj = document.getElementById('obj');
        if( document.createEvent )     //IE
        {
            var evObj = document.createEvent('MouseEvents');
            evObj.initEvent( 'mousemove', true, false );
           obj.dispatchEvent(evObj);
        }
    else if( document.createEventObject ) //firefox
    {
          obj.fireEvent('onmousemove');
    }  }
    </script>
    </body>
    </html>

    1. createEvent(eventType)
    参数:eventType 共5种类型:
        Events :包括所有的事件.
        HTMLEvents:包括 'abort', 'blur', 'change', 'error', 'focus', 'load', 'reset', 'resize', 'scroll', 'select', 'submit', 'unload'. 事件
        UIEevents :包括 'DOMActivate', 'DOMFocusIn', 'DOMFocusOut', 'keydown', 'keypress', 'keyup'.
         间接包含 MouseEvents.
         MouseEvents:包括 'click', 'mousedown', 'mousemove', 'mouseout', 'mouseover', 'mouseup'.
         MutationEvents:包括 'DOMAttrModified', 'DOMNodeInserted', 'DOMNodeRemoved', 'DOMCharacterDataModified', 'DOMNodeInsertedIntoDocument', 'DOMNodeRemovedFromDocument', 'DOMSubtreeModified'.
    2. 在createEvent后必须初始化,为大家介绍5种对应的初始化方法
    HTMLEvents 和 通用 Events:
        initEvent( 'type', bubbles, cancelable )
        UIEvents :initUIEvent( 'type', bubbles, cancelable, windowObject, detail )
        MouseEvents:initMouseEvent( 'type', bubbles, cancelable, windowObject, detail, screenX, screenY, clientX, clientY, ctrlKey, altKey, shiftKey, metaKey, button, relatedTarget )
        MutationEvents :initMutationEvent( 'type', bubbles, cancelable, relatedNode, prevValue, newValue, attrName, attrChange )
    3. 在初始化完成后就可以随时触发需要的事件了,为大家介绍targetObj.dispatchEvent(event)
       使targetObj对象的event事件触发需要注意的是在IE 5.5+版本上请用fireEvent方法,还是浏览兼容的考虑

  • jQuery的一些特性和用法

    post by onelong / 2009-10-7 18:32 Wednesday [jquery]

    1.精准简单的选择对象(dom):

    $('#element');// 相当于document.getElementById("element")
    $('.element');//Class
    $('p');//html标签
    $("form > input");//子对象
    $("div,span,p.myClass");//同时选择多种对象
    $("tr:odd").css("background-color", "#bbbbff");//表格的隔行背景
    $(":input");//表单对象
    $("input[name='newsletter']");//特定的表单对象

    2.对象函数的应用简单和不限制:

    阅读全文>>

  • javascript框架和jquery

    post by onelong / 2009-10-7 18:25 Wednesday [jquery]

      随着WEB2.0及ajax思想在互联网上的快速发展传播,陆续出现了一些优秀的Js框架,其中比较著名的有Prototype、YUI、jQuery、mootools、Bindows以及国内的JSVM框架等,通过将这些JS框架应用到我们的项目中能够使程序员从设计和书写繁杂的JS应用中解脱出来,将关注点转向功能需求而非实现细节上,从而提高项目的开发速度。
      jQuery是继prototype之后的又一个优秀的Javascript框架。它是由 John Resig 于 2006 年初创建的,它有助于简化 JavaScript™ 以及Ajax 编程。有人使用这样的一比喻来比较prototype和jQuery:prototype就像Java,而jQuery就像ruby. 它是一个简洁快速灵活的JavaScript框架,它能让你在你的网页上简单的操作文档、处理事件、实现特效并为Web页面添加Ajax交互。
    它具有如下一些特点:
      1、代码简练、语义易懂、学习快速、文档丰富。
      2、jQuery是一个轻量级的脚本,其代码非常小巧,最新版的JavaScript包只有20K左右。
      3、jQuery支持CSS1-CSS3,以及基本的xPath。
      4、jQuery是跨浏览器的,它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。
      5、可以很容易的为jQuery扩展其他功能。
      6、能将JS代码和HTML代码完全分离,便于代码和维护和修改。
      7、插件丰富,除了jQuery本身带有的一些特效外,可以通过插件实现更多功能,如表单验证、tab导航、拖放效果、表格排序、DataGrid,树形菜单、图像特效以及ajax上传等。
      jQuery的设计会改变你写JavaScript代码的方式,降低你学习使用JS操作网页的复杂度,提高网页JS开发效率,无论对于js初学者还是资深专家,jQuery都将是您的首选。
      jQuery适合于设计师、开发者以及那些还好者,同样适合用于商业开发,可以说jQuery适合任何JavaScript应用的地方,可用于不同的Web应用程序中。
    官方站点:http://jquery.com/ 中文站点:http://jquery.org.cn/

    阅读全文>>

  • JavaScript事件处理

    post by onelong / 2009-10-7 2:43 Wednesday [javascript]

     IE5/Mac 的事件对象既定义了 srcElement 属性,也定义了 target 属性,这两个属性都指向接收事件的元素。需要抽象的最重要的事件对象属性可能得算指向接收事件的 HTML 元素的引用。NN4 和 W3C 的事件对象采用相同的属性名(target),而 IE4+ 的事件对象则使用 srcElement 属性
    代码1:
    function functionName(evt) {
          evt = (evt) ? evt : ((window.event) ? window.event : "")
          if (evt) {
              var elem
              if (evt.target) {
                  elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target
              } else {
                  elem = evt.srcElement
              }
              if (elem) {
                  // process event here
              }
          }
    }
    代码2:
    function getTargetElement(evt) {
          var elem
          if (evt.target) {
              elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target
          }else {
              elem = evt.srcElement
          }
          return elem
    }

    阅读全文>>

  • js图片加载错误的处理

    post by onelong / 2009-10-7 0:27 Wednesday [javascript]

    <html>
      <body>
      <div id="show">加载中.......</div>//加载过程要显示的内容或gif的小动画
      <script language="javascript">
      function $(id){
       return document.getElementById(id);
       }
      var image=new Image();
      image.src='http://www.xd26.com/photo/up_files/2009-03-27/1238121079Qa5x.jpg';
      image.onload=function(){//加载完成后执行的事件
     $("show").innerHTML="<img style='width:20%; height:20%' src="+image.src+">";
     }
     image.onerror=function(){//加载错误的处理方式;
     $("show").innerHTML="<img style='width:20%; height:20%' src='http://hiphotos.baidu.com/vga1/pic/item/021a645d0fb12061fbf2c0b9.jpg'>";
      }
      </script>
      </body>
      </html>

    阅读全文>>

  • 正则匹配的语法和属性

    post by onelong / 2009-10-6 23:41 Tuesday [正则表达式]

    *         "ab*":        {0,}匹配字符串a和0个或者更多b组成的字符串("a", "ab", "abbb", etc.);  
    +         "ab+":       {1,}和上面一样,但最少有一个b ("ab", "abbb", etc.);                   
    ?         "ab?":       {0,1}匹配0个或者一个b;                                                
    $         "a?b+$":   匹配以一个或者0个a再加上一个以上的b结尾的字符串.尾
    ^         "^The":       匹配以 "The"开头的字符串; 头
    { }       "ab{2}":     个数匹配一个a后面跟两个b(一个也不能少)("abb");                
              注释:在大括号里面限制字符出现的个数。例如:"ab{2,}":   最少为两个b("abb", "abbbb", etc.);"ab{3,5}":   2-5个b("abbb", "abbbb", or "abbbbb").
    ( )      "a(bc)?": 整体匹配 a 后面跟0个或者一个"bc";                                   
           注释:把一定数量的字符放到小括号里。"a(bc){1,5}":     一个到5个 "bc."
    |      "hi│hello":      或匹配含有"hi" 或者 "hello" 的 字符串;                
            注释:相当于OR 操作
    "(b│cd)ef":    匹配含有 "bef" 或者 "cdef"的字符串;
    "(a│b)*c":     匹配含有这样 - 多个(包括0个)a或b,后面跟一个c的字符串 的字符串.
    .   "a.[0-9]":      一个a跟一个字符再跟一个数字的                                 
          注释:可以代表所有的单一字符
    "^.{3}$":        以三个字符结尾 .
    [ ]      "[ab]":      单个匹配单个的 a 或者 b ( 和 "a│b" 一样);                      
    注释:中括号括住的内容只匹配一个单一的字符
    "[a-d]":         匹配'a' 到'd'的单个字符 (和"a│b│c│d" 还有 "[abcd]"效果一样);
    "^[a-zA-Z]":     匹配以字母开头的字符串
    "[0-9]%":        匹配含有 形如 x% 的字符串
    ",[a-zA-Z0-9]$": 匹配以逗号在加一个数字或字母结尾的字符串
    / /     注释:定界符之间的部分就是将要在目标对象中进行匹配的模式
    \s     用于匹配单个空格符,包括tab键和换行符
    \S    用于匹配除单个空格符之外的所有字符
    \d    用于匹配从0到9的数字
    \D   匹配一个非数字字符
    \w   用于匹配字母,数字或下划线字符
    \W   用于匹配所有与\w不匹配的字符
    .       用于匹配除换行符之外的所有字符
    \b     定位符 匹配一个单词的分界线
    \B      匹配非单词边界
    [^ ]    否定符
    \         转义符
    [ ]      字符集合,匹配所包含的任意一个字符
    ^        匹配输入字符串的开始位置
    $         匹配输入字符串的结束位置
    *    匹配前面的子表达式零次或多次。例如,zo* 能匹配 "z" 以及 "zoo"。* 等价于{0,}。
    +     匹配前面的子表达式一次或多次。例如,'zo+' 能匹配 "zo" 以及 "zoo",但不能匹配 "z"。+ 等价于 {1,}。
    ?    匹配前面的子表达式零次或一次。例如,"do(es)?" 可以匹配 "do" 或 "does" 中的"do" 。? 等价于 {0,1}。
    4.属性
    i    执行大小写不敏感的匹配
    g  执行一个全局的匹配,找到所有的匹配

  • js判断是否为整数或浮点数

    post by onelong / 2009-10-6 23:26 Tuesday [javascript]

    <html>
    <body>
    <input type="text" id="txt" onblur="check('txt')"/>
    </body>
    <script language="javascript">
    function check(id){
     var txt=document.getElementById(id).value;
     var re = /^[-]?[0-9]+[\.]?[0-9]*$/;//或者/^[0-9]+\.?[0-9]*$/或者/^[0-9]+.?[0-9]*$/判断是否为整数或浮点数
     if(re.test(txt)){
      alert('数字');
      }else{
       alert("不合法的数字");
       document.getElementById(id).value='';
       }
     }
    </script>
    </html>
    判断是否为整数re=/^[-][1-9]+[0-9]*s/, 
          其实正则表达式在处理字符串和表单验证中非常有用,简结易懂!

  • IE下onpropertychange与firefox下oninput

    post by onelong / 2009-10-6 23:25 Tuesday [javascript]

    onpropertychange能够捕获每次输入值的变化。例如:<INPUT id="test" name="test" />对象的value值被改变时,onpropertychange能够捕获每次改变,而onchange需要执行某个事件才可以捕获。
    onpropertychange 不被firefox所支持,如果想在firefox下正常使用,需要用oninput属性,且需要用addEventListener来注册事件。

    这是个小例子:
    <html>
    <head>
    </head>
    <body>
    <input id='txt' value="" />
     <script language="javascript">
    if(navigator.userAgent.indexOf("MSIE")>0){
    document.getElementById('txt').attachEvent("onpropertychange",txChange);
    }else if(navigator.userAgent.indexOf("Firefox")>0){
    document.getElementById('txt').addEventListener("input",txChange2,false);
    }
    function txChange(){
    alert("testie");
    }
    function txChange2(){
    alert("testfirefox");
    }
    </script>
    </body>
    </html>
         通过这种方法就可以实时监测文本框的输入啦!

  • IE和Firefox中的事件

    post by onelong / 2009-10-6 23:01 Tuesday [javascript]

    在IE中,不能把Event对象作为参数传递给事件处理程序,只能用window.event或者event来引用Event对象。因为在IE中,event是window的一个属性,也就是说event是一个全局变量,这个变量提供了事件的细节。
    Firefox支持几乎所有的W3C DOM二级标准,和部分W3C DOM三级标准。W3C DOM中的Event对象并不是window全局对象下面的属性,换句话说,event不是全局变量。
    通常在W3C的DOM二级标准中,event作为发生事件的文档对象的属性。
    在Firefox下JavaScript函数中获取event的方法:
    1、从调用JavaScript函数的HTML页面显式传递参数event(实参的名称一定要用event) 。
    2、若HTML元素的某个事件上直接绑定(在标签里绑定)了一个函数,则在该函数中可以通过event = arguments.callee.caller.arguments[0];来获取event对象。
    3、
    document.onclick = click;
    function click(evt){
    var event = evt||window.event;
    }

    阅读全文>>

  • 根据分辨率加载不同的css

    post by onelong / 2009-10-6 21:15 Tuesday [javascript]

    <script language=javascript>
    <!--
    if (screen.width == 800)
    {
    document.write('<link rel=stylesheet type="text/css" href="css800.css">')
    }
    else {document.write('<link rel=stylesheet type="text/css" href="css1024.css">')
    }
    //-->
    </script> // 放在<head>里
    思考:如果根据浏览器加载不同的css文件怎办?html换肤的功能......

  • javascript判断浏览器类型和版本

    post by onelong / 2009-10-6 20:40 Tuesday [javascript]

    <script type="text/javascript">
            var Sys = {};
            var ua = navigator.userAgent.toLowerCase();
            var s;
            (s = ua.match(/msie ([\d.]+)/)) ? Sys.ie = s[1] :
            (s = ua.match(/firefox\/([\d.]+)/)) ? Sys.firefox = s[1] :
            (s = ua.match(/chrome\/([\d.]+)/)) ? Sys.chrome = s[1] :
            (s = ua.match(/opera.([\d.]+)/)) ? Sys.opera = s[1] :
            (s = ua.match(/version\/([\d.]+).*safari/)) ? Sys.safari = s[1] : 0;
            //以下进行测试
            if (Sys.ie) document.write('IE: ' + Sys.ie);
            if (Sys.firefox) document.write('Firefox: ' + Sys.firefox);
            if (Sys.chrome) document.write('Chrome: ' + Sys.chrome);
            if (Sys.opera) document.write('Opera: ' + Sys.opera);
            if (Sys.safari) document.write('Safari: ' + Sys.safari);
    </script>