---对象
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{
100px;
height: 60px;
background-color:#002752;
color:white;
border-radius: 5px;
text-align: center;
line-height:60px;
}
.sixth{
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{
100px;
height: 60px;
background-color:#002752 ;
border-radius: 5px;
/*text-align: center;
line-height: 60px*/
color:white;
}
.second{
100px;
height: 60px;
background-color:orange ;
border-radius: 5px;
float: left;
margin-left: 20px;
}
.five{
200px;
height: 160px;
background-color: blue;
border-radius: 5px;
float: left;
margin-left: 20px;
}
.third{
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>