閉包
1翁垂、閉包的用途：存循環(huán)的索引值
函數(shù)嵌套函數(shù)匀油，內(nèi)部函數(shù)可以引用外部函數(shù)的參數(shù)和變量凑懂，參數(shù)和變量不會被垃圾回收機(jī)制收回
<style type="text/css">
li{
height: 30px;
background-color: gold;
margin-bottom: 10px;
}
</style>
<script type="text/javascript">
//閉包的用途：存循環(huán)的索引值
window.onload = function(){
var aLi = document.getElementsByTagName('li');
// alert(aLi.length);//8
for(var i=0; i<aLi.length; i++){
/*
aLi[i].onclick = function(){
alert(i);//每個li都彈出8螺句，因?yàn)辄c(diǎn)擊時循環(huán)已完畢虽惭，i最后為8
}
*/
(function(k){//這里的k是形參
aLi[k].onclick = function(){
alert(k);//彈出每個li的索引值
}
})(i);//這里的i是實(shí)參
}
}
</script>
2、閉包做私有變量計(jì)數(shù)器
每調(diào)用一次count蛇尚，a就自增一次
alert(count());//1
alert(count());//2
var c = count();
alert(c);//3
3芽唇、閉包做選項(xiàng)卡
<script type="text/javascript">
//閉包做選項(xiàng)卡
window.onload = function(){
var aBtn = document.getElementById('btns').getElementsByTagName('input');
var aCon = document.getElementById('contents').getElementsByTagName('div');
// alert(aCon.length);
//循環(huán)所有的選項(xiàng)卡按鈕
for(var i=0; i<aBtn.length; i++){
(function(i){
//給每個選項(xiàng)卡按鈕添加點(diǎn)擊事件
aBtn[i].onclick = function(){
//遍歷所有選項(xiàng)卡按鈕
for(var j=0; j<aBtn.length; j++){
//將每個選項(xiàng)卡按鈕都設(shè)為灰色
aBtn[j].className = '';
//將每個內(nèi)容區(qū)都隱藏
aCon[j].className = '';
}
//this代表當(dāng)前點(diǎn)擊的Button對象
this.className = 'cur';//當(dāng)前點(diǎn)擊的按鈕為金色
// alert(i);//不加閉包時，不管點(diǎn)哪個按鈕取劫，i都等于3
//加閉包保存了索引值才有效
aCon[i].className = 'active';//當(dāng)前點(diǎn)擊的按鈕對應(yīng)的內(nèi)容顯示
}
})(i);
}
}
</script>
獲取地址欄參數(shù)
window.onload = function(){
//url匆笤？aa=tom#12
var data = window.location.search;//？aa=tom
var hash = window.location.hash;//#12
alert(hash);//#12
var oSpan = document.getElementById('span01');
// alert(data);//谱邪？aa=tom
var arr = data.split('=');
// alert(arr);//?aa,tom
var name = arr[1];
oSpan.innerHTML = name;
}
math彈出隨機(jī)數(shù)以及取整
<script type="text/javascript">
// var num = Math.random();
// alert(num);//彈出0-1之間的隨機(jī)數(shù)
var a = 10;
var b = 20;
// var num = Math.random()*(b-a)+a;
// alert(num);//彈出10-20之間的隨機(jī)數(shù)
var arr = [];
for(var i=0; i<20; i++){
// var num = Math.floor(Math.random()*(b-a)+a);//向下取整炮捧，10-19
var num = Math.floor(Math.random()*(b-a + 1)+a);//向下取整，10-20
arr.push(num);//生成一個數(shù)就放進(jìn)數(shù)組
}alert(arr);//17,20,20,11,11,19,17,16,10,11,16,11,18,13,13,11,17,14,19,19
</script>
創(chuàng)建對象
1惦银、單體創(chuàng)建對象
<script type="text/javascript">
var Tom = {
// 屬性
name:'tom',
age:18,
// 方法
showName:function(){
alert(this.name);
},
showAge:function(){
alert(this.age);
}
}
//調(diào)用屬性
alert(Tom.name);
alert(Tom.age);
//調(diào)用方法
Tom.showName();
</script>
2咆课、工廠模式創(chuàng)建對象
<script type="text/javascript">
function Person(name,age,job){
//創(chuàng)建一個空對象
// var o = new Object();//方式一
var o = {};//方式二
o.name = name;
o.age = age;
o.job = job;
o.showName = function(){
alert(this.name);
}
o.showAge = function(){
alert(this.age);
}
o.showJob = function(){
alert(this.job);
}
return o;
}
var Tom = Person('tom',18,'程序猿');
Tom.showJob();
var Jack = Person('jack',19,'攻城獅');
Jack.showJob();
</script>
構(gòu)造函數(shù)
1、構(gòu)造函數(shù)
<script type="text/javascript">
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
this.showName = function(){
alert(this.name);
}
this.showAge = function(){
alert(this.age);
}
this.showJob = function(){
alert(this.job);
}
}
//new的作用就相當(dāng)于工廠模式中最開始創(chuàng)建了一個空對象璧函，最后把對象返回
var Bob = new Person('bob',18,'產(chǎn)品汪');
Bob.showJob();
var Alex = new Person('alex',19,'運(yùn)營喵');
Alex.showJob();
alert(Bob.showName == Alex.showName);//false
</script>
2傀蚌、原型模式
<script type="text/javascript">
function Person(name,age,job){
this.name = name;
this.age = age;
this.job = job;
Person.prototype.showName = function(){
alert(this.name);
}
Person.prototype.showAge = function(){
alert(this.age);
}
Person.prototype.showJob = function(){
alert(this.job);
}
}
//先去自己的對象中找showName函數(shù)，再去構(gòu)造函數(shù)的原型找
var Lucy = new Person('lucy',18,'測試鼠');
//重寫自身對象中的方法蘸吓，不會影響其它對象
Lucy.showName = function(){
alert('我的名字是' + this.name);
}
Lucy.showName();//我的名字是lucy
var Lily = new Person('lily',19,'市場雞');
Lily.showName();//lily
alert(Lucy.showName == Lily.showName);//false
</script>
3善炫、call和apply的區(qū)別
二者都可以改變當(dāng)前的this，區(qū)別在于apply方法要將參數(shù)放入數(shù)組中再傳參
4库继、函數(shù)的繼承
<script type="text/javascript">
//父類
function Fclass(name, age){
this.name = name;
this.age = age;
}
Fclass.prototype.showName = function(){
alert(this.name);
}
Fclass.prototype.showAge = function(){
alert(this.age);
}
//子類
function Sclass(name, age, job){
//屬性用call或者apply的方式來繼承
Fclass.call(this, name, age);
this.job = job;
}
//方法繼承：將父類的一個實(shí)例賦值給子類的原型屬性
Sclass.prototype = new Fclass();
Sclass.prototype.showJob = function(){
alert(this.job);
}
//由于已經(jīng)繼承了父類的屬性和方法箩艺，所以可以直接調(diào)用
var Driver = new Sclass('tom',18,'老司機(jī)');
Driver.showName();
Driver.showAge();
Driver.showJob();
</script>
5、新增選擇器
<script type="text/javascript">
window.onload = function(){
var oDiv = document.querySelector('#div1');
alert(oDiv);//彈出[object HTMLDivElement]宪萄，表示選擇了該Div
//如果要選擇多個元素用querySelectorAll
var aLi = document.querySelectorAll('.list li');
alert(aLi.length);//8
}
</script>
</head>
<body>
<div id="div1">這是一個div元素</div>
<ul class="list">
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
<li>5</li>
<li>6</li>
<li>7</li>
<li>8</li>
</ul>
</body>
</html>
jQuery
1艺谆、jQuery加載
JS寫法
window.onload = function(){
var oDiv = document.getElementById('div');
alert(oDiv.innerHTML);//這是一個div元素
}
Query的完整寫法
比上面JS寫法先彈出，因?yàn)閣indow.onload是把頁面元素加載拜英、渲染完才彈出静汤，而ready()是把所有頁面的節(jié)點(diǎn)加載完之后就彈出了，不用等渲染了
$(document).ready(function(){
var $div = $('#div');
alert('jQuery:' + $div.html());//jQuery:這是一個div元素
})
簡寫方式
$(function(){
var $div = $('#div');//CSS樣式怎么寫居凶，這里就怎么寫
//html()方法相當(dāng)于原生JS的innerHTML
alert($div.html() + 'jQuery');
})
2虫给、jQuery選擇器
jquery用法思想一
選擇某個網(wǎng)頁元素，然后對它進(jìn)行某種操作
jquery選擇器
jquery選擇器可以快速地選擇元素侠碧，選擇規(guī)則和css樣式相同抹估，使用length屬性判斷是否選擇成功。
('li') //選擇所有的li元素
('.myClass') // 選擇class為myClass的元素
('#ul1 li span') //選擇id為為ul1元素下的所有l(wèi)i下的span元素
對選擇集進(jìn)行修飾過濾(類似CSS偽類)
('#ul1 li:odd') //選擇id為ul1元素下的li的奇數(shù)行
('#ul1 li:gt(2)') // 選擇id為ul1元素下的前三個之后的li
('div:visible') //選擇可見的div元素
對選擇集進(jìn)行函數(shù)過濾
('div').not('.myClass'); //選擇class不等于myClass的div元素
('div').first(); //選擇第1個div元素
$('div').eq(5); //選擇第6個div元素
選擇集轉(zhuǎn)移
('div').next('p'); //選擇div元素后面的第一個p元素
('div').parent(); //選擇div的父元素
('div').siblings(); //選擇div的同級元素
$('div').find('.myClass'); //選擇div內(nèi)的class等于myClass的元素
<script type="text/javascript">
$(function(){
//選擇元素的規(guī)則和css樣式相同
$('#div1').css({color: 'pink'});
$('.box').css({fontSize: '30px'});
$('.list li').css({
background: 'green',
color: '#fff',
fontSize: '20px',
marginBottom: '10px'
});
})
</script>
3弄兜、選擇集轉(zhuǎn)移
<script type="text/javascript">
$(function(){
//prev()是同級的上一個元素药蜻，prevAll()是同級的上面所有的元素
//next()是同級的下一個元素瓷式，nextAll()是同級的下面所有的元素
//修改#div1的下一個元素的樣式
$('#div1').next().css({color: 'red'});
//修改#div1的下面所有p標(biāo)簽設(shè)置樣式
$('#div1').nextAll('p').css({color: 'red'});
//選擇上一級的父元素
/*$('#span01').parent().css({
width:'100px',
height:'100px',
background:'gold'
})*/
//獲取祖級用$('#span02').parent().parent()不可取，可用closest('div')獲取離span02最近的div
//closest可以選擇離自己最近的元素语泽，元素可以是父級贸典，也可以是子集
$('#span01').closest('div').css({
width:'200px',
height:'200px',
background:'pink'
})
/*
$('.list li')與$('.list').children()的區(qū)別：
原始的選擇集不一樣
$('.list li')不能通過end()回到父級
$('.list').children()可以通過end()回到父級
*/
$('.list').children().css({
background:'gold',
height:'30px',
marginBottom:'10px'
}).end().css({
background:'green'
})
//eq(2)是選擇索引等于2的第三個li，siblings()表示除第三個之外的其它兄弟li
$('.list2 li:eq(2)').css({background:'gold'}).siblings().css({background:'green'});
//find()是選擇div內(nèi)的class等于link1的元素
$('#div2').find('.link1').css({color:'red'});
})
</script>
4踱卵、jQuery操作樣式
jQuery用同一個函數(shù)即可以取值瓤漏、也可以賦值
讀取樣式
選擇器獲取的多個元素，獲取信息獲取的是第一個颊埃，比如：$("div").css("width")，獲取的是第一個div的width蝶俱。
操作樣式類名
("#div1").removeClass("divClass") //移除id為div1的對象的class名為divClass的樣式
("#div1").toggleClass("anotherClass") //重復(fù)切換anotherClass樣式
alert(('#div1').css({background:'gold'});
//增加行間樣式
$('#div1').addClass('big');
//減少行間樣式班利，多個樣式用空格分開
$('#div1').removeClass('div2 big');
5、給元素綁定click事件榨呆，可以用如下方法：
$('#btn1').click(function(){
// 內(nèi)部的this指的是原生對象
// 使用jquery對象用 $(this)
})
6罗标、jQuery索引值
<script type="text/javascript">
$(function(){
$('.list li').click(function(){
// alert(this.innerHTML);//彈出標(biāo)簽中的內(nèi)容
alert($(this).index());//彈出下標(biāo)
})
})
</script>
7、jQuery做選項(xiàng)卡
<style type="text/css">
.btns{
width: 500px;
height: 50px;
}
/*選項(xiàng)卡的樣式*/
.btns input{
width: 100px;
height: 50px;
background-color: #ddd;/*默認(rèn)灰色*/
color: #666;
border: 0px;
}
/*被選中的選項(xiàng)卡的樣式*/
.btns input.cur{
background-color: gold;
}
/*內(nèi)容區(qū)的樣式*/
.contents div{
width: 500px;
height: 300px;
background-color: gold;
display: none;/*默認(rèn)隱藏*/
line-height: 300px;
text-align: center;
}
/*被選中的內(nèi)容區(qū)的樣式*/
.contents div.active{
display: block;
}
</style>
<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
<script type="text/javascript">
$(function(){
$('#btns input').click(function() {
//失去焦點(diǎn)积蜻，避免出現(xiàn)默認(rèn)的藍(lán)框
$(this).blur();
//this是原生的對象
// alert(this);//彈出[object HTMLInputElement]闯割，說明this就是當(dāng)前點(diǎn)擊的input元素
//jQuery的this對象使用時要用$()包起來，這樣就可以調(diào)用jQuery的方法了
//給當(dāng)前元素添加選中樣式竿拆，為兄弟元素移除選中樣式
$(this).addClass('cur').siblings().removeClass('cur');
//$(this).index()獲取當(dāng)前按鈕所在層級范圍的索引值
//顯示對應(yīng)索引的內(nèi)容區(qū)宙拉，隱藏其它兄弟內(nèi)容區(qū)
$('#contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
});
})
</script>
</head>
<body>
<div class="btns" id="btns">
<input type="button" value="tab01" class="cur">
<input type="button" value="tab02">
<input type="button" value="tab03">
</div>
<div class="contents" id="contents">
<div class="active">tab文字內(nèi)容一</div>
<div>tab文字內(nèi)容二</div>
<div>tab文字內(nèi)容三</div>
</div>
</body>
