|
window中常見(jiàn)的屬性
事件相關(guān)什么是事件? 事件就是系統(tǒng)提供的一些特定時(shí)間點(diǎn), 包括鼠標(biāo)事件/鍵盤(pán)事件和狀態(tài)改變事件 鼠標(biāo)事件: onclick:鼠標(biāo)點(diǎn)擊事件 onmouseover: 鼠標(biāo)移入事件 onmouseout:鼠標(biāo)移出事件 onmousedown: 鼠標(biāo)按下事件 onmouseup: 鼠標(biāo)抬起事件 onmousemove:鼠標(biāo)移動(dòng)事件
鍵盤(pán)事件: onkeydown:鍵盤(pán)按下 onkeyup: 鍵盤(pán)抬起
狀態(tài)改變事件: onload: 頁(yè)面加載完成事件 onchange:值改變事件 onblur: 失去焦點(diǎn)事件
事件傳遞 事件傳遞順序:從最底層往上層傳遞,類(lèi)似氣泡從下往上所有又稱(chēng)為事件冒泡 事件綁定: 給元素添加事件的方式 事件屬性綁定:通過(guò)標(biāo)簽的事件屬性綁定 <input type="button" value="事件屬性綁定" onclick="alert('事件屬性')">動(dòng)態(tài)綁定: 通過(guò)JavaScript代碼給元素添加事件 /*動(dòng)態(tài)綁定*/
btn.onclick = function () {
alert("動(dòng)態(tài)綁定");
}
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="text" onkeydown="downfn()" onkeyup="upfn()"><script> function downfn() {
console.log("鍵盤(pán)按下 按鍵編碼="+event.keyCode); } function upfn() { console.log("鍵盤(pán)抬起 按鍵編碼轉(zhuǎn)字符:"+String.fromCharCode(event.keyCode)); }</script></body></html>
DOM DocumentObjectModel文檔對(duì)象模型
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <script> //頁(yè)面加載完成事件 onload = function () { d1.innerText="測(cè)試"; }</script></head><body><div id="d1"></div><!--onchange值改變事件--><select id="s1" onchange="changefn()"> <option value="bj">北京</option> <option value="sh">上海</option> <option value="gz">廣州</option></select><br><!--onblur 失去焦點(diǎn)事件 --><input type="text" placeholder="請(qǐng)輸入用戶(hù)名" onblur="blurfn()"><br><input type="text" placeholder="請(qǐng)輸入密碼">
<script> function blurfn() { console.log("編輯完成!"); } function changefn() { alert(s1.value); }</script></body></html>
jQuery框架此框架主要就是對(duì)原生JavaScript中DOM部分內(nèi)容進(jìn)行了封裝,可以讓程序員更高效的開(kāi)發(fā)頁(yè)面的動(dòng)態(tài)效果. 如何使用jQuery框架? jQuery框架就是一個(gè)普通的js文件, 在html頁(yè)面中 引入即可.
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> *{border: 1px solid red;}</style></head><body><!--事件傳遞順序:從最底層往上層傳遞,類(lèi)似氣泡從下往上所有又稱(chēng)為事件冒泡--><div onclick="alert('div')"> <p onclick="alert('P')"> <input type="button" value="按鈕" onclick="alert('按鈕')"> </p></div><input type="button" value="事件屬性綁定" onclick="alert('事件屬性')"><input type="button" value="動(dòng)態(tài)綁定" id="btn">
<script> /*動(dòng)態(tài)綁定*/ btn.onclick = function () { alert("動(dòng)態(tài)綁定"); }</script></body></html>
jQuery選擇器基礎(chǔ)選擇器 層級(jí)選擇器 $("#abc").next("span") 匹配id為abc元素的弟弟元素 $("#abc").nextAll() 匹配id為abc元素的弟弟們?cè)?/span> $("#abc").prev()匹配id為abc元素的哥哥元素 $("#abc").prevAll()匹配id為abc元素的哥哥們?cè)?/span> $("#abc").siblings()匹配id為abc元素的所有兄弟元素 $("#abc").parent() 匹配id為abc元素的父元素 $("#abc").children() 匹配id為abc元素的子元素們 $("div span") 子孫后代選擇器 $("div>span") 子元素選擇器 層級(jí)相關(guān)方法:
過(guò)濾選擇器 $("div:first") 匹配第一個(gè)div $("div:last") 匹配最后一個(gè)div $("div:eq(n)") 匹配下標(biāo)為n的div n從0開(kāi)始 $("div:lt(n)") 匹配下標(biāo)小于n的div $("div:gt(n)") 匹配下標(biāo)大于ndiv $("div:not(.abc)") 匹配class值不是abc的div $("div:even") 匹配下標(biāo)為偶數(shù)的div $("div:odd") 匹配下標(biāo)為奇數(shù)的div
內(nèi)容選擇器 可見(jiàn)選擇器 $("#abc").show() 讓id為abc的元素顯示 $("#abc").hide() 讓id為abc的元素隱藏 $("#abc").toggle() 讓id為abc的元素顯示隱藏狀態(tài)切換 $("div:visible") 匹配所有顯示的div $("div:hidden") 匹配所有隱藏的div 顯示和隱藏相關(guān)的方法
屬性選擇器 $("div[屬性名]") 匹配包含xxx屬性的div $("div[屬性名='值']") 匹配某個(gè)屬性等于某個(gè)值的div $("div[屬性名!='值']") 匹配某個(gè)屬性不等于等于某個(gè)值的div
子元素選擇器 $("div:first-child") 匹配是div并且是子元素并且是第一個(gè)子元素 $("div:last-child")匹配是div并且是子元素并且是最后一個(gè)子元素 $("div:nth-child(n)") 匹配div并且是子元素并且是第n個(gè)子元素 n從1開(kāi)始
表單選擇器 $(":input") 匹配所有控件 $(":password") 匹配所有密碼框 $(":radio") 匹配所有單選 $(":checkbox") 匹配所有多選 $(":checked") 匹配所有選中的單選/多選和下拉選 $("input:checked") 匹配所有選中的單選和多選 $(":selected") 匹配所有選中的下拉選
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="text" id="i1"><input type="button" value="按鈕" id="b1"><div id="d1"></div><!--引入jQuery框架文件--><script src="../js/jquery-1.4.2.js"></script><script> //jq中動(dòng)態(tài)綁定點(diǎn)擊事件 $("#b1").click(function () { $("#d1").text($("#i1").val()); //上面代碼等效下面 // let d1 = document.getElementById("d1"); // let i1 = document.getElementById(("i1")); // d1.innerText = i1.value; });</script></body></html>
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title></head><body><input type="text" id="i1"><input type="button" value="js轉(zhuǎn)jq" id="b1"><input type="button" value="jq轉(zhuǎn)js" id="b2">
<script src="../js/jquery-1.4.2.js"></script><script> $("#b1").click(function () { //得到j(luò)s對(duì)象 let js = document.getElementById("i1"); //把js對(duì)象轉(zhuǎn)成jq對(duì)象 let jq = $(js); //調(diào)用jq對(duì)象獨(dú)有的獲取值的方法 alert(jq.val()); }) $("#b2").click(function () { //得到j(luò)q對(duì)象 let jq = $("#i1"); //把jq對(duì)象轉(zhuǎn)成js對(duì)象 jq對(duì)象實(shí)際上就是一個(gè)數(shù)組 數(shù)組里面裝的就是js對(duì)象 let js = jq[0]; alert(js.value); })</script></body></html>
<!DOCTYPE HTML><html><head><title>基本過(guò)濾選擇器</title><meta http-equiv="content-type" content="text/html; charset=UTF-8"><style type="text/css">div,span { width: 140px; height: 140px; margin: 20px; background: #9999CC; border: #000 1px solid; float: left; font-size: 17px; font-family: Roman;}
div.mini { font-size: 14px; height: 53px; width: 47px; background: #CC66FF; border: #000 1px solid; font-family: Roman;}input{ margin: 5px 5px; }</style>
<!--引入jquery的js庫(kù)--><script src="../js/jquery-1.4.2.js"></script><script type="text/javascript"> $(function() { /* ---------屬性選擇器練習(xí)--------- */ //改變包含id屬性的 div 元素的背景色為 #FF6347" id="b1" $("#b1").click(function () { $("div[id]").css("background-color","#ff6347"); })
//改變包含屬性title='aa' 的div 元素的背景色為 #9ACD32" id="b2" $("#b2").click(function () { $("div[title='aa']").css("background-color","#9ACD32"); }) //改變type屬性不等于button的input 元素的背景色為 #FF0033" id="b3" $("#b3").click(function () { $("input[type!='button']").css("background-color","#FF0033"); })
//=================================================
/* ---------子元素選擇器練習(xí)--------- */ //改變div 第二個(gè)子元素的背景色為 #006400" id="b4" $("#b4").click(function () { $("div:nth-child(2)").css("background-color","#006400"); }) //改變div 第一個(gè)子元素的背景色為 #FF69B4" id="b5" $("#b5").click(function () { $("div:first-child").css("background-color","#FF69B4"); })
})</script></head>
<body> <input type="button" value=" 改變包含id屬性的 div 元素的背景色為 #FF6347" id="b1" /> <input type="button" value=" 改變包含屬性title='aa' 的div 元素的背景色為 #9ACD32" id="b2" /> <input type="button" value=" 改變type屬性不等于button的input 元素的背景色為 #FF0033" id="b3" />
<hr/> <hr/>
<input type="button" value=" 改變div 第二個(gè)子元素的背景色為 #006400" id="b4" /> <input type="button" value=" 改變div 第一個(gè)子元素的背景色為 #FF69B4" id="b5" />
<h1>天氣冷了</h1>
<div id="one">id為one</div>
<div id="two"> id為two <div class="mini"> class是 mini</div> </div>
<div class="one" title="aa"> class是 one title為aa <div class="mini"> class是 mini</div> <div class="mini"> class是 mini</div> </div> <div class="one" title="bb"> class是 one title為bb <div class="mini01"> class是 mini01</div> <div class="mini"> class是 mini</div> </div>
<br> <div id="mover">id為mover 動(dòng)畫(huà)</div> <br> <input type="submit"/></body></html>
|
