5.14 js对象函数 js操作document对象

---对象
var myObject ={} /* 声明对象字面变量*/
myObject点语法取值赋值
代码格式 var person = {
name : "zhangsan",
age : 25,
say :function(){
alert("说汉语");
}
}

函数：有一定功能代码体的集合；函数是由事件驱动的或者当它被调用时执行的可重复使用的代码块。
基础函数 function funname(){执行的代码}
带有参数的函数形参实参
|---带有返回值的函数 return

|---局部变量与全局变量函数体内定义的变量是局部变量

|---事件
|-----常用事件
|-----给元素挂事件的方式
onclick事件：点击事件
ondbclick事件：双击事件
onload事件：页面一开始加载的时候会先调用这个方法。此方法只能写在<body>标签之中
onchange事件
onblur事件和onfocus事件：onblur事件，当前元素失去焦点时触发该事件。对应的是onfocus事件：得到焦点事件
onscroll事件：窗口滚动事件
鼠标相关事件：
onmousemove：鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，只要鼠标动一次就触发一次事件。
onmouseout：鼠标离开某对象范围时，触发事件调用函数。
onmouseover：鼠标移动到某对象范围的上方时，触发事件调用函数。注意：在同一个区域中，无论怎样移动都只触发一次函数。
onmouseup：当鼠标松开时触发事件
onmousedown：当鼠标按下键时触发事件
js操作document对象
找到我的对象
var div1 = document.getElementById("first"); 通过id名找到唯一的
var div2 = document.getElementsByClassName("second")[1];通过class名找到达是集合所以要通过索引找到每一项
var div3 = document.getElementsByName("inp")[0];通过name名找到达是集合所以要通过索引找到每一项
var div4 = document.getElementsByTagName("div")[0];通过标签名找到达是集合所以要通过索引找到每一项
var div5 = document.querySelector(".second");document.querySelector("#first");通过选择器的名找到第一个的
var div6 = document.querySelectorAll(".second");
操作
操作内容
表单 value
非表单 innerHTML innerText
操作样式
style.样式名
className =
操作属性
getattribute("属性名")；
setattribute("属性名"，"属性值")；
removeattribute("属性名")；

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#first{width: 100px;height: 60px;background-color:#002752;color:white;border-radius: 5px;text-align: center;line-height:60px;}.sixth{width: 100px;height: 60px;background-color:orange;border-radius: 5px;float: left;margin-left: 20px;}</style></head><body><div id="first" οnmοuseοver="second()" οnclick="first()" >事件</div><input type="text" name="" id="" value="" οnfοcus="fifth()"οnblur="forth()" /><select name="" οnchange="third()"><option value="">北京</option><option value="">上海</option><option value="">江苏</option></select><div class="sixth"></div><div class="sixth"></div><div class="sixth"></div></body>
</html>
<script type="text/javascript">/*function hanshu () {alert("这是我的第一个函数");}hanshu();*/ //调用函数/*function sum (a,b) {alert(a+b);}sum(3,4);*//*function chengji (a,b,c,d,e) {alert(a*b*c*d*e)}chengji(3,5,6,1,2)*//*function sum (a,b) {return a+b; (可以把a+b赋给一个变量)}  sum(10,5);//程序执行完这句话，sum(10,5)变成了15；var c=sum(10,5);alert(c);///c是15*///对象/* var person ={name :"张三",age :18,sex:"男",say : function  () {return "我是中国人";}}*//* alert(person.name+"说"+person.say());*//* person.name="张三" ;person.age=18;*//*console.log(person);*/
//=========================     function first () {console.log("我点击了");}  function second () {console.log("我的鼠标移上了");}  function third () {console.log("我的文本改变了");}  function forth () {console.log("我失去焦点");}  function fifth () {console.log("我获得了焦点");}  </script>

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><title></title><style type="text/css">#first{width: 100px;height: 60px;background-color:#002752 ;border-radius: 5px;/*text-align: center;line-height: 60px*/color:white;}.second{width: 100px;height: 60px;background-color:orange ;border-radius: 5px;float: left;margin-left: 20px;}.five{width: 200px;height: 160px;background-color: blue;border-radius: 5px;float: left;margin-left: 20px;}.third{width: 100px;height: 60px;background-color:black ;border-radius: 5px;float: left;margin-left: 20px;color:white;}</style></head><body><input type="" name="inp" id="inp" value="" /><div id="first" οnclick="dianji()"><span>按钮</span></div>         <div class="second">1</div><div class="second">2</div><div class="second">3</div><!-- =====================    -->           <input type="checkbox" name="" id="" value=""  οnclick="quanxuan()"/>全选<input type="checkbox" name="chk" id="" value="" />张店<input type="checkbox" name="chk" id="" value="" />桓台<input type="checkbox" name="chk" id="" value="" />周村<div class="third"></div><div class="third"bs = "1" ></div>    <div class="third"></div><div class="third" οnclick="dianji1()">点击</div><div style="clear: both;"></div><!--===============事件补充================-->    <div id="btn_dj">事件补充点击</div></body>
</html>
<script type="text/javascript">//找到元素var div1 = document.getElementById("first");var div2 = document.getElementsByClassName("second")[1];var div3 = document.getElementsByName("inp")[0];var div4 = document.getElementsByTagName("div")[0];var div5 = document.querySelector(".second"); /*document.querySelector("#first");*/var div6 = document.querySelectorAll(".second");console.log(div1);console.log(div2);console.log(div3);console.log(div4);console.log(div5);
//操作元素    //操作内容//非表单元素//获得文本/* alert(div1.innerHTML);alert(div1.innerText);*/// 修改文本   /* div1.innerHTML ="<p>按钮1</p>"div1.innerText ="<p>按钮1</p>"*///表单元素//找到内容//alert(div3.value);//修改内容div3.value ="aaa";//操作样式function dianji(){div2.style.transition ="3s";div2.style.backgroundColor = "blue";div2.style.width = "200px";//div5.style.transition ="3s";div5.className ="five";div2.setAttribute("id","first");}/*============================*/var chk =document.getElementsByName("chk");//alert(chk[0].getAttribue("type"));// chk[0].setAttribute("checked","checked");//全选function dianji1(){var third = document.getElementsByClassName("third");for (var i = 0;i<third.length;i++) {var bs = third[i].getAttribute("bs");if(bs=="1"){third[i].style.backgroundColor="blue";}}}/*==============事件补充===========*/var btn_dj = document.getElementById("btn_dj");btn_dj.onclick =function(){alert(111);}var second =document.getElementsByClassName("second");for (var i=0;i<second.length;i++) {second[i].onclick=function  () {//this代表该对象console.log(this.innerHTML);}}</script>