作者:
WangMin
格言:努力做好自己喜歡的每一件事
jQuery.js 是什么?
jQuery是一個快速簡潔、免費開源易用的JavaScript框架,倡導(dǎo)寫更少的代碼,做更多的事情 。它封裝JavaScript常用的功能代碼,提供了一種簡便的JavaScript設(shè)計模式,以及我們開發(fā)中常用到的操作DOM的API,優(yōu)化HTML文檔操作、事件處理、動畫設(shè)計和Ajax交互,使更多的網(wǎng)頁交互效果簡單化。
為什么要使用 jQuery.js
首先來看一個例子,用js 來給元素添加背景顏色,改變字體的顏色,案例如下如下:
<div id="box">添加背景顏色,改變字體的顏色</div>
#box{
width:150px;
height:150px;
line-height: 30px;
text-align: center;
font-size: 16px;
border:1px solid #ccc;
}
使用原生JavaScript來實現(xiàn)效果,代碼如下:
<script type="text/javascript">
window.onload=function(){
var oBox=document.getElementById("box");
oBox.onclick=function(){
oBox.style.background="blue"
oBox.style.color="#fff";
}
}
</script>
使用 jQuery.js 來實現(xiàn)效果,代碼如下:
<script type="text/javascript" src="jQuery/jquery.js"></script>
<script type="text/javascript">
$('#box').click(function(){
$(this).css({
"background":"blue",
"color":"#fff"
})
});
</script>
網(wǎng)頁效果如下:
對比以上兩種方法,實現(xiàn)的效果其實是一樣的,可以看到使用jQuery的好處最直接的是:可以根據(jù)CSS選擇器快速地獲取DOM元素,在修改DOM元素的CSS樣式時,與style標(biāo)簽的格式相似。
相比于原生的js代碼,jQuery的優(yōu)點就是 用很少的代碼就可以實現(xiàn)很強大的功能,并且兼容性也好,現(xiàn)在很多用原生js考慮支持多瀏覽器等等,尤其是jquery的選擇器比較強大,一般多用于實際項目的使用,減少開發(fā)周期。
怎么獲取 jQuery.js
1、從官網(wǎng)下載
jQuery.js 官方下載
2、在線項目引用地址
可以到網(wǎng)站 BootCDN 去查找項目所需要的jQuery.js 版本的在線地址。項目上線時, 一般使用比較靠譜的CDN資源庫,用來減輕服務(wù)器負(fù)擔(dān)。
這里面可以找到 jQuery.js 的最新版本與歷史版本的在線地址,你只要按照你項目的需求引入相應(yīng)的版本就可以了。
如果項目需要兼容IE低版本瀏覽器,可以選擇1.x.x系列的版本,例如 jQuery.js 1.11.0,1.x.x系列的版本的缺點就是文件大小比較大。如果不需要兼容IE低版本瀏覽器,可以選擇可以選擇2.x.x系列的版本或者最新的3.x.x系列的版本,版本越高,里面包含的API更多,程序執(zhí)行效率越高。
怎么使用 jQuery.js
1)引入 jQuery.js 文件
相信大家對引入外部的CSS樣式文件的代碼,那么引入外部的JS文件也是同樣的,區(qū)別是引入的標(biāo)簽不一樣,你只需要在HTML文件的任何地方引入 jQuery.js 文件,如下:
路徑引入
<script type="text/javascript" src='文件路徑' ></script>
建議將 jQuery.js 文件引入到HTML文件的最后,這樣讓DOM加載完成之后,更好地 執(zhí)行jQuery.js 文件將網(wǎng)頁效果完整的呈現(xiàn)出來。文章來源:http://www.zghlxwxcb.cn/news/detail-746037.html
以上僅是個人見解,若有不足之處歡迎在下方評論指出,那就先分享到這里!! ?? 后續(xù)繼續(xù)更新!!文章來源地址http://www.zghlxwxcb.cn/news/detail-746037.html
到了這里,關(guān)于jQuery.js - 前端必備的Javascript庫的文章就介紹完了。如果您還想了解更多內(nèi)容,請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章,希望大家以后多多支持TOY模板網(wǎng)!