JavaScript 归纳整理

1. 打开网页就运行JS

// a. 方法一 JS原生代码
window.onload = function(){}

// b. 方法二 jQuery
$(document).ready(function(){});

// c. 方法三 jQuery
$(function(){});

2. 输出

console.log("需要输出的内容");

3. 根据id、标签名、指定名称 获取对象

// a. 获取id获取对象
document.getElementById('#id');

// b. 获取标签名获取对象
document.getElementsByTagName('div');

// c. 获取指定名称获取对象
document.getElementsByName('class');

4. 用pc端打开手机站时跳转到PC端

  function IsPC() {
    var userAgentInfo = navigator.userAgent;
    var Agents = ["Android", "iPhone","SymbianOS", "Windows Phone","iPad", "iPod"];
    var flag = true;
    for (var v = 0; v < Agents.length; v++) {
      if (userAgentInfo.indexOf(Agents[v]) > 0) {
        flag = false;
        break;
      }
    }
    console.log(flag);
    if(flag){
      window.location.href = "PC端地址";
    }
    return flag;
  }
  IsPC();

5. 用原生js增加属性

obj.setAttribute("属性","参数");

6. 获取class名称

obj.className

7. 获取节点

// a. 获取父节点
obj.parent("");
// b. 获取所有父节点
obj.parents("");
// c. 获取所有子节点
obj.children("");
// d. 获取所有文本节点
obj.contents();
// e. 获取当前元素的前一个同级元素
obj.prev("");
// f. 获取当前元素的前面所有的同级元素
obj.prevAll("");
// g. 获取当前元素的后一个同级元素
obj.next("");
// h. 获取当前元素的后面的所有同级元素
obj.nextAll("");
// i. 获取当前元素的所有同级元素
obj.siblings();
// j. 获取当前元素中包含xx的元素
obj.find("");
// k. 获取所有包含xx的元素
obj.filter();

8. js获取DOM元素

// a. 通过id 获取DOM元素
document.getElementById("id");
// b. 通过name 获取DOM元素
document.getElementsByName("name");
// c. 通过标签名 获取DOM元素
document.getElementsByTagName("div");
// d. 通过类名 获取DOM元素
document.getElementsByClassName("class");

9. 延迟执行

setTimeout( 函数 , 延迟执行时间 );

10. 定时循环

setInterval( 函数 , 执行间隔时间 );

11. 获取文本标签的值

// js
obj.innerText;
// jq
obj.text();

12. 增加css类

// js
obj.classList.add("class");
// jq
obj.addClass("class");

13. 删除css类

// js
obj.classList.remove("class");
// jq
obj.removeClass("class");

14. 增加css样式

// js
obj.style.color = "#fff";
// jq
obj.css("color","#fff");
obj.css({"color":"#fff","width":"100%"});

15. 增加属性

// js
obj.setAttribute("src","image.jpg");
// jq
obj.attr("src","image.jpg");
obj.attr({width:"100",height:"1000"});