153.call和apply:二者都可以改變當(dāng)前的this鹏秋,區(qū)別在于apply方法要將參數(shù)放入數(shù)組中再傳參
154.函數(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){
// 調(diào)用父類的call方法并傳入子類的this碗降,可實現(xiàn)屬性的繼承
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();
155.新增選擇器:
document.querySlector()? ? 選擇一個
document.querySlectorAll()? 選擇一類
156.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());
})
157.jQuery選擇器:
$(document) //選擇整個文檔對象
$('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元素
對選擇集進行修飾過濾(類似CSS偽類)
$('#ul1 li:first') //選擇id為ul1元素下的第一個li
$('#ul1 li:odd') //選擇id為ul1元素下的li的奇數(shù)行
$('#ul1 li:eq(2)') //選擇id為ul1元素下的第3個li
$('#ul1 li:gt(2)') // 選擇id為ul1元素下的前三個之后的li
$('#myForm :input') // 選擇表單中的input元素
$('div:visible') //選擇可見的div元素
對選擇集進行函數(shù)過濾
$('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元素
選擇集轉(zhuǎn)移
$('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內(nèi)的class等于myClass的元素
158.jQuery樣式操作:
//讀取樣式
alert($('.div1').css('fontSize'));
//設(shè)置樣式
$('.div1').css({background:'gold'});
//增加行間樣式
$('.div1').addClass('big');
//減少行間樣式蹂喻,多個樣式用空格分開
$('.div1').removeClass('div1');
159.click事件:
$('#btn').click(function(){
$('.box').toggleClass('sty');? //切換樣式
});
160.jQuery索引值:
$('.list li').click(function(){
// alert(this.innerHTML);
// alert($(this).html());
alert($(this).index());
});
161.jQuery屬性操作:
html()
// 取出html內(nèi)容
var $htm = $('#div1').html();
// 設(shè)置html內(nèi)容
$('#div1').html('<span>添加文字</span>');
text()
// 取出文本內(nèi)容
var $htm = $('#div1').text();
// 設(shè)置文本內(nèi)容
$('#div1').text('<span>添加文字</span>');
attr():
// 取出圖片的地址
var $src = $('#img1').attr('src');
// 設(shè)置圖片的地址和alt屬性
$('#img1').attr({ src: "test.jpg", alt: "Test Image" });
162.jQuery特殊效果:
fadeIn() 淡入
fadeOut() 淡出
fadeToggle() 切換淡入淡出
hide() 隱藏元素
show() 顯示元素
toggle() 依次展示或隱藏某個元素
slideDown() 向下展開
slideUp() 向上卷起
slideToggle() 依次展開或卷起某個元素
163.jQuery鏈?zhǔn)秸{(diào)用
$('#div1') // id為div1的元素
.children('ul') //該元素下面的ul子元素
.slideDown('fast') //高度從零變到實際高度來顯示ul元素
.parent()? //跳到ul的父元素民假,也就是id為div1的元素
.siblings()? //跳到div1元素平級的所有兄弟元素
.children('ul') //這些兄弟元素中的ul子元素
.slideUp('fast');? //高度實際高度變換到零來隱藏ul元素