【JavaScript】js02
正則對象。
聲明：
//var reg = new RegExp(‘‘, ‘‘);// i,g 修正符。
// i，不區分大小寫，g 全局匹配。
//var reg = /\w/i;
方法：
//exec(); 如果匹配到，返回結果，如果匹配不到，返回 null
//test(); 如果匹配到，返回 true，如果匹配不到，返回 false
元字符。
. 查找單個字符，除了換行和行結束符。
\w 查找單詞字符。// 字母數字下劃線。
\W 查找非單詞字符。
\d 查找數字。
\D 查找非數字。
\s 查找空白符。
\S 查找非空白符。
量詞
+ 至少有一個。
* 0個或者多個。
? 0個或者一個。
{m,} 至少 m 個。
{m,n} m - n個。
{m} m 個。
^ 以什麽 開頭。
$ 以什麽 結尾。
註意： js 對象大致分類。
內置對象。
自定義對象。new Object(); {}
DOM對象。
三，事件。
定義：就是瀏覽器（文檔）裏發生一件事。
準備知識。
網頁元素的默認行為。
事件的三要素。
事件源，
事件類型，
事件處理程序，
<div id="did" style="width: 200px;height: 200px;background: #f00;"></div>
<script type="text/javascript">
//
View Code
事件對象。
事件對象並不是必須的。根據需求，如果需要，就寫上。
事件對象，是系統自動封裝好的。不同的事件類型有不同的事件對象。
// 獲取鼠標距離窗口的坐標
//e.clientX;
e.clientY;
// 獲取鼠標距離文檔的坐標。
//e.pageX;
//e.pageY;
綁定事件。
//onclick="alert(111)"; 事件屬性綁定。DOM 0 級。
<div id="did" onclick="alert(‘111‘);" style="width:200px;background: #f00;height: 200px;"></div>View Code
//did.onclick = function(){}// 匿名函數綁定。重復添加相同事件時，會覆蓋。
獲取元素。 var did = document.getElementById(‘did‘); // 綁定事件。 did.onclick = function() { alert(‘222‘); }View Code
//did.addEventListener// 添加事件監聽，可疊加多個相同事件。attachEvent()// 早期IE DOM 2 級。
//addEventListener 添加事件監聽。 var did = document.getElementById(‘did‘); did.addEventListener(‘click‘, function(){ alert(‘333‘); }); did.addEventListener(‘click‘, function(){ alert(‘333----2‘); });View Code
各種事件。
文檔事件。
onload，當文檔加載完成之後，執行（即事件源可以放在事件處理程序之後）。
<script type="text/javascript">
// window 對象。
window.onload = function()
{
// 1. 獲取元素。
var did = document.getElementById(‘did‘);
// 2. 綁定事件。
did.onclick = function()
{
did.style.backgroundColor = ‘#0f0‘;
}
}
</script>
<div id="did" style="width: 200px;height: 200px;background: #f0f;"></div>
View Code
onunload，文檔卸載事件。// 兼容性有問題。
onbeforeunload，文檔卸載事件。// 兼容性有問題。
鼠標事件。
onclick，單擊。
ondblclick，雙擊
onmouseover，鼠標移入
onmouseout，鼠標移出
onmousemove，鼠標移動
onmousedown，鼠標按下
onmouseup，鼠標擡起
oncontextmenu，右鍵
例子：鼠標拖動div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 鼠標拖動 div</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
</style>
</head>
<body>
<div id="did" style="width: 200px;height: 200px;background: #ccc;position: absolute;"></div>
<script type="text/javascript">
// 聲明全局變量。
var _x = 0;
var _y = 0;
// 控制是否按下。
var isDown = false;
// 獲取元素。
var did = document.getElementById(‘did‘);
// 添加事件。
did.onmousedown = function(e)
{
// 設置 為 true
isDown = true;
this.style.background = "#f00";
this.style.cursor = ‘move‘;
// 獲取鼠標的坐標。
var mx = e.pageX;
var my = e.pageY;
// console.log(mx + ‘----‘ + my);
// 獲取 div 的依稀量。
var dx = did.offsetLeft;
var dy = did.offsetTop;
// console.log(dx + ‘----‘ + dy);
_x = mx - dx;
_y = my - dy;
}
window.onmousemove = function(e)
{
if(!isDown)
{
return ;
}
// 不停 地獲取鼠標的 坐標。
var mmx = e.pageX;
var mmy = e.pageY;
// 計算div 新的位置。
var newX = mmx - _x;
var newY = mmy - _y;
// 設置 div 的位置。
did.style.left = newX + ‘px‘;
did.style.top = newY + ‘px‘;
}
did.onmouseup = function()
{
isDown = false;
this.style.background = ‘#ccc‘;
this.style.cursor = ‘default‘;
}
</script>
</body>
</html>
View Code
鍵盤事件
onkeydown，keyCode ，表示你按下的是哪一個鍵。
onkeypress
onkeyup
例子：鍵盤移動div
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 鍵盤 移動</title>
<style type="text/css">
*
{
margin: 0;
padding: 0;
}
#con
{
width: 500px;
height: 400px;
background: #ccc;
margin: 0 auto;
}
#did
{
position: absolute;
width: 50px;
height: 50px;
background: blue;
}
</style>
</head>
<body>
<div id="con">
<div id="did"></div>
</div>
<script type="text/javascript">
//獲取元素。
var did=document.getElementById(‘did‘);
var con=document.getElementById(‘con‘);
//獲取con的left,top
var conLeft=con.offsetLeft;
var conTop=con.offsetTop;
//獲取con的寬度、高度
var conWidth=con.offsetWidth;
var conHeight=con.offsetHeight;
//獲取did的寬度、高度
var didWidth=did.offsetWidth;
var didHeight=did.offsetHeight;
//步進速度
var step=2;
//定義判斷是否有計時器存在的變量
var inte=null;
//添加事件
window.onkeydown=function(e){
//獲取代碼。
var keyCode=e.keyCode;
switch(keyCode) {
case 37:
moveLeft();
break;
case 38:
moveUp();
break;
case 39:
moveRight();
break;
case 40:
moveDown();
break;
}
}
function moveLeft(){
//判斷當前是否有定時器存在
if (inte!=null) {
return;
}
inte=setInterval(function(){
//獲取原來的left
var oldLeft=did.offsetLeft;
//計算現在的left
var newLeft=oldLeft-step;
var minLeft=conLeft;
//判斷邊界
if (newLeft<minLeft) {
newLeft=minLeft;
}
//設置
did.style.left=newLeft+‘px‘;
},1);
}
function moveRight(){
if (inte!=null) {
return;
}
inte=setInterval(function(){
//獲取原來的left
var oldLeft=did.offsetLeft;
//計算。
var newLeft=oldLeft+step;
//最大邊界
var maxLeft=conLeft+conWidth-didWidth;
//判斷
if (newLeft>maxLeft) {
newLeft=maxLeft;
}
//設置
did.style.left=newLeft+‘px‘;
},1)
}
function moveDown(){
if (inte!=null) {
return;
}
inte=setInterval(function(){
//獲取原來的top
var oldTop=did.offsetTop;
//計算。
var newTop=oldTop+step;
//最大邊界
var maxTop=conTop+conHeight-didHeight;
//判斷
if (newTop>maxTop) {
newTop=maxTop;
}
//設置
did.style.top=newTop+‘px‘;
},1)
}
function moveUp(){
//判斷當前是否有定時器存在
if (inte!=null) {
return;
}
inte=setInterval(function(){
//獲取原來的top
var oldTop=did.offsetTop;
//計算現在的top
var newTop=oldTop-step;
var minTop=conTop;
//判斷邊界
if (newTop<minTop) {
newTop=minTop;
}
//設置
did.style.top=newTop+‘px‘;
},1);
}
//鍵盤擡起事件。
window.onkeyup=function(){
//清除定時器
clearInterval(inte);
inte=null;
}
</script>
</body>
</html>
View Code
表單事件。
onfoucs，獲取焦點事件。
onblur，失去焦點事件。
例子：移入移出正則驗證
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 表單事件 onfocus onblur</title>
<style type="text/css">
#inp
{
height: 30px;
border:1px solid #ccc;
font-size: 14px;
line-height: 30px;
padding-left:10px;
}
</style>
</head>
<body>
<input id="inp" type="text" name="username" value="">
<script type="text/javascript">
//獲取元素
var inp=document.getElementById(‘inp‘);
//獲取焦點。
inp.onfocus=function(){
// alert(‘111‘);
this.style.border=‘1px solid blue‘;
}
inp.onblur=function(){
//獲取當前字符串
var value=this.value;
//聲明正則。
var reg=/^\w{6,18}$/;
//驗證。
var res=reg.test(value);
if (res) {
this.style.border=‘1px solid green‘;
}else{
this.style.border=‘1px solid red‘;
}
}
</script>
</body>
</html>
View Code
onsubmit，表單提交事件。
onreset，表單重置事件。
例子：表單正則驗證
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 表單提交和重置 事件onsubmit onreset</title>
<style type="text/css">
#inp
{
height: 30px;
border:1px solid #ccc;
font-size: 14px;
line-height: 30px;
padding-left:10px;
}
</style>
</head>
<body>
<form id="myform" accept="">
<input type="text" name="username" id="inp"><br>
<input type="submit" name="" value="提交">
<input type="reset" name="" value="重置">
</form>
<script type="text/javascript">
//獲取元素。
var myform=document.getElementById(‘myform‘);
var inp=document.getElementById(‘inp‘);
//添加提交事件。
myform.onsubmit=function(){
//獲取當前字符串
var value=inp.value;
//聲明正則
var reg=/^\w{6,18}$/;
//驗證。
var res=reg.test(value);
if (res) {
inp.style.border=‘1px solid green‘;
}else{
inp.style.border=‘1px solid red‘;
return false;
}
}
//添加重置事件
myform.onreset=function(){
// return false;
//confirm 確認框
var res=confirm(‘是否要重置？‘);
if (!res) {
return false;
}
}
</script>
</body>
</html>
View Code
onchange，下拉框事件。// 城市聯動。
例子：城市聯動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 城市聯動</title>
</head>
<body>
<select id="p">
</select>
<select id="c">
</select>
<script type="text/javascript">
// 獲取元素。
var p = document.getElementById(‘p‘);
var c = document.getElementById(‘c‘);
// 創建省市關系。
var pro = [‘北京‘, ‘河北‘, ‘河南‘, ‘山東‘, ‘山西‘];
var city = [];
city[0] = [‘昌平‘, ‘朝陽‘, ‘海澱‘, ‘東城‘];
city[1] = [‘石家莊‘, ‘保定‘, ‘唐山‘, ‘廊坊‘];
city[2] = [‘鄭州‘, ‘駐馬店‘, ‘洛陽‘, ‘漯河‘ ];
city[3] = [‘青島‘, ‘煙臺‘, ‘濟南‘, ‘德州‘];
city[4] = [‘太原‘, ‘長治‘, ‘運城‘, ‘呂梁‘];
// 寫業務。
var pstr = ‘‘;
for(var i = 0; i < pro.length; i ++)
{
pstr += "<option value="+ i +">"+ pro[i] +"</option>";
}
p.innerHTML = pstr;
// 添加事件。
p.onchange = function()
{
init();
}
init();
// 封裝函數。
function init()
{
var cstr = ‘‘;
// 獲取當前省份的下標。
var value = p.value;
for(var j = 0; j < city[value].length; j ++)
{
cstr += "<option value="+ j +">"+ city[value][j] +"</option>";
}
c.innerHTML = cstr;
}
</script>
</body>
</html>
View Code
onselect，文本選中事件。
oninput，正在輸入事件。
圖片事件。
onerror，圖片加載失敗事件。
窗口事件。
onresize
滾動事件。
onscroll
獲取多個元素。 document.getElementsByTagName();
循環內部，要找到當前對象，使用 this。
事件的冒泡。（如兩個div相套時，點擊上方的小div時會先觸發小div的事件再觸發大div的事件）
// 阻止事件冒泡。
e.stopPropagation();
例子：阻止事件冒泡
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>js 冒泡。</title>
<style type="text/css">
#d1
{
width: 300px;
height: 300px;
background: #f00;
position: relative;
}
#d2
{
position: absolute;
left:100px;
top:100px;
width: 100px;
height: 100px;
background: yellow;
}
</style>
</head>
<body>
<div id="d1">
<div id="d2"></div>
</div>
<script type="text/javascript">
// 獲取元素。
var d1 = document.getElementById(‘d1‘);
var d2 = document.getElementById(‘d2‘);
d1.onclick = function(e)
{
alert(‘d1‘);
}
d2.onclick = function(e)
{
// 阻止事件冒泡。
e.stopPropagation();
alert(‘d2‘);
}
</script>
</body>
</html>
View Code
獲取計算後的樣式。
var style = getComputedStyle(對象);
style.width;
style.background;
全選，反選，全不選。
三，DOM，文檔對象模型。document Object Model。
在學習 HTML 的階段，我們認為 html 中的所有內容都叫元素。
在學習 js 階段，我們把html 中的所有內容都叫 節點。
節點類型。
元素節點
屬性節點
文本節點
註釋節點
文檔節點
節點關系。
childNodes
children
firstChild
firstElementChild
lastChild
lastElementChild
previousSibling
previousElementSibling
nextSibling
nextElementSibling
parentNode
parentElement
通用方法。
document.getElementById
document.getElementsByTagName
document.getElementsByName
document.getElementsByClassName
節點操作。
document.createElement(‘img‘);
did.appendChild(img);
did.insertBefore(img, childNode);
did.setAttribute(‘src‘, ‘./images/1.jpg‘);
did.getAttribute(‘src‘);
did.replaceChild()
did.removeChild()
document.createAttribute();
document.createTextNode();
img.clone();
img.clone(true);
【JavaScript】js02