---对象
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" onmouseover="second()" onclick="first()" > 事件 </div> <input type="text" name="" id="" value="" onfocus="fifth()"onblur="forth()" /> <select name="" onchange="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" onclick="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="" onclick="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" onclick="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>