生活随笔
收集整理的這篇文章主要介紹了
5.14 js对象 函数 js操作document对象
小編覺(jué)得挺不錯(cuò)的,現(xiàn)在分享給大家,幫大家做個(gè)參考.
---對(duì)象
?var myObject ={}? /* 聲明對(duì)象字面變量*/
myObject點(diǎn)語(yǔ)法取值 賦值
代碼格式?? var person = {
? ?name : "zhangsan",
? ?age : 25,
? ?say :function(){
? ??alert("說(shuō)漢語(yǔ)");
? ?}
? }
函數(shù)：有一定功能代碼體的集合； 函數(shù)是由事件驅(qū)動(dòng)的或者當(dāng)它被調(diào)用時(shí)執(zhí)行的可重復(fù)使用的代碼塊。
基礎(chǔ)函數(shù)? function? funname(){執(zhí)行的代碼}
帶有參數(shù)的函數(shù)?? 形參?? 實(shí)參?
|---帶有返回值的函數(shù)? return
|---局部變量與全局變量? 函數(shù)體內(nèi)定義的變量 是局部變量
|---事件
|-----常用事件
|-----給元素掛事件的方式
onclick事件：點(diǎn)擊事件
ondbclick事件：雙擊事件
onload事件：頁(yè)面一開(kāi)始加載的時(shí)候會(huì)先調(diào)用這個(gè)方法。此方法只能寫(xiě)在<body>標(biāo)簽之中
onchange事件
onblur事件和onfocus事件：onblur事件，當(dāng)前元素失去焦點(diǎn)時(shí)觸發(fā)該事件。對(duì)應(yīng)的是onfocus事件：得到焦點(diǎn)事件
onscroll事件：窗口滾動(dòng)事件
鼠標(biāo)相關(guān)事件：
onmousemove：鼠標(biāo)移動(dòng)到某對(duì)象范圍的上方時(shí)，觸發(fā)事件調(diào)用函數(shù)。注意：在同一個(gè)區(qū)域中，只要鼠標(biāo)動(dòng)一次就觸發(fā)一次事件。
onmouseout：鼠標(biāo)離開(kāi)某對(duì)象范圍時(shí)，觸發(fā)事件調(diào)用函數(shù)。
onmouseover：鼠標(biāo)移動(dòng)到某對(duì)象范圍的上方時(shí)，觸發(fā)事件調(diào)用函數(shù)。注意：在同一個(gè)區(qū)域中，無(wú)論怎樣移動(dòng)都只觸發(fā)一次函數(shù)。
onmouseup：當(dāng)鼠標(biāo)松開(kāi)時(shí)觸發(fā)事件
onmousedown：當(dāng)鼠標(biāo)按下鍵時(shí)觸發(fā)事件
js操作document對(duì)象
找到我的對(duì)象
var div1 = document.getElementById("first"); 通過(guò)id名找到唯一的
var div2 = document.getElementsByClassName("second")[1];通過(guò)class名找到達(dá)是集合 所以要通過(guò)索引找到每一項(xiàng)
var div3 = document.getElementsByName("inp")[0];通過(guò)name名找到達(dá)是集合 所以要通過(guò)索引找到每一項(xiàng)
var div4 = document.getElementsByTagName("div")[0];通過(guò)標(biāo)簽名找到達(dá)是集合 所以要通過(guò)索引找到每一項(xiàng)
var div5 = document.querySelector(".second");document.querySelector("#first");通過(guò)選擇器的名找到第一個(gè)的
var div6 = document.querySelectorAll(".second");
操作
操作內(nèi)容
表單 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("這是我的第一個(gè)函數(shù)");}hanshu();*/ //調(diào)用函數(shù)/*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ǔ)+b賦給一個(gè)變量)} sum(10,5);//程序執(zhí)行完這句話，sum(10,5)變成了15；var c=sum(10,5);alert(c);///c是15*///對(duì)象/* var person ={name :"張三",age :18,sex:"男",say : function () {return "我是中國(guó)人";}}*//* alert(person.name+"說(shuō)"+person.say());*//* person.name="張三" ;person.age=18;*//*console.log(person);*/
//========================= function first () {console.log("我點(diǎn)擊了"
);} function second () {console.log("我的鼠標(biāo)移上了"
);} function third () {console.log("我的文本改變了"
);} function forth () {console.log("我失去焦點(diǎn)"
);} function fifth () {console.log("我獲得了焦點(diǎn)"
);} </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="" />桓臺(tái)<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()">點(diǎn)擊</div><div style="clear: both;"></div><!--===============事件補(bǔ)充================--> <div id="btn_dj">
事件補(bǔ)充點(diǎn)擊</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);
//操作元素 //操作內(nèi)容//非表單元素//獲得文本/* alert(div1.innerHTML);alert(div1.innerText);*/// 修改文本 /* div1.innerHTML ="<p>按鈕1</p>"div1.innerText ="<p>按鈕1</p>"*///表單元素//找到內(nèi)容//alert(div3.value);//修改內(nèi)容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"
;}}}/*==============事件補(bǔ)充===========*/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代表該對(duì)象console.log(
this.innerHTML);}}</script>
?
轉(zhuǎn)載于:https://www.cnblogs.com/sunhao1987/p/9038266.html
總結(jié)
以上是生活随笔為你收集整理的5.14 js对象 函数 js操作document对象的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。
如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。
