2. 程式人生 > >jQuery入門和響應式佈局3種方法

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)">

相關推薦

jQuery入門和響應式佈局3種方法

jQuery是一個js庫。裡面封裝了各種各樣的js方法。 使用者在使用jQuery的時候，只需要呼叫jQuery裡的方法， 即可完成相對複雜的功能，沒有必要自己去定義相關的方法。 jQuery語法 $

用jQuery來綁定事件的3種方法和區別

委托 images 不同的 doc mage his ges utf htm 1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF

移動端流體佈局和響應式佈局注意事項——day nine

流體佈局： 什麼是流體佈局？ 流體是採用了一些設定，當寬度大於多少時怎麼展示，小於多少時怎麼展示，而且展示的方式向水流一樣，一部分一部分的載入 移動端有兩種設計方式： 全屏設計，在 PC 端和 PAD 平板也可以無縫瀏覽，但圖片卻會失真。 固屏設計、雖然會留有白邊，

Bootstrap框架和響應式佈局

彈性佈局 1.浮動+百分比佈局 2.FIex佈局 Flex佈局對於設計比較複雜的頁面非常有用,實現螢幕和瀏覽器視窗大小發生變化時保持元素的相對位置和大小不變 響應式佈局 Responsive design，意在實現不同螢幕解析度的終端上瀏覽網頁的不同展示方式。通過響應式設計能使網站在

響應式佈局的實現方法和原理

昨天我在馬海祥部落格上跟大家詳細的介紹過《什麼是響應式網頁設計？》，我覺的響應式網頁設計不僅僅是一種趨勢，還更是一個新的設計解決方案！它有助於解決不同的解析度和裝置（臺式電腦，膝上型電腦，平板，手機）相關的設計問題。既然是設計的問題，這裡就會涉及到很多層面的角色，包括互動

理解流式佈局和響應式佈局

流式佈局：流式佈局在CSS2時代就有，主要是靠百分比進行排版，可以在不同解析度下顯示相同的版式。流式佈局：網頁中主要的劃分區域的尺寸使用百分數（搭配min-*、max-*屬性使用），例如，設定網頁主體的

jQuery判斷checkbox是否選中的3種方法

優先 www. article www jquer 使用 htm checked ttr 優先使用方法二（方法三不適用jq v2.1.4） 方法一：if ($("#checkbox-id")get(0).checked) { // do something} 方法二：

jQuery頁面載入初始化的3種方法

第一種： $(document).ready(function(){ alert("第一種方法。"); });第二種： $(function(){ alert("第二種方法。"); }); 第三種： jQuery(function($) { alert("第三種方法。

笨鳥兒 靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局等的概念和區別

一、靜態佈局（Static Layout） 即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。 1、佈局特點：不管瀏覽器尺寸具體是多少，網頁佈局始終按照最初寫程式碼時的佈局來顯示。常規的pc的網站都是靜態（定寬度）佈局的，也就是設定了min-width，這樣的話，如果小於這個寬度就會

表現層響應式：響應式佈局和螢幕適配佈局

1.響應式佈局：     響應式佈局是根據瀏覽器寬度，解析度，橫屏，豎屏等情況來自動改變元素展示的一種佈局方式，一般可以使用柵格方式來實現，一般有兩種思路，一種是桌面端瀏覽器優先，擴充套件到移動端瀏覽器適配，另一種是以移動端優先，擴充套件到桌面瀏覽器適配。由於移動端網路和計算

響應式佈局和自適應佈局詳解

注：響應式佈局等於流動網格佈局，而自適應佈局等於使用固定分割點來進行佈局。 自適應佈局給了你更多設計的空間，因為你只用考慮幾種不同的狀態。而在響應式佈局中你卻得考慮上百種不同的狀態。雖然絕大部分狀態差異較小，但仍然也算做差異。它使得把握設計最終效果變得更難，同樣讓響

原生JS相容所有瀏覽器獲取瀏覽器高度和寬度,響應式佈局 js 獲取瀏覽器高度和寬度值(相容多瀏覽器)

var width = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;

響應式佈局和自適應的區別

第一點：自適應的目的是在不同解析度的不同裝置上面顯示相同的頁面。 手機的螢幕比較小，寬度通常在600畫素以下，pc的畫素一般在1000畫素以上，部分配置高的筆記本在2000畫素以上的也有，同樣的頁面要顯示在不同的裝置上面，還要呈現出滿意的效果，不是一件容易的事情。因此就

響應式佈局 css3 media 媒體查詢 和js+rem

一：媒體查詢 1.使用media的時候需要先設定<meta>標籤來相容移動裝置的展示。 <meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1,

響應式佈局之px畫素--rem和rpx

bootstrap中響應式佈局涉及到的一個很重要的容器—grid,依靠強大的media來選擇性的使用已設定的樣式(sm-手機,md-電腦平板,lg-大螢幕)。響應式佈局還涉及到畫素大小，如rem和rpx

響應式佈局的常用解決方案對比(媒體查詢、百分比、rem和vw/vh）

簡要介紹：前端開發中，靜態網頁通常需要適應不同解析度的裝置，常用的自適應解決方案包括媒體查詢、百分比、rem和vw/vh等。本文從px單位出發，分析了px在移動端佈局中的不足，接著介紹了幾種不同的自適應解決方案。 本文原文在我的github主頁中，如果喜歡

靜態佈局、自適應佈局、流式佈局、響應式佈局、彈性佈局等的概念和區別

一、靜態佈局（Static Layout）即傳統Web設計，網頁上的所有元素的尺寸一律使用px作為單位。1、佈局特點：不管瀏覽器尺寸具體是多少，網頁佈局始終按照最初寫程式碼時的佈局來顯示。常規的pc的網站都是靜態（定寬度）佈局的，也就是設定了min-width，這樣的話，如果小於這個寬度就會出現滾動條，如果大

web前端開發之幾種佈局方式之響應式佈局

一理解幾種佈局的概念 1、靜態佈局（Static Layout） 即傳統Web設計，對於PC設計一個Layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分；  意思就是不管瀏覽器尺寸具體是多少，網頁佈局就按照當時寫程式碼的佈局來佈置；  對於移動裝

響應式佈局設計指南和教程（1）--響應式時代的設計歷程

如果你還沒有接觸過響應式佈局，你得先明白響應式佈局和之前用的佈局方式稍稍有些不同，因為響應式佈局的目的是為了使網頁適應不同裝置，你需要一段時間的學習來最終實現一個響應式佈局的網頁。 我想展示一些舊的設計流程帶來的問題，在此基礎上引入一些新的方法和工具，在這個過程中，你將在學

ie相容響應式佈局的實現總結 和 針對ie瀏覽器的CSS

ie瀏覽器hack .demo { padding:10px; padding:9px\9; /* all ie */ padding:8px\0; /* ie8-9 目前應用於IE8的單獨hack，情況比較少 */ *padding:5px; /* ie6