javascript常用属性、方法汇总

传智播客前端移动应用开发百度云 移动web前端开发的书 移动端开发前端

1. 获取元素方法

1. 根据 id 获取元素对象

    var ele = document.getElementById("idName"); 

2. 根据 标签名 获取元素对象

    var ele = document.getElementsByTagName("标签名");

3. 根据 类名 获取元素对象

    var ele = document.getElementsByClassName("类名");

4.获取body元素

    document.body

2. 节点/元素相关方法

1. 获取子节点

    var 子节点的伪数组 = 父亲.childNodes; 

2. 获取子元素

    var 子元素的伪数组 = 父亲.children; 

3. 获取属性节点

    var idNode = ul.getAttributeNode("id"); 

4. 获取下一个兄弟节点 

    var node =  xxx.nextSibling;

5. 获取下一个兄弟元素 

    var ele =  xxx.nextElementSibling;

6. 获取上一个兄弟节点

    var node =  xxx.previousSibling;

7. 获取上一个兄弟元素 

    var ele =  xxx.previousElementSibling;

8. 追加子节点 

    father.appendChild(demo);
    把一个节点放到父节点内部的最后

    9. 插入子节点

    father.insertBefore(demo,son);
    把一个节点demo放到父节点内部 参考节点son的前面

    10. 移除

    father.removeChild(son);//移除子节点

11. 克隆

    var clone = demo.cloneNode(true);

    deep:深度,一般传入true: 

12. 创建子元素

13. 获取第一个子元素

    var frist = xxx.firstElementChild;
    var frist = xxx.children[0];

    获取第一个子节点:

        firstChild

14. 获取最后一个子元素

        var last = xxx.lastElementChild;
        var last = xxx.children[xxx.children.length-1];

    获取最后一个子节点:

        lastChild

15. 获取父节点

    var parent = xxx.parentNode;

3. 元素属性

1. src属性

    img标签图片的路径

2.innerText属性

    双标签的内部文本

3. innerHTML属性

    双标签的内部html

    textContent: 也是内部文本

4. className属性

    样式

5. disable

    input标签禁用属性 disabled
    取值:true/false

6. type

    不同类型的input标签

7. value

    标签的value:值

8. selected

    下拉菜单 select 某一项被选中
    取值:true/false

9. checked

    checkbox 的选中状态: checked
    取值:true/false

10. 自定义属性

    1. 获取 任何标签中的属性都可以获取
        console.log(box.getAttribute("a"));//可以获取没有规定的属性
        console.log(box.getAttribute("id"));//也可以获取有规定的属性
    2. 设置 任何标签中的属性都可以设置
        box.setAttribute("b", "2");//可以设置没有规定的属性
        box.setAttribute("class", "cls");//可以设置有规定的属性
    3. 移除 任何标签中的属性都可以移除
        box.removeAttribute("a");
        box.removeAttribute("class");

11. 背景颜色

    document.body.style.backgroundColor = "black";  // 一些简单的样式修改,通过style处理

12. 宽高

    box.style.width = "200px";
    box.style.height = "200px";

13. 背景图片

    box.style.backgroundImage = "url(images/tiger.png)";

14. 隐藏盒子

    this.style.display = "none";/*消失之后 不占位置*/ 
    this.style.visibility = "hidden";/*消失之后 占位置*/

15. 变盒子的位置

    this.style.left = "10px";
    this.style.top = "10px";

    left和top,需要注意添加绝对定位

16. 改变盒子的层级

    this.style.zIndex = "10";

    zIndex,需要注意添加绝对定位

4. 事件

1. 点击事件
    ele.onclick=function(){};

    注意在事件中,要获取当前点击的元素对象,都用this.

2. 鼠标悬浮,鼠标离开事件

    1. 鼠标悬浮(经过)事件  ele.onmouseover = function(){};

    2. 鼠标离开事件  ele.onmouseout = function(){};
          （注：onmouseover与onmouseout搭配使用，不建议使用这个搭配，因为当鼠标经过子元素时会在此触发此事件，出现闪动异常，建议使用下面这两个搭配或者使用onhover;）

           3.鼠标进入事件 ele.onmouseenter = function(){};

           4.鼠标移出事件 ele.onmouseleave = functin(){};
          （注：onmouseenter与onmouseleave搭配使用）

           5.鼠标进出事件 ele.onhover = function(){};

3. 焦点事件

    1. 鼠标失去焦点  ele.onblur = function(){};

    2. 鼠标获取焦点  ele.onfocus = function(){}; 

4. 键盘事件

    1. 键盘按下:  ele.onkeydown = function(){};

    2. 键盘抬起:  ele.onkeyup = function(){};

5. 双击事件

    ele.ondblclick = function(){};

5. 字符串相关方法:

1. 字符串的替换方法 : replace

    xxx =  xxx.replace(searchValue,replaceValue);

    replace 特点: 只找第一个匹配的替换

2.字符串的搜索方法 indexOf()

    xxx.indexOf(searchString);

         查找searchString在xxx的第一个索引位置.

         如果查找的是 不存在的字符串 : -1

         如果查找的是 "" : 0

3. 删除左右空格: trim()

    txt.value.trim()  , 删除 字符串的左右空格

6.数组相关方法

    1.获取数组内的元素arr[ index ];

    2.数组长度length

             1.获取数组长度 arr.length;

             2.利用数组长度动态改变来添加元素
             var arr = [ ];
             for ( var i = 0; i < 10; i++ ){
                    arr[ arr.length ] = i ;
             };

             3.利用数组长度来清空数组
             var arr = [ 1, 2, 3, 4, 5, 6 ];
             arr.length = 0;

3.遍历数组

             1.for循环进行遍历
             var sum = 0;
             var arr = [ 1, 2, 3, 4, 5, 6 ];
             for ( var i = 0; i < arr.length; i++ ){
                    sum += i;
              };
             console.log(sum);

             2.forin循环进行遍历
             var sum = 0;
             var arr = [ 1, 2, 3, 4, 5, 6 ];
             for ( var i in arr ){
                    sum += arr[i];
             };
             console.log(sum);

补充：
1.阻止冒泡
if(e.stopPropagation){
e.stopPropagation();
}else{
e.cancelBubble=true;
};

2.阻止默认行为
e.preventDefault();

移动前端开发视频教程 移动开发与前端哪个前景好 前端移动端开发单指滑动