JavaScript 基礎知識 - BOM篇

image

前言

本篇文章是JavaScript基礎知識的BOM篇,如果前面的《JavaScript基礎知識-DOM篇》看完了,現在就可以學習BOM了。

注意: 所有的案例都在這里鏈接: 提取密碼密碼: yvxo,文章中的每個案例后面都有對應的序號。

1. BOM 基本概念

BOM(Browser Object Model):瀏覽器對象模型,提供了一套操作瀏覽器的工具。

image

BOM中包含的內容很多,但是有很多東西是用不到的。在BOM中我們需要掌握定時器

2. window 對象

  • window對象是一個全局對象,也可以說是JavaScript中的頂級對象
  • documentalert()console.log()這些都是window的屬性,其實BOM中基本所有的屬性和方法都是屬性window的。
  • 所有定義在全局作用域中的變量、函數都會變成window對象的屬性和方法
  • window對象下的屬性和方法調用的時候可以省略window

示例代碼: [01-window對象.html]

普通函數調用的時候:

var name = "項羽";
var age = "28";function Teacher() {this.name = "虞姬";this.age = 22;console.log(this);
}
// 沒有 new 的時候就相當于普通函數調用
var obj = Teacher(); // 打印的this 指的是全局對象window
console.log(name);   // 虞姬
console.log(age);    // 22
/* 
為什么會是 虞姬 和 22 ? 不是定義了一個全局變量name = "項羽"嗎?
因為 Teacher作為一個普通函數調用,它里面的this指的就是全局對象
js 代碼一步步往下執行,一開始是定義了一個name="項羽"的全局變量,
但是下面的this有將"虞姬"指向了全局對象,所以最后打印的是虞姬 22
*/

構造函數的時候:

var name = "項羽";
var age = "28";function Teacher() {this.name = "虞姬";this.age = 22;console.log(this);
}
// 沒有 new 的時候就相當于普通函數調用
var obj = new Teacher(); // 打印的this 指的是構造函數對象 Teacher
console.log(name); // 項羽
console.log(age); // 28
/*
Teacher作為構造函數的時候,它內部的this指向的是 對象Teacher
此時的全局變量name="項羽" 將不會再受this的影響,所以,打印的是 項羽 28
*/

2.1 window.onload

window.onload事件會在窗體加載完成后執行,通常我們稱之為入口函數
window.onload = function(){//里面的代碼會在窗體加載完成后執行。//窗體加載完成包括文檔樹的加載、還有圖片、文件的加載完成。
}

注意:

  • 如果有圖片加載,那么代碼一定要寫到window.onload里面,否則會出現圖片沒有加載完成,獲取到的寬度和高度不對的情況。
  • 瀏覽器會對頁面的加載做優化,在加載圖片的時候,圖片的引入會延遲。
  • 一個頁面中不能有兩個onload函數,寫在下面的會覆蓋掉上面的。

示例代碼: [02-window.onload對象(一)]

為什么下面的代碼會報錯呢?

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>window.onload</title><!-- script寫在上面直接報錯 --><!--  因為代碼是一步步向下執行的,在head里的script獲取btn或者box的時候,是獲取不到的,因為下面的頁面結構還沒加載到:--><script>var btn = document.getElementById('btn');var box = document.getElementById('box');btn.onclick = function() {box.style.width = "500px";box.style.height = "500px";}</script>
</head><body><button id="btn">按鈕</button><div id="box" style="width:200px;height:200px;background:pink;"></div>
</body></html>

此時就可以用window.onload入口函數:

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>window.onload</title><script>// 這里定義了一個入口函數,就是說等頁面所有文檔樹加載完才會執行這里面的代碼:window.onload = function() {var btn = document.getElementById('btn');var box = document.getElementById('box');btn.onclick = function() {box.style.width = "500px";box.style.height = "500px";}}</script>
</head><body><button id="btn">按鈕</button><div id="box" style="width:200px;height:200px;background:pink;"></div>
</body></html>

示例代碼:圖片加載 [03-window.onload對象(二)]

為什么獲取的寬度和高度都為0呢,js代碼不是寫在最后面了嗎?

<body><!-- html 部分--><img id="img" src="../image/levi.jpg" alt=""><!-- js 部分 --><script>var img = document.getElementById('img');console.log(img.width);     // 0console.log(img.height);    // 0</script>
</body>

效果圖:

image

這是因為,瀏覽器會對頁面的加載做優化,在加載圖片的時候,圖片的引入會延遲。這時候需要用window.onload

<head><script>// 當文檔加載完成的時候執行,如果有圖片,等到圖片也加載完成才會執行。window.onload = function() {var img = document.getElementById('img');console.log(img.width);console.log(img.height);}</script>
</head><body><img id="img" src="../image/levi.jpg" alt="">
</body>

效果圖:

image

2.2 window.open

window.open() 打開一個窗口

語法window.open(url, [name], [features]);

參數1:需要載入的url地址
參數2:新窗口的名稱_self:在當前窗口打開_blank:在新的窗口打開
參數3:窗口的屬性,指定窗口的大小
返回值:會返回剛剛創建的那個窗口,用于關閉

示例代碼: [04-window.open.html]

<!-- html 部分 -->
<button id="btn">點擊在新窗口跳轉到百度</button>
<button id="btn2">點擊在本窗口跳轉到百度</button><!-- js 部分 -->
<script>var btn = document.getElementById('btn');var btn2 = document.getElementById('btn2');btn.onclick = function() {// 在新窗口打開,新窗口的大小為300 * 300var newWin = window.open("http://www.baidu.com", "_blank", "width=300,height=300");}btn2.onclick = function() {// 在當前窗口打開,新窗口的大小根據當前窗口改變的,設置的無效var newWin = window.open("http://www.baidu.com", "_self");}
</script>

效果圖:

image

2.3 window.close

window.close() 關閉一個窗口 在火狐瀏覽器下會失效解決辦法
newWin.close();//newWin是剛剛創建的那個窗口
window.close(); //把當前窗口給關閉了

示例代碼: [05-window.close.html]

<!-- html 部分 -->
<button id="btn">點擊在新窗口跳轉到百度</button>
<button id="btn2">點擊在本窗口跳轉到百度</button>
<button id="btn3">點擊關閉打開的新窗口</button>
<button id="btn4">點擊關閉本窗口</button><!-- js 部分 -->
<script>var btn = document.getElementById('btn');var btn2 = document.getElementById('btn2');btn.onclick = function() {// 在新窗口打開,新窗口的大小為300 * 300var newWin = window.open("http://www.baidu.com", "_blank", "width=300,height=300");btn3.onclick = function() {// 關閉打開的新窗口newWin.close();}}btn2.onclick = function() {// 在當前窗口打開,新窗口的大小根據當前窗口改變的,設置的無效var newWin2 = window.open("http://www.baidu.com", "_self");}btn4.onclick = function() {// 關閉本窗口window.close();}
</script>

效果圖:

image

3. 定時器

定時器里面不能用this,因為在定時器里面,this,指向的是全局對象window

3.1 延時定時器

延時定時器可以讓代碼延遲一段時間之后才執行。定時器不是我們調用,我們只需要把函數的地址傳過去,時間到了,window會自己調用。

1、設置延時定時器

語法setTimeOut(callback, time);

參數1:回調函數,時間到了就會執行。
參數2:延時的時間 單位:毫秒
返 回:定時器的id,用于清除

示例代碼: [06-延時定時器.html]

var timer = setTimeOut(function(){//1秒后將執行的代碼。console.log("哈哈");
}, 1000);

2.清除延時定時器

語法clearTimeOut(timerId);

// 參數:定時器id
clearTimeOut(timerId);

示例代碼:

<!-- html 部分 -->
<button id="btn1">開啟</button>
<button id="btn2">關閉</button><!-- js 部分 -->
<script>var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn2");// 定義一個全局變量var timeId; // 開啟定時器btn1.onclick = function() {//設置了一個定時器,會返回一個定時器idtimeId = setTimeout(function() {// 兩秒后在頁面顯示 Boom!document.write("<h1> Boom! </h1>");}, 2000);}//  清除定時器btn2.onclick = function() {//清除定時器, 需要定時器idclearTimeout(timeId);}
</script>

效果圖:兩秒后執行代碼,兩秒鐘之內清除定時器,就不會執行

image

3.2 間歇定時器

間歇定時器讓定時器每隔一段時間就會執行一次,并且會一直執行,到清除定時器為止。

1、設置間歇定時器

語法:var intervalID = setInterval(func, delay);

參數1:重復執行的函數
參數2:每次延遲的毫秒數
返 回:定時器的id,用于清除

示例代碼:

var timer = setInterval(function(){//重復執行的代碼。
}, 1000);

2、清除間歇定時器

語法:clearInterval(intervalID);

參數:定時器id

示例代碼: [07-間歇定時器.html]

<!-- html 部分 -->
<button id="btn1">開啟</button>
<button id="btn2">關閉</button><!-- js 部分 -->
<script>var btn1 = document.getElementById("btn1");var btn2 = document.getElementById("btn2");// 定義一個全局變量 存放定時器var timer;// 開啟定時器btn1.onclick = function() {//設置了一個定時器,會返回一個定時器 idtimer = setInterval(function() {// 每隔1秒 就會創建一個 h2 標簽var tag = document.createElement("h2");tag.innerHTML = "我是間歇定時器";document.body.appendChild(tag);}, 1000);};//  清除定時器btn2.onclick = function() {//清除定時器, 需要定時器idclearInterval(timer);document.body.innerHTML = "<h1>間歇定時器已清除</h1>";};
</script>

效果圖:

image

2.3 定時器綜合練習

1、獲取短信驗證碼案例 [08-定時器綜合練習-獲取短信驗證碼.html]

<!-- html 部分-->
<input type="button" value="點擊獲取短信驗證碼" id="btn"><!-- js 部分 -->
<script>var btn = document.getElementById('btn');var timer = null;btn.onclick = function() {// 倒計時的秒數var num = 5;// 當按鈕點擊的時候 禁用buttonbtn.disabled = true;timer = setInterval(function() {// 每隔一秒修改num的值num--;// 修改btn的value值  這里不可以用this 因為定時器里的this指的是window對象btn.value = num + "秒后可再次發送";// 當num = 0 秒的時候,清除定時器if (num == 0) {clearInterval(timer);btn.disabled = false;btn.value = "點擊獲取短信驗證碼";}}, 1000);}
</script>

效果圖:

image

2、倒計時案例 [09-定時器綜合練習-倒計時案例.html]

<!-- 樣式部分 -->
<style>.time {width: 160px;height: 40px;margin: 100px auto;line-height: 40px;font-size: 24px;font-weight: 700;}#h,#m,#s {float: left;display: block;width: 40px;height: 40px;text-align: center;background-color: #F9F9F9;box-shadow: 1px 1px 2px #616161;color: #453246;border-radius: 5px;}.split {width: 20px;float: left;text-align: center;}
</style><!-- html 部分 -->
<div class="time"><span id="h">00</span><span class="split">:</span><span id="m">00</span><span class="split">:</span><span id="s">00</span>
</div><!-- js 部分 -->
<script>var h = document.getElementById('h');var m = document.getElementById('m');var s = document.getElementById('s');setTime();var timer = setInterval(setTime, 1000);function setTime() {// 獲取當前時間var newTime = new Date(); // 此時測試的時間是 2017-12-11 15:24:00(根據本地時間一直在變)// 定義一個未來的時間var futureTime = new Date("2017-12-11 16:30:31");// 獲取時間差 單位是毫秒 首先我們需要轉成秒 而且時間戳獲取的時候 有很多小數 需要取整一下var time = parseInt((futureTime - newTime) / 1000);// time現在已經是秒了  我們需要將它轉換成小時// 1h = 3600svar hours = parseInt(time / 3600);// 將獲取的小時添加到頁面中 // 注意因為時鐘是兩位數,這里的小時可能只是一個個位數,所以需要拼接一個 "0"// 因為 分鐘、秒都需要拼0,所以我們可以封裝一個函數h.innerHTML = addZero(hours);// 獲取分鐘// 先將 time 轉換成分鐘 再去取余60var minutes = parseInt(time / 60) % 60;// 將獲取的分鐘添加到頁面中 m.innerHTML = addZero(minutes);// 獲取秒var seconds = time % 60;s.innerHTML = addZero(seconds);// 還要做個判斷 當time這個時間差小于等于0的時候 清除定時器if (time <= 0) {// 如果不置0的話 還會繼續減time = 0;clearInterval(timer);}}// 拼接 0 函數function addZero(num) {// 如果傳進來的參數小于10 就要給他拼 0return num < 10 ? '0' + num : num;}
</script>

效果圖:

image

3、電子表案例 [10-定時器綜合練習-電子表.html]

<!-- 樣式部分 -->
<style>#box {width: 300px;height: 50px;background-color: #F9F9F9;box-shadow: 1px 1px 2px #616161;color: #453246;border-radius: 5px;margin: 100px auto;font: bold 24px/50px 楷體;text-align: center;}
</style><!-- html 部分 -->
<div id="box"></div><!-- js 部分 -->
<script>var box = document.getElementById('box');// 封裝一個獲取當前時間的函數function getTime() {// 獲取當前時間var date = new Date();console.log(date);// 獲取當前的年份var year = date.getFullYear();// 獲取當前時間的月份var month = addZero(date.getMonth() + 1);// 獲取當前的天var day = addZero(date.getDate());// 獲取小時var hours = addZero(date.getHours());// 獲取分鐘var minutes = addZero(date.getMinutes());// 獲取秒var seconds = addZero(date.getSeconds());// 將時間格式設置為如下格式var str = year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;return str;}// 拼 0 函數function addZero(num) {return num < 10 ? "0" + num : num;}// 定時器會延遲一秒執行,在外面定義一遍 會補償這個一秒box.innerHTML = getTime();setInterval(function() {box.innerHTML = getTime();}, 1000);
</script>

效果圖:

image

4、機械表案例 [11-定時器綜合練習-機械表.html]

<!-- 樣式部分 -->
<style>.clock {width: 600px;height: 600px;margin: 100px auto;background: url(../image/機械表/clock.jpg) no-repeat;position: relative;}.clock div {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background: url(../image/機械表/hour.png) no-repeat center center;}#m {background-image: url(../image/機械表/minute.png);}#s {background-image: url(../image/機械表/second.png);}
</style><!-- html 部分 -->
<div class="clock"><div id="h"></div><div id="m"></div><div id="s"></div>
</div><!-- js 部分 -->
<script>var h = document.getElementById("h");var m = document.getElementById("m");var s = document.getElementById("s");function setTime() {// 獲取當前時間var date = new Date();// 設置秒針var seconds = date.getSeconds() + (date.getMilliseconds() / 1000);s.style.transform = "rotate(" + 6 * seconds + "deg)";// 設置分針// 60分鐘一圈360度 每分鐘相當于 6度 這樣只會一分分鐘的走// 我們想要的效果是秒針旋轉地同時  分針也在微弱的旋轉 seconds/60得到一個小數 加上分鐘 再去乘以角度var minutes = date.getMinutes() + seconds / 60;m.style.transform = "rotate(" + 6 * minutes + "deg)";// 設置時針// 12個小時是一圈360度 每個小時相當于 30度var hours = date.getHours() + minutes / 60;h.style.transform = "rotate(" + 30 * hours + "deg)";}// 頁面一加載就執行一次setTime();// 讓window每隔15ms就執行一次  1秒鐘 分成 25份就已經有動畫效果  分成60份,很細膩setInterval(setTime, 15);
</script>

效果圖:

image

4. Location對象

location對象也是window的一個屬性,location其實對應的就是瀏覽器中的地址欄。

4.1 常用的屬性和方法

location.href:控制地址欄中的地址
location.href = "http://www.baidu.com"; //讓頁面跳轉到百度首頁
location.reload()讓頁面重新加載
location.reload(true);//強制刷新,相當于ctrl+F5
location.reload(false);//刷新,相當于F5
location的其他屬性
console.log(window.location.hash);      // 哈希值 其實就是錨點
console.log(window.location.host);      // 服務器 服務器名+端口號
console.log(window.location.hostname);  // 服務器名
console.log(window.location.pathname);  // 路徑名
console.log(window.location.port);      // 端口
console.log(window.location.protocol);  // 協議
console.log(window.location.search);    // 參數

示例代碼:定時跳轉網址 [12-location對象-定時跳轉.html]

<!-- html 部分 -->
<a href="#" id="link">注冊成功,5秒后跳轉</a><!-- js 部分 -->
<script>var num = 5;var link = document.getElementById('link');var timer = setInterval(function() {num--;link.innerHTML = "注冊成功," + num + "秒后跳轉";// 如果倒計時等于0的時候,自動跳轉到網址if (num == 0) {clearInterval(timer);location.href = "https://segmentfault.com/u/marsman_levi";}}, 1000);
</script>

效果圖:

image

5. Navigator 對象

window.navigator的一些屬性可以獲取客戶端的一些信息
navigator.userAgent:返回瀏覽器版本 navigator.onLin:返回網絡狀態 true / false

示例代碼:獲取瀏覽器版本 [13-navigator對象.html]

// 打印瀏覽器版本
console.log(navigator.userAgent);// 打印網絡狀態
console.log(navigator.onLine);

效果圖:

image

6. Screen 對象

window.screen的一些屬性可以獲取屏幕的寬高

1、獲取屏幕的可占用寬高

返回訪問者屏幕的寬度、高度,以像素計,減去界面特性,比如窗口任務欄。

screen.availWidth:獲取屏幕的可用寬度screen.availHeight:獲取屏幕的可用高度

2、獲取屏幕寬高

screen.width:獲取屏幕的寬度screen.height:獲取屏幕的高度

示例代碼: [14-screen對象.html]

document.write("當前屏幕可占用寬度:" + screen.availWidth + "<br>");    // 1864
document.write("當前屏幕可占用高度:" + screen.availHeight + "<br>");   // 1080
document.write("當前屏幕寬度:" + screen.width + "<br>");              // 1920
document.write("當前屏幕高度:" + screen.height + "<br>");             // 1080

效果圖:

image

7. History 對象

history對象表示頁面的歷史

1、后退 history.back()

history.back() 方法加載歷史列表中的前一個URL。這與在瀏覽器中點擊后退按鈕是相同的:

history.back();
history.go(-1);

2、后退 history.forward()

history forward() 方法加載歷史列表中的下一個URL。這與在瀏覽器中點擊前進按鈕是相同的:

history.forward();
history.go(1);

8. javascript 彈框

javascript中可以創建3種彈框,分別是:警告框、確認框、提示框。

1、警告框 alert

  • 警告框經常用于確保用戶可以得到某些信息。
  • 當警告框出現后,用戶需要點擊確定按鈕才能繼續進行操作。
window.alert("呵呵呵");
// window.alert() 方法可以不帶上window對象,直接使用alert()方法。
alert("呵呵呵");

2、確認框 confirm

  • 確認框通常用于驗證是否接受用戶操作。
  • 當確認卡彈出時,用戶可以點擊 "確認" 或者 "取消" 來確定用戶操作。
  • 當你點擊 "確認", 確認框返回 true, 如果點擊 "取消", 確認框返回 false
var result = confirm();
if (result == true) {alert("你真的是豬!");
} else {alert("你不是豬!");
}

3、提示框 prompt

  • 提示框經常用于提示用戶在進入頁面前輸入某個值。
  • 當提示框出現后,用戶需要輸入某個值,然后點擊確認或取消按鈕才能繼續操縱。
  • 如果用戶點擊確認,那么返回值為輸入的值。如果用戶點擊取消,那么返回值為null
// 參數一:提示內容  參數er:可以省略,輸入框默認顯示內容
var person = prompt("請輸入你的名字", "Levi丶");
if (person != null && person != "") {alert("你好" + person);
}

4、彈框換行
彈窗使用 反斜杠 + "n"(\n) 來設置換行。

alert("大家好\n我是\nLevi丶");

9. javascript Cookie

Cookie用于存儲web頁面的用戶信息

1、什么是Cookie?

  • Cookie是一些數據, 存儲于你電腦上的文本文件中。
  • web服務器向瀏覽器發送web頁面時,在連接關閉后,服務端不會記錄用戶的信息。
  • Cookie的作用就是用于解決 "如何記錄客戶端的用戶信息":

    • 當用戶訪問web頁面時,他的名字可以記錄在cookie中。
    • 在用戶下一次訪問該頁面時,可以在cookie中讀取用戶訪問記錄。

Cookie以名/值對形式存儲,如下所示:

username=Levi

當瀏覽器從服務器上請求web頁面時,屬于該頁面的cookie會被添加到該請求中。服務端通過這種方式來獲取用戶的信息。

2、使用 JavaScript 創建Cookie

JavaScript可以使用document.cookie屬性來創建 、讀取、及刪除cookie

JavaScript中,創建cookie如下所示:

document.cookie = "username = Levi";

你還可以為cookie添加一個過期時間(以 UTCGMT 時間)。默認情況下,cookie 在瀏覽器關閉時刪除:

document.cookie="username = Levi; expires = Tue Dec 12 2017 11:32:33 GMT+0800";

你可以使用path參數告訴瀏覽器cookie的路徑。默認情況下,cookie屬于當前頁面

document.cookie="username = Levi; expires = Tue Dec 12 2017 11:32:33 GMT+0800; path = /";

3、使用 JavaScript 讀取 Cookie

在 JavaScript 中, 可以使用以下代碼來讀取cookie

var x = document.cookie;

document.cookie將以字符串的方式返回所有的cookie,類型格式cookie1=value; cookie2=value; cookie3=value;

4、使用 JavaScript 修改 Cookie

在 JavaScript 中,修改cookie類似于創建cookie,如下所示:

document.cookie="username = LXH; expires = Tue Dec 12 2017 11:32:33 GMT+0800; path = /";

舊的cookie將被覆蓋。

5、使用 JavaScript 刪除 Cookie

刪除cookie非常簡單。您只需要設置expires參數為以前的時間即可,如下所示

document.cookie="username = Levi; expires = Thu, 01 Jan 1970 00:00:00 GMT;";

注意,當您刪除時不必指定 cookie 的值。

6、Cookie 字符串

document.cookie屬性看起來像一個普通的文本字符串,其實它不是。

即使您在document.cookie中寫入一個完整的cookie字符串, 當您重新讀取該cookie信息時,cookie 信息是以名/值對的形式展示的。

如果您設置了新的cookie,舊的cookie不會被覆蓋。 新cookie將添加到document.cookie 中,所以如果您重新讀取document.cookie

上一篇:JavaScript 基礎知識 - DOM篇(二)
下一篇:JavaScript 進階知識 - 特效篇(一)

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/news/255876.shtml
繁體地址,請注明出處:http://hk.pswp.cn/news/255876.shtml
英文地址,請注明出處:http://en.pswp.cn/news/255876.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

全球首例機器人自殺事件 因受夠無聊家務

據鳳凰網,一個奧地利家庭購買一小機器人,每天工作就是倒垃圾、倒垃圾。一天完工后,它竟自己啟動,爬到爐邊&#xff0c;推開上面的鍋&#xff0c;把自己活活燒死…專家稱這個機器人實在受夠了無聊的家務瑣事&#xff0c;才毅然選擇自殺機器人也是有尊嚴的!為這有骨氣的robot點根…

【python基礎】——數據類型(列表、字典、集合)

駿馬金龍——python語法基礎 python基礎 變量與運算 符號//%**意義整除整除取余冪次方數據種類 #mermaid-svg-7nSRRijcYFCYwTDr .label{font-family:trebuchet ms, verdana, arial;font-family:var(--mermaid-font-family);fill:#333;color:#333}#mermaid-svg-7nSRRijcYFCYw…

linux命令:mkdir命令

命令參數&#xff1a; -m, --mode模式&#xff0c;設定權限<模式> (類似 chmod)&#xff0c;而不是 rwxrwxrwx 減 umask -p, --parents 可以是一個路徑名稱。此時若路徑中的某些目錄尚不存在,加上此選項后,系統將自動建立好那些尚不存在的目錄,即一次可以建立多個目錄; …

js設置奇偶行數樣式

$(document).ready(function () {odd { "background": "none" }; //奇數樣式 even { "background": "#f3f3f3" }; //偶數樣式 odd_even(".gys_xq", odd, even);});function odd_even(id, odd, even) {$(id).find("…

貝塞爾曲線切割圓角

ios 系統框架已經給我們提供了相應的切割圓角的方法, 但是如果在一個見面有很多控件切割的話會出現卡頓和個別不切的現象 ?123456789101112131415161718192021222324252627/* 創建一個Button */UIButton * button [UIButton buttonWithType:(UIButtonTypeSystem)];[button se…

機器人實現屠宰自動化

當 WESTFLEISCH 注冊合作社考慮在 Coesfeld 肉類加工中心內自動化原有的人工屠宰設備過程時&#xff0c;首先在“剔除直腸”及“切開盆腔骨及腹部”兩個流程中測試使用了兩臺庫卡機器人。在此過程中&#xff0c;機器人主要以它工作的質量及經濟效益說服了使用者。 實施措施/解…

DOM編程藝術12章

在submit.html中&#xff0c;代碼簡略成如下也行 <article><h1>Thanks!</h1><p>Thanks for contacting us. Well get back to you as soon as we can.</p></article> </body> </html> 說明了只是插入article的部分&#xff0c…

python數據結構《排序專題復習》

目錄 常見的三種排序方法 冒泡排序 插入排序 選擇排序 其他經典的排序方法 快速排序 堆排序 歸并排序 希爾排序 不同排序方法的各維度對比 排序方式的穩定性&#xff1a;若兩個相同的元素在排序前后的相對位置不發生改變的排序為穩定排序&#xff0c;否則不穩定排序 常…

BZOJ2844 albus就是要第一個出場

AC通道&#xff1a;http://www.lydsy.com/JudgeOnline/problem.php?id2844 這題貌似HDU上有一道差不多的題&#xff0c;不過我沒做過&#xff0c;也就沒管了。 首先講一個線性基的東西&#xff0c;大概就是這樣&#xff1a; 然后就是一個什么性質&#xff1a;S異或起來會出現重…

HTG Explains: Why Linux Doesn’t Need Defragmenting

If you’re a Linux user, you’ve probably heard that you don’t need to defragment your Linux file systems. You’ll also notice that Linux distributions don’t come with disk-defragmenting utilities. But why is that? To understand why Linux file systems d…

Spring AOP 實戰運用

Spring AOP 實戰 看了上面這么多的理論知識, 不知道大家有沒有覺得枯燥哈. 不過不要急, 俗話說理論是實踐的基礎, 對 Spring AOP 有了基本的理論認識后, 我們來看一下下面幾個具體的例子吧.下面的幾個例子是我在工作中所遇見的比較常用的 Spring AOP 的使用場景, 我精簡了很多有…

VC Ws2_32.lib

該庫對應WS2_32.DLL&#xff0c;提供了對以下網絡相關API的支持&#xff0c;若使用其中的API&#xff0c;則應該將ws2_32.lib加入工程&#xff08;否則要動態載入WS2_32.DLL&#xff09;。acceptbindcloseSOCKETconnectgetpeernamegetsocknamegetsockopthtonlhtonsioctlsocketi…

大話設計模式之策略模式

第二章&#xff1a;商場促銷——策略模式 策略模式的定義:策略模式是一種定義一系列算法的方法&#xff0c;從概念上來看&#xff0c;所有這些算法完成的都是相同的工作&#xff0c;知識實現不同&#xff0c;他可以以相同的方式調用所有的算法&#xff0c;減少了各類算法類與使…

【Python學習】——語言風格(變量賦值、深淺拷貝、for循環陷阱)

目錄 1、賦值 2、賦值的分類——引用賦值、值賦值 1) 不可變對象引用賦值——字符串、數值、元組等 2&#xff09;可變對象引用賦值——列表、集合、字典 3&#xff09;可變與不可變對象的引用賦值內部分析 4&#xff09;在py文件中&#xff0c;和作用域有關&#xff0c;如…

underscore.js 頁面數據渲染

1.underscore.js 源碼 // Underscore.js 1.8.3 // http://underscorejs.org // (c) 2009-2015 Jeremy Ashkenas, DocumentCloud and Investigative Reporters & Editors // Underscore may be freely distributed under the MIT license.(function() {// …

判斷莊家是否出貨

1. 大盤處于強勢的時候 日平均線在橫盤的時候&#xff0c;緩慢拉升然后急劇下跌 高位盤整的時候 2. 有利好消息發布的時候 因為莊家會利用這個對于散戶來說這個買入時機來進行出貨操作&#xff0c;可見莊家真是陰險狡詐轉載于:https://www.cnblogs.com/dcz1001/p/6115893.html

【深度學習】——常見深度學習模型總結、anchor-free和anchor-based

目錄 1、faster rcnn&#xff1a; 2、SSD&#xff1a; 3、YOLOv1: 小結&#xff1a; 拓展&#xff1a;anchor-based和anchor-free anchor 1、faster rcnn&#xff1a; FasterRcnn 算法原理講解筆記&#xff08;非常詳細&#xff09;https://blog.csdn.net/xjtdw/article…

PHP PDO函數庫詳解

PDO是一個“數據庫訪問抽象層”&#xff0c;作用是統一各種數據庫的訪問接口&#xff0c;與mysql和mysqli的函數庫相比&#xff0c;PDO讓跨數據庫的使用更具有親和力&#xff1b;與ADODB和MDB2相比&#xff0c;PDO更高效。目前而言&#xff0c;實現“數據庫抽象層”任重而道遠&…

數據交互相關分享

Python與web Python Web.py與AJAX交互轉載于:https://juejin.im/post/5a40af3d6fb9a044ff31b1f5

springMVC 相對于 Structs 的優勢

智者說&#xff0c;沒有經過自己的思考和估量&#xff0c;就不能接受別人的東西。資料只能是一個參考&#xff0c;至于是否正確&#xff0c;還得自己去分辨 SpringMVC相對于Structs的幾個優勢&#xff1a; 1、springMVC安全性更高&#xff0c;structs2框架是類級別的攔截&#…