事件
1.常見事件
- onclick:點擊某個對象時調(diào)用
- ondblclick:雙擊某個對象
- onmouseover:鼠標移動到元素上
- onmouseout:鼠標從某元素離開
- onfocus:元素獲取焦點觸發(fā)
- onblur:元素失去焦點觸發(fā)
- oninput:文本輸入文字事件
- onchange:文本的內(nèi)容被改變
- onload:當頁面加載完畢的時候觸發(fā)(文本和圖片)
- onkeydown:鍵盤按鈕被按下
- onkeyup:鍵盤按鈕被松開
2.事件綁定
- 行內(nèi)綁定
<div id="box" onclick="fn()">
- 帶名函數(shù)
//帶名函數(shù)
var div = document.getElementById("box");
div.onclick = fn;
function fn() {
alert(123);
}
- 匿名函數(shù)
//匿名函數(shù)
var div = document.getElementById("box");
div.onclick = function () {
alert(123);
div.style.width = "200px";
};
//頁面加載完畢的時候出發(fā)這個事件(文本和圖片)
//整個頁面上所有的元素加載完成才會出發(fā)這個事件
//window.onload可以預(yù)防使用標簽再定義標簽之前
window.onload = function () {
alert(1);
}
3.節(jié)點訪問
節(jié)點的訪問關(guān)系是以屬性形式存在的
<div class="box1">
<div class="box3"></div>
<div class="box2">
<div class="box5"></div>
</div>
<div class="box4"></div>
</div>
- 節(jié)點訪問
//獲取父節(jié)點
var box2 = document.getElementsByClassName("box2")[0];
console.log(box2.parentNode);//打印的是box1
//兄弟節(jié)點
//下一個兄弟節(jié)點
console.log(box2.nextElementSibling || box2.nextSibling);//兼容寫法造虎，nextSibling只支持ie678
//前一個兄弟節(jié)點
console.log(box2.previousElementSibling || box2.previousSibling);
//子節(jié)點
console.log(box2.firstElementChild || box2.firstChild);//第一個子節(jié)點
console.log(box2.lastElementChild || box2.lastChild);//最后一個子節(jié)點
//所有子節(jié)點
console.log(box2.parentNode.children);//正常返回
console.log(box2.parentNode.childNodes);//把空格和換行也算成節(jié)點趟脂，所以里面有7個元素
- 節(jié)點操作
//創(chuàng)建節(jié)點
var div1 = document.createElement("div1");
var div2 = document.createElement("div2");
//插入節(jié)點
box2.parentNode.appendChild(div1);//在最后插入節(jié)點
box2.parentNode.insertBefore(div2,div1);//兩個參數(shù)前一個是要插入的節(jié)點，第二個是要在哪個節(jié)點前插入
//刪除節(jié)點
div1.parentNode.removeChild(div1);//刪除節(jié)點甜紫，也算是把自己刪除了
//克隆節(jié)點
var div3 = div2.cloneNode(false);
box2.parentNode.insertBefore(div3,div2);//參數(shù)是bool，true把所有子節(jié)點也復制了骂远，false只是復制一個節(jié)點
4.節(jié)點屬性
<img src="" alt="" class="box" id="aaa" title="哈哈哈" width="200px" height="200px"/>
<button value="sss" >sssssss</button>
//獲取屬性
var img = document.getElementById("aaa");
console.log(img.getAttribute("class")) ;
console.log(img.title);
console.log(img["width"]);
//設(shè)置屬性
img.setAttribute("title","ttttt");//可以設(shè)置沒有的屬性
img.title = "哦哦哦";
img["alt"] = "300";
// 重點：這三種方法不能交替使用囚霸，賦值和取值必須用同一種犯法
//刪除屬性
img.removeAttribute("width");
// innerHTML：獲取雙閉合標簽里面的內(nèi)容(識別標簽)
console.log(document.getElementsByTagName("button")[0].innerHTML);
document.getElementsByTagName("button")[0].innerHTML = "<h1>我變大了嗎</h1>";
// innerText：獲取雙閉合標簽里面的內(nèi)容(不識別標簽)
console.log(document.getElementsByTagName("button")[0].innerText);
document.getElementsByTagName("button")[0].innerText = "<h1>我變大了嗎</h1>"
5.節(jié)點類型
<div id="box">您好</div>
var div = document.getElementById("box");//獲取元素節(jié)點
var att = div.getAttributeNode("id");//獲取屬性節(jié)點
var text = div.firstChild;//文本節(jié)點
console.log(div);//div整體標簽
console.log(att);//id = "box"
console.log(text);
//nodeType節(jié)點類型
console.log(div.nodeType);//1元素節(jié)點
console.log(att.nodeType);//2屬性節(jié)點
console.log(text.nodeType);//3文本節(jié)點
//nodeName節(jié)點名字
console.log(div.nodeName);//div
console.log(att.nodeName);//box
console.log(text.nodeName);//#text
//nodeValue屬性值
console.log(div.nodeValue);//null，元素是沒有屬性值的
console.log(att.nodeValue);//box
console.log(text.nodeValue);//您好
6.表單屬性
- 禁用文本框
<body>
賬號： <input type="text" id="acount"/><button>禁用</button><br/><br/>
密碼： <input type="password"/>
</body>
<script>
var input = document.getElementById("acount");
var btn = document.getElementsByTagName("button")[0];
btn.onclick = function () {
btn.innerHTML === "禁用" ? input.disabled = "no" : input.removeAttribute("disabled");//隨便寫字符串都行激才，只要不是空
btn.innerHTML = btn.innerHTML === "禁用" ? "解禁" : "禁用";
}
</script>
- 文本獲取焦點
<body>
<div class="focus">
京東：<input type="text"value="我是京東" id="input1"/><br/><br/>
淘寶：<label for="input2">我是淘寶</label><input type="text" id="input2"/>
</div>
</body>
<script>
var input_jd = document.getElementById("input1");
var input_tb = document.getElementById("input2");
//焦點觸發(fā)事件
var jd_ph;
input_jd.onfocus = function () {
if (this.value = "我是京東"){
jd_ph = this.value;
}
this.value = "";
}
//失去焦點觸發(fā)事件
input_jd.onblur = function () {
this.value = jd_ph;
}
//文字的輸入事件
input_tb.oninput = function () {
var label = input_tb.parentNode.children[3];
label.style.display = this.value === "" ? "block" : "none";
}
//直接獲取焦點
input_tb.focus();//一加載完成就會獲取焦點
</script>
- 登錄注冊高亮顯示
<style type="text/css">
.error {
border: 1px solid red;
}
.right {
border: 1px solid green;
}
</style>
<body>
<div>
賬號：<input type="text" onblur="jude(this)"/><br/><br/>
密碼：<input type="password" onblur="jude(this)"/>
</div>
</body>
<script>
function jude(inp) {
//this代指的不是input拓型，而是window，所以要把input傳遞進來
console.log(this);
if (inp.value.length < 6 || inp.value.length > 12){
inp.className = "error";
}else {
inp.className = "right";
}
}
</script>
- select屬性
<body>
<div>
<button id="sel">識別水產(chǎn)</button>
<br/><br/>
<select name="" id="">
<option value="0">香蕉</option>
<option value="1">蘋果</option>
<option value="2">鴨梨</option>
<option value="3">鯉魚</option>
</select>
</div>
</body>
<script>
var sel_btn = document.getElementById("sel");
var opt = document.getElementsByTagName("option")[3];
sel_btn.onclick = function () {
//選擇鯉魚
opt.selected = "true";
}
</script>
- 單選框全選
<body>
<table>
<thead>
<tr>
<th>
<input type="checkbox"/>
</th>
<th>菜名</th>
<th>飯店</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox"/>
</td>
<td>地三鮮</td>
<td>田老師</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>西紅柿炒雞蛋</td>
<td>田老師</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>醋溜土豆絲</td>
<td>田老師</td>
</tr>
<tr>
<td>
<input type="checkbox"/>
</td>
<td>蘿卜干炒黃豆兒</td>
<td>田老師</td>
</tr>
</tbody>
</table>
</body>
<script>
//獲取input標簽
var titleInput = document.getElementsByTagName("th")[0].children[0];
var inputArray = document.getElementsByTagName("tbody")[0].getElementsByTagName("input");
titleInput.onclick = function () {
for (var i = 0;i < inputArray.length;i++){
inputArray[i].checked = this.checked;
}
}
for (var i = 0;i < inputArray.length;i++){
inputArray[i].onclick = selFn;
}
function selFn() {
// var bool = inputArray.every(function (item,index,array) {
// return item.checked;
// });//偽數(shù)組沒有數(shù)組的一些遍歷方法
var bool = true;
for (var i = 0;i < inputArray.length;i++){
if (!inputArray[i].checked){
bool = false;
break;
}
}
titleInput.checked = bool;
}
</script>
