判斷元素對象是否存在
<p class="c-p1">李白乘舟將欲行,忽聞岸上踏歌聲</p>
<p id="p1">桃花潭水深千尺,不及汪倫送我情</p>
<script>
? ? console.log(document.getElementById("p1"));//<p id="p1">
? ? console.log(document.getElementById("p-not"));//null
? ? //轉(zhuǎn)為布爾類型結(jié)果不同,null轉(zhuǎn)為布爾類型結(jié)果為false,使用函數(shù)Boolean(參數(shù))將參數(shù)轉(zhuǎn)換為布爾類型
? ? console.log(Boolean(document.getElementById("p1")));//true
? ? console.log(Boolean(document.getElementById("p-not")));//false
? ? //當對象元素不存在時,獲取的對象為null
? ? if(!document.getElementById("p-not")){
? ? ? ? console.log("元素對象不存在")
}
</script>
只創(chuàng)建一個元素
創(chuàng)建下拉列表
多次執(zhí)行指定事件,不想被覆蓋,使用? ?addEventLisrener("click",匿名函數(shù))
注意不是 onclick
BOM
javaScript分為三個部分1.ECMAScript標準----基礎(chǔ)語法,核心標準2.DOM-----Document Object Model 文檔對象模型,操作頁面元素和節(jié)點3.BOM-----Browser Object Model 瀏覽器對象模型,操作瀏覽器
瀏覽器Browser中有一個頂層對象window
學(xué)DOM的時候頁面中有一個頂層對象document
瀏覽器里面所有內(nèi)容都是屬于window的
頁面加載事件? onload = function(){
? ? ? ? ? ? ? ? ? ? ? ? }
用戶推出頁面執(zhí)行的函數(shù)
onunload = function(){
}
onload 事件,等頁面加載完畢再執(zhí)行后面的處理函數(shù),window可以省略
location對象
location.href = "地址";
location.assign("新的URL字符串"); 指派一個新的url
Location接口的replace()方法將當前資源替換為提供的 URL 中的資源规哲。 與assign()方法的不同之處在于，在使用replace() 抒线，當前頁面將不會保存在會話History ，這意味著用戶將無法使用后退按鈕導(dǎo)航到該頁面夕冲。
location.replace("https://www.baidu.com");
location.reload();重新加載刷新
window.history.forward();前進
window.history.back();后退
定時器
setInterval(function,milliseconds)等同于氮兵，setTimeout(), 但持續(xù)重復(fù)執(zhí)行該函數(shù)。
setTimeout(function, milliseconds)? ?在等待指定的毫秒數(shù)后執(zhí)行函數(shù)耘擂。
清理定時器
第一步:獲取setInterval()這個函數(shù)的返回值timeID
清理定時器 clearInterval(timeID)
第一步:獲取setTimeout()這個函數(shù)的返回值timeID
清理定時器 clearsetTimeout(timeID)
定時器小案例,點擊擺動,圖片晃動,點擊停止,停止晃動
jquery入門案例
jquery案例 閃閃的星星
jquery入門案例
先導(dǎo)入jquery文件,導(dǎo)入文件的script標簽中不要寫代碼,寫在其他script標簽中
$(id選擇器)查找指定id對應(yīng)的標簽元素,調(diào)用click()方法,相當于原來的onclick事件,給click()方法傳入一個函數(shù)
調(diào)用css方法,傳入樣式{"樣式屬性名":"屬性值","樣式屬性名":"屬性值"...}
jquery對比原生js
jquery不需要像原生js一樣循環(huán)遍歷,jquery會自動進行循環(huán)遍歷
jquery中的頂層對象
BOM模型中瀏覽器的頂層對象是;window,瀏覽器和頁面中所有內(nèi)容都是屬于window的 jquery中的頂層對象是jquery,可以簡寫為美元符號$
如果想使用jquery中的屬性和方法,需要jquery.屬性,jquery.方法()來使用;
jquery可以使用$來代替,就可以簡寫為 $.屬性, $.方法()
jquery中大部分都是方法,很少使用到屬性 jquery將DOM中的幾乎所有事件都封裝成了方法,去掉on,變成方法,例如onclick->click(), onfocus->focus()等等
原生js查找元素比較麻煩,jquery比較簡單 js原生寫法: document.getElementById("id屬性值").onclick = 匿名函數(shù);
jquery中的單擊事件的寫法: $('選擇器').click(匿名函數(shù));
頁面模仿開關(guān)燈案例
<input type="button" value="press me" id="btn1">
<script src="js/jquery-3.4.1.js"></script>
jquery對象和js對象相互轉(zhuǎn)換
原生的js獲取的對象,稱為DOM對象
jquery方式獲取的對象稱為jquery對象
DOM對象(js對象) 轉(zhuǎn)為jquery對對象,在外面加上美元符號就可以了
var p1 =document.getElementById("p1");
$(p1).width("200px");
jquery對象 轉(zhuǎn)為 js對象,在后面加上[下標],如果只有一個寫成[0]
var p1Obj =$("#p1");
p1Obj[0].style.height ="600px";
為什么要轉(zhuǎn)?如果不需要轉(zhuǎn)換就盡量不要轉(zhuǎn)換1.DOM操作麻煩(操作復(fù)雜,有時還需要寫兼容性代碼),可以轉(zhuǎn)為jquery對象(操作簡單不需要寫兼容性代碼)2.需要進行一些復(fù)雜操作,jquery沒有提供這樣的功能,這時需要將jquery對象轉(zhuǎn)為js對象
