---對象
?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>
?
轉載于:https://www.cnblogs.com/sunhao1987/p/9038266.html
總結
以上是生活随笔為你收集整理的5.14 js对象 函数 js操作document对象的全部內容，希望文章能夠幫你解決所遇到的問題。
如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。
