第五章jQuery
阿新 • • 發佈：2018-07-18
button style 執行 步驟 size ast () ons 如果
DOM文檔加載的步驟
- 解析HTML結構。
- 加載外部腳本和樣式表文件。
- 解析並執行腳本代碼。
- DOM樹構建完成。
- 加載圖片等外部文件。
- 頁面加載完畢。
執行時間不同
window.onload必須等到頁面內包括圖片的所有元素加載完畢後才能執行。
$(document).ready()是DOM結構繪制完畢後就執行，不必等到加載完畢。
編寫個數不同
window.onload不能同時編寫多個，如果有多個window.onload方法，只會執行一個
$(document).ready()可以同時編寫多個，並且都可以得到執行
簡化寫法不同
window.onload沒有簡化寫法
$(document).ready(function(){})可以簡寫成$(function(){});
基礎選擇器
1.id選擇器
console.log($(‘#brother‘));
$(‘#brother‘).css(‘color‘,‘red‘);
//2.標簽選擇器
//設置一個值
// $(‘a‘).css(‘color‘,‘yellow‘)
// 設置多個值 設置多個值得時候使用對象存儲 key:value
$(‘a‘).css({‘color‘:‘yellow‘,‘font-size‘:‘24px‘});
//3.類選擇器
$(‘.li3‘).css(‘background‘,‘green‘);
//4.通配符選擇器 * 使用不是很頻繁
console.log($(‘*‘));
//清空整個界面的dom元素
$(‘*‘).html(‘‘);
//1.後代選擇器 div p
$(‘#box p‘).css(‘color‘,‘red‘);
//2.子代選擇器 div > p
$(‘#box>p‘).css(‘color‘,‘yellow‘)
//3.毗鄰選擇器 匹配素所有緊接著選中元素的兄弟 +
$(‘#father+p‘).css(‘font-size‘,‘30px‘);
//4.兄弟選擇器 ~
$(‘#father~p‘).css(‘background‘,‘blueviolet‘);
console.log($(‘li‘));
//5.獲取第一個元素
$(‘li:first‘).css(‘font-size‘,‘50px‘);
//6.獲取最後一個元素
$(‘li:last‘).css(‘font-size‘,‘50px‘);
$(‘li:eq(3)‘).css(‘font-size‘,‘50px‘);
基本過濾選擇器：
//獲取第一個 :first ,獲取最後一個 :last
//奇數
$(‘li:odd‘).css(‘color‘,‘red‘);
//偶數
$(‘li:even‘).css(‘color‘,‘yellow‘);
//選中索引值為1的元素 *
$(‘li:eq(1)‘).css(‘font-size‘,‘100px‘);
//大於索引值1
$(‘li:gt(1)‘).css(‘font-size‘,‘50px‘);
//小於索引值1
$(‘li:lt(1)‘).css(‘font-size‘,‘12px‘);
屬性選擇器：
標簽名[屬性名] 查找所有含有id屬性的該標簽名的元素
$(‘li[id]‘).css(‘color‘,‘red‘);
//匹配給定的屬性是what值得元素
$(‘li[class=what]‘).css(‘font-size‘,‘30px‘);
//[attr!=value] 匹配所有不含有指定的屬性，或者屬性不等於特定值的元素
$(‘li[class!=what]‘).css(‘font-size‘,‘50px‘);
// 匹配給定的屬性是以某些值開始的元素
$(‘input[name^=username]‘).css(‘background‘,‘gray‘);
//匹配給定的屬性是以某些值結尾的元素
$(‘input[name$=222]‘).css(‘background‘,‘greenyellow‘);
//匹配給定的屬性是以包含某些值的元素
$(‘button[class*=btn]‘).css(‘background‘,‘red‘)
第五章jQuery