單體：
var ton = {
name:'tom',
age:18,
showName:functionn(){
alert(this.name);},
showAge:function(){
alert(this.age);},}
Tom.showName();
工廠模式：
function Person(name,age,job){
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();
構(gòu)造函數(shù)：
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 Bob = new Personn('bob',18,'產(chǎn)品汪');
Bob.showJob();
原型模式：
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 Lucy = new Person('lucy',18,"測(cè)試鼠")；
var Lily = new Person('lily',18,"市場(chǎng)雞")；
call 和 apply 的區(qū)別;
function aa(a，b){
alert('我的this是' + this+',我的a是’+a+ ',我的b是' +b);
}
aa.call('abc',2,3);
aa.apply('abc',[2,3]);
改變當(dāng)前的this區(qū)別在于apply方法要將參數(shù)放到數(shù)組里在傳參
函數(shù)的繼承：
? ? ? ? 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 Driver = new Sclass('tom',18,'老司機(jī)');
新增選擇器：
document.querySelector('id')
document.querySelectorAll('class')
jquery加載：
? ? ? ? $(document).ready(function () {
? ? ? ? ? ? var $div = $('#div');
? ? ? ? ? ? alert('Jquery' + div.innerHTML)
? ? ? ? })
? ? ? ? $(function () {
? ? ? ? ? ? var $div = $('#div');
? ? ? ? ? ? alert('Jquery' + div.innerHTML)
? ? ? ? })
jquery選擇器：
? ? ? ? $(function () {
? ? ? ? ? ? $('#div1').css({
? ? ? ? ? ? ? ? color:'pink'
? ? ? ? ? ? });;
? ? ? ? ? ? $('.box').css({
? ? ? ? ? ? ? ? fontSize:'15px'
? ? ? ? ? ? });;
? ? ? ? ? ? $('.list li').css({
? ? ? ? ? ? ? ? backgroundColor:'green',
? ? ? ? ? ? ? ? color:'#fff',
? ? ? ? ? ? ? ? fontSize:'20px',
? ? ? ? ? ? ? ? marginBottom:'10px'
? ? ? ? ? ? });
? ? ? ? ? ? $('#div1').next().css({//class為div1的下一個(gè)元素
? ? ? ? ? ? });
? ? ? ? ? ? $('#div1').nextAll('p').css({//div1后邊所有的p元素
? ? ? ? ? ? });
? ? ? ? ? ? $('#div1').parent().css({//轉(zhuǎn)移到父元素身上
? ? ? ? ? ? });
? ? ? ? ? ? ? $('#div1').closest('div').css({//選擇離自己最近的div祖先元素
? ? ? ? ? ? })
? ? ? ? })
jquery樣式操作：
? ? ? ? $(function () {
? ? ? ? ? ? alert($('div1').css('fontSize'));//讀取屬性
? ? ? ? ? ? $('div1').addClass('big');//添加類(lèi) .removeClass刪除樣式
? ? ? ? })
點(diǎn)擊事件：
? ? ? ? $(function () {
? ? ? ? ? ? $('#btn').click(function () {//點(diǎn)擊后執(zhí)行里邊代碼
? ? ? ? ? ? ? ? $('.box').toggleClass('sty');//toggleclass box的class里有sty就刪除。沒(méi)有就添加
? ? ? ? ? ? })
? ? ? ? })
索引值：
? ? ? ? $(function () {
? ? ? ? ? ? $('.list li').click(function () {
? ? ? ? ? ? ? ? // alert(this.innerHTML);
? ? ? ? ? ? ? ? alert($(this).index())//獲取索引值
? ? ? ? ? ? })
? ? ? ? })
選項(xiàng)卡：
? ? ? ? $(function () {
? ? ? ? ? ? $('#btns input').click(function () {
? ? ? ? ? ? ? ? $(this).addClass('cur').siblings().removeClass('cur');//sibings選中所有的兄弟元素 然后移除行間樣式
? ? ? ? ? ? ? ? $('#contents? div').eq($(this).index()).addClass('active').siblings().removeClass('active')
? ? ? ? ? //.eq($(this).index())索引值等于點(diǎn)擊的div .addClass('active')添加激活樣式.siblings().removeClass('active')其他兄弟移除樣式
? ? ? ? ? ? })
? ? ? ? })
