DOM

javascript组成:ESCAscript、BOM、DOM

ESCAscript: 基础语法
BOM:浏览器对象模型
    window:窗口
  Iocation:地址栏
   history:历史记录
   document:文档
DOM:文档操作模型  document


定时器:
  /延迟执行

   

 setTimeout(function(){},时间);

 例子:

<button onclick="dianji()" >按钮</button>

js代码:

function dianji(){
	setInterval(function(){
		console.log(9);
	},1000);
}

  /间隔执行
  

  setInterval(function(){},时间);

  

清除定时器

 

  clearInterval(对象);
  clearTimeout(setTimeout对象);

 

DOM操作套路
  找到元素   操作元素

1、找元素   返回元素对象
    

   document.getElementById();//
     document.getElementsByName();
     document.getElementsByTagName();
     document.getElementsByClassName();
document.getElementById();例子:
<div id="a1" name="name" bs="123" style="color:red;">
  123
</div>

 js代码:

var a1 = document.getElementById("a1");//获取id
alert(a1.innerHTML); //获取a1内容 

 JQ代码:

var a1 = $("#a1");
alert(a1.html());

  

document.getElementsByClassName()例子:
<div class="a2" onclick="tanChu(this)">456</div>
<div class="a2">789</div>

 js代码:
 

var a5 = document.getElementsByClassName("a2");
//遍历a5	
for(var i=0;i<a5.length;i++){
	alert(a5[i].innerHTML);
}

 JQ代码:
 

var a2 = $(".a2");
	
for(var i=0;i<a2.length;i++){
	alert($(a2[i]).html());
}

 

document.getElementsByTagName()//获取标签名
例子:
<div id="a1" name="name" bs="123" style="color:red;">123</div>
<div class="a2" onclick="tanChu(this)">456</div>
<div class="a2">789</div>

 js代码:

var a3 = document.getElementsByTagName("div");
for(var i=0;i<a3.length;i++){
	alert(a3[i].innerHTML);
}

JQ代码:
 

var a3 = $("div");
for(var i=0;i<a3.length;i++){
	alert($(a3[i]).html());
}

  

 

2、操作元素内容
     var obj=document.getElementById();
      非表单元素: obj.innerHTML=123
   表单元素:obj.Value  

      直接写就是获取值,加上等号就是修改值
3、操作元素属性
    obj.setAttribute("class","btn"); 设置
    obj.getAttribute("id");=>btn   获取
4、操作元素样式
    obj.style.color  只可以操作行内样式
5、操作元素事件

    obj.onclick=function(){}
   obj.addEventListener()

6、创建删除元素

  obj.remove();

  Obj.removeattribute(“id”); //删除属性! 

  var div = document.createElement('div'); 

 

js文件格式

  定义变量

    var name = "";//
    var sum = 0;//
    var obj = null;//
  页面加载完成
    window.onload = function(){ }
  方法
    function f1(){}
    function f2(){}

介绍方法
  window.onload=function(){}
介绍两个队形
  Math:数学类
  date:时间日期类

 

posted @ 2018-06-28 01:00  吻泪  阅读(164)  评论(0编辑  收藏  举报
Live2D