JQuery框架：介紹、安裝、選擇器、屬性操作、動畫

来源:https://www.cnblogs.com/xujunkai/archive/2019/06/23/11074550.html
-Advertisement-
Play Games

jQuery [TOC] 詳細內容 1.JQuery介紹 jQuery是一個快速，小巧，功能豐富的JavaScript庫。它通過易於使用的API在大量瀏覽器中運行，使得HTML文檔遍歷和操作，事件處理，動畫和Ajax變得更加簡單。通過多功能性和可擴展性的結合，jQuery改變了數百萬人編寫JavaS ...


目錄

jQuery

詳細內容

1.JQuery介紹

  • jQuery是一個快速，小巧，功能豐富的JavaScript庫。它通過易於使用的API在大量瀏覽器中運行，使得HTML文檔遍歷和操作，事件處理，動畫和Ajax變得更加簡單。通過多功能性和可擴展性的結合，jQuery改變了數百萬人編寫JavaScript的方式。
  • 操作: 獲取節點元素對象，屬性操作，樣式操作，類名，節點的創建，刪除，添加，替換

2.JQuery的下載安裝

3.JQuery的使用

  • 獲取jquery對象
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="box" class="box">
        <p class="active">xjk1</p>
        <p class="active">xjk2</p>
        <input type="text">
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
        console.log($('.box'));//獲取jquery對象
    </script>
</body>
</html>
//jQuery.fn.init [div#box.box, prevObject: jQuery.fn.init(1)] 是一個偽數組

1.對象的轉換

//jquery對象轉js節點對象
console.log($('#box')[0]);//jquery對象轉換js節點對象,索引方式
//js對象轉jquery對象
var box = document.getElementById('box');
console.log($(box));
console.log($('#box .active'));//列印出符合id=box,底下class=active所有jquery對象。

$('#box .active').click(function(){//點擊獲取事件
    console.log(this);//this 指的是此時的p簽及其內容。
})

4.jQuery的選擇器

1.基本選擇器

  • ID選擇器 (#id)
    • $(#id)
$('#box').css('color','red');
  • 類選擇器（.class ）
    • $(".類名")
$('.box').css('color','red');
  • 標簽選擇器(Element)
    • $("標簽")
$('p').css('color','blue');
  • 通配符選擇器(*)
    • $('*')
$('*').css({'outline':0,'border':0});//去除所有外框。

2.層級選擇器

  • 後代選擇器
    • 符號：空格
    • 範圍：選擇所有的後代元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <span>span標簽1</span>
        <p>p標簽</p>
        <span>
            <span>span標簽2</span>
        </span>
        <div>
            <span>span標簽3</span>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
        $("div span").css('color','red');//所有div 下的span標簽字體顏色都成為紅色
    </script>
</body>
</html>
  • 子代選擇器
    • 符號：>
    • 範圍：選擇器所有的子代元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <span>span標簽1</span>
        <p>p標簽</p>
        <span>
            <span>span標簽2</span>
        </span>
        <div>
            <p><span>span標簽3</span></p>
        </div>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
        $('div>span').css('color','red');//div下的所有span標簽 字體都變紅色
    </script>
</body>
</html>
  • 緊鄰選擇器
    • 符號：+
    • 範圍：選擇器緊挨著的下一個元素。
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>
        <p>p標簽</p>
        <span>
            <div>span標簽2</div>
            <div>span標簽3</div>
            <div>span標簽4</div>
        </span>
    </div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
        $('p+span').css('color','red');//p簽緊挨著的span簽的子標簽內容
    </script>
</body>
</html>
//span標簽2  span標簽3  span標簽4 都變紅

  • 兄弟選擇器

    • 符號： ~
    • 範圍選擇後的所有兄弟元素。
    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div>div標簽</div>
    <p>p標簽1</p>
    <p>p標簽2
        <p>p標簽2的子標簽</p>
    </p>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $('div~p').css('color','red');
    </script>
</body>
</html>
//p標簽字都稱為紅色

3.基本過濾器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li class="a">
            <a href="#">caocao</a>
        </li>
        <li class="b">liubei</li>
        <li class="c">sunquan</li>
        <li class="d">guanyu</li>
    </ul>


    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
        // console.log($('ul li:eq(1)'));//獲得索引為1的元素
        // $('ul li:eq(1)').css('color','red');//改變索引為1的元素的顏色

        // console.log($('ul li:lt(3)'));//從0開始獲取索引小於3的元素。是偽數組
        // $('ul li:odd').css('color','red');//更改索引為奇數的文本顏色
        $('ul li a:first').css('color','yellow');//第一個匹配元素更改顏色
        $('ul li:last').css('color','grey');//更改最後一個元素的顏色
    </script>
</body>
</html>

4.屬性選擇器

  • 例題：
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <a href="nihao" class="a">href為nihao</a>

    <a href="" class="b">href為空</a>
    <a class="c">不包括href的a簽</a>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
        // console.log($('a[href]'));//選擇包含href屬性元素

        // console.log($("a[href='nihao']"));//選擇href='nihao'的元素

        console.log($("a[href!='baidu']"));//選擇href!='baidu'的元素
    </script>
</body>
</html>

5.篩選選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <ul>
        <li class="out1">1
            <ul>
                <li class="inner1">內1</li>
                <li class="inner2">內2</li>
                <li class="inner3">內3</li>
            </ul>
        </li>
        <li class="out2">2</li>
        <li class="out3">3</li>
    </ul>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
        // console.log($('ul').find('li'));//查找ul下所有li標簽，後代
        // console.log($('.out1').children('ul'));//查找class=out1 的子標簽ul
        console.log($('ul').parent());//查找ul標簽的父標簽
    </script>
</body>
</html>
  • 獲取文檔，獲取body,獲取html
console.log(document);//獲取文檔
console.log(document.body);//獲取body
console.log(document.documentElement);//獲取html

6.選項卡案例JavaScript對比JQuery

//此為JavaScript實現
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            button.active{
                color: red;
            }
            p{
                display: none;
            }
            p.active{
                display: block;
            }
        </style>
    </head>
    <body>
        <button class="active">熱門</button>
        <button>電視影音</button>
        <button>電腦</button>
        <button>傢具</button>
        <p class="active">熱門</p>
        <p>電視影音</p>
        <p>電腦</p>
        <p>傢具</p>
        <script type="text/javascript">
            // 1.獲取標簽
            var btns = document.getElementsByTagName('button');
            var ops = document.getElementsByTagName('p');
            
            //2.給每個標簽綁定點擊事件
            //ES6可以用let定義塊級作用域變數
            for(let i = 0;i < btns.length; i++){
                btns[i].onclick = function (){//排他思想
                    for(var j = 0; j < btns.length; j++){
                        btns[j].className = '';
                        ops[j].className = '';
                    }
                    //改變button的樣式
                    this.className = 'active';
                    //改變p標簽的樣式
                    ops[i].className = 'active';
                }
            }
        </script>
    </body>
</html>
//JQuery實現選項卡
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            button.active{
                color: red;
            }
            p{
                display: none;
            }
            p.active{
                display: block;
            }
        </style>
    </head>
    <body>
        <button class="active">熱門</button>
        <button>電視影音</button>
        <button>電腦</button>
        <button>傢具</button>
        <p class="active">家電</p>
        <p>電視影音</p>
        <p>電腦</p>
        <p>傢具</p>
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $('button').click(function(){
                // 鏈式編程
                //第二個按鈕 索引1
                console.log($(this).addClass('active'));
                $(this).addClass('active').siblings('button').removeClass('active');
                // 獲取當前點擊的元素的索引
                console.log($(this).index());
                $('p').eq($(this).index()).addClass('active').siblings('p').removeClass('active');
            })
        </script>
    </body>
</html>

5.JQuery的屬性操作

  • JQuery的屬性操作模塊分為四個部分：html屬性操作，dom屬性操作，類樣式操作和值操作
    • html屬性操作：是對html文檔中的屬性進行讀取，設置和移除操作。比如attr()、removeAttr()。
    • DOM屬性操作：對DOM元素的屬性進行讀取，設置和移除操作。比如prop()、removeProp()
    • 類樣式操作：是指對DOM屬性className進行添加，移除操作。比如addClass()、removeClass()、toggleClass()
    • 值操作：是對DOM屬性value進行讀取和設置操作。比如html()、text()、val()
1. attr()

  • 設置屬性值或者返回被選元素的屬性

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id = 'box' class="boxs">你好</div>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script>
        //獲取值：attr設置一個屬性值的時候，只是獲取值。獲取id值。
        var id = $('div').attr('id');
        console.log(id);//box
        //獲取class值
        var cla = $('div').attr('class');
        console.log(cla);//boxs

        //設置一個值
        $('div').attr('id','thebox');//此時id值為thebox
        //設置多個值
        $('div').attr({'id':'manybox','class':'happy'});

    </script>
</body>
</html>
2.removeAttr()

  • 移除屬性

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

</head>
<body>
    <div id = 'box' class="boxs" title="say">你好</div>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script>
        //移除一個屬性
        $("#box").removeAttr('title');

        //移除多個屬性，如移除class  id屬性
        $('#box').removeAttr('class id');
    </script>

</body>
</html>
3.prop()

  • 設置或者返回被選元素的屬性和值。

  • 當該方法用於返回屬性值時，則返回第一個匹配元素的值。

  • 當該方法用於設置屬性值時，則為匹配元素集合設置一個或多個屬性/值對。

    • 註意不是標簽能加的屬性值不能設置
    <body>
    <div id = 'box' class="boxs" title="say">你好</div>
    <span></span>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script>
        //設置單個屬性和值
        $('span').prop('class','like');
      //設置多個屬性和值
      $('span').prop({'title':'like','id':"line"});
    </script>
</body>
</html>

  • attr() 和prop()的區別

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
    男<input type="radio" id='test' name="sex"  checked/>
    女<input type="radio" id='test2' name="sex" />
    <button>提交</button>

    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript">
        $(function(){
            //獲取第一個input
            var el = $('input').first();
            //undefined  因為attr是獲取的這個對象屬性節點的值，很顯然此時沒有這個屬性節點，自然輸出undefined
            console.log(el.attr('style'));
            // 輸出CSSStyleDeclaration對象，對於一個DOM對象，是具有原生的style對象屬性的，所以輸出了style對象
            console.log(el.prop('style'));
            console.log(document.getElementById('test').style);

            $('button').click(function(){
                alert(el.prop("checked") ? "男":"女");
            })
        })
    </script>

</body>
</html>
    • 什麼時候使用attr(),什麼時候使用prop()?
      • 有true,false兩個屬性使用prop();
      • 其他則使用attr()
4. addclass(添加多個類)

  • 為每個匹配的元素添加指定類名

    $('div').addClass('box');//追加一個類名到原有的類名

  • 還可以為匹配的元素添加多個類名

    $('div').addClass("box box2");//追加多個類名

  • 例題

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        li.temp{
            color:red;
        }
    </style>
</head>
<body>
    <ul type="none">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $('li').addClass('temp');//為每個li標簽添加class='temp'
    </script>
</body>
</html>
5. removeClass()

  • 從所有匹配的元素中刪除全部或者指定的類，移除指定類（1個或者多個）。

  • 移除一個

        <script>
        $('div').removeClass('box');
        console.log($('div').attr('class'));//box2
    </script>

  • 移除全部

        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $('div').removeClass();
        console.log($('div').attr('class'));//''
    </script>

  • 小案例

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .active{
            color:red;
        }
    </style>
</head>
<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script>
        //通過增加類值，改變其CSS渲染
        $(function(){
            $('ul li').click(function(){
                $(this).addClass('active').siblings('li').removeClass('active');
            })
        })
    </script>
</body>
</html>
6.toggleClass
  • 如果存在（不存在）就刪除（添加）一個類。
  • 語法：toggleClass('box')
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <span>123</span>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script>
        //span標簽沒有class屬性，點擊之後span標簽添加class='active'
        $('span').click(function(){
            $(this).toggleClass('active');
        })
    </script>
</body>
</html>
7.html

  • html() 是獲取選中標簽元素中所有的內容

    $('#box').html();

  • 示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="box">123</div>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script>
        //點擊div獲取事件，將123改為$('#box').html('<a href="https://www.baidu.com">百度一下</a>')
        $('div').click(function(){
            $('#box').html('<a href="https://www.baidu.com">百度一下</a>');
        })
    </script>
</body>
</html>
8.text

  • text() 獲取匹配元素包含的文本內容。

  • 語法：

    $('#box').text();

  • 示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="box">123</div>
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $('#box').text("<a href='https://www.baidu.com'>百度一下</a>")
    </script>
</body>
</html>

9.val

  • 獲取值：val()用於表單控制項中獲取值，比如input textarea select等等。

  • 語法：

    $('input').val('設置表單控制項值')

  • 示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <input type="text" value="你好">
    <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
    <script>
        $('input').val('替換表單的值');
    </script>
</body>
</html>

6.動畫

1.顯示動畫

  • 方式1：

    • 無參數，表示讓指定的元素直接顯示出來。其實這個方法的底層就是通過display: block;實現的。
    $("div").show();

  • 方式2：

    • 通過控制元素的寬高、透明度、display屬性，逐漸顯示，2秒後顯示完畢。
    $('div').show(3000);

  • 方式3

    • 和方式二類似，也是通過控制元素的寬高、透明度、display屬性，逐漸顯示。
    • 參數：
      • slow 慢 600ms
      • normal 正常 400ms
      • fast 快 200ms
    $("div").show("slow");

  • 方式4

    • 動畫執行完後，立即執行回調函數
    //show(毫秒值，回調函數;
    $("div").show(5000,function () {
        alert("動畫執行完畢！");
    });

  • 示例：

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 200px;
            height: 200px;
            background-color: red;
            display:none;
        }
    </style>
</head>
<body>
    <div></div>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script>
        $('div').show(3000,function(){
            alert('動畫執行完畢');
        });
    </script>
</body>
</html>

2.隱藏動畫

$(div).hide();
$(div).hide(1000);
$(div).hide('slow');
$(div).hide(1000,function())

3.實現點擊按鈕顯示盒子，再點擊按鈕隱藏盒子

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style>
            //css設置盒子寬高，背景色，display預設不顯示
            #box{
                width: 200px;
                height: 200px;
                background-color: red;
                display: none;
            }
        </style>
    </head>
    <body>
        <button id="btn">顯示</button>
        <div id="box"></div>
        <script src="js/jquery.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            //點擊滑鼠獲取事件
            $('#btn').click(function(){
                if ($(this).text() === '顯示'){
                    //動畫顯示盒子
                    $('#box').show(1000,function () {
                        //將按鍵文檔字改為‘隱藏’
                        $('#btn').text('隱藏');
                    });
                }else{
                    //動畫隱藏盒子
                    $('#box').hide(1000,function () {
                        //將按鍵文檔字改為‘顯示’
                        $('#btn').text('顯示');
                    });
                }
            })
        </script>
    </body>
</html>

4.開關方式顯示隱藏動畫

  • ('#box').toggle(3000,function(){});
$('#btn').click(function(){
            $('#box').toggle(3000,function(){
                $(this).text('盒子出來了');
                if ($('#btn').text()=='隱藏') {
                    $('#btn').text('顯示');
                }else{
                    $('#btn').text('隱藏');
                }
            });
        })

5.滑入和滑出

  • 滑入

    $('#box').slideDown(speed, 回調函數);

  • 滑出

    $('#box').slideUp(speed, 回調函數);

  • 滑入滑出切換動畫

    $('#box').slideToggle(speed, 回調函數);

6.淡入淡出動畫

  • 淡入

    $('#box').fadeIn(speed, 回調函數);

  • 淡出

    $('#box').fadeOut(speed, 回調函數);

  • 淡入淡出

    $('#box').fadeToggle('fast', callback);

6.自定義動畫

  • 語法：

     $(selector).animate({params}, speed, callback);

  • 作用：執行一組CSS屬性的自定義動畫。

    • 第一個參數表現：要執行動畫的CSS屬性（必選）
    • 第二個參數表示：執行動畫時長（可選）
    • 第三個參數表示：動畫執行完後，立即執行的回調函數（可選）
<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style>
        div {
            position: absolute;
            left: 20px;
            top: 30px;
            width: 100px;
            height: 100px;
            background-color: green;
        }
    </style>
    <script src="js/jquery.js"></script>
    <script>
        jQuery(function () {
            $("button").click(function () {
                var json = {"width": 500, "height": 500, "left": 300, "top": 300, "border-radius": 100};
                var json2 = {
                    "width": 100,
                    "height": 100,
                    "left": 100,
                    "top": 100,
                    "border-radius": 100,
                    "background-color": "red"
                };

                //自定義動畫
                $("div").animate(json, 1000, function () {
                    $("div").animate(json2, 1000, function () {
                        alert("動畫執行完畢！");
                    });
                });

            })
        })
    </script>
</head>
<body>
<button>自定義動畫</button>
<div></div>
</body>
</html>

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

-Advertisement-
Play Games
更多相關文章
  • <title>標簽--基礎標簽
    [2019.06.23 學習筆記4] 1.定義文檔標題，顯示在瀏覽器視窗的標題欄上。 2.<head>中唯一的必須標簽。 3.<title>中的內容有利於搜索引擎搜索到網站。 ...
  • 在React中寫一個Animation組件，為組件進入和離開加上動畫/過度
    問題 在單頁面應用中，我們經常需要給路由的切換或者元素的掛載和卸載加上過渡效果，為這麼一個小功能引入第三方框架，實在有點小糾結。不如自己封裝。 思路 原理 以進入時 ，退出時 為例 元素掛載時 1. 掛載元素dom 2. 設置動畫 元素卸載時 1. 設置動畫 2. 動畫結束後卸載dom 組件設計 為 ...
  • CSS 從大圖中選取部分區域作為目標圖標
    從大圖中選取部分區域作為目標圖標 by:授客 QQ：1033553122 1、圖片素材 圖片素材如下（大小：137px * 264px），圖中從上到下，連續存放了兩張100px * 100px的圖 2、HTML代碼 html代碼如下： <!DOCTYPE html> <html> <head> <m ...
  • <head>標簽--基礎標簽
    [2019.06.23 學習筆記3] 1.定義html5文檔的頭部，<head>中的元素可以引用腳步、指示瀏覽器在哪裡找到樣式表 2.可用在<head>部分的標簽：<title> <meta> <link> <script> <script> ...
  • <html>標簽--基礎標簽
    [2019.06.23 學習筆記2] 1.定義HTML文檔 ...
  • XHTML
    [2019.06.23 學習筆記1] 1.XHTML是html向XML的一個過渡語言，XML嚴謹，HTML寬鬆； ...
  • ES6- Class類的使用，聲明，繼承
    聲明一個類 調用方法 // 調用方法 let ananClass = new Coder; ananClass.name('類'); ananClass.skill('技能'); 類傳參 // 類傳參 let ananiah = new Coder(1,2); console.log(ananiah ...
  • ES6-promise對象的使用
    Promise 是非同步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。它由社區最早提出和實現，ES6 將其寫進了語言標準，統一了用法，原生提供了Promise對象。 所謂Promise，簡單說就是一個容器，裡面保存著某個未來才會結束的事件（通常是一個非同步操作）的結果。從語... ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類