call和apply、函數的繼承、新增選擇器、jQuery加載、jQuery選擇器、jQuery樣式操作、click事件、jQuery索引值、jQuery屬性操作、jQuery特殊效果、jQue...

call和apply:二者都可以改變當前的this,區別在于apply方法要將參數放入數組中再傳參

函數的繼承:

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方法并傳入子類的this,可實現屬性的繼承

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,'老司機');

Driver.showName();

Driver.showAge();

Driver.showJob();

新增選擇器:

document.querySlector()? ? 選擇一個

document.querySlectorAll()? 選擇一類

jQuery加載:

將獲取元素的語句寫到頁面頭部,會因為元素還沒有加載而出錯,jquery有ready方法解決

//JS寫法

window.onload = function(){

var div = document.getElementById('div');

alert(div.innerHTML);

}

//JQ寫法

$(document).ready(function() {

var $div = $('#div');

alert('jquery:' + $div.html());

})

//簡寫

$(function(){

var $div = $('#div');

alert('jquery:' + $div.html());

})

jQuery選擇器:

$(document) //選擇整個文檔對象

$('li') //選擇所有的li元素

$('#myId') //選擇id為myId的網頁元素

$('.myClass') // 選擇class為myClass的元素

$('input[name=first]') // 選擇name屬性等于first的input元素

$('#ul1 li span') //選擇id為為ul1元素下的所有li下的span元素

對選擇集進行修飾過濾(類似CSS偽類)

$('#ul1 li:first') //選擇id為ul1元素下的第一個li

$('#ul1 li:odd') //選擇id為ul1元素下的li的奇數行

$('#ul1 li:eq(2)') //選擇id為ul1元素下的第3個li

$('#ul1 li:gt(2)') // 選擇id為ul1元素下的前三個之后的li

$('#myForm :input') // 選擇表單中的input元素

$('div:visible') //選擇可見的div元素

對選擇集進行函數過濾

$('div').has('p'); // 選擇包含p元素的div元素

$('div').not('.myClass'); //選擇class不等于myClass的div元素

$('div').filter('.myClass'); //選擇class等于myClass的div元素

$('div').first(); //選擇第1個div元素

$('div').eq(5); //選擇第6個div元素

選擇集轉移

$('div').prev('p'); //選擇div元素前面的第一個p元素

$('div').prevAll('p'); //選擇div元素前面所有的p元素

$('div').next('p'); //選擇div元素后面的第一個p元素

$('div').nextAll('p'); //選擇div元素后面所有的p元素

$('div').closest('form'); //選擇離div最近的那個form父元素

$('div').parent(); //選擇div的父元素

$('div').children(); //選擇div的所有子元素

$('div').siblings(); //選擇div的同級元素

$('div').find('.myClass'); //選擇div內的class等于myClass的元素

jQuery樣式操作:

//讀取樣式

alert($('.div1').css('fontSize'));

//設置樣式

$('.div1').css({background:'gold'});

//增加行間樣式

$('.div1').addClass('big');

//減少行間樣式,多個樣式用空格分開

$('.div1').removeClass('div1');

click事件:

$('#btn').click(function(){

$('.box').toggleClass('sty');? //切換樣式

});

jQuery索引值:

$('.list li').click(function(){

// alert(this.innerHTML);

// alert($(this).html());

alert($(this).index());

});

jQuery屬性操作:

html()

// 取出html內容

var $htm = $('#div1').html();

// 設置html內容

$('#div1').html('<span>添加文字</span>');

text()

// 取出文本內容

var $htm = $('#div1').text();

// 設置文本內容

$('#div1').text('<span>添加文字</span>');

attr():

// 取出圖片的地址

var $src = $('#img1').attr('src');

// 設置圖片的地址和alt屬性

$('#img1').attr({ src: "test.jpg", alt: "Test Image" });

jQuery特殊效果:

fadeIn() 淡入

fadeOut() 淡出

fadeToggle() 切換淡入淡出

hide() 隱藏元素

show() 顯示元素

toggle() 依次展示或隱藏某個元素

slideDown() 向下展開

slideUp() 向上卷起

slideToggle() 依次展開或卷起某個元素

jQuery鏈式調用

$('#div1') // id為div1的元素

.children('ul') //該元素下面的ul子元素

.slideDown('fast') //高度從零變到實際高度來顯示ul元素

.parent()? //跳到ul的父元素,也就是id為div1的元素

.siblings()? //跳到div1元素平級的所有兄弟元素

.children('ul') //這些兄弟元素中的ul子元素

.slideUp('fast');? //高度實際高度變換到零來隱藏ul元素

?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容