jQuery基礎 (一)樣式篇

来源:http://www.cnblogs.com/CDXwangwang/archive/2016/08/04/5738438.html
-Advertisement-
Play Games

jquery學習筆記 1.環境搭建 進入官方網站獲取最新的版本 http://jquery.com/download/ ，這裡需要註意 jQuery 分 2 個系列版本 1.x 與 2.x，主要的區別 在於 2.x 不再相容 IE6、7、8 為移動端而優化，由於減少了一些代碼，使得該版本比 jQue ...


                                         jquery學習筆記

1.環境搭建

進入官方網站獲取最新的版本 http://jquery.com/download/  ，這裡需要註意 jQuery 分 2 個系列版本 1.x 與 2.x，主要的區別 在於 2.x 不再相容 IE6、7、8 為移動端而優化，由於減少了一些代碼，使得該版本比 jQuery 1.x 更小且更快。

如果開發者比較在意老版本 IE 用戶，只能使用 jQuery 1.9 及之前的版本了。我們這本課程為了相容性問題，使用的是 1.9 版本。jQuery 每一個系列版本分為：壓縮版(compressed) 與 開發版(development)，我們在開發過程中使用開發版（開發版本便於代碼修改及調試），項目上線發佈使用壓縮版（因為壓縮版本體積更小，效率更快）。

 jQuery 只是一個庫，不需要特別的安裝，只需要我們在頁面 <head> 標簽內中通過 script 標簽腳本引入 jQuery 庫即可。

<!DOCTYPE HTML>

<html>

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <script type="text/javascript" src="http://libs.baidu.com/jquery/1.9.1/jquery.js"></script>

    <title>環境搭建</title>

</head>

<body>

    <script type="text/javascript"> alert($) </script>

</body>

</html>

 

alert 彈出以上信息，說明環境已經搭建成功了。

2.jQueryHelloWorld體驗

<!DOCTYPE html>

<html>

<head>

    <meta charset="utf-8"/>

    <title>第一個簡單的jQuery程式</title>

    <style type="text/css">

        div{

            padding:8px 0px;

            font-size:12px;

            text-align:center;

            border:solid 1px #888;

        }

    </style>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

    <script type="text/javascript">

            $(document).ready(function() {

                    $("div").html("您好！");

            });

    </script>

</head>

<body>

    <div></div>

</body>

</html>


代碼分析：
$(document).ready 的意思是等頁面的文檔（document）中的節點都載入完畢後，在執行後續的代碼，因為我們在執行代碼的時候，可能會依賴頁面的某一個元素，我們要確保這個元素真正的的被載入完畢後才能正確的使用。

 

3.jQuery對象與DOM對象

對於才開始接觸jQuery庫的初學者，我們需要清楚認識一點：

jQuery對象與DOM對象是不一樣的

可能一時半會分不清楚哪些是jQuery對象，哪些是DOM對象，下麵重點介紹一下jQuery對象，以及兩者相互間的轉換。

通過一個簡單的例子，簡單區分下jQuery對象與DOM對象：

<p id=”imooc”></p>

我們要獲取頁面上這個id為imooc的div元素，然後給這個文本節點增加一段文字：“您好！通過慕課網學習jQuery才是最佳的途徑”，並且讓文字顏色變成紅色。

普通處理，通過標準JavaScript處理：

var p = document.getElementById('imooc');

p.innerHTML = '您好！通過慕課網學習jQuery才是最佳的途徑';

p.style.color = 'red';

通過原生DOM模型提供的document.getElementById(“imooc”) 方法獲取的DOM元素就是DOM對象，通過DOM方法將自己的innerHTML與style屬性處理文本與顏色。

jQuery的處理：

var $p = $('#imooc');

$p.html('您好！通過慕課網學習jQuery才是最佳的途徑').css('color','red');

通過$('#imooc')方法會得到一個$p的jQuery對象，$p是一個類數組的對象這個對象裡面其實是包含了DOM對象的信息的然後封裝了很多操作方法，調用自己的方法html與css處理，得到的效果與標準的JavaScript處理結果是一致的。

通過標準的JavaScript操作DOM與jQuyer操作DOM的對比，我們不難發現：

1.  通過jQuery方法包裝後的對象，是jQuery對象，它是一個新的對象

2.  jQuery與DOM對象完全不是同一個東西，但是又似曾相似，因為他們都能處理DOM

3.  通過jQuery處理DOM的操作，可以讓開發者更專註業務邏輯的開發，而不需要我們具體知道哪個DOM節點有那些方法，也不需要關心不同瀏覽器的相容問題，我們可以通過jQuery更友好的API進行開發，同時代碼也會更加精短

PS：大家這裡做個大概印象就OK，後面會有深入的講解。

4.jQuery對象轉化成DOM對象

    jQuery庫本質上還是JavaScript代碼，它只是對JavaScript語言進行包裝處理，為了是提供更好更方便快捷的DOM處理與開發常見中 經常使用的功能。我們可以用jQuery的同時也能混合JavaScript原生代碼一起使用。通過jQuery生成的對象是一個做了包裝處理的對象，如 果要用jQuery對象自己的方法，就需要滿足這個對象是通過jQuery生成的。 在很多場景中，我們需要jQuery與DOM能夠相互的轉換，它們都 是操作的DOM元素，jQuery是一個類數組對象，DOM對象就是一個單獨的DOM元素。

如何把jQuery對象轉成DOM對象？

利用數組下標的方式讀取到jQuery中的DOM對象

HTML代碼

<div>元素一</div>

<div>元素二</div>

<div>元素三</div>

JavaScript代碼

var $div = $('div') //jQuery對象

var div = $div[0] //轉化成DOM對象

div.style.color = 'red' //操作dom對象的屬性

用jQuery找到所有的div元素（3個），因為jQuery 對象也是一個數組結構，可以通過數組下標索引找到第一個div元素，通過返回的div對象然後調用它style屬性然修改第一個div元素的顏色。這裡需要註意的一點是，數組的索引是從0開始的，也就是第一個元素下標是0

通過jQuery自帶的get()方法

jQuery對象自身提供一個.get() 方法允許我們直接訪問jQuery對象中相關的DOM節點，get方法中提供一個元素的索引：

var $div = $('div') //jQuery對象

var div = $div.get(0) //通過get方法，轉化成DOM對象

div.style.color = 'red' //操作dom對象的屬性

其實我們翻開源碼，看看就知道了，get方法就是利用的第一種方式處理的，只是包裝成一個get讓開發者更直接方便的使用。

 

5.DOM對象轉化成jQuery對象

相比較jQuery轉化成DOM，開發中更多的情況是把一個dom對象加工成jQuery對象。$(參數)是一個多功能的方法，通過傳遞不同的參數而產生不同的作用。

如果傳遞給$(DOM)函數的參數是一個DOM對象，jQuery方法會把這個DOM對象給包裝成一個新的jQuery對象

通過$(dom)方法將普通的dom對象加工成jQuery對象之後，我們就可以調用jQuery的方法了

HTML代碼

<div>元素一</div>

<div>元素二</div>

<div>元素三</div>

JavaScript代碼

var div = document.getElementsByTagName('div'); //dom對象

var $div = $(div); //jQuery對象

var $first = $div.first(); //找到第一個div元素

$first.css('color', 'red'); //給第一個元素設置顏色

通過getElementsByTagName獲取到所有div節點的元素，結果是一個dom合集對象，不過這個對象是一個數組合集(3個div元素)。通過$(div)方法轉化成jQuery對象，通過調用jQuery對象中的first與css方法查找第一個元素並且改變其顏色。

6.id選擇器

頁面的任何操作都需要節點的支撐，開發者如何快速高效的找到指定的節點也是前端開發中的一個重點。jQuery提供了一系列的選擇器幫助開發者達到這一目的，讓開發者可以更少的處理複雜選擇過程與性能優化，更多專註業務邏輯的編寫。

jQuery幾乎支持主流的css1~css3選擇器的寫法，我們從最簡單的也是最常用的開始學起

id選擇器：一個用來查找的ID，即元素的id屬性

$( "#id" )

id選擇器也是基本的選擇器，jQuery內部使用JavaScript函數document.getElementById()來處理ID的獲取。原生語法的支持總是非常高效的，所以在操作DOM的獲取上，如果能採用id的話盡然考慮用這個選擇器

值得註意：

id是唯一的，每個id值在一個頁面中只能使用一次。如果多個元素分配了相同的id，將只匹配該id選擇集合的第一個DOM元素。但這種行為不應該發生;有超過一個元素的頁面使用相同的id是無效的

7.類選擇器

類選擇器，顧名思義，通過class樣式類名來獲取節點

描述：

$( ".class" )

類選擇器，相對id選擇器來說，效率相對會低一點，但是優勢就是可以多選

同樣的jQuery在實現上，對於類選擇器，如果瀏覽器支持，jQuery使用JavaScript的原生getElementsByClassName()函數來實現的

右邊實現一個原生getElementsByClassName()函數的實現代碼與jQuery實現代碼的比較

我們不難發現：

jQuery除了選擇上的簡單，而且沒有再次使用迴圈處理

不難想到$(".imooc").css()方法內部肯定是帶了一個隱式的迴圈處理，所以使用jQuery選擇節點，不僅僅只是選擇上的簡單，同時還增加很多關聯的便利操作，後續我們還會慢慢的學到其他的優勢。

8.元素選擇器

元素選擇器：根據給定（html）標記名稱選擇所有的元素

描述：

$( "element" )

搜索指定元素標簽名的所有節點，這個是一個合集的操作。同樣的也有原生方法getElementsByTagName()函數支持

右邊編輯器代碼所示：

第一組：通過getElementsByTagName方法得到頁面所有的<div>元素

var divs = document.getElementsByTagName('div');

divs是dom合集對象，通過迴圈給每一個合集中的<div>元素賦予新的boder樣式

第二組：同樣的效果，$("p")選取所有的<p>元素，通過css方法直接賦予樣式

9.全選擇器（*選擇器）

在CSS中，經常會在第一行寫下這樣一段樣式

* {padding: 0; margin: 0;}

通配符*意味著給所有的元素設置預設的邊距。jQuery中我們也可以通過傳遞*選擇器來選中文檔頁面中的元素

描述：

$( "*" )

拋開jQuery，如果要獲取文檔中所有的元素，通過document.getElementsByTagName()中傳遞"*"同樣可以獲取到

不難發現，id、class、tag都可以通過原生的方法獲取到對應的節點，但是我們還需要考慮一個相容性的問題，我這裡順便提及一下，比如:

1.  IE會將註釋節點實現為元素，所以在IE中調用getElementsByTagName裡面會包含註釋節點，這個通常是不應該的

2.  getElementById的參數在IE8及較低的版本不區分大小寫

3.  IE7及較低的版本中，表單元素中，如果表單A的name屬性名用了另一個元素B的ID名並且A在B之前，那麼getElementById會選中A

4.  IE8及較低的版本，瀏覽器不支持getElementsByClassName

10.層級選擇器

文檔中的所有的節點之間都是有這樣或者那樣的關係。我們可以把節點之間的關係可以用傳統的家族關係來描述，可以把文檔樹當作一個家譜，那麼節點與節點直接就會存在父子，兄弟，祖孫的關係了。

選擇器中的層級選擇器就是用來處理這種關係

子元素 後代元素 兄弟元素 相鄰元素

通過一個列表，對比層級選擇器的區別

 

 仔細觀察層級選擇器之間還是有很多相似與不同點

1.  層級選擇器都有一個參考節點

2.  後代選擇器包含子選擇器的選擇的內容

3.  一般兄弟選擇器包含相鄰兄弟選擇的內容

4.  相鄰兄弟選擇器和一般兄弟選擇器所選擇到的元素，必須在同一個父元素下

11.基本篩選選擇器

很多時候我們不能直接通過基本選擇器與層級選擇器找到我們想要的元素，為此jQuery提供了一系列的篩選選擇器用來更快捷的找到所需的DOM元素。篩選選擇器很多都不是CSS的規範，而是jQuery自己為了開發者的便利延展出來的選擇器

篩選選擇器的用法與CSS中的偽元素相似，選擇器用冒號“：”開頭，通過一個列表，看看基本篩選器的描述：

 

註意事項：

1.  :eq(), :lt(), :gt(), :even, :odd 用來篩選他們前面的匹配表達式的集合元素，根據之前匹配的元素在進一步篩選，註意jQuery合集都是從0開始索引

2.  gt是一個段落篩選，從指定索引的下一個開始，gt(1) 實際從2開始

12.內容篩選選擇器

基本篩選選擇器針對的都是元素DOM節點，如果我們要通過內容來過濾，jQuery也提供了一組內容篩選選擇器，當然其規則也會體現在它所包含的子元素或者文本內容上

內容過濾器描述如下表：

 

註意事項：

1.  :contains與:has都有查找的意思，但是contains查找包含“指定文本”的元素，has查找包含“指定元素”的元素

2.  如果:contains匹配的文本包含在元素的子元素中，同樣認為是符合條件的。

3.  :parent與:empty是相反的，兩者所涉及的子元素，包括文本節點

13.可見性篩選選擇器

元素有顯示狀態與隱藏狀態，jQuery根據元素的狀態擴展了可見性篩選選擇器:visible與:hidden

描述如下：

 

這2個選擇器都是 jQuery 延伸出來的，看起來比較簡單，但是元素可見性依賴於適用的樣式

:hidden選擇器，不僅僅包含樣式是display="none"的元素，還包括隱藏表單、visibility等等

我們有幾種方式可以隱藏一個元素：

1.  CSS display的值是none。

2.  type="hidden"的表單元素。

3.  寬度和高度都顯式設置為0。

4.  一個祖先元素是隱藏的，該元素是不會在頁面上顯示

5.  CSS visibility的值是hidden

6.  CSS opacity的指是0

如果元素中占據文檔中一定的空間,元素被認為是可見的。

可見元素的寬度或高度，是大於零。

元素的visibility: hidden 或 opacity: 0被認為是可見的，因為他們仍然占用空間佈局。

不在文檔中的元素是被認為是不可見的，如果當他們被插入到文檔中，jQuery沒有辦法知道他們是否是可見的，因為元素可見性依賴於適用的樣式

14.屬性篩選選擇器

屬性選擇器讓你可以基於屬性來定位一個元素。可以只指定該元素的某個屬性，這樣所有使用該屬性而不管它的值，這個元素都將被定位，也可以更加明確並定位在這些屬性上使用特定值的元素，這就是屬性選擇器展示它們的威力的地方。

描述如下：

 

瀏覽器支持：

  • [att=val]、[att]、[att|=val]、[att~=val]  屬於CSS 2.1規範
  • [ns|attr]、[att^=val]、[att*=val]、[att$=val] 屬於CSS3規範
  • [name!="value"]  屬於jQuery 擴展的選擇器

CSS選擇器無論CSS2.1版本還是CSS3版本，IE7和IE8都支持，webkit、Gecko核心及Opera也都支持，只有IE6以下瀏覽器才不支持

在這麼多屬性選擇器中[attr="value"]和[attr*="value"]是最實用的

[attr="value"]能幫我們定位不同類型的元素，特別是表單form元素的操作，比如說input[type="text"],input[type="checkbox"]等

[attr*="value"]能在網站中幫助我們匹配不同類型的文件

15.子元素篩選選擇器

子元素篩選選擇器不常使用，其篩選規則比起其它的選擇器稍微要複雜點

子元素篩選選擇器描述表：

 

註意事項：

  1. :first只匹配一個單獨的元素，但是:first-child選擇器可以匹配多個：即為每個父級元素匹配第一個子元素。這相當於:nth-child(1)
  2. :last 只匹配一個單獨的元素， :last-child 選擇器可以匹配多個元素：即，為每個父級元素匹配最後一個子元素
  3. 如果子元素只有一個的話，:first-child與:last-child是同一個
  4. :only-child匹配某個元素是父元素中唯一的子元素，就是說當前子元素是父元素中唯一的元素，則匹配
  5. jQuery實現:nth-child(n)是嚴格來自CSS規範，所以n值是“索引”，也就是說，從1開始計數，:nth-child(index)從1開始的，而eq(index)是從0開始的
  6. nth-child(n) 與 :nth-last-child(n) 的區別前者是從前往後計算，後者從後往前計算

16.表單元素選擇器

無論是提交還是傳遞數據，表單元素在動態交互頁面的作用是非常重要的。jQuery中專門加入了表單選擇器，從而能夠極其方便地獲取到某個類型的表單元素

表單選擇器的具體方法描述：

 

註意事項：

除了input篩選選擇器，幾乎每個表單類別篩選器都對應一個input元素的type值。大部分表單類別篩選器可以使用屬性篩選器替換。比如 $(':password') == $('[type=password]')

17.表單對象屬性篩選選擇器

除了表單元素選擇器外，表單對象屬性篩選選擇器也是專門針對錶單元素的選擇器，可以附加在其他選擇器的後面，主要功能是對所選擇的表單元素進行篩選

表單篩選選擇器的描述：

 

註意事項：

  1. 選擇器適用於覆選框和單選框，對於下拉框元素, 使用 :selected 選擇器
  2. 在某些瀏覽器中，選擇器:checked可能會錯誤選取到<option>元素，所以保險起見換用選擇器input:checked，確保只會選取<input>元素

18.特殊選擇器this

相信很多剛接觸jQuery的人，很多都會對$(this)和this的區別模糊不清，那麼這兩者有什麼區別呢？

this是JavaScript中的關鍵字，指的是當前的上下文對象，簡單的說就是方法/屬性的所有者

下麵例子中，imooc是一個對象，擁有name屬性與getName方法,在getName中this指向了所屬的對象imooc

var imooc = {

    name:"哈哈",

    getName:function(){

        //this,就是imooc對象

        return this.name;

    }

}

imooc.getName(); //慕課網

當然在JavaScript中this是動態的，也就是說這個上下文對象都是可以被動態改變的(可以通過call,apply等方法)，具體的大家可以查閱相關資料

同樣的在DOM中this就是指向了這個html元素對象，因為this就是DOM元素本身的一個引用

假如給頁面一個P元素綁定一個事件:

p.addEventListener('click',function(){

    //this === p

    //以下兩者的修改都是等價的

    this.style.color = "red";

    p.style.color = "red";

},false);

通過addEventListener綁定的事件回調中，this指向的是當前的dom對象，所以再次修改這樣對象的樣式，只需要通過this獲取到引用即可

 this.style.color = "red"

但是這樣的操作其實還是很不方便的，這裡面就要涉及一大堆的樣式相容，如果通過jQuery處理就會簡單多了，我們只需要把this加工成jQuery對象

換成jQuery的做法：

$('p').click(function(){

    //把p元素轉化成jQuery的對象

    var $this= $(this)

    $this.css('color','red')

})

通過把$()方法傳入當前的元素對象的引用this，把這個this加工成jQuery對象，我們就可以用jQuery提供的快捷方法直接處理樣式了

總體：

this，表示當前的上下文對象是一個html對象，可以調用html對象所擁有的屬性和方法。

$(this),代表的上下文對象是一個jquery的上下文對象，可以調用jQuery的方法和屬性值。

19. .attr()與.removeAttr()

每個元素都有一個或者多個特性，這些特性的用途就是給出相應元素或者其內容的附加信息。如：在img元素中，src就是元素的特性，用來標記圖片的地址。

操作特性的DOM方法主要有3個，getAttribute方法、 setAttribute方法和removeAttribute方法，就算如此在實際操作中還是會存在很多問題，這裡先不說。而在jQuery中用一個 attr()與removeAttr()就可以全部搞定了，包括相容問題

jQuery中用attr()方法來獲取和設置元素屬性,attr是attribute（屬性）的縮寫，在jQuery DOM操作中會經常用到attr()

attr()有4個表達式

  1. attr(傳入屬性名)：獲取屬性的值
  2. attr(屬性名, 屬性值)：設置屬性的值
  3. attr(屬性名,函數值)：設置屬性的函數值
  4. attr(attributes)：給指定元素設置多個屬性值，即：{屬性名一: “屬性值一” , 屬性名二: “屬性值二” , … … }

removeAttr()刪除方法

.removeAttr( attributeName ) : 為匹配的元素集合中的每個元素中移除一個屬性（attribute）

優點：

attr、removeAttr都是jQuery為了屬性操作封裝的，直接在一個 jQuery 對象上調用該方法，很容易對屬性進行操作，也不需要去特意的理解瀏覽器的屬性名不同的問題

註意的問題：

dom中有個概念的區分：Attribute和Property翻譯出來都是“屬性”，《js高級程式設計》書中翻譯為“特性”和“屬性”。簡單理解，Attribute就是dom節點自帶的屬性

例如：html中常用的id、class、title、align等：

<div id="immooc" title="慕課網"></div>

而Property是這個DOM元素作為對象，其附加的內容，例如,tagName, nodeName, nodeType,, defaultChecked, 和 defaultSelected 使用.prop()方法進行取值或賦值等

獲取Attribute就需要用attr，獲取Property就需要用prop

20.html()及.text()

讀取、修改元素的html結構或者元素的文本內容是常見的DOM操作，jQuery針對這樣的處理提供了2個便捷的方法.html()與.text()

.html()方法 

獲取集合中第一個匹配元素的HTML內容 或 設置每一個匹配元素的html內容，具體有3種用法：

  1. .html() 不傳入值，就是獲取集合中第一個匹配元素的HTML內容
  2. .html( htmlString )  設置每一個匹配元素的html內容
  3. .html( function(index, oldhtml) ) 用來返回設置HTML內容的一個函數

註意事項：

.htm()方法內部使用的是DOM的innerHTML屬性來處理的，所以在設置與獲取上需要註意的一個最重要的問題，這個操作是針對整個HTML內容（不僅僅只是文本內容）

.text()方法

得到匹配元素集合中每個元素的文本內容結合，包括他們的後代，或設置匹配元素集合中每個元素的文本內容為指定的文本內容。，具體有3種用法：

  1. .text() 得到匹配元素集合中每個元素的合併文本，包括他們的後代
  2. .text( textString ) 用於設置匹配元素內容的文本
  3. .text( function(index, text) ) 用來返回設置文本內容的一個函數

註意事項：

.text()結果返回一個字元串，包含所有匹配元素的合併文本

.html與.text的異同:

  1. .html與.text的方法操作是一樣，只是在具體針對處理對象不同
  2. .html處理的是元素內容，.text處理的是文本內容
  3. .html只能使用在HTML文檔中，.text 在XML 和 HTML 文檔中都能使用
  4. 如果處理的對象只有一個子文本節點，那麼html處理的結果與text是一樣的
  5. 火狐不支持innerText屬性，用了類似的textContent屬性，.text()方法綜合了2個屬性的支持，所以可以相容所有瀏覽器

21. .val()

jQuery中有一個.val()方法主要是用於處理表單元素的值，比如 input, select 和 textarea。

.val()方法

  1. .val()無參數，獲取匹配的元素集合中第一個元素的當前值
  2. .val( value )，設置匹配的元素集合中每個元素的值
  3. .val( function ) ，一個用來返回設置值的函數

 註意事項：

  1. 通過.val()處理select元素， 當沒有選擇項被選中，它返回null
  2. .val()方法多用來設置表單的欄位的值
  3. 如果select元素有multiple（多選）屬性，並且至少一個選擇項被選中， .val()方法返回一個數組，這個數組包含每個選中選擇項的值

 

.html(),.text()和.val()的差異總結：  


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • JavaScript 基礎第五天
    一、引言 前面我們討論了函數的一些基本概念，因為函數在任何一門語言之中都是很重要所以還是要好好學。昨天打開博客的時候看到有人私信我的JavaScript寫錯了，我定睛一看果然寫錯了。對此我表示很抱歉，希望大家能夠看得時候多噴我兩句就忘了這件事吧。 二、導入 今天我們要討論一下有關於對象的內容，我們首 ...
  • html 基礎(3)
    w3school：http://www.w3school.com.cn/ runoob：http://www.runoob.com/ html標簽參考手冊：http://www.runoob.com/tags/html-reference.html html顏色名：http://www.runoob ...
  • 選取文檔元素的方法總結
    在講解如何選取文檔元素之前，先普及一下什麼是文檔節點： HTML文檔的每個節點都表示一個Node對象，節點樹形結構的根部是Document節點，代表整個文檔，代表HTML元素的節點是Element節點，代表文本的節點是Text節點；Document、Element、Text類都是Node類的子類；（ ...
  • HTML(五)：總結
    1.HTML基本結構 <!DOCTYPE html> <!DOCTYPE> 聲明位於文檔中的最前面的位置，處於 <html> 標簽之前。此標簽可告知瀏覽器文檔使用哪種 HTML 或 XHTML 規範。 <html> 定義整個HTML文件的內容；所有HTML標簽都應該放到這裡面。 <head> 定義H ...
  • JavaScript中幾個可以轉化為false的值
    【1】0，NaN，“”，null，undefined，false的比較；【2】更換字元串中指定的字元；【3】對象的索引（屬性名）為數字時的註意事項 ...
  • js array queue （隊列）
    前言 今天項目中做一個圖片效果展示，需要實時從後臺獲取圖片數據，前段做展示。想想用到隊列，比較好實現這個功能，只需要展示隊列里的數據就可以了。於是寫了個js 對列. js code 如果我們傳入 參數就會設置 隊列的大小，不設置隊列無窮大小 測試 不初始化隊列大小 //初始化沒有參數的隊列 var ...
  • html 基礎(2) 表單
    <form>表單 name 表單的名稱 action 表單的提交地址 target 打開方式 enctype MIME類型 method 表單數據提交方式，get：在url地址上面傳送參數到伺服器，post：在後臺傳送參數到伺服器 <label> label元素不會向用戶呈現任何特殊效果，不過它為鼠 ...
  • 利用js的for迴圈實現一個簡單的“九九乘法表”
    For迴圈九九乘法表 for迴圈是javascript中一種常用的迴圈語句，可以很好的解決在程式中需要重覆執行某些語句，利用for迴圈實現簡單的“九九乘法表”的效果： 讓迴圈從小到大，依次排序，並計算每次的結果，並用 table 使之排列出來。 代碼很少，相對很簡單，也都是基礎，通過簡單的迴圈實現這 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發（一）：使用.NET MAUI開發第一個安卓APP
    移動開發（一）：使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說，近來想嘗試開發一款安卓APP，考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP，畢竟是使用Visual Studio開發工具，使用起來也比較的順手，結合微軟官方的教程進行了安卓 ...
  • wpf ToggleButton選中效果和一個登錄界面
    前言 QuestPDF 是一個開源 .NET 庫，用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫，它徹底改變了我們生成 PDF 文檔的方 ...
  • 彈幕樹洞項目功能新增篇
    項目地址 項目後端地址： https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址： ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址： http://tree ...
  • 第27篇 sqlserver2022詳細安裝步驟
    話不多說，直接開乾 一.下載 1.官方鏈接下載： https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe，運行開始下載SQL server； 二. ...
  • .NET 開源高性能 MQTT 類庫
    前言 隨著物聯網（IoT）技術的迅猛發展，MQTT（消息隊列遙測傳輸）協議憑藉其輕量級和高效性，已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫，為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog文檔翻譯系列（六） - 可用的接收器、增強器、格式化輸出
    Serilog支持多種接收器用於日誌存儲，增強器用於添加屬性，LogContext管理動態屬性，支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項，適用於不同需求。 ...
  • 警惕 Visual Studio 屬性求值副作用導致邏輯不符合預期
    目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據，爬取信息時需要模擬瀏覽器行為，否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下： 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • [使用目前最新版]HybridCLR6.9.0+YooAsset2.2.4實現純C# Unity熱更新方案 (一)
    1.前言 什麼是熱更新 游戲或者軟體更新時，無需重新下載客戶端進行安裝，而是在應用程式啟動的情況下，在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR，Xlua，ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles，Addressable， ...
  • 在 ASP.NET Core Web API 中使用操作篩選器統一處理通用操作
    本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺，其實像阿裡雲，騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後，它會送 ...
  • 第28篇 如何.net中實現高效可靠數據同步api
    通過以下方式可以高效，並保證數據同步的可靠性 1.API設計 使用RESTful設計，確保API端點明確，並使用適當的HTTP方法（如POST用於創建，PUT用於更新）。 設計清晰的請求和響應模型，以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類