JQuery是對JavaScript的封裝，簡化了JS代碼，是主流框架的基礎(chǔ)(VUE,EasyUI,Bootstrap) 它是2006年推出的

JQuery的優(yōu)勢：
體積小，壓縮后只有100KB左右
強大的選擇器
出色的DOM封裝
可靠的事件處理機制
出色的瀏覽器兼容性
使用隱式迭代簡化編程
豐富的插件支持

引入Jquery庫：
<script src="js/jquery-3.4.1.js" type="text/javascript"></script>
JQuery加載頁面觸發(fā)：
<script type="text/javascript">
/*js代碼*/
window.οnlοad=function(){
alert('js加載一');
};
/*jquery代碼*/
$(document).ready(function(){
alert('Jquery加載一');
});
jQuery(document).ready(function(){
alert('Jquery加載二');
});
/*對Jquery加載上面兩種方式的簡寫*/
$(function(){
alert('Jquery加載三');
});
</script>
window.onload和$(document).ready區(qū)別：
window.onload只能有一個，沒有簡寫方式，必須等待頁面所有資源加載完畢之后才能觸發(fā)
$(document).ready可有多個，簡介為$(function(){//代碼})，等待頁面上所有文檔結(jié)構(gòu)（html標(biāo)簽）記載完后觸發(fā)
JQuery設(shè)置樣式：
<script type="text/javascript">
/*操作樣式addClass()方法*/
$(function(){
//其實上就是動態(tài)的給標(biāo)簽加了一個class屬性
/* $("#whtdiv").addClass("wht"); */
//單個設(shè)置css
/* $("#lldiv").css("color","yellow");
//設(shè)置多個
$("#lldiv").css({"border":"1px solid blue","background-color":"pink"});
//鏈?zhǔn)椒绞?br /> $("#whtdiv").css("color","green").css("border","1px solid blue"); */

//下一個元素
$("#whtdiv").css("color","green").next().css("color","pink").next().css("color","orange");

});

</script>
JQuery常用方法和事件：詳情請見W3C
$(function(){
/*給顯示圖片按鈕注冊一個click事件*/
$("#show").click(function(){
$("#imgs").slideDown(3000);
});
$("#hide").click(function(){
$("#imgs").slideUp(3000);
});
});
----------------------------------------
$(function(){
$("li").mouseover(function(){
//不能用$("li")
$(this).css("color","blue");
}).mouseout(function(){
$(this).css("color","black");
});

});
JQuery對象和Dom對象的相互轉(zhuǎn)換：
<script type="text/javascript">
$(function(){
/*js獲取dom對象*/
/* var dom=document.getElementById("wht5"); */
/* alert(dom.innerHTML); */
/* alert(dom.innerText); */
/* 獲取value屬性值*/
/* alert(dom.value); */


/*jquery對象*/
/* var $jdom=$("#wht5"); */
/* alert(jdom.html()); */
/* alert(jdom.text()); */
/* 一般用于表單*/
/* alert($jdom.val()); */

/*Dom對象轉(zhuǎn)換Jquery對象*/
var dom=document.getElementById("wht");
var $jdom=$(dom);
$jdom.html();


/*jquery轉(zhuǎn)dom對象*/
var $jdom=$("#wht5");
var dom=$jdom[0];
/* var dom=$jdom.get(0); */
alert(dom.value);
});
</script>

轉(zhuǎn)載于:https://www.cnblogs.com/Chencheno/p/11009408.html

總結(jié)

以上是生活随笔為你收集整理的第5章 初识JQuery的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。