abstract:JQ的加載方式有兩種:一種是引用外部鏈接的方式<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>一種是引用本地文件載入的方式。<script type="text/javascript" src="jquery-3.3.1
JQ的加載方式有兩種:
一種是引用外部鏈接的方式
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
一種是引用本地文件載入的方式。
<script type="text/javascript" src="jquery-3.3.1.min.js"></script>
JQ需要設(shè)置頁面加載完成后進(jìn)行加載,加載方式是
$(function(){jq的執(zhí)行語句})
JQ獲取元素的方法很簡單
$('p')是以標(biāo)簽名方式獲取,$('.class')是以CLASS類名方式獲取,$('#id')是以ID名方式獲取
$(':first') 第一個(gè)元素
$(':last') 最后一個(gè)元素
比較(x的順序是從0開始)
$(':gt(num)')表示大于值num的元素
$(':lt(num)')表示小于值num的元素
$(':eq(num)')表示等于值num的元素
$(':odd')奇數(shù)順序span
$(':even')偶數(shù)順序
$(':not(selector)')匹配不是selector的所有元素
$('span:first').css('color','red')
$('span:last').css('color','blue')
$('span:gt(1)').css('font-size','30px')
$('span:lt(2)').css('color','red')
$('span:eq(1)').css('color','red')
$('span:odd').css('background','#ccc')
$('span:even').css('background','pink')
$('span:not(#box)').css('background','red')
JQ獲取改變css樣式
單個(gè)樣式
$('選擇的元素').css('屬性名','屬性值');
多個(gè)樣式
$('選擇的元素').css({'屬性名':'屬性值','屬性名':'屬性值'});
JQ改變標(biāo)簽內(nèi)的內(nèi)容,區(qū)別是html可以添加標(biāo)簽
$('選擇的元素').text('內(nèi)容');
$('選擇的元素').html('內(nèi)容');
JQ鼠標(biāo)事件
mouseover() 當(dāng)鼠標(biāo)指針位于元素上方時(shí)會發(fā)生mouseover事件
mouseenter() 當(dāng)鼠標(biāo)指針穿過元素時(shí)會發(fā)生mouseenter事件
mousemove() 當(dāng)鼠標(biāo)指針在指定的元素中移動時(shí),就會發(fā)生該事件
mouseleave() 當(dāng)鼠標(biāo)指針離開元素時(shí)
mouseout() 當(dāng)鼠標(biāo)指針從元素上移開時(shí)
mousedown() 當(dāng)鼠標(biāo)指針移動到元素上方并按下鼠標(biāo)按鍵時(shí)
mouseup() 當(dāng)在元素上松開鼠標(biāo)按鍵時(shí)
resize() 當(dāng)調(diào)整當(dāng)前瀏覽器窗口大小時(shí)
pageX() 屬性是鼠標(biāo)指針的位置,相對于文檔的左邊緣 event.pageX event:必需 參數(shù)來自事件綁定函數(shù)。
pageY() 屬性是鼠標(biāo)指針的位置,相對于文檔的上邊緣 event.pageY event:必需 參數(shù)來自事件綁定函數(shù)。
JQ 點(diǎn)擊事件click,隱藏事件.hide ,顯示隱藏.show,fadeIn淡入,fadeOut淡出,fadeToggle切換,fadeTo控制淡入淡出并且?guī)该鞫?br/>.slideDown向下滑動事件,.slideUp向上滑動事件,.slideToggle通過高度的變化來切換元素的可見性
JQ的語法和書寫效率要大于原生js,不過有些時(shí)候也要配合js原生語法使用,所以js還是不能完全放棄。
Correcting teacher:查無此人Correction time:2019-04-23 13:51:51
Teacher's summary:完成的不錯(cuò)。jq比js簡單很多,也少一些功能。但是基礎(chǔ)的功能,jq都有了。繼續(xù)加油。