Jquery就是這麼簡單

来源:https://www.cnblogs.com/Java3y/archive/2018/03/02/8495025.html
-Advertisement-
Play Games

什麼是Jquery？ Jquey就是一款 跨主流瀏覽器的JavaScript庫，簡化JavaScript對HTML操作 就是封裝了JavaScript，能夠簡化我們寫代碼的一個JavaScript庫 為什麼要使用Jquery？ 我覺得非常重要的理由就是： 它能夠相容市面上主流的瀏覽器， 我們學習AJ ...


什麼是Jquery？

Jquey就是一款跨主流瀏覽器的JavaScript庫，簡化JavaScript對HTML操作

就是封裝了JavaScript，能夠簡化我們寫代碼的一個JavaScript庫

為什麼要使用Jquery？

我覺得非常重要的理由就是：它能夠相容市面上主流的瀏覽器，我們學習AJAX就知道了，IE和FireFox獲取非同步對象的方式是不一樣的，而Jquery能夠屏蔽掉這些不相容的東西...

  • （1）寫少代碼,做多事情【write less do more】
  • （2）免費，開源且輕量級的js庫，容量很小
  • 註意：項目中，提倡引用min版的js庫
  • （3）相容市面上主流瀏覽器，例如 IE，Firefox，Chrome
  • 註意：jQuery不是將所有JS全部封裝，只是有選擇的封裝
  • （4）能夠處理HTML/JSP/XML、CSS、DOM、事件、實現動畫效果，也能提供非同步AJAX功能
  • （5）文檔手冊很全，很詳細
  • （6）成熟的插件可供選擇
  • （7）提倡對主要的html標簽提供一個id屬性，但不是必須的
  • （8）出錯後，有一定的提示信息
  • （9）不用再在html裡面通過<script>標簽插入一大堆js來調用命令了

回顧javascript

JavaScript定位到HTML的控制項有三種基本的方式：

  • （A）通過ID屬性：document.getElementById()
  • （B）通過NAME屬性：document.getElementsByName()
  • （C）通過標簽名：document.getElementsByTagName()

我們發現，JavaScript的方法名太長了，不易於書寫代碼......

封裝優化

這些方法名太長了，獲取ID屬性、NAME屬性、標簽名屬性的控制項也用不著三個方法，我們定義下規則就好了

  • 傳入的參數是"#"號開頭的字元串，那麼就是id屬性
  • 傳入的參數是沒有"#"號開頭的字元串，也沒有首碼修飾的字元串就是標簽名屬性

到這裡，我們就可以根據傳入的參數判斷它是獲取ID屬性的控制項還是標簽名的控制項了。在內部還是調用document.getElementById()這些方法。我們真正在使用的時候直接寫上我們自定義規則的字元串就可以獲取對應的控制項了。


	<script type="text/javascript">
		//$()表示定位指定的標簽
		function $(str){
			//獲取str變數的類型
			var type = typeof(str);
			//如果是string類型的話
			if(type == "string"){
				//截取字元串的第一個字元
				var first = str.substring(0,1);
				//如果是#號的話
				if("#" == first){
					//獲取#號之後的所有字元串
					var end = str.substring(1,str.length);
					//根據id定位標簽
					var element = document.getElementById(end);
					//如果找到了
					if(element != null){
						//返回標簽
						return element;
					}else{
						alert("查無此標簽");
					}
				}else{
				
				}
			}else{
				alert("參數必須是字元串類型");
			}
		}
	</script>

JQuery對象與JavaScript對象之間的關係

  • 用JavaScript語法創建的對象叫做JavaScript對象
  • 用JQurey語法創建的對象叫做JQuery對象
    • Jquery對象只能調用Jquery對象的API
    • JavaScript對象只能調用JavaScript對象的API

這裡寫圖片描述

JQuery對象與JavaScript對象是可以互相轉化的，一般地，由於Jquery用起來更加方便，我們都是將JavaScript對象轉化成Jquery對象

Jquery轉成JavaScript對象

在Jquery中對象都是當成是數組的。因此Jquery轉成JavaScript對象語法如下：獲取數組的下標，出來的結果就是JavaScript對象了。

  • jQuery對象[下標，從0開始]
  • jQuery對象.get(下標，從0開始)

再次重申：Jquery對象只能調用Jquery對象的API，JavaScript對象只能調用JavaScript對象的API

JavaScript對象轉成Jquery

值得註意的是：在JavaScript腳本內，this是代表JavaScript對象的。

JavaScript對象轉成Jquery對象語法也非常簡單：在$內寫上JavaScript對象，就變成了JQuery對象了。

  • 語法：$(js對象)---->jQuery對象

一般地，我們習慣在Jquery對象的變數前面寫上$，表示這是JQuery對象\

選擇器

Jquery提供了九個選擇器給我們用來定位HTML控制項..

  • 目的：通過九類選擇器，能定位web頁面（HTML/JSP/XML）中的任何標簽
    • （1）基本選擇器
      • 直接定位id、類修修飾器、標簽
    • （2）層次選擇器
      • 有父子，兄弟關係的標簽
    • （3）增強基本選擇器
      • 大於、小於、等於、奇偶數的標簽
    • （4）內容選擇器
      • 定義內容為XXX、內容中是否有標簽器、含有子元素或者文本的標簽
    • （5）可見性選擇器
      • 可見或不可見的標簽
    • （6）屬性選擇器
      • 與屬性的值相關
    • （7）子元素選擇器
      • 匹配父標簽下的子標簽
    • （8）表單選擇器
      • 匹配表單對應的控制項屬性
    • （9）表單對象屬性選擇器
      • 匹配表單屬性具體的值

通過這九種的選擇器，我們基本可以能獲取HTML中任何位置的標簽。

這裡寫圖片描述

Jquery關於DOM的API

前面使用Jquery的選擇器來獲取到了HTML標簽，單純得到標簽是沒有用的。我們要對其進行增刪改，這樣在網頁上才能做出“動態”的效果...

JavaScript的DOM能夠操作CSS,HTML從而在網頁上做出動態的效果..

這裡寫圖片描述

**Jquery是對JavaScript的封裝，那麼Jquery在得到HTML標簽後，也有對應的方法來獲取標簽的內容，動態創建、刪除、修改標簽。**從而在網頁上做出動態的效果

追加

  • append()：追加到父元素之後
  • prepend()：追加到父元素之前
  • after()：追加到兄弟元素之後
  • before()：追加到兄弟元素之前

查詢層次關係

我們發現在選擇器上就有層次關係的選擇器，在API上也有層次關係的方法。一般地，我們用方法來定位到對應的控制項比較多。

  • children()：只查詢子節點，不含後代節點
  • next()：下一下兄弟節點
  • prev()：上一下兄弟節點
  • siblings()：上下兄弟節點

css樣式

  • addClass()：增加已存在的樣式
  • removeClass()：刪除已存在的樣式
  • hasClass()：判斷標簽是否有指定的樣式，true表示有樣式，false表示無樣式
  • toggleClass()：如果標簽有樣式就刪除，否則增加樣式

動畫效果

往這些方法下設置參數，那麼就可以控制它的隱藏、顯示時間

  • show()：顯示對象
  • hide()：隱藏對象
  • fadeIn()：淡入顯示對象
  • fadeOut()：淡出隱藏對象
  • slideUp()：向上滑動
  • slideDown()：向下滑動
  • slideToggle()：上下切換滑動，速度快點

CSS尺寸屬性

直接調用無參就是獲取，給指定的參數就是修改

  • offset()：獲取對象的left和top坐標
  • offset({top:100,left:200})：將對象直接定位到指定的left和top坐標
  • width()：獲取對象的寬
    • width(300)：設置對象的寬
  • height()：獲取對象的高
    • height(500)：設置對象的高

標簽內容和屬性

  • val()：獲取value屬性的值
    • val("")：設置value屬性值為""空串，相當於清空
  • text()：獲取HTML或XML標簽之間的值
    • text("")：設置HTML或XML標簽之間的值為""空串
  • html()：得到標簽下HTML的值
  • **attr(name,value)：給符合條件的標簽添加key-value屬性對 **
  • removeAttr()：刪除已存在的屬性

增刪改標簽

  • **$("<div id='xxID'>HTML代碼</div>")：創建元素，屬性，文本 **
  • remove()：刪除自已及其後代節點
  • clone()：只複製樣式，不複製行為
  • clone(true)：既複製樣式，又複製行為
  • replaceWith()：替代原來的節點

迭代

由於Jquery對象都是被看成是一個數組，each()方法就是專門用來操作數組的。

  • each()：是jQuery中專用於迭代數組的方法，參數為一個處理函數，this表示當前需要迭代的js對象

Jquery事件API

JavaScript一大特性就是事件驅動，當用戶用了執行了某些動作以後，JavaScript就會響應事件，在事件的方法上，我們就可以對用戶的動作“回饋”一些信息給用戶！

Jquery也對JavaScript事件進行了封裝，我們看一下以下的API：

  • window.onload：在瀏覽器載入web頁面時觸發，可以寫多次onload事件，但後者覆蓋前者
  • ready：在瀏覽器載入web頁面時觸發，可以寫多次ready事件，不會後者覆蓋前者，依次從上向下執行，我們常用$(函數)簡化
    • ready和onload同時存在時，二者都會觸發執行，ready快於onload
  • change：當內容改變時觸發
  • focus：焦點獲取
  • select：選中所有的文本值
  • keyup/keydown/keypress：演示在IE和Firefox中獲取event對象的不同
  • mousemove：在指定區域中不斷移動觸發
  • mouseover：滑鼠移入時觸發
  • mouseout：滑鼠移出時觸發
  • submit：在提交表單時觸發，true表示提交到後臺，false表示不提交到後臺
  • click：單擊觸發
  • dblclick：雙擊觸發
  • blur：焦點失去

值得註意的是：當用戶執行動作的時候，瀏覽器會自動創建事件對象，傳遞進去給響應事件的方法【類似與監聽器的原理】，那麼我們在響應方法上就可以獲取一些屬性：

這裡寫圖片描述

Jquery對ajax常用的API

我們在開始使用JavaScript學習AJAX的時候，創建非同步對象時，需要根據不同的瀏覽器來創建不同的對象....裝載XML文件的時候，也有相容性的問題。

Jquery就很好地屏蔽了瀏覽器不同的問題，不需要考慮瀏覽器相容的問題，這是非常非常方便我們開發的。

  • **$.ajax([options]) **
  • load(url, [data], [callback])
  • **$.get(url, [data], [fn], [type]) **
  • $post(url, [data], [callback], [type])
  • serialize()

前4個方法的功能都是差不多的，都是向伺服器發送請求，得到伺服器返回的數據。

最後一個是對錶單的數據進行封裝，將表單的數據封裝成JSON格式

load()

首先，我們來使用一下load()這個方法吧。在文檔中對它的解釋是這樣子的。

這裡寫圖片描述

我來補充一下：

  • 第一個參數：表示的是要請求的路徑
  • 第二個參數：要把哪些參數帶過去給伺服器端，需要的是JSON格式的
  • 第三個參數：回調方法，伺服器返回給非同步對象的時候，會調用該方法

回調方法也有三個參數：

  • 回調函數中參數一：backData表示返回的數據，它是js對象
  • 回調函數中參數二：textStatus表示返回狀態的文本描述，例如：success，error，
  • 回調函數中參數三：xmlHttpRequest表示ajax中的核心對象

一般地，我們只需要用到第一個參數！

我們來使用這個方法來獲取當前的時間，對這個方法熟悉一下：

調用load方法的jquery對象，返回結果自動添加到jQuery對象代表的標簽中間

  • 如果帶參數就自動使用post，不帶參數自動使用get。
  • 使用load方法時，自動進行編碼，無需手工編碼

<%--
  Created by IntelliJ IDEA.
  User: ozc
  Date: 2017/5/18
  Time: 13:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
  <head>
    <title>$Title$</title>

    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>

  </head>
  <body>
  當前時間是：<span id="time"></span><br>
  <input type="button" id="button" value="獲取當前時間">

  <script type="text/javascript">

    $("#button").click(function () {


      //請求伺服器端的路徑
      var url = "${pageContext.request.contextPath}/TimeServlet?time?" + new Date().getTime();

      //沒有要參數要帶過去
      //var sendData = null;

      /*
	   * function方法的三個參數：	
	       * 第一個參數表示伺服器端帶回來的數據，是JS對象
	       * 第二個參數表示的是返回狀態的文字描述【用處不大】
	       * 第三個參數表示的是非同步對象，一般我們用來看伺服器端返回的JSON的值是什麼【用處還行】
	       *       因為第一個參數返回的是JS對象，因此我們是看不見具體JSON的值是什麼，所以有的時候要用第三個參數
       *
       * 值得註意的是：
       *       要想使用第三個參數，就必須把前兩個參數給寫上！
       *       調用load方法的jquery對象，返回結果自動添加到jQuery對象代表的標簽中間
       * */
      $("#time").load(url);

    });

  </script>


  </body>
</html>
  • Servlet代碼：


    protected void doPost(javax.servlet.http.HttpServletRequest request, javax.servlet.http.HttpServletResponse response) throws javax.servlet.ServletException, IOException {

        SimpleDateFormat dateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");

        String date = dateFormat.format(new Date());

        PrintWriter writer = response.getWriter();
        writer.write(date);

        writer.flush();
        writer.close();

    }
  • 效果：

這裡寫圖片描述

$.get()

上面的load()方法，當我們帶參數給伺服器的時候，就自動轉化成post、不帶參數的時候就轉換成get。$.get()就是指定是get方法

load()方法是使用Jquery對象來調用的，並且調用過後，會把數據自動填充到Jquery對象的標簽中間，而$.get()並不是特定的Jquery對象來調用！

$.get(url, [data], [fn], [type])參數和load()是完全類似的，我們在上面的例子中該一下就行了。

由於$.get()是沒有將返回的數據自動填充到標簽之中，因此需要手動地添加到指定的標簽之中！


      $.get(url, function (backData) {

        //得到客戶端返回的數據【JS對象】

        $("#time").append(backData);
      });
  • 效果：

這裡寫圖片描述

$.post()

.post()和.get()是十分類似的，只不過是把請求方式改變了，一般情況下，我們有參數傳遞給伺服器的時候，都是用post方式的。

使用$.post()方法是需要設定編碼的，它和load()方法是不一樣的！

下麵使用檢查用戶名和密碼是否合法的案例來說明這兩個方法：


<%--
  Created by IntelliJ IDEA.
  User: ozc
  Date: 2017/5/18
  Time: 13:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>$Title$</title>

    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>

</head>
<body>

<%--使用非同步操作，表單的form和method都不是必須的，如果指定了，還是會根據後面Jquery的方法和參數來決定--%>
<form>

    <table>
        <tr>
            <td>用戶名：</td>
            <td><input type="text"></td>
        </tr>

        <tr>
            <td>密碼：</td>
            <td><input type="password"></td>
        </tr>

        <tr>
            <td><input type="button" value="檢查"></td>
        </tr>
    </table>
    <span id="backData"></span>
</form>

<script type="text/javascript">

    $(":button").click(function () {

        var url = "${pageContext.request.contextPath}/UserServlet?time=" + new Date().getTime();

        //要傳送過去的數據必須是JSON格式的
        var sendData = {
            username: $(":text").val(),
            password: $(":password").val()
        };

        $.post(url, sendData, function (backData) {

            //得到返回的數據，填充到相對應的位置
            $("#backData").text(backData);

        });


    });


</script>


</body>
</html>
  • Servlet代碼：

import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import java.io.IOException;

/**
 * Created by ozc on 2017/5/21.
 */
@WebServlet(name = "UserServlet",urlPatterns = "/UserServlet")
public class UserServlet extends HttpServlet {
    protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        //設定編碼
        request.setCharacterEncoding("UTF-8");
        response.setContentType("text/html;charset=UTF-8");

        String username = request.getParameter("username");
        String password = request.getParameter("password");

        String backData = "用戶名和密碼合法";
        if ("哈哈".equals(username) && "123".equals(password)) {

            backData = "用戶名或密碼不合法";
        }

        response.getWriter().write(backData);

    }

    protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {

        this.doPost(request, response);

    }
}

這裡寫圖片描述這裡寫圖片描述

serialize()

上面在介紹參數的時候已經說了，發送給伺服器端的參數是需要JSON格式的，但是呢，如果我在表單中有很多很多的參數呢？？？那不是要我自己一個一個地去拼接？？？？

於是乎，Jquery也提供了serialize()這麼一個方法，給我們自動把表單中的數據封裝成JSON格式的數據

使用之前要註意的是：

  • 為每個jQuery對象設置一個name屬性，因為name屬性會被認為請求參數名
  • 必須在<form>標簽元素之內

根據上面的例子，我們來使用一下，我們調用serialize()方法，不自己去拼接JSON


<%--
  Created by IntelliJ IDEA.
  User: ozc
  Date: 2017/5/18
  Time: 13:36
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<html>
<head>
    <title>$Title$</title>

    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>

</head>
<body>

<%--使用非同步操作，表單的form和method都不是必須的，如果指定了，還是會根據後面Jquery的方法和參數來決定--%>
<form>
    <table>


        <%--要想使用serialize這個方法，就必須在表單之內，並且給上對應的name屬性--%>
        <tr>
            <td>用戶名：</td>
            <td><input type="text" name="username"></td>
        </tr>

        <tr>
            <td>密碼：</td>
            <td><input type="password" name="password"></td>
        </tr>

        <tr>
            <td><input type="button" value="檢查"></td>
        </tr>
    </table>
    <span id="backData"></span>
</form>

<script type="text/javascript">

    $(":button").click(function () {

        var url = "${pageContext.request.contextPath}/UserServlet?time=" + new Date().getTime();

        //要傳送過去的數據必須是JSON格式的
/*        var sendData = {
            username: $(":text").val(),
            password: $(":password").val()
        };*/

        var sendData = $("form").serialize();
        $.post(url, sendData, function (backData) {

            //得到返回的數據，填充到相對應的位置
            $("#backData").text(backData);

        });
        
    });


</script>


</body>
</html>
  • 效果：

這裡寫圖片描述

$.ajax()

對於這個方法，我們又使用二級聯動這個案例來講解吧。我們曾經使用過JavaScript來解析XML、JSON來實現二級聯動。這次我使用Jquery+Struts2+JSON來實現二級聯動。

$.ajax()這個方法接收的參數是一個JSON類型，JSON裡面有幾個參數：

  • type【請求類型】
  • url【請求路徑】
  • data【發送給伺服器的數據，也是一個JSON類型】
  • success【回調函數】

這裡遇到的問題：動態獲取選擇下拉框的值時候，調用的是val()而不是text()....


<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>省份-城市，基於jQuery的AJAX二級聯動</title>
    <script type="text/javascript" src="js/jquery-1.8.2.js"></script>
</head>
<body>

<%--############前臺頁面##############################--%>
<select name="province" id="provinceId">
    <option>請選擇省份</option>
    <option>廣東</option>
    <option>北京</option>
</select>
<select name="city" id="cityId">
    <option>請選擇城市</option>
</select>


<%--############監聽省份##############################--%>
<script type="text/javascript">
    $("#provinceId").change( function() {

        //每次調用的時候，把城市的值清空，除了第一項
        $("#cityId option:gt(0)").remove();


        //得到具體選擇的值，講道理這裡應該是test的，可是test()沒反應，要用val()
        var province = $("#provinceId option:selected").val();

        //如果不是“請選擇省份”，才觸發事件
        if ("請選擇省份" != province) {

            //它接收的是一個JSON類型的數據
            $.ajax(
                    {
                        type: "POST",
                        url: "${pageContext.request.contextPath}/findCityByProvince?time=" + new Date().getTime(),
                        data: {"province": province},
                        success: function (backData, aaa, ajax) {

                            //看下伺服器帶過來的數據是什麼樣的，然後再對JSON進行解析
                            //alert(ajax.responseText);

                            //得到伺服器返回的數據,是一個JSON格式數據
                            var array = backData.city;
                            for(var i=0;i<array.length;i++) {

                                //動態創建option節點，添加到城市下拉框中
                                var $option  = $("<option>" + array[i] + "</option>");
                                $("#cityId").append($option);
                            }
                        }
                    }
            );
        }
    });
    
</script>
  • Action

import com.opensymphony.xwork2.ActionSupport;

import java.util.ArrayList;
import java.util.List;

/**
 * Created by ozc on 2017/5/18.
 */
public class ProvinceAction  extends ActionSupport{

    //自動封裝數據
    private String province;

    public String getProvince() {
        return province;
    }
    public void setProvince(String province) {
        this.province = province;
    }
    
    //封裝城市的集合
    private List<String> city = new ArrayList<>();
    public List<String> getCity() {
        return city;
    }


    public String findCityByProvince() throws Exception {

        if ("廣東".equals(province)) {
            city.add("廣州");
            city.add("珠海");
            city.add("從化");
        } else if ("北京".equals(province)) {
            city.add("一環");
            city.add("二環");
            city.add("三環");
            city.add("四環");

        } else {
            System.out.println("沒有你選擇的地區");

        }
        return "ok";
    }

}
  • Struts.xml配置文件

<?xml version="1.0" encoding="UTF-8"?>

<!DOCTYPE struts PUBLIC
        "-//Apache Software Foundation//DTD Struts Configuration 2.3//EN"
        "http://struts.apache.org/dtds/struts-2.3.dtd">


<struts>
   <package name="province" extends="json-default" namespace="/">

        <global-results>
            <result name="ok" type="json"></result>
        </global-results>
        <action name="findCityByProvince" class="ProvinceAction" method="findCityByProvince">
        </action>

    </package>
</struts>
  • 效果：

這裡寫圖片描述

總結

  • load()方法是使用Jquery的對象來進行調用的，得到伺服器的結果自動會把結果嵌套到所在的標簽中。
  • get()方法不是使用Jquery對象來調用，因此需要手動把結果放在想要放的位置
  • post()方法是用來把參數帶過去給伺服器的，因此我們需要在Servlet上手動設置編碼。用法與get()方法一樣
  • serialize()是非常好用的一個方法，不需要我們手動去拼接參數，會自動把form表單的參數封裝成JSON格式的數據。
  • 至於$.ajax()方法，實際上就是集合了get()和post()方法。

如果文章有錯的地方歡迎指正，大家互相交流。習慣在微信看技術文章，想要獲取更多的Java資源的同學，可以關註微信公眾號:Java3y


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

-Advertisement-
Play Games
更多相關文章
  • mysql 中 innoDB 與 MySAM
    mysql 中 innoDB 與 MyISAM 的特點 --ENGINE = innodb 1.提供事務處理，支持行鎖； 2.不加鎖讀取，增加併發讀的用戶數量和空間； 3. insert/update 優秀，不支持全文索引； 4.支持事務。 --ENGINE = myisam 1.mysql預設值 ...
  • 小程式開發--數據綁定
    首先，在小程式中，是沒有DOM這個概念的，所以在數據綁定這方面，小程式和Vue是一個思想的，即數據優先。 綁定的方法其實非常之簡單，在Vue中，我們用{{ }}來做數據的單向綁定，等同於v-html,即腳本js指向html。在小程式中同樣如此，用{{ }}表示單向數據綁定，表示從js指向wxml。在 ...
  • Android 音視頻深入 十八 FFmpeg播放視頻，有聲音（附源碼下載）
    項目地址https://github.com/979451341/AudioVideoStudyCodeTwo/tree/master/FFmpegv%E6%92%AD%E6%94%BE%E8%A7%86%E9%A2%91%E6%9C%89%E5%A3%B0%E9%9F%B3%EF%BC%8C%E6 ...
  • Android NDK pthreads詳細使用
    這個pthread.h文件可以在NDK環境里創建子線程，並對線程能夠做出互斥所、等待、銷毀等控制。寫這個博客的原因是我要寫如何使用FFmpeg播放視頻，因為同時需要播放音頻和視頻所以需要開啟線程，並設置生產者和消費者的關係。好了直接上整體 1.開啟和銷毀線程 pthread_create函數能夠創建 ...
  • 查看Xcode里的描述文件
    iOS應用打包離不開描述文件，也就是mobileprovision文件。 一般我們的操作是雙擊，Xcode就會運行該文件。但是具體文件里是什麼，Xcode又是否真的載入了該文件？文件里又描述了什麼呢？以下步驟都有利於問題的回答。 一：查看描述文件的位置 所有的描述文件安裝後，都保存在Provisio ...
  • javascript簡史
    一、javascript簡介 1.1　javascript簡史 javascript誕生於1995年。當時它的主要目的是處理以前由伺服器端語言負責的一些輸入驗證操作。 1.2 javaScript實現 一個完整的JavaScript實現 = 核心（ECMAScript）+文檔對象模型（DOM）+瀏覽 ...
  • Vue購物車實例
    這是效果圖 看起來很簡單是不是 之前一直寫Jquery代碼 總是想著 DOM 操作 思維感覺沒有切換過來 想了很久,最後使用Vue的屬性進行控制,實現了多選計算屬性的功能 直接上源碼! index.html index.js style.css 這樣的功能使用Vue,代碼簡單易懂,相對於原生代碼,無 ...
  • css渲染（二） 文本
    一、文本樣式 首行縮進 text-indent 首行縮進是將段落的第一行縮進，這是常用的文本格式化效果。一般地，中文寫作時開頭空兩格。[註意]該屬性可以為負值；應用於: 塊級元素(包括block和inline-block) 字間隔 word-spacing 字間隔是指單詞間距，用來設置文字或單詞之間 ...
一周排行
    -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.數據驗證 在伺服器端進行嚴格的數據驗證，確保接收到的數據符合預期格 ...
所有分類