單體創(chuàng)建對(duì)象,工廠模式,構(gòu)造函數(shù),原型模式,call和apply,函數(shù)的繼承,新增選擇器,jQuery加載,jQuery選擇器,jQuery樣式操作,點(diǎn)擊事件,索引值與選項(xiàng)卡

單體:

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')其他兄弟移除樣式

? ? ? ? ? ? })

? ? ? ? })

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

推薦閱讀更多精彩內(nèi)容