主頁 > 企業開發 > 前端——jQuery

前端——jQuery

2020-09-11 20:06:34 企業開發

　　jQuery是JS的工具庫，對原生JS中的DOM操作、事件處理、包括資料處理和Ajax技術等進行封裝，使用 . 鏈式寫法，提供更完善,更便捷的方法，

　　再使用jquery之前，我們需要先引入jquery檔案，才能使用jquery語法，匯入jQ檔案的方法有兩種，

  • 從 jquery.com 下載 jQuery 庫，本地匯入（比較常用）
  • 從 CDN（內容分發網路）中載入 jQuery，Staticfile CDN、百度、新浪、谷歌和微軟的服務器都存有 jQuery ，
<head>// 本地匯入<script src="js/jquery.min.js"></script>// 從 Staticfile CDN 匯入<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js">// 百度CDN<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></head>

注意：使用CDN有一個很大的優勢，那就是許多用戶在訪問其他站點時，已經從百度、又拍云、新浪、谷歌或微軟加載過 jQuery，當他們訪問您的站點時，會從快取中加載 jQuery，這樣可以減少加載時間，同時，大多數 CDN 都可以確保當用戶向其請求檔案時，會從離用戶最近的服務器上回傳回應，這樣也可以提高加載速度，

查看jquery版本：在控制臺輸入  $.fn.jquery

基本語法

工廠函式 $()

"$()"函式用于獲取元素節點，創建元素節點或將原生JS物件轉換為jquery物件，回傳 jQuery 物件，jQuery 物件實際是一個類陣列物件，包含了一系列 jQuery 操作的方法， 例 :

$() 獲取元素節點,需傳入字串的選擇器

$("h1");$("#d1");$(".c1");$("body,h1,p")

原生JS物件與jQuery物件

$("#tip")    // jq物件document.getElementById("tip")    // 輸出dom物件

原生JS物件與jQuery物件的屬性和方法不能混用，可以根據需要，互相轉換 :

　　1、原生JS轉換jQuery物件：$(原生物件)，回傳 jQuery 物件

$(document.getElementById("tip"))    // dom物件轉jq物件

　　2、jQuery物件轉換原生JS物件

    • 方法一 : 根據下標取元素，取出即為原生物件 var div = $("div")[0];
    • 方法二 : 使用jQuery的get(index)取原生物件 var div2 = $("div").get(0);
$("#tip")[0];      //jq物件轉dom物件

jQuery選擇器

　　jquery中所有選擇器都是以美元符號開頭的：$("選擇器")，基于元素的 id、類、型別、屬性、屬性值等"查找"（或選擇）HTML 元素，它基于已經存在的CSS選擇器之外，還有一些自定義的選擇器，

基礎選擇器

標簽選擇器：　　$("div")

ID 選擇器：　　   $("#d1")

類選擇器：　　    $(".c1")

群組選擇器：　　$("body,p,h1")

$("*")：選取所有元素

$(this)：選取當前HTML元素

console.log($("#tip").attr("id"));      // tip

層級選擇器

　　后代選擇器： 　　$("div .c1")
　　子代選擇器： 　　$("div>span")
　　相鄰兄弟選擇器： $("h1+p") 匹配選擇器1后滿足選擇器2后的第一個兄弟元素
　　通用兄弟選擇器： $("h1~h2") 匹配選擇器1后所有滿足選擇器2的兄弟元素

過濾選擇器

　　需要結合其他選擇器使用

:first       　　     匹配第一個元素，例:$("p:first")

:last       　　     匹配最后一個元素，例:$("p:last")

:odd　　 　　    匹配奇數下標對應的元素

:even       　　   匹配偶數下標對應的元素

:eq(index)　　   匹配指定下標的元素

:lt(index)　　     匹配下標小于index的元素

:gt(index)　　    匹配下標大于index的元素

:not(選擇器)　　否定篩選,除()中選擇器外，其他元素

:first-child　　    第一個子元素

:last-child　　    匹配最后一個子元素

:nth-child(n)　　匹配第n個子元素(n從1開始計數)

<ul>    <li>張三</li>    <li>李四</li>    <li>王五</li>    <li>劉八</li>    <li>牛九</li></ul><script>    $("li:eq(2)").css("font-size","30px");    $("li:first,li:last").css("color","red");    $("li:odd").css("background-color","red");    $("li:even").css("background-color","#ccc");</script>

屬性選擇器

　　屬性選擇器以[ ]為標志

[attrName]　　　　　　匹配包含指定屬性的元素

[attrName=value]/[attrName="value"]　　匹配屬性名=屬性值的元素

[attrName^=value]　　匹配屬性值以指定字符開頭的元素

[attrName$=value]　　匹配屬性值以指定字符結尾的元素

[attrName*=value]　　匹配屬性值包含指定字符的元素

檔案加載完畢

　　所有的jQuery函式基于檔案加載完畢后執行的，這是為了防止在檔案在完全加載之前運行jQuery代碼，即在DOM加載完成后才可以對DOM進行操作，

JS方法：window.onload

JQuery方法：

//語法一 $(document).ready(function (){  //檔案加載完畢后執行})//語法二 $().ready(function (){  //檔案加載完畢后執行})//語法三 $(function(){  //檔案加載完畢后執行})

區別： 原生onload事件不能重復書寫，會產生覆寫問題(寫了多個的話，只會執行最后一個)；jquery中對事件做了優化,可以重復書寫ready方法，依次執行

// 只執行第二個window.onload = function () {    alert("原生頁面加載完成")};window.onload = function () {    alert("原生頁面加載完成2")};// 依次執行$(function () {    alert("頁面加載完成")});$(function () {    alert("頁面加載完成2")});
View Code

jQuery事件

　　事件處理程式指的是當 HTML 中發生某些事件時所呼叫的方法，

常見的DOM事件：

滑鼠事件鍵盤事件表單事件檔案/視窗事件
clickkeypresssubmitload
dblclickkeydownchangeresize
mouseenterkeyupfocusscroll
mouseleave blurunload
hover   

在jQuery中，大多數DOM事件都有一個等效的jQuery方法，

// 方法一：on("事件名稱"，function)$("div").on("click",function(){});//新版本使用的多些// 方法二：bind("事件名稱",function)$("div").bind("click",function(){});//1.6-1.8間的版本//方法三：事件名作為方法名$("div").click(function(){    // 動作觸發后執行的代碼!!});

事件名稱省略 on 前綴

滑鼠事件

  • click()：滑鼠單擊元素時，觸發事件
  • dblclick()：當雙擊元素時，觸發事件
  • mouseenter()：當滑鼠指標穿過元素時，觸發事件
  • mouseleave()：當滑鼠指標離開元素時，觸發事件
  • mousedown()：當滑鼠指標移動到元素上方，并按下滑鼠按鍵時，觸發事件
  • mouseup ()：當在元素上松開滑鼠按鈕時，觸發事件
  • hover()：當游標停留在元素上時，觸發事件
  • focus()：當元素獲取焦點時，觸發事件
  • blur()：當元素失去焦點時，觸發事件

鍵盤事件

  • keypress()：在鍵盤上按下某鍵時發生，一直按著則會不斷觸發, 它回傳的是鍵盤代碼
  • keydown()：在鍵盤上按下一個按鍵，并產生一個字符時發生, 回傳ASCII碼
  • keyup()：用戶松開某一個按鍵時觸發, 與keydown相對, 回傳鍵盤代碼

案例：keypress事件獲取鍵入字符

$(window).keypress(function(event){    //event.which是獲取ASCII碼，前面的函式是將ASCII碼轉換成字符，空格鍵和Enter鍵輸出均為空白，    console.log(String.fromCharCode(event.which));    //從event物件中key屬性獲取字符，但是Enter鍵的key值為"Enter"，空白鍵還是空白" "，    console.log(event.key);});

　　this表示事件的觸發物件，在jquery中可以使用，注意轉換型別，this為原生物件只能使用原生的屬性和方法，可以使用$(this)轉換為jquery物件，使用jquery方法，

jQuery效果

隱藏和顯示

　　通過 jQuery，您可以使用 hide() 和 show() 方法來隱藏和顯示 HTML 元素：

$("#hide").click(function(){  $("p").hide();}); $("#show").click(function(){  $("p").show();});

語法：

// 隱藏$(selector).hide(speed,callback);// 顯示$(selector).show(speed,callback);

引數：

  • speed：規定隱藏/顯示的速度，可以取 "slow"、"fast" 或毫秒(1000毫秒=1秒)，可選引數
  • callback：隱藏或顯示完成后所執行的函式名稱，可選

toggle()方法

顯示被隱藏的元素，并隱藏已顯示的元素，來切換 hide() 和 show() 方法，

$(selector).toggle(speed,callback);

引數同hide()和show()

<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){  $("button").click(function(){    $("p").toggle();  });});</script></head><body><button>隱藏/顯示</button><p>這是一個文本段落，</p><p>這是另外一個文本段落，</p></body></html>
實體

淡入淡出

jQuery 擁有下面四種淡入淡出 fade 方法：

  • fadeIn()：淡入
  • fadeOut()：淡出
  • fadeToggle()：淡入\淡出 切換
  • fadeTo()：設定不透明度（值介于0~1之間）
// 淡入$(selector).fadeIn(speed,callback);// 淡出$(selector).fadeOut(speed,callback);// 可在淡入淡出之間進行切換$(selector).fadeToggle(speed,callback);// 允許漸變為給定的不透明度（ opacity 值介于0與1之間）$(selector).fadeTo(speed,opacity,callback);

引數：

  • speed：效果時長，它可以取以下值："slow"、"fast" 或毫秒，可選引數
  • callback：完成淡入效果后執行的函式
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){  $("button").click(function(){    $("#div1").fadeTo("slow",0.15);    $("#div2").fadeTo("slow",0.4);    $("#div3").fadeTo("slow",0.7);  });});</script></head><body><p>演示 fadeTo() 使用不同引數</p><button>點我讓顏色變淡</button><br><br><div id="div1" style="width:80px;height:80px;background-color:red;"></div><br><div id="div2" style="width:80px;height:80px;background-color:green;"></div><br><div id="div3" style="width:80px;height:80px;background-color:blue;"></div></body></html>
實體

滑動

jQuery 擁有以下滑動方法：

  • slideDown()：向下滑動元素
  • slideUp()：向上滑動元素
  • slideToggle()：向上滑動和向下滑動 之間切換
// 向上滑動元素$(selector).slideDown(speed,callback);// 向下滑動元素$(selector).slideUp(speed,callback);// 向上滑動和向下滑動 之間切換$(selector).slideToggle(speed,callback);

引數：

  • speed：效果時長，它可以取以下值："slow"、"fast" 或毫秒，可選引數
  • callback：完成淡入效果后執行的函式
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script> $(document).ready(function(){  $("#flip").click(function(){    $("#panel").slideToggle("slow");  });});</script> <style type="text/css"> #panel,#flip{    padding:5px;    text-align:center;    background-color:#e5eecc;    border:solid 1px #c3c3c3;}#panel{    padding:50px;    display:none;}</style></head><body> <div id="flip">點我，顯示或隱藏面板，</div><div id="panel">Hello world!</div></body></html>
實體

影片

jQuery animate()方法用于創建自定義影片，

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

引數：

  • params：定義形成影片的CSS屬性
  • speed：效果時長，它可以取以下值："slow"、"fast" 或毫秒，可選引數
  • callback：影片完成后所執行的函式名稱，可選引數

注意：

1、默認情況下，所有 HTML 元素都有一個靜態位置，且無法移動，如需對位置進行操作，要記得首先把元素的 CSS position 屬性設定為 relative、fixed 或 absolute！

2、animate()幾乎可以操作所有的屬性，但是要使用Camel標記法書寫，比如：使用 marginRight 而不是 margin-right

jQuery animate() - 操作多個屬性

$("button").click(function(){  $("div").animate({    left:'250px',    opacity:'0.5',    height:'150px',    width:'150px'  });});

jQuery animate() - 使用相對值

$("button").click(function(){  $("div").animate({    left:'250px',    height:'+=150px',    width:'+=150px'  });});

jQuery animate() - 使用預定義的值

$("button").click(function(){  $("div").animate({    height:'toggle'　　// "show"、"hide" 或 "toggle"：  });});

jQuery animate() - 使用佇列功能

　　但我們寫入多個animate()影片時，jQuery會逐一運行這些animate，

$("button").click(function(){  var div=$("div");  div.animate({height:'300px',opacity:'0.4'},"slow");  div.animate({width:'300px',opacity:'0.8'},"slow");  div.animate({height:'100px',opacity:'0.4'},"slow");  div.animate({width:'100px',opacity:'0.8'},"slow");});
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script> $(document).ready(function(){  $("button").click(function(){    var div=$("div");      div.animate({left:'100px'},"slow");    div.animate({fontSize:'3em'},"slow");  });});</script> </head> <body><button>開始影片</button><p>默認情況下，所有的 HTML 元素有一個靜態的位置，且是不可移動的， 如果需要改變為，我們需要將元素的 position 屬性設定為 relative, fixed, 或 absolute!</p><div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div></body></html>
案例

停止影片

jQuery stop() 方法用于停止影片或效果，在它們完成之前，

stop() 方法適用于所有 jQuery 效果函式，包括滑動、淡入淡出和自定義影片，

$(selector).stop(stopAll,goToEnd);

引數：

  • stopAll：是否清除影片佇列，默認false，可選引數
  • goToEnd：是否立即完成當前影片，默認false，可選引數
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script> $(document).ready(function(){  $("#flip").click(function(){    $("#panel").slideDown(5000);  });  $("#stop").click(function(){    $("#panel").stop();  });});</script> <style type="text/css"> #panel,#flip{    padding:5px;    text-align:center;    background-color:#e5eecc;    border:solid 1px #c3c3c3;}#panel{    padding:50px;    display:none;}</style></head><body> <button id="stop">停止滑動</button><div id="flip">點我向下滑動面板</div><div id="panel">Hello world!</div></body></html>
案例

jQuery 鏈（Chaining）

鏈接（chaining）技術，允許我們在相同的元素上運行多條 jQuery 命令，一條接著另一條，

 例如： css()、slideUp() 和 slideDown() 鏈接在一起，"p1" 元素首先會變為紅色，然后向上滑動，再然后向下滑動：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

jQuery HTML

jQuery能夠操作HTML元素和屬性，

讀取\設定 內容

　　括號中為空時為讀取，括號中有值時為設定，

  • .html() 　　設定或讀取標簽內容（包括HTML標記），等價于原生innerHTML
  • .text() 　　 設定或讀取元素的文本內容，等價于innerText，不能識別標簽
  • .val()  　     設定或讀取表單元素的值，等價于原生value屬性
// 讀取$("#btn1").click(function(){  alert("Text: " + $("#test").text());});$("#btn2").click(function(){  alert("HTML: " + $("#test").html());});
<!DOCTYPE html><html><head><meta charset="utf-8"><script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script><script>$(document).ready(function(){  $("#btn1").click(function(){    $("#test1").text("Hello world!");  });  $("#btn2").click(function(){    $("#test2").html("<b>Hello world!</b>");  });  $("#btn3").click(function(){    $("#test3").val("RUNOOB");  });});</script></head><body><p id="test1">這是一個段落，</p><p id="test2">這是另外一個段落，</p><p>輸入框: <input type="text" id="test3" value="https://www.cnblogs.com/LXP-Never/p/菜鳥教程"></p><button id="btn1">設定文本</button><button id="btn2">設定 HTML</button><button id="btn3">設定值</button></body></html>
設定HTML

讀取/設定 屬性

attr("attrName","value") ：設定或讀取標簽屬性

prop("attrName","value") ：設定或讀取標簽屬性，注意：在設定或讀取元素屬性時，attr()和prop()基本沒有區別；但是在讀取或設定表單元素(按鈕)的選中狀態時，必須用prop()方法，attr()不會監聽按鈕選中狀態的改變，只看標簽屬性checked是否書寫

removeAttr("attrName")：移除指定屬性

$("button").click(function(){    $("#runoob").attr({        "href" : "http://www.runoob.com/jquery",        "title" : "jQuery 教程"    });});

 attr 和 prop 的區別

<input type="checkbox"       name="marry1"       checked       id="marry1">婚否//獲取jq物件console.log($("#marry1").attr("checked"));   // checkedconsole.log($("#marry1").prop("checked"));   // true<input type="checkbox"       name="marry2"       id="marry2">婚否//獲取jq物件console.log($("#marry2").attr("checked"));   // undefinedconsole.log($("#marry2").prop("checked"));   // false 

添加元素

jQuery添加元素有四種方法：

  • append()：在被選元素的結尾插入內容
  • prepend()：在被選元素的開頭插入內容
  • after()：在被選元素之后插入內容
  • before()：在被選元素之前插入內容

1）作為子元素添加

$("p").append("追加文本");$("p").prepend("在開頭追加文本");

2）作為兄弟元素添加

$("img").after("在后面添加文本");$("img").before("在前面添加文本");

3）移除元素

移除元素有兩種方法：

  • remove()：洗掉被選元素（及其子元素）
  • empty()：從被選元素中洗掉子元素
// remove() 方法洗掉被選元素及其子元素，$("#div1").remove();// empty() 方法洗掉被選元素的子元素$("#div1").empty();

  remove() 方法也可接受一個引數，允許您對被刪元素進行過濾，

// 洗掉  的所有 <p> 元素$("p").remove(".italic");

獲取并設定CSS類

jQuery擁有以下操作CSS的方法：

  • addClass()：向被選元素添加一個或多個類
  • removeClass()：從被選元素洗掉一個或多個類
  • toggleClass()：對被選元素進行添加/洗掉類的切換操作
  • css()：設定或回傳被選元素的一個或多個樣式屬性，
$("button").click(function(){     // 添加blue類名    $("h1,h2,p").addClass("blue");        // 洗掉blue類名    $("h1,h2,p").removeClass("blue");    // 如果有blue類名，則洗掉，如果沒有則添加    $("h1,h2,p").toggleClass("blue");});

讀取和設定CSS屬性

// 讀取CSS屬性$("p").css("background-color");// 設定CSS屬性$("p").css({"background-color":"yellow",            "font-size":"200%"});

jQuery 尺寸

  • width()：設定或回傳元素的寬度（不包括內邊距、邊框或外邊框）
  • height()：設定或回傳元素的高度（不包括內邊距、邊框或外邊框）
  • innerWidth()：回傳元素的寬度（包括內邊距）
  • innerHeight()：回傳元素的高度（包括內邊距）
  • outerWidth()：回傳元素的寬度（包括內邊距和邊框）
  • outerHeight()：回傳元素的高度（包括內邊距和邊框）

$("button").click(function(){  var txt="";  txt+="div 的寬度是: " + $("#div1").width() + "</br>";  txt+="div 的高度是: " + $("#div1").height();  $("#div1").html(txt);});

jQuery 遍歷

jQuery意思就是“移動”，用于根據相對于其他元素的關系來“查找”HTML元素，以某項選擇開始，并沿著這個選擇移動，直到抵達您期望的元素為止，

遍歷祖先元素

  • .parent() ：回傳父元素
  • .parents('selector')：回傳滿足選擇器的所有祖先元素
  • .parentsUntil("selector")：回傳選擇器選擇元素和 . 之前物件元素 之間的所有祖先元素
$(document).ready(function(){  $("span").parent();});

遍歷后代

  • .children() / children("selector")：回傳所有直接子元素 / 回傳滿足選擇器的直接子元素
  • .find("selector")：回傳所有的后代元素(包含直接與間接)
// 回傳屬于 <div> 后代的所有 <span> 元素$(document).ready(function(){  $("div").find("span");});

遍歷同胞

  • .siblings() / siblings("selector")：回傳所有的兄弟元素 / 滿足選擇器的所有兄弟元素
  • .next() / next("selector")：回傳下一個兄弟元素 / 回傳下一個兄弟元素,必須滿足選擇器
  • .nextAll()：回傳被選元素的所有跟隨的同胞元素，
  • .nextUntil("selector")：回傳介于兩個給定引數之間的所有跟隨的同胞元素，
  • .prev() / prev("selector")：回傳前一個兄弟元素 / 回傳前一個兄弟元素,要求滿足選擇器
// 回傳 <h2> 的所有同胞元素$(document).ready(function(){  $("h2").siblings();});

過濾

三個最基本的過濾方法是：first(), last() 和 eq()，

  • first()：回傳被選元素的首個元素
  • last()：回傳被選元素的最后一個元素
  • eq()：回傳被選元素中帶有指定索引號的元素，索引從0開始
  • filter("selector")：回傳選擇器選擇的元素
  • not("selector")：回傳除了選擇器選擇以外的元素
$(document).ready(function(){  $("p").eq(1);});

jQuery - AJAX 簡介

AJAX 是與服務器交換資料的技術，它在不多載全部頁面的情況下，實作了對部分網頁的更新，

load()方法

load()方法從服務器加載資料，并把回傳的資料放在被選元素中，

$(selector).load(URL,data,callback);

引數：

  • URL：希望加載的URL
  • data：規定與請求一同發送的查詢字串鍵/值對集和，可選引數
  • callback：完成后所執行的函式，可選引數
// 把檔案 "demo_test.txt" 的內容加載到指定的 <div> 元素中$("#div1").load("demo_test.txt");// 把 "demo_test.txt" 檔案中 id="p1" 的元素的內容，加載到指定的 <div> 元素中$("#div1").load("demo_test.txt #p1");

AJAX get() 和 post() 方法

get() 和 post() 方法用于通過 HTTP GET 或 POST 請求從服務器請求資料，

  • GET：從指定的資源請求資料
  • POST：向指定的資源提交要處理的資料

jQuery $.get() 方法

$.get() 方法通過 HTTP GET 請求從服務器上請求資料，

$.get(URL,callback);

引數：

  • URL：希望請求的URL
  • callback：請求成功后所執行的函式名，可選引數
$("button").click(function(){  $.get("demo_test.php",function(data,status){    alert("資料: " + data + "\n狀態: " + status);  });});

注：第一個回呼引數存有被請求頁面的內容，第二個回呼引數存有請求的狀態，

jQuery $.post() 方法

$.post() 方法通過 HTTP POST 請求向服務器提交資料，

$.post(URL,data,callback);

引數：

  • URL：希望請求的 URL
  • data：規定連同請求發送的資料
  • callback：請求成功后所執行的函式名
// 使用 $.post() 連同請求一起發送資料$("button").click(function(){    $.post("/try/ajax/demo_test_post.php",    {        name:"菜鳥教程",        url:"http://www.runoob.com"    },    function(data,status){        alert("資料: \n" + data + "\n狀態: " + status);    });});

注：第一個回呼引數存有被請求頁面的內容，而第二個引數存有請求的狀態，

獨立檔案中使用 jQuery 函式

如果您的網站包含許多頁面，并且您希望您的 jQuery 函式易于維護，那么請把您的 jQuery 函式放到獨立的 .js 檔案中，

當我們在教程中演示 jQuery 時，會將函式直接添加到 <head> 部分中，不過，把它們放到一個單獨的檔案中會更好，就像這樣（通過 src 屬性來參考檔案）：

<head><script src="http://cdn.static.runoob.com/libs/jquery/1.10.2/jquery.min.js"></script><script src="my_jquery_functions.js"></script></head>

有時候我們獨立的js檔案或css檔案寫完后都會用《在線格式化》，這樣方便加載，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/7121.html

標籤：jQuery

上一篇：掛號平臺首頁開發（靜態頁面部分）

下一篇：掛號平臺首頁開發（UI組件部分）

標籤雲
其他(157675) Python(38076) JavaScript(25376) Java(17977) C(15215) 區塊鏈(8255) C＃(7972) AI(7469) 爪哇(7425) MySQL(7132) html(6777) 基礎類(6313) sql(6102) 熊猫(6058) PHP(5869) 数组(5741) R(5409) Linux(5327) 反应(5209) 腳本語言(PerlPython)(5129) 非技術區(4971) Android(4554) 数据框(4311) css(4259) 节点.js(4032) C語言(3288) json(3245) 列表(3129) 扑(3119) C++語言(3117) 安卓(2998) 打字稿(2995) VBA(2789) Java相關(2746) 疑難問題(2699) 细绳(2522) 單片機工控(2479) iOS(2429) ASP.NET(2402) MongoDB(2323) 麻木的(2285) 正则表达式(2254) 字典(2211) 循环(2198) 迅速(2185) 擅长(2169) 镖(2155) 功能(1967) .NET技术(1958) Web開發(1951) python-3.x(1918) HtmlCss(1915) 弹簧靴(1913) C++(1909) xml(1889) PostgreSQL(1872) .NETCore(1853) 谷歌表格(1846) Unity3D(1843) for循环(1842)

熱門瀏覽
  • IEEE1588PTP在數字化變電站時鐘同步方面的應用

    IEEE1588ptp在數字化變電站時鐘同步方面的應用 京準電子科技官微——ahjzsz 一、電力系統時間同步基本概況 隨著對IEC 61850標準研究的不斷深入，國內外學者提出基于IEC61850通信標準體系建設數字化變電站的發展思路。數字化變電站與常規變電站的顯著區別在于程序層傳統的電流/電壓互 ......

    uj5u.com 2020-09-10 03:51:52 more
  • HTTP request smuggling CL.TE

    CL.TE 簡介 前端通過Content-Length處理請求，通過反向代理或者負載均衡將請求轉發到后端，后端Transfer-Encoding優先級較高，以TE處理請求造成安全問題。 檢測 發送如下資料包 POST / HTTP/1.1 Host: ac391f7e1e9af821806e890 ......

    uj5u.com 2020-09-10 03:52:11 more
  • 網路滲透資料大全單——漏洞庫篇

    網路滲透資料大全單——漏洞庫篇漏洞庫 NVD ——美國國家漏洞庫 →http://nvd.nist.gov/。 CERT ——美國國家應急回應中心 →https://www.us-cert.gov/ OSVDB ——開源漏洞庫 →http://osvdb.org Bugtraq ——賽門鐵克 →ht ......

    uj5u.com 2020-09-10 03:52:15 more
  • 京準講述NTP時鐘服務器應用及原理

    京準講述NTP時鐘服務器應用及原理京準講述NTP時鐘服務器應用及原理 安徽京準電子科技官微——ahjzsz 北斗授時原理 授時是指接識訓通過某種方式獲得本地時間與北斗標準時間的鐘差，然后調整本地時鐘使時差控制在一定的精度范圍內。 衛星導航系統通常由三部分組成：導航授時衛星、地面檢測校正維護系統和用戶 ......

    uj5u.com 2020-09-10 03:52:25 more
  • 利用北斗衛星系統設計NTP網路時間服務器

    利用北斗衛星系統設計NTP網路時間服務器 利用北斗衛星系統設計NTP網路時間服務器 安徽京準電子科技官微——ahjzsz 概述 NTP網路時間服務器是一款支持NTP和SNTP網路時間同步協議，高精度、大容量、高品質的高科技時鐘產品。 NTP網路時間服務器設備采用冗余架構設計，高精度時鐘直接來源于北斗 ......

    uj5u.com 2020-09-10 03:52:35 more
  • 詳細解讀電力系統各種對時方式

    詳細解讀電力系統各種對時方式 詳細解讀電力系統各種對時方式 安徽京準電子科技官微——ahjzsz，更多資料請添加VX 衛星同步時鐘是我京準公司開發研制的應用衛星授時時技術的標準時間顯示和發送的裝置，該裝置以M國全球定位系統（GLOBAL POSITIONING SYSTEM,縮寫為GPS）或者我國北 ......

    uj5u.com 2020-09-10 03:52:45 more
  • 如何保證外包團隊接入企業內網安全

    不管企業規模的大小，只要企業想省錢，那么企業的某些服務就一定會采用外包的形式，然而看似美好又經濟的策略，其實也有不好的一面。下面我通過安全的角度來聊聊使用外包團的安全隱患問題。 先看看什么服務會使用外包的，最常見的就是話務/客服這種需要大量重復性、無技術性的服務，或者是一些銷售外包、特殊的職能外包等 ......

    uj5u.com 2020-09-10 03:52:57 more
  • PHP漏洞之【整型數字型SQL注入】

    0x01 什么是SQL注入 SQL是一種注入攻擊，通過前端帶入后端資料庫進行惡意的SQL陳述句查詢。 0x02 SQL整型注入原理 SQL注入一般發生在動態網站URL地址里，當然也會發生在其它地發，如登錄框等等也會存在注入，只要是和資料庫打交道的地方都有可能存在。 如這里http://192.168. ......

    uj5u.com 2020-09-10 03:55:40 more
  • [GXYCTF2019]禁止套娃

    git泄露獲取原始碼 使用GET傳參，引數為exp 經過三層過濾執行 第一層過濾偽協議，第二層過濾帶引數的函式，第三層過濾一些函式 preg_replace('/[a-z,_]+\((?R)?\)/', NULL, $_GET['exp'] (?R)參考當前正則運算式，相當于匹配函式里的引數 因此傳遞 ......

    uj5u.com 2020-09-10 03:56:07 more
  • 等保2.0實施流程

    流程 結論 ......

    uj5u.com 2020-09-10 03:56:16 more
最新发布
  • 使用Django Rest framework搭建Blog

    在前面的Blog例子中我們使用的是GraphQL, 雖然GraphQL的使用處于上升趨勢,但是Rest API還是使用的更廣泛一些. 所以還是決定回到傳統的rest api framework上來, Django rest framework的官網上給了一個很好用的QuickStart, 我參考Qu ......

    uj5u.com 2023-04-20 08:17:54 more
  • 記錄-new Date() 我忍你很久了！

    這里給大家分享我在網上總結出來的一些知識，希望對大家有所幫助 大家平時在開發的時候有沒被new Date()折磨過？就是它的諸多怪異的設定讓你每每用的時候，都可能不小心踩坑。造成程式意外出錯，卻一下子找不到問題出處，那叫一個煩透了…… 下面，我就列舉它的“四宗罪”及應用思考 可惡的四宗罪 1. Sa ......

    uj5u.com 2023-04-20 08:17:47 more
  • 使用Vue.js實作文字跑馬燈效果

    實作文字跑馬燈效果，首先用到 substring()截取 和 setInterval計時器 clearInterval()清除計時器 效果如下： 實作代碼如下： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta ......

    uj5u.com 2023-04-20 08:12:31 more
  • JavaScript 運算子

    JavaScript 運算子/運算子 在 JavaScript 中，有一些運算子可以使代碼更簡潔、易讀和高效。以下是一些常見的運算子： 1、可選鏈運算子（optional chaining operator） ?.是可選鏈運算子（optional chaining operator）。?. 可選鏈操 ......

    uj5u.com 2023-04-20 08:02:25 more
  • CSS—相對單位rem

    一、概述 rem是一個相對長度單位，它的單位長度取決于根標簽html的字體尺寸。rem即root em的意思，中文翻譯為根em。瀏覽器的文本尺寸一般默認為16px，即默認情況下： 1rem = 16px rem布局原理：根據CSS媒體查詢功能，更改根標簽的字體尺寸，實作rem單位隨螢屏尺寸的變化，如 ......

    uj5u.com 2023-04-20 08:02:21 more
  • 我的第一個NPM包:panghu-planebattle-esm(胖虎飛機大戰)使用說明

    好家伙,我的包終于開發完啦 歡迎使用胖虎的飛機大戰包!! 為你的主頁添加色彩 這是一個有趣的網頁小游戲包,使用canvas和js開發 使用ES6模塊化開發 效果圖如下: (覺得圖片太sb的可以自己改) 代碼已開源!! Git: https://gitee.com/tang-and-han-dynas ......

    uj5u.com 2023-04-20 08:01:50 more
  • 如何在 vue3 中使用 jsx/tsx?

    我們都知道,通常情況下我們使用 vue 大多都是用的 SFC(Signle File Component)單檔案組件模式,即一個組件就是一個檔案,但其實 Vue 也是支持使用 JSX 來撰寫組件的。這里不討論 SFC 和 JSX 的好壞,這個仁者見仁智者見智。本篇文章旨在帶領大家快速了解和使用 Vu ......

    uj5u.com 2023-04-20 08:01:37 more
  • 【Vue2.x原始碼系列06】計算屬性computed原理

    本章目標：計算屬性是如何實作的？計算屬性快取原理以及洋蔥模型的應用？在初始化Vue實體時，我們會給每個計算屬性都創建一個對應watcher，我們稱之為計算屬性watcher ......

    uj5u.com 2023-04-20 08:01:31 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:01:10 more
  • http1.1與http2.0

    一、http是什么 通俗來講，http就是計算機通過網路進行通信的規則，是一個基于請求與回應，無狀態的，應用層協議。常用于TCP/IP協議傳輸資料。目前任何終端之間任何一種通信方式都必須按Http協議進行，否則無法連接。tcp(三次握手，四次揮手)。 請求與回應：客戶端請求、服務端回應資料。 無狀態 ......

    uj5u.com 2023-04-20 08:00:32 more

Copyright © 2010-2020 有解無憂