当前位置:  编程技术>WEB前端
本页文章导读:
    ▪JS 技巧积累       判断是否存在于 var a = "b" in c; 字符串转数组新写法 var split = "split", S = " ", events = "click dblclick mousedown mousemove mouseout mouseover mouseup touchstart touchmove touchend touchcan.........
    ▪javascript学习笔记[7]--内建对象              昨天晚上回了趟乡下,所以没时间写博客了,那今天继续吧,今天主要是学习了ECMAScript 5增强的对象模型,   以及一些javascript的内建对象,现在总结一下。先说明一.........
    ▪JQuery入门——事件切换之toggle()方法      1、在toggle()方法中,可以依次调用N个指定的函数,直到最后一个函数,然后重复对这个函数轮番调用,其语法如下:toggle(fn, fn2, [fn3, fn4,...]),其中fn、fn2、fn3、fn4等函数依次调用。 2、示例代.........

[1]JS 技巧积累
    来源: 互联网  发布时间: 2013-11-06
  • 判断是否存在于
    var a = "b" in c;
  • 字符串转数组新写法
    var split = "split",
    	S = " ",
        events = "click dblclick mousedown mousemove mouseout mouseover mouseup touchstart touchmove touchend touchcancel"[split](S);

  •  

    var h = 2;
    h = ~~h;
    //怎么理解?


     

    作者:luqin1988 发表于2013-2-1 15:33:33 原文链接
    阅读:56 评论:0 查看评论

        
    [2]javascript学习笔记[7]--内建对象
        来源:    发布时间: 2013-11-06

            昨天晚上回了趟乡下,所以没时间写博客了,那今天继续吧,今天主要是学习了ECMAScript 5增强的对象模型,   以及一些javascript的内建对象,现在总结一下。先说明一下哦,我也是一只菜鸟啦,刚学没多久,大家一起探讨探讨,如果博客写的有问题的话,欢迎及时帮我指出。

          7.1 ECMAScript 5 增强的对象模型

                 看完了,我不知道有些什么用,感觉讲的东西都是好理论的东西,实际应用的应该比较少吧。就拎一下重点:

                ECMAScript 5 增强了对对象模型的控制力度,通过新的对象模型,用户可以控制单独的属性是否允许读取,写入,删除和枚举等,甚至可以控制对象是否允许添加或删除属性,这样就可以实现密封对象的功能。--------太文艺了,我这样的菜鸟目前肯定是用不到这么先进的东西的。

              使用Object.defineProperty()定义属性,在定义属性时可以改变描述符的键值。语法如下:

              Object.defineProperty(obj,prop,desc);

              obj:对象,该参数指定为该类的原型对象

              prop:字符串,用于指定属性名

              desc:包含属性的描述

    function Person(){}
    Object.defineProperty(Person.prototype,
    "name",
    {
    value:"tony",
    //这些属性定义描述默认都是true
    writeable:true,
    enumerable:true,
    configurable:true
    });

    //下面代码就可以得到属性值tony
    var person = new Person();
    document.write(person.name);

     

             接下来可以一次定义多个属性,用Object.defineProperties()方法。Object.defineProperties(obj,props)

             接下来介绍几个枚举属性,也就是略微提一下,有个印象,到时候要用的话现场查一下就行了。

             Object.keys(obj),获取属性名,也就是上面代码的name。

             Object.getOwnPropertyNames(obj),列出所有能枚举和不能枚举的属性,该方法不能实现向前兼容。

             密封对象和动态对象,密封对象只能拥有在实例化时从类定义获取的固定的一组属性和方法,不能在运行时添加其他属性和方法,默认情况下,javascript创建的对象都是动态对象,即允许在运行时为对象添加其他属性和方法。具体怎么实现就不说了。反正这种方法要求比较高,都需要在use strict(执行严格模式)下才能看到,而目前只有firefox4支持。兼容性不行啦。

              7.2 String类

              还是介绍一些实际编程中经常用到的东西来的实在。

              7.2.1 正则表达式语法

                     相信大家肯定看到过各种正则表达式,尤其是在验证的时候,但是总是不知道它具体什么意思,那这里就稍微普及一下。

                     javascript使用RegExp类来表示正则表达式,下面有三种创建方法以及一段最简单的匹配代码:

    var re = /ab+c/ // (使用两个//包围,并且不带引号)
    var re = new RegExp("ab+c") // 创建RegExp对象
    var re = new RegExp(new RegExp("ab+c"));// 使用一个RegExp对象创建另一个RegExp对象
    var re = new RegExp(/ab+c/);// 就是上面那一种方法

    下面的代码表示在一段字符串中匹配连续字符串abc
    var pattern = "abc";
    var re = new RegExp(pattern);
    var oString = "abcefg";
    document.write(re.exec(oString)); //匹配成功返回abc;失败则返回null

     

                    正则表达式文法就不说了,在javascript中,使用RegExp类的exec()和test()方法进行正则表达式匹配。exec在上面的代码中有体现了,test()就是查找字符串中是否存在一个匹配指定模式的字符串,如果存在,则返回true,否则,返回false。下面我贴出几篇文章索引:

    精通 JavaScript中的正则表达式

    javascript正则表达式

    经典 Javascript 正则表达式

                 7.2.2  String:字符串文字("tony")和String对象(new String("abc"))都可以调用String类的所有成员,但是这两者是有区别的,javascript解释引擎会自动将其转换成临时String对象,调用其方法,最后会清除临时对象。除非确实需要使用String对象(因为String对象可以有反常规的行为),否则建议使用字符串文字。String的方法参见这篇博文:JavaScript_String函数下面看一段挺有意思的代码----创建打字机效果:

    <!DOCTYPE HTML>
    <html>
    <head>
    <meta charset="utf-8">
    <title>Sample</title>
    </head>
    <body>
    <div id = "test" >
    </div>
    <script>
    //实际上是不断地在更新显示的文字,每次都多一个字,看起来就好像打印机一样的效果了。
    var typingTest = "放一段文字进去,让它像打字机一样一个字一个字的打出来,显示出来";
    var count = 0;
    var oBlock = document.getElementById("test");
    function type(){
    if(count <= typingTest.length){
    oBlock.innerHTML = typingTest.substring(0,count); //count每次都增加一个
    count++;
    }else{
    window.clearInterval(intervalID);
    }
    }
    var intervalID = window.setInterval(type,200); //每200毫秒调用一次该函数
    </script>
    </body>
    </html>

     

                  还有用于创建Html格式字符串的方

        
    [3]JQuery入门——事件切换之toggle()方法
        来源: 互联网  发布时间: 2013-11-06

    1、在toggle()方法中,可以依次调用N个指定的函数,直到最后一个函数,然后重复对这个函数轮番调用,其语法如下:toggle(fn, fn2, [fn3, fn4,...]),其中fn、fn2、fn3、fn4等函数依次调用。

    2、示例代码:

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>toggle方法</title>
    <script type="text/javascript" src=/blog_article/"jquery-1.8.3.min.js"></script>_br/index.html> <style type="text/css">
               body{font-size:13px} 
               img{border:solid 1px #ccc;padding:3px}
    </style>
    <script type="text/javascript">
      $(function(){
        $("img").toggle(function(){
     $("img").attr("src","Images/img05.jpg");
     $("img").attr("title",this.src);
    },function(){
     $("img").attr("src","Images/img06.jpg");
     $("img").attr("title",this.src);
    },function(){
     $("img").attr("src","Images/img07.jpg");
     $("img").attr("title",this.src);
    }
    )
      })
    </script>
    </head>

    <body>
    <img />
    </body>
    </html>


    3、效果图预览:

    第一次点击:


    第二次点击:


    作者:liang408015204 发表于2013-2-1 16:54:40 原文链接
    阅读:45 评论:0 查看评论

        
    最新技术文章:
    ▪css white-space:nowrap属性用法(可以强制文字不...
    ▪IE里button设置border:none属性无效解决方法
    ▪border:none与border:0使用区别
    ▪html清除浮动的6种方法示例
    ▪三个不常见的 HTML5 实用新特性简介
    ▪css代码优化的12个技巧
    ▪低版本IE正常运行HTML5+CSS3网站的3种解决方案
    ▪CSS Hack大全-教你如何区分出IE6-IE10、FireFox、Chr...
    ▪ie6,ie7,ie8完美支持position:fixed的终极解决方案
    ▪小技巧处理div内容溢出
    ▪html小技巧之td,div标签里内容不换行
    ▪纯CSS实现鼠标放上去改变文字内容
    ▪li中插入img图片间有空隙的解决方案
    ▪CSS3中Transition属性详解以及示例分享
    ▪父div高度不能自适应子div高度的解决方案
    ▪告别AJAX实现无刷新提交表单
    ▪从零学CSS系列之文本属性
    ▪HTML 标签
    ▪CSS3+Js实现响应式导航条
    ▪CSS3实例分享之多重背景的实现(Multiple background...
    ▪用css截取字符的几种方法详解(css排版隐藏溢...
    ▪页面遮罩层,并且阻止页面body滚动。bootstrap...
    ▪CSS可以做的几个令你叹为观止的实例分享
    ▪详细分析css float 属性以及position:absolute 的区...
    ▪IE6/IE7/IE8/IE9中tbody的innerHTML不能赋值的完美解...
    ▪CSS小例子(只显示下划线的文本框,像文字一...
    ▪可以给img元素设置背景图
    ▪不通过JavaScript实现的自动滚动视差效果
    ▪div+CSS 兼容小摘
    ▪CSS的inherit与auto使用分析
     


    站内导航:


    特别声明:169IT网站部分信息来自互联网,如果侵犯您的权利,请及时告知,本站将立即删除!

    ©2012-2021,,E-mail:www_#163.com(请将#改为@)

    浙ICP备11055608号-3