jQuery入門和響應式佈局3種方法
阿新 • • 發佈:2019-02-20
jQuery是一個js庫。裡面封裝了各種各樣的js方法。
使用者在使用jQuery的時候,只需要呼叫jQuery裡的方法,
即可完成相對複雜的功能,沒有必要自己去定義相關的方法。
jQuery語法
$(selector).action;
jquery框架本身就是一個js檔案,可以像匯入普通的js檔案一樣匯入jquery檔案匯入jquery檔案以後,就可以使用jquery提供的各種各樣的方法。
/*js的文件就緒函式*/
window.onload
= function
() {
//document.getElementById("text").style.display = "none";
$(document .getElementById("text")).hide();
};
/*jquery文件就緒函式
方法1*/
$(document).ready(function
() {
//$("#text2").html("jredu");
$("#text2")[0].innerHTML
=
"jredu";
});
/*jquery文件就緒函式
精簡方法2
用法廣泛*/
$(function
() {
$("#text3").html("文件就緒完成!")
});
需要注意的是,js的文件就緒函式只有一個有效,後定義的會覆蓋之前的,而jQuery的可以定義多個而且不會被覆蓋
jQuery中$()就可以代表就緒函式。
物件的轉換:
/* js型別的物件和jquery型別的物件,是完全不同的兩種物件。
* 兩種物件的方法不能相互相互呼叫。
* 那麼js物件如果想呼叫jquery裡的方法,或者jquery物件想呼叫js的方法,怎麼辦?
* 這時候涉及到js物件和jquery物件的相互相互轉換的問題。
* 轉換1:js物件轉換成jquery物件
* 轉換2:jquery物件轉換成js物件*/
/*___________________js ---> jquery________________*/
/*document.getElementById("text"):返回的是js型別的物件*/
//document.getElementById("text").innerHTML = "ccy";
//沒有實現 因為hide()是jquery物件的方法,js物件是沒辦法呼叫的
//document.getElementById("text").hide();無法呼叫。
//轉換1:js物件轉換成jquery物件
// $():jquery物件的轉換工廠,可以把js物件轉換成jquery物件
var jsObj
= document.getElementById("text");
var jqueryObj
= $(jsObj);//js物件轉換成jquery物件。
用$符號(包裹js物件)轉換成jQuery物件。
jqueryObj.hide();
/*__________________jquery --->js__________________*/
/*$("#text2"):返回的是jquery型別物件*/
/*也不能實現,因為innerHTML是js物件的屬性,jquery物件是沒辦法使用的。*/
//$("#text2").innerHTML = "jredu";
/*通過$()獲取的元素都是陣列型別的,可以通過索引獲取數組裡的元素,得到的元素就是js型別的*/
/*轉換2:jquery物件轉換成js物件*/
var jqObj
= $("#text2");
var jsObj
= jqObj[0];
jQuery元素的第1個(陣列號為0)為js型別的物件。
jsObj.innerHTML
= "jredu";
響應式佈局
因為電子裝置的多樣化和普及化,為了讓網頁分別支援手機端,平板電腦端,膝上型電腦端,大屏電腦端。響應式佈局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗。
響應式佈局基本有三種寫法:
1:
在style中使用@media分別為不同模式新增不同樣式,例如:
/*螢幕寬度大於2014的時候,顯示一行四列*/
@media
all
and
(min-width:
1024px){
#div1,#div2,#div3,#div4{
width:
25%;
float:
left;
}
}
/*當螢幕寬度大於768小於1024(範圍一定要明確指定)的時候,顯示一行兩列*/
@media
all
and
(min-width:
768px)
and
(max-width:
1024px){
#div1,#div2,#div3,#div4{
width:
50%;
float:
left;
}
}
/*當螢幕寬度小於768的時候,顯示一行一列*/
@media
all
and
(max-width:
768px){
#div1,#div2,#div3,#div4{
width:
100%;
float:
left;
}
}
2:
在style中使用@import分別為不同模式新增不同樣式,需要注意,使用了@import的style中只能新增@import不能寫任何樣式程式碼,對於低端ie,style中最多隻能新增20多條@import。
例如:
<style>
@import
"CSS0.css";
@import
"CSS1.css"
all and
(min-width:
1024px);
@import
"CSS2.css"
all and
(min-width:
768px)
and
(max-width:
1024px);
@import
"CSS3.css"
all and
(max-width:
768px);
</style>
3:
使用link標籤新增不同樣式,需要注意標籤的3種屬性,rel,herf和media。
<link
rel="stylesheet"
href="CSS0.css">
<link
rel="stylesheet"
href="CSS1.css"
media="all and (min-width:1024px)">
<link
rel="stylesheet"
href="CSS2.css"
media="all and (min-width:768px) and (max-width:1024px)">
<link
rel="stylesheet"
href="CSS3.css"
media="all and (max-width:768px)">