文章目錄
對象
時間對象
內置操作 不需要插件-Date
var date=newDate();
date.getFullYear();//年
date.getMonth()+1;//獲取月份 取值爲0-11 所以要＋1
date.getDate();//獲取日期
date.getDay();//獲取星期
date.getHours();//獲取小時
date.getMinutes();//獲取分鐘
date.getSeconds();//獲取秒
數學對象
Math 內置方法 不用引入插件
Math.ceil(1.1); //向上取整
Math.floor(1.9); //向下取整
Math.round(1.5); //四捨五入
Math.abs(-1);//絕對值
Math.max(2,3,1,77,33,23); //取最大值
Math.min(2,3,5,1,56); //取最小值
Math.pow(2,4); //冪運算 2的4次方
Math.sqrt(16); //開平方根
Math.random(); //隨機數 [0,1)
定時器
一旦開始 不會自己結束 需要手動設置停止
間歇定時器
每隔一段時間發生一次
使用場景: 輪播 倒計時
/*
setInterval(function(){},時間ms爲單位);
*/
setInterval(function(){
console.log(11);
},500);
//清除定時器
clearInterval();
延時定時器
只發生一次
使用場景: 廣告
/*
setTimeout(function(){},時間ms爲單位);
*/
setTimeout(function(){
console.log('延時出現');
},500);
函數
function
封裝 : 當功能反覆使用時–便於使用
調用才能執行
聲明式和表達式的區別: 聲明式可以先聲明再調用 也可以先調用再聲明, 表達式只能先聲明在調用 否則無效
<script>
//聲明式
function func(){
console.log(11);
}
func();
//表達式
var fn=function(){
console.log('function');
}
fn();
</script>
參數
形參 實參
參數一一對應
<script>
/*
function fn(形參){
操作;
}
fn(實參);
*/
function fn(a,b){
console.log(a+b);
}
fn(2,5);
</script>
arguments : 類數組
可以拿到實參的集合
<script>
function fn(){
console.log(arguments[0]+arguments[1]);
}
fn(2,5);
</script>
閉包
函數套函數
全局變量:全局都可以讀取修改
局部變量:在聲明的作用域內有效 作用域外無效
缺點:會造成內存泄漏 不會被銷燬
<script>
function one(){
var i=1;
return function(){
console.log(i++);
}
}
var f = one();
f();
f();
//結果是1 2--因爲是執行裏邊的函數
one()();
one()();
//結果是1 1--因爲每次都是從頭執行
</script>
BOM
瀏覽器對象模型
包含很多內置方法 事件,彈出框
<script>
console.log(window);
</script>
<button id="btn">btn</button>
<button id="back">go back</button>
<script>
var btn=document.getElementById('btn');
var back=document.getElementById('back');
btn.onclick=function(){
window.open('day2-8.html','_self');
//open默認新頁面打開 傳_self參數只在當前頁面打開 傳_blank參數在新頁面打開(默認)
}
back.onclick=function(){
//彈出框:alert prompt confirm
history.go(1);//歷史操作 可以執行上一步的操作 -n操作上n步 n操作下n步
window.close();//close 關閉頁面
console.log(window.location);//查看地址信息
window.location='day2-8.html';//location跳轉 默認當前頁面跳轉
window.navigator//查看瀏覽器信息
}
</script>
DOM
DOM 文檔對象模型 document
獲取元素
- 通過id獲取
document.getElementById("元素id");
- 通過class類名獲取
document.getElementsByClassName("類名");
- 通過標籤名獲取
document.getElementsByTagName("標籤名");
獲取子元素
父元素.children
var box=documen.getElementById('box');
box.children //所有子標籤
childNodes //不常用 多一個文本節點
獲取父元素
元素.parentNode
// 找有定位的父級元素 如果父級元素中都沒有定位 則找到body
offsetParent
獲取其他節點
firstElementChild //獲取第一個子節點
previousElementSibling //獲取上一個兄弟節點
nextElementSibling //獲取下一個兄弟節點
刪除節點
// remove
//元素.remove;
//removeChild 不常用
//元素.removeChild();
複製節點
cloneNode(true);
//傳true:標籤和內容一起復制
//不傳/傳false: 僅複製標籤 不復制內容
//元素.cloneNode();
創建標籤
document.createElement('標籤');
document.createTextNode('');//創建文本 不常用
<body>
<ul>
<li>11</li>
<li>22</li>
<li>33</li>
</ul>
<button id="btn">appened</button>
<script>
var btn=document.getElementById('btn');
var uls=document.getElementsByTagName('ul')[0];
var lis=document.getElementsByTagName('li');
btn.onclick=function(){
var newLi=document.createElement('li');
newLi.innerHTML='44';
uls.appendChild(newLi);
uls.insertBefore(newLi,lis[0]);//從中間插入(新標籤,位置)
}
</script>
</body>
事件
常用事件
- onclick()點擊事件
- onmouseover()鼠標滑過
- onmouseenter()鼠標劃入
- onmouseout/leave()鼠標劃出
- onmousedown/up()鼠標按下/擡起
- onmousemove()鼠標移動
- ondblclick()鼠標雙擊事件
- oncontextmenu()鼠標右鍵
- onkeydown/up()鍵盤按下/擡起
- onresize()窗口改變事件
- onfocus()聚焦事件
- onblur()失焦事件
- onscroll()滾動事件
事件的冒泡和捕獲
有層級關係,點擊最裏層元素, 外層元素的時間逐一發生
<style>
#box1{
width: 300px;
height: 300px;
background: red;
}
#box2{
width: 200px;
height: 200px;
background: blue;
}
#box3{
width: 100px;
height: 100px;
background: yellow;
}
</style>
<div id="box1">
<div id="box2">
<div id="box3"></div>
</div>
</div>
<script>
var box1=document.getElementById('box1');
var box2=document.getElementById('box2');
var box3=document.getElementById('box3');
box1.onclick=function(){
alert('box1');
}
box2.onclick=function(){
alert('box2');
}
box3.onclick=function(){
alert('box3');
}
</script>
阻止冒泡[冒泡是默認的]
事件.stopPropagation(); —標準瀏覽器
事件.cancelBubble=true; —ie
捕獲[需要設置]
在層級關係中,電機外層元素,裏層元素事件逐一發生
事件綁定:addEventListener[事件監聽] attachEvent()–ie沒有捕獲
普通的事件綁定 同個元素有多個同種事件類型,只有最後一個能生效
元素.addEventListener(‘事件類型’,‘函數名’,是否捕獲-默認false冒泡 true捕獲)
<script>//標準瀏覽器
btn.addEventListener('click',one,false);
btn.addEventListener('click',two,false);
function one(){
console.log(111);
}
function two(){
console.log(222);
}
</script>
<script>//IE
btn.attachEvent('onclick',one);
//區別:關鍵字不一樣 值的個數不一樣 事件類型書寫方式不同
</script>
取消事件監聽
[標準]removeEventListener(‘事件類型’,‘函數名’);
[IE]detachEvent(‘on事件類型’,‘函數名’);
取消默認行爲
[標準]事件.preventDefault();
[ie]事件.returnValue= false;
<script>
document.oncontextmenu=function(ev){
console.log(ev);
}
</script>
面向對象
構造函數
特點:
函數名首字母大寫
用this賦值
無需return
實例化新對象用new
<script>
function Fn(){
this.a=10;
}
var newObj=new Fn();
</script>
原型prototype
對象:__proto__屬性
函數:prototype原型 也有__proto__屬性 因爲函數就是對象
原型上的屬性和方法是共享的
面向過程
面向對象
jQuery
引入方式:在線引入 本地引入
選擇器
<script>
$('div');
$('.box');
$('#box');
$('#box p');
</script>
<script>
$('ul li:eq(1)').css('background','red');//eq爲下標 不支持[下標]
$('ul li:first').css('background','red');//first選中第一個 last最後一個
$('ul li:lt(2)').css('background','red');//lt下標小於2的 gt是大於
$('ul li:odd').css('background','red');//odd下標爲奇數的 even下標爲偶數
$('p[data=11]').css('color','blue');//通過p標籤裏的自定義屬性data定位
</script>
DOM操作
<script>
//子元素:children
$('ul').children();
//父元素:parent()獲取直系父元素 parents()獲取祖先元素
$('p').parent();
$('p').parents('div');//可以具體找一個祖先
//兄弟標籤
//div>p+span+ul
$('p').next().css('background','gold');//下一個兄弟元素
$('p').nextAll().css('background','gold');//所有下面的兄弟元素
$('p').prev().css('background','gold');//上一個兄弟元素
$('p').prevAll().css('background','gold');//所有上邊的兄弟
//子孫元素
//div>p>a>span>b
$('div').find('b').css('background','red');//查找所有子孫元素 不包括它本身
</script>
實例:驗證碼-定時器
點名器-定時器