面向過程與面向?qū)ο缶幊?/b>
1、面向過程：所有的工作都是現(xiàn)寫現(xiàn)用。
2、面向?qū)ο螅菏且环N編程思想，許多功能事先已經(jīng)編寫好了，在使用時(shí)，只需要關(guān)注功能的運(yùn)用，而不需要這個(gè)功能的具體實(shí)現(xiàn)過程。
javascript對象
將相關(guān)的變量和函數(shù)組合成一個(gè)整體，這個(gè)整體叫做對象，對象中的變量叫做屬性，變量中的函數(shù)叫做方法。javascript中的對象類似字典。
創(chuàng)建對象的方法
1、單體
<script type="text/javascript">
var Tom = {
? ? name : 'tom',
? ? age : 18,
? ? showname : function(){
? ? ? ? alert('我的名字叫'+this.name);? ?
? ? },
? ? showage : function(){
? ? ? ? alert('我今年'+this.age+'歲');? ?
? ? }
}
</script>
2、工廠模式
<script type="text/javascript">
function Person(name,age,job){
? ? var o = new Object();
? ? 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.showname();
</script>
2、構(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);? ?
? ? ? ? };
? ? }
? ? var tom = new Person('tom',18,'程序員');
? ? var jack = new Person('jack',19,'銷售');
? ? alert(tom.showjob==jack.showjob);
</script>
3、原型模式?
<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);? ?
? ? };
? ? var tom = new Person('tom',18,'程序員');
? ? var jack = new Person('jack',19,'銷售');
? ? alert(tom.showjob==jack.showjob);
</script>
4、繼承?
<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)
? ? ? ? {
? ? ? ? ? ? fclass.call(this,name,age);
? ? ? ? ? ? this.job = job;
? ? ? ? }
? ? ? ? sclass.prototype = new fclass();
? ? ? ? sclass.prototype.showjob = function(){
? ? ? ? ? ? alert(this.job);
? ? ? ? }
? ? ? ? var tom = new sclass('tom',19,'全棧工程師');
? ? ? ? tom.showname();
? ? ? ? tom.showage();
? ? ? ? tom.showjob();
? ? </script>
new的作用就相當(dāng)于工廠模式中最開始創(chuàng)建了一個(gè)空對象，最后把對象返回
call和apply的區(qū)別
二者都可以改變當(dāng)前的this，區(qū)別在于apply方法要將參數(shù)放入數(shù)組中再傳參
屬性用call或者apply的方式來繼承
方法繼承：將父類的一個(gè)實(shí)例賦值給子類的原型屬性
新選擇器
1、document.querySlector()????????? 彈出一個(gè)元素
2、document.querySlectorAll()???? 選擇多個(gè)元素
jquery介紹
jQuery是目前使用最廣泛的javascript函數(shù)庫。據(jù)統(tǒng)計(jì)，全世界排名前100萬的網(wǎng)站，有46%使用jQuery，遠(yuǎn)遠(yuǎn)超過其他庫。微軟公司甚至把jQuery作為他們的官方庫。?
jQuery的版本分為1.x系列和2.x、3.x系列，1.x系列兼容低版本的瀏覽器，2.x、3.x系列放棄支持低版本瀏覽器，目前使用最多的是1.x系列的。
jquery是一個(gè)函數(shù)庫，一個(gè)js文件，頁面用script標(biāo)簽引入這個(gè)js文件就可以使用。
<script type="text/javascript" src="js/jquery-1.12.2.js"></script>
jquery的口號(hào)和愿望 Write Less, Do More（寫得少，做得多）?
jquery選擇器
? jquery用法思想一
選擇某個(gè)網(wǎng)頁元素，然后對它進(jìn)行某種操作
? jquery選擇器
jquery選擇器可以快速地選擇元素，選擇規(guī)則和css樣式相同，使用length屬性判斷是否選擇成功。
$(document) //選擇整個(gè)文檔對象
$('li') //選擇所有的li元素
$('#myId') //選擇id為myId的網(wǎng)頁元素
$('.myClass') // 選擇class為myClass的元素
$('input[name=first]') // 選擇name屬性等于first的input元素
$('#ul1 li span') //選擇id為為ul1元素下的所有l(wèi)i下的span元素
對選擇集進(jìn)行修飾過濾(類似CSS偽類)?
$('#ul1 li:first') //選擇id為ul1元素下的第一個(gè)li
$('#ul1 li:odd') //選擇id為ul1元素下的li的奇數(shù)行
$('#ul1 li:eq(2)') //選擇id為ul1元素下的第3個(gè)li
$('#ul1 li:gt(2)') // 選擇id為ul1元素下的前三個(gè)之后的li
$('#myForm :input') // 選擇表單中的input元素
$('div:visible') //選擇可見的div元素
對選擇集進(jìn)行函數(shù)過濾?
$('div').has('p'); // 選擇包含p元素的div元素
$('div').not('.myClass'); //選擇class不等于myClass的div元素
$('div').filter('.myClass'); //選擇class等于myClass的div元素
$('div').first(); //選擇第1個(gè)div元素
$('div').eq(5); //選擇第6個(gè)div元素
選擇集轉(zhuǎn)移?
$('div').prev('p'); //選擇div元素前面的第一個(gè)p元素
$('div').prevAll('p'); //選擇div元素前面所有的p元素
$('div').next('p'); //選擇div元素后面的第一個(gè)p元素
$('div').nextAll('p'); //選擇div元素后面所有的p元素
$('div').closest('form'); //選擇離div最近的那個(gè)form父元素
$('div').parent(); //選擇div的父元素
$('div').children(); //選擇div的所有子元素
$('div').siblings(); //選擇div的同級元素
$('div').find('.myClass'); //選擇div內(nèi)的class等于myClass的元素
jQuery加載
alert($);//彈出function (a,b){return new n.fn.init(a,b)}表示JQuery已經(jīng)引進(jìn)來了，這是它的一個(gè)構(gòu)造函數(shù)
JS寫法
window.onload = function(){
var oDiv = document.getElementById('div');
alert(oDiv.innerHTML);//這是一個(gè)div元素
}
jQuery的完整寫法
比上面JS寫法先彈出，因?yàn)閣indow.onload是把頁面元素加載、渲染完才彈出，而ready()是把所有頁面的節(jié)點(diǎn)加載完之后就彈出了，不用等渲染了
$(document).ready(function(){
var $div = $('#div');
alert('jQuery:' + $div.html());//jQuery:這是一個(gè)div元素
})
簡寫方式
$(function(){
var $div = $('#div');//CSS樣式怎么寫，這里就怎么寫
//html()方法相當(dāng)于原生JS的innerHTML
alert($div.html() + 'jQuery');
})
jQuery樣式操作
$(function(){
/*jQuery用同一個(gè)函數(shù)即可以取值、也可以賦值*/
//讀取樣式
alert($('#div1').css('fontSize'));//16px
//設(shè)置（寫入）樣式
$('#div1').css({background:'gold'});
//增加行間樣式
$('#div1').addClass('big');
//減少行間樣式，多個(gè)樣式用空格分開
$('#div1').removeClass('div2 big');
})
click事件
$(function(){
// 給按鈕綁定click事件
$('#btn').click(function(){
//重復(fù)切換sty樣式
$('.box').toggleClass('sty');
})
})
jQuery索引值
$(function(){
$('.list li').click(function(){
// alert(this.innerHTML);//彈出標(biāo)簽中的內(nèi)容
alert($(this).index());//彈出下標(biāo)
})
jQuery做選項(xiàng)卡
$(function(){
$('#box1 #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對象使用時(shí)要用$()包起來，這樣就可以調(diào)用jQuery的方法了
//給當(dāng)前元素添加選中樣式，為兄弟元素移除選中樣式
$(this).addClass('cur').siblings().removeClass('cur');
//$(this).index()獲取當(dāng)前按鈕所在層級范圍的索引值
//顯示對應(yīng)索引的內(nèi)容區(qū)，隱藏其它兄弟內(nèi)容區(qū)
$('#box1 #contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
});
$('#box2 #btns input').click(function() {
$(this).blur();
$(this).addClass('cur').siblings().removeClass('cur');
$('#box2 #contents div').eq($(this).index()).addClass('active').siblings().removeClass('active');
});
})
