• javascript笔记


    函数的两个附件参数:this 和 arguments

    this 的值取决于调用的模式

    函数的四种调用模式

    1.方法调用模式

       当函数是对象的一个属性时,那么该函数就是该对象的方法,this指向/绑定到该对象。

    2.函数调用模式

       当函数不是对象的一个属性时,那么该函数的this指向全局对象window,(程序设计的一个错误),在对象里面可以使用变量存储this对象来操作。

    3.构造器调用模式

       function Person(name){
          this.name = name
        }
      var a = new Person('lisq')
    这里this就指向a

    4.Apply调用模式

      主要有2个参数,跟call一样,第一个参数是(this指向的对象)[如果为null,则是当前调用对象本身,但如果指定了对象,那就是指定的对象],第二个参数为数组参数,call的为普通参数,这是跟apply调用不同的地方。

    如果this指向对象,其实就是 构造模式来,如果是null,则是函数调用模式。

    function MyObject(name){ 
        this.name=name || 'MyObject'; 
        this.value=0; 
        this.increment=function(num){ 
        this.value += typeof(num) === 'number' ? num : 0; 
     }; 
         this.toString=function(){ 
     return '[Object:'+this.name+' {value:'+this.value+'}]'; 
     } 
         this.target=this; 
     } 
     function getInfo(){ 
         return this.toString(); 
     } 
     var myObj=new MyObject(); 
     alert(getInfo.apply(myObj));//[Object:MyObject {value:0}],this指向myObj ,其实就是构造模式嘛,指向调用者
     alert(getInfo.apply(window));//[object Window],this指向window ,其实就是函数调用模式嘛 ,试试把window换成null试试,调用者也是window哦!!

     如果你还不明白,查看http://www.jb51.net/article/29260.htm

    HTML DOM

    一、节点

    节点类型

    只有前几个有用

    1.Node.ELEMENT_NODE  元素节点,为1

    2.Node.ATTRIBUTE_NODE 属性节点,为2

    3.Node.TEXT_NODE 文本节点,为3

    可以通过 node.type == 1||2||3 来判断所获得节点是什么类型

    节点的属性方法

    nodeName

    nodeValue

    nodeType

    owerDocument

    firstChild

    lastChild

    chidNodes

    previousSibling

    nextSibling

    attributes

    hasChidNodes()

    appendChild(node)

    removeChild(node)

    replaceChild(newNode,oldNode)

    insertBefore(newNode,refNode)

    处理特殊

    getNamedItem(name)

    removeNameItem(name)

    setNamedItem(name)

    item(pos)

    访问指定节点

    1.getElementByTagName()

    2.getElementByName()

    3.getElementById()

    创建节点

    1.createElement()

    2.createTextNode()

    3.appendChild()

    4.createDocumentFragment()

    操作节点

    1.removeChild()

    2.replaceChild()

    3.insertBefore()

    节点关系
    // 父节点
    someNode.parentNode
    // 子节点
    someNode.childNodes
    // 子节点个数
    someNode.childNodes.length
    // 第一个子节点
    someNode.firstChild
    // 最后个子节点
    someNode.lastChild
    // 上一个同胞节点
    someNode.previousSibling
    // 下一个同胞节点
    someNode.nextSibling
    
    // 仅元素节点 IE9 / chrome / firefox
    
    // 子节点个数
    someNode.childElementCount
    // 第一个子节点
    someNode.firstElementChild
    // 最后个子节点
    someNode.lastElementChild
    // 上一个同胞节点
    someNode.previousElementSibling
    // 下一个同胞节点
    someNode.nextElementSibling
    操作节点
    // 向节点的子节点列表的末尾添加新的子节点
    someNode.appendChild(newchild)
    // 在已有的子节点前插入一个新的子节点
    someNode.insertBefore(newchild, refchild)
    // 将某个子节点替换为另一个
    someNode.replaceChild(new_node, old_node)
    // 从子节点列表中删除某个节点
    someNode.removeChild(node)
    // 创建指定的节点的精确拷贝
    someNode.cloneNode(include_all)

    二、Style css样式对象

     ①单样式

    Style 对象代表一个单独的样式声明。可从应用样式的文档或元素访问Style 对象。

    使用Style 对象属性的语法:

    document.getElementById("id").style.property="值"

    Style 对象的属性:

    ②多样式

    cssText

    cssText属性可以为某个元素书写一个新的Css样式.可以批量更改元素的各个外观属性.

    区别

    2010-04-09 11:02 style、currentStyle、getComputedStyle区别介绍样式表有三种方式
    
          内嵌样式(inline Style) :是写在Tag里面的,内嵌样式只对所有的Tag有效。
    
         内部样式(internal Style Sheet):是写在HTML的<head></head>里面的,内部样式只对所在的网页有效。
    
          外部样式表(External Style Sheet):如果很多网页需要用到同样的样式(Styles),将样式(Styles)写在一个以.css为后缀的CSS文件里,然后在每个需要用到这些样式(Styles)的网页里引用这个CSS文件。
    
         最常用的是style属性,在JavaScript中,通过document.getElementById(id).style.XXX就可以获取到XXX的值,但意外的是,这样做只能取到通过内嵌方式设置的样式值,即style属性里面设置的值。
    
       解决方案:引入currentStyle,runtimeStyle,getComputedStyle
    
       style                标准的样式!可能是由style属性指定的! 
         runtimeStyle    运行时的样式!如果与style的属性重叠,将覆盖style的属性!
        currentStyle   指 style 和 runtimeStyle 的结合!
    
        通过currentStyle就可以获取到通过内联或外部引用的CSS样式的值了(仅限IE)
    
       如:document.getElementById("test").currentStyle.top
    
       要兼容FF,就得需要getComputedStyle 出马了
    
       注意:getComputedStyle是firefox中的,
    
               currentStyle是ie中的.
    
    比如说
    
    <style>
    
         #mydiv {
    
                width : 300px;
    
         }
    
    </styke>
    
    则:
    
    var mydiv = document.getElementById('mydiv');
    
    if(mydiv.currentStyle) {
    
          var width = mydiv.currentStyle['width'];
    
          alert('ie:' + width);
    
    } else if(window.getComputedStyle) {
    
          var width = window.getComputedStyle(mydiv , null)['width'];
    
          alert('firefox:' + width);
    
    }
    
    另外在FF下还可以通过下面的方式获取
    
    document.defaultView.getComputedStyle(mydiv,null).width
    
    window.getComputedStyle(mydiv , null).width

    三、EVENT 事件

    1.事件捕获

    从触发事件源向改事件源的最低层捕获事件

    2.事件冒泡

    从最低层元素上最顶层元素触发事件

    3.事件目标(事件对象javascript的一种结构)

    传入event事件对象

    event.target == this 来判断是否为当前触发事件对象

     事件委托就是利用上面所说的

    html结构为:
    ul > li > a
    
    $('ul').click(function(event){
         var target = event.target;
         $(target).toggleClass('active');
     });

     阻止事件冒泡

    event.stopPropagation()

    阻止默认事件

    event.preventDefault()

    键码转化

    document.onkeydown = keyDown
    浏览器执行该语句时,无论按下键盘上的哪个键,都将执行KeyDown函数;
    function keyDown(e)
    变量e表示发生击键事件;
    IE:event.keyCode
    FF:e.which
    获取该键的索引值;
    String.fromCharCode()
    将索引值转化成该键的字母或数字值;
    
    ======== 
    document.onkeydown = keyDown;
            function keyDown(e){
                var e = e || event,
                    keycode = e.which || e.keyCode,
                    keyname = String.fromCharCode(keycode);
                document.getElementsByName("keycode")[0].value = keycode;
                document.getElementsByName("keyname")[0].value = keyname;
            }

    javaScript数组去重函数

    unique 函数算法:

    将 [数组元素类型+数组元素值] 作为 temp 对象的下标,对象中拥有相同下标的元素将被覆盖,

    最终将 temp 对象中拥有不同下标的元素 push 到数组 newArray 并返回!

    Array.prototype.unique = function(){
                var newArray = [],
                    temp = {};
                for(var i = 0; i < this.length; i++){
                    temp[typeof(this[i])+this[i]] = this[i];
                }
                for(var j in temp){
                    newArray.push(temp[j]);
                }
                return newArray;
            };
            function newArray(){
                var arrayData = document.getElementById("arrayData");
                arrayData.value = arrayData.value.split(",").unique();
                alert("数组去重成功!");
            }

     js去左右空格

    第一种:这种是大多数人都会写的,也是流传最多的代码了吧?
    
    JavaScript代码
    String.prototype.trim = function() {  
        //return this.replace(/[(^\s+)(\s+$)]/g,"");//會把字符串中間的空白符也去掉  
        //return this.replace(/^\s+|\s+$/g,""); //  
        return this.replace(/^\s+/g,"").replace(/\s+$/g,"");  
    }  
    第二种:来自motools:
    
    JavaScript代码
    function trim(str){  
        return str.replace(/^(\s|\xA0)+|(\s|\xA0)+$/g, '');  
    }  
    第三种:这是jQuery的,jquery的方法类似于第一种:
    
    JavaScript代码
    function trim(str){  
        return str.replace(/^(\s|\u00A0)+/,'').replace(/(\s|\u00A0)+$/,'');  
    }  
     
    
    第四种是来自所摘博客中最写的:Steven Levithan 在进行性能测试后提出了在JS中执行速度最快的裁剪字符串方式,在处理长字符串时性能较好:
    
    JavaScript代码
    function trim(str){  
        str = str.replace(/^(\s|\u00A0)+/,'');  
        for(var i=str.length-1; i>=0; i--){  
            if(/\S/.test(str.charAt(i))){  
                str = str.substring(0, i+1);  
                break;  
            }  
        }  
        return str;  
    }  
     

    ...等待更新

  • 相关阅读:
    又爱又恨的eval
    http_build_query 这个方法会把值为NULL的给干掉
    allow_url_fopen设置
    纠结了下 B 和 STRONG标签区别
    Drupal 发邮件模块 drupal smtp 安装与设置
    php array_merge 和 两数组相加区别
    学历严格正相关于素质 Kai
    表语就是主语补语,靠 Kai
    一些真正有思想的up Kai
    光速不变且最大,换个思路想,非常合理,犹如天经地义【转载】 Kai
  • 原文地址:https://www.cnblogs.com/yyman001/p/2759287.html
Copyright © 2020-2023  润新知