進階學習之JavaScript的BOM程式設計和DOM程式設計
一、BOM(Browser Object Model)：瀏覽器物件模型
1、瀏覽器物件模型：把瀏覽器 的各個部分都是用了一個物件進行描述，如果我們要
操作瀏覽器的一些屬性，我就可以通過瀏覽器物件模型的物件進行操作。
2、BOM物件
| 物件 | 解釋 |
|---|---|
| window | 代表了一個新開的視窗 |
| location | 代表了位址列物件 |
| screen | 代表了整個螢幕的物件 |
3、window物件常用方法
| 方法 | 解釋 |
|---|---|
| open() | 開啟一個新的視窗並裝入給定URL文件 |
| resizeTo() | 將視窗的大小更改為指定的寬度和高度值 |
| moveBy() | 相對於原來的視窗移動指定的x、y值 |
| moveTo() | 將視窗左上角的螢幕位置移動到指定的x和y位置 |
| setInterval() | 每經過指定毫秒值後就會執行指定的程式碼 |
| clearInterval() | 根據一個任務的ID取消的定時任務 |
| setTimeout() | 經過指定毫秒值後執行指定的程式碼一次 |
注意： 使用window物件的任何屬性與方法都可以省略window物件不寫的。
<script> function showMovie(){ open("Movie.html","_blank","height=500px,width=500px,toolbar=no,location=no,top=200px"); } setTimeout("showMovie()",2000); var id = window.setInterval("showMovie",2000); function small(){ resizeTo(300,200); //相對於原本視窗改變指定的大小 } function move(){ window.moveBy(50,0); // 相對於原來的視窗移動指定的x、y值 moveBy(0,50); } function move2(){ window.moveTo(500,200); } function clearMovie(){ window.clearInterval(id); } </script> <body> <input type="button" onclick="showMovie()" value="看電影"/> <input type="button" onclick="small()" value="變小"/> <input type="button" onclick="move()" value="moveBy"/> <input type="button" onclick="move2()" value="moveTo"/> <input type="button" onclick="clearMovie()" value="取消定時任務"/> </body>
4、事件的註冊
<script type="text/javascript">
//方式一： 直接在html元素上註冊
<body onload="ready()">
function ready(){
alert("body的元素被載入完畢了");
}
//方式二：可以js程式碼向找到對應的物件再註冊【推薦使用】
var bodyNode = document.getElementById("body");
bodyNode.onload = function(){
alert("body的元素被載入完畢");
}
</script>
5、window物件
| 事件 | 解釋 |
|---|---|
| 滑鼠點選相關 | |
| onclick | 在使用者用滑鼠左鍵單擊物件時觸發 |
| ondblclick | 當用戶雙擊物件時觸發 |
| onmousedown | 當用戶用任何滑鼠按鈕單擊物件時觸發 |
| onmouseup | 當用戶在滑鼠位於物件之上時釋放滑鼠按鈕時觸發 |
| 滑鼠移動相關 | |
| onmouseout | 當用戶將滑鼠指標移出物件邊界時觸發 |
| onmousemove | 當用戶將滑鼠劃過物件時觸發 |
| 焦點相關的 | |
| onblur | 在物件失去輸入焦點時觸發 |
| onfocus | 當物件獲得焦點時觸發 |
| 其他 | |
| onchange | 當物件或選中區的內容改變時觸發 |
| onload | 在瀏覽器完成物件的裝載後立即觸發 |
| onsubmit | 當表單將要被提交時觸發 |
<script>
function clickTest(){
alert("單擊..");
}
function dbClick(){
alert("雙擊..");
}
function showTime(){
var timeSpan = document.getElementById("timeSpan");
var date = new Date().toLocaleString();
timeSpan.innerHTML = date.fontcolor("red");
}
function hideTime(){
var timeSpan = document.getElementById("timeSpan");
timeSpan.innerHTML = "";
}
function showInfo(){
var timeSpan = document.getElementById("userName");
timeSpan.innerHTML = "使用者名稱是由6位的英文與數字組成".fontcolor("green");
}
function hideInfo(){
var timeSpan = document.getElementById("userName");
timeSpan.innerHTML = "";
}
function change(){
alert("城市改變了");
}
</script>
<body>
<input type="button" onclick="clickTest()" value="單擊" />
<input type="button" ondblclick="dbClick()" value="雙擊"/>
<span onmousemove="showTime()" onmouseout="hideTime()">檢視當前系統時間：</span><span id="timeSpan"></span>
使用者名稱：<input type="text" onfocus="showInfo()" onblur="hideInfo()"/><span id="userName"></span>
<select onchange="change()" >
<option>廣州</option>
<option>深圳</option>
<option>上海</option>
</select>
</body>
6、Location物件
| 屬性和方法 | 解釋 |
|---|---|
| href | 設定以及獲取位址列的物件 |
| reload() | 重新整理當前的頁面 |
<script type="text/javascript">
function showURL(){
alert(location.href);
}
function download(){
location.href="http://www.baidu.com";
}
function rafresh(){
location.reload();
}
window.setInterval("rafresh()",1000);
</script>
<body>
<input type="button" onclick="showURL()" value="顯示位址列"/>
<span onclick="download()">下載電影</span>
</body>
7、screen物件
| 屬性 | 解釋 |
|---|---|
| availHeight | 獲取系統螢幕的工作區域高度，排除Windows工作列 |
| availWidth | 獲取系統螢幕的工作區域寬度，排除Windows工作列 |
| height | 獲取螢幕的垂直解析度 |
| width | 獲取螢幕的水平解析度 |
document.write("獲取系統螢幕的工作區域高度："+screen.availHeight+"<br/>");
document.write("獲取系統螢幕的工作區域寬度："+screen.availWidth+"<br/>");
document.write("獲取螢幕的垂直解析度："+screen.height+"<br/>");
document.write("獲取螢幕的水平解析度："+screen.width+"<br/>");
二、DOM(Document Object Model)：文件物件模型
1、一個html頁面被瀏覽器載入的時候，瀏覽器就會對整個html頁面上的所有標籤都會建立一個對應的物件進行描述，我們在瀏覽器上看到的資訊只不過就是這些html物件的屬性資訊而已。我們只要能找到對應的物件操作物件的屬性，則可以改變瀏覽器當前顯示的內容。
<script>
var allNodes = document.all; //獲取html檔案中的所有標籤節點
for(var i = 0; i<allNodes.length ; i++){
alert(allNodes[i].nodeName); //標籤的名字 nodeName;
}
function writeUrl(){
var links = document.links; // 獲取文件中含有href的屬性的標籤。
for(var i = 0; i<links.length ; i++){
links[i].href = "http://www.百度.com";
}
}
</script>
<body>
<a href="#">標題1</a>
<a href="#">標題2</a>
<a href="#">標題3</a>
<input type="button" onClick="writeUrl()" value="設定a標的地址"/>
</body>
2、通過html元素的標籤屬性找節點
<script type="text/javascript">
document.getElementById("html元素的id")
document.getElementsByTagName("標籤名")
document.getElementsByName("html元素的name")
function showText(){
var inputNode = document.getElementById("userName"); //根據ID屬性值找元素
inputNode.value = "輸入：張三";
}
//InnerHTml是用於設定標籤體的內容的，value是用於設定標籤的value屬性值
function showImage(){
var images = document.getElementsByTagName("img"); //根據標籤名獲取所有的標籤物件。
for(var i = 0 ; i<images.length ; i++){
images[i].src = "1.jpg";
images[i].width="100";
images[i].height="100";
}
}
function showDiv(){
var divs = document.getElementsByName("info"); //根據標籤的name屬性值取找對應的標籤，返回的是一個數組
for(var i = 0 ; i<divs.length ; i++){
divs[i].innerHTML = "啦啦啦".fontcolor("red");
}
}
</script>
<body>
<input type="text" id="userName" value="請輸入使用者名稱：" /><input type="button" onclick="showText()" value="自動輸入張三"/>
<hr/>
<img src="" />
<img src="" />
<img src="" />
<input type="button" onclick="showImage()" value="顯示圖片"/>
<hr/>
<div name="info"></div>
<div name="info"></div>
<div name="info"></div>
<input type="button" onclick="showDiv()" value="設定div內容"/>
</body>
3、練習
<script type="text/javascript">
function checkAll(allNode){
//找到所有的的選項
var items = document.getElementsByName("item");
//找到全選按鈕的物件
//var allNode = document.getElementsByName("all")[0];
for(var i = 0 ; i<items.length ; i++){
items[i].checked = allNode.checked;
}
}
function getSum(){
var items = document.getElementsByName("item");
var sum = 0;
for(var i = 0 ; i<items.length ; i++){
if(items[i].checked){
sum += parseInt(items[i].value);
}
}
var spanNode = document.getElementById("sumid");
spanNode.innerHTML = (" ¥"+sum).fontcolor("green");
}
</script>
<body>
<div>商品列表</div>
<input type="checkbox" name="item" value="3000" />膝上型電腦3000元<br />
<input type="checkbox" name="item" value="1800" />膝上型電腦1800元<br />
<input type="checkbox" name="item" value="300" />膝上型電腦300元<br />
<input type="checkbox" name="item" value="3000" />膝上型電腦3000元<br />
<input type="checkbox" name="item" value="3000" />膝上型電腦3000元<br />
<input type="checkbox" name="item" value="3000" />膝上型電腦3000元<br />
<input type="checkbox" name="all" onclick="checkAll(this)"/>全選<br />
<input type="button" value="總金額：" onclick="getSum()" /><span id="sumid"></span>
</body>
4、通過關係（父子關係、兄弟關係）找標籤
| 屬性 | 解釋 |
|---|---|
| parentNode | 獲取當前元素的父節點 |
| childNodes | 獲取當前元素的所有下一級子元素 |
| firstChild | 獲取當前節點的第一個子節點 |
| lastChild | 獲取當前節點的最後一個子節點 |
| nextSibling | 獲取當前節點的下一個節點。（兄節點） |
| previousSibling | 獲取當前節點的上一個節點。（弟節點） |
我們可以通過標籤的型別進行判斷篩選
① 文字節點的型別： 3
② 註釋的節點型別： 8
③ 標籤節點的型別： 1
<script type="text/javascript">
var bodyNode = document.getElementsByTagName("body")[0];
//檢視父節點
var parentNode = bodyNode.parentNode;
alert("父節點的名稱："+parentNode.nodeName);
//獲取所有的子節點，返回的是一個數組（注意：獲取子節點的時候是包括了空文字或者是註釋）
var children = bodyNode.childNodes;
for(var i = 0 ; i<children.length ; i++){
if(children[i].nodeType==1){
alert("節點的名字："+children[i].nodeName+" 物件的型別:"+children[i].nodeType);
}
}
alert("第一個子節點："+bodyNode.firstChild.nodeName);
alert("最後一個子節點："+bodyNode.lastChild.nodeName);
//找兄弟節點
var inputNode = document.getElementById("userName");
alert("下個兄弟節點："+inputNode.nextSibling.nodeName); //下一個兄弟節點
alert("上一個兄弟節點："+inputNode.previousSibling.nodeName);
</script>
<body>
<input type="text" id="userName"/>
<img src="1.jpg" />
</body>
5、 建立節點、插入節點、設定節點的屬性
① document.createElement(“標籤名”)：建立新元素節點
② elt.setAttribute(“屬性名”, “屬性值”)：設定屬性
③ elt.appendChild(e)：新增元素到elt中最後的位置
④ elt.insertBefore(newNode, oldNode)：新增元素到elt中，child之前（elt必須是oldNode的直接父節點）
⑤ elt.removeChild(eChild)：刪除指定子節點（elt必須是child的直接父節點）
<script type="text/javascript">
var num = 1;
function add(){
var inputNode = document.createElement("input"); //建立一個指定標籤名字的節點
//setAttribute:設定節點的屬性
inputNode.setAttribute("type","button");
inputNode.setAttribute("value","按鈕"+num);
num++;
var bodyNode = document.getElementsByTagName("body")[0];
bodyNode.appendChild(inputNode); //appendChild：新增子節點
}
</script>
<body>
<input type="button" onclick="add()" value="新增"/>
</body>
6、新增附件
<script type="text/javascript">
function addFile(){
//建立一個tr物件
var trNode = document.createElement("tr");
//建立td物件
var tdNode1 = document.createElement("td");
var tdNode2 = document.createElement("td");
tdNode1.innerHTML ="<input type='file'/>";
tdNode2.innerHTML = "<a href='#' onclick='delFile(this)' >刪除附件</a>";
//把td的節點新增到tr節點上
trNode.appendChild(tdNode1);
trNode.appendChild(tdNode2);
var tbodyNode = document.getElementsByTagName("tbody")[0];
var lastRow = document.getElementById("lastRow");
tbodyNode.insertBefore(trNode,lastRow);
}
//刪除附件
function delFile(aNode){
var trNode = aNode.parentNode.parentNode;
var tbodyNode = document.getElementsByTagName("tbody")[0];
tbodyNode.removeChild(trNode);
}
</script>
<body>
<table>
<tr>
<td><input type="file"/></td>
<td><a href="#" onclick="delFile(this)">刪除附件</a></td>
</tr>
<tr id="lastRow">
<td colspan="2"><input onclick="addFile()" type="button" value="新增附件"/></td>
</tr>
</table>
</body>
7、聯動框
<script type="text/javascript">
function showCity(){
//維護一個二維陣列儲存省份對應的城市
var citys = [[],["廣州","佛山","湛江","中山"],["長沙","衡陽","岳陽","郴州"],["南寧","桂林","貴港","柳州"]];
//獲取省份對應的節點
var provinceNode = document.getElementById("province");
//獲取省份選中的選項
var selectIndex = provinceNode.selectedIndex;
//獲取對應的城市
var cityDatas = citys[selectIndex];
//找到city節點
var cityNode = document.getElementById("city");
/*
//先清空city框所有option
var children = cityNode.childNodes;
for(var i = 0; i<children.length ; ){
cityNode.removeChild(children[i]);
}
*/
//設定options的個數==相當於清空
cityNode.options.length = 1 ;//保留城市
//遍歷對應的所有城市然後建立對應的option新增到city上
for(var index=0;index<cityDatas.length;index++){
var option = document.createElement("option");
option.innerHTML = cityDatas[index];
cityNode.appendChild(option);
}
}
</script>
<body>
省份：<select id="province" onchange="showCity()">
<option>省份</option>
<option>廣東</option>
<option>湖南</option>
<option>廣西</option>
</select>
城市：<select id="city"><option>城市</option></select>
</body>
8、通過JavaScript操作CSS樣式
<script type="text/javascript">
//產生一個四位的驗證碼
function createCode(){
var datas=['A','B','張','李','王','z','1','9'];//0-7：長度8
var code = "";
for(var i = 0 ; i<4; i++){
//隨機產生四個索引值
var index = Math.floor(Math.random()*datas.length); //random產生在0.0-1.0之間（不包括1.0）
code+=datas[index];
}
var spanNode = document.getElementById("code");
spanNode.innerHTML = code;
spanNode.style.fontSize ="24px";
spanNode.style.color = "red";
spanNode.style.backgroundColor="gray";
spanNode.style.textDecoration = "line-through";
}
function ready(){
createCode();
}
</script>
<body onload="ready()">
<span id="code"></span><a href="#" onclick="createCode()">看不清，換一個</a>
</body>
9、正則表示式
① 建立方式
◆ 方式1：/正則表示式/模式
◆ 方式2：new RegExp(“正則表示式”,模式);
② 正則表示式物件常用的方法
◆ test()：使用正則物件去匹配字串，如果匹配成功返回ture，否則返回false
◆ exec()：根據正則表示式去查詢字串符合規則的內容
③ 模式
◆ g（全文查找出現的所有 pattern）
◆ i （忽略大小寫）
<script type="text/javascript">
var str = "hello123";
var reg = /^[A-Z0-9]+$/i;
//^：匹配輸入字串的開始位置
//$：匹配輸入字串的結束位置
alert("匹配嗎？"+reg.test(str));
//查找出三個字元組成的單詞
var str ="da jia hao hao xue xi a";
var reg = /\b[a-z]{3}\b/gi;//\b：單詞邊界匹配
var line ="";
while((line = reg.exec(str))!=null){
document.write(line+"<br/>")
}
</script>
10、練習
<script type="text/javascript">
//檢查使用者名稱
function checkName(){
var inputNode = document.getElementById("userName");
var spanNode = document.getElementById("userId");
//獲取輸入框的內容
var content = inputNode.value;
//使用者名稱的規則： 六位的英文與數字組成。數字不能開頭
var reg = /^[a-z][a-z0-9]{5}$/i;
if(reg.test(content)){
//符合規則
spanNode.innerHTML = "正確".fontcolor("green");
return true;
}else{
//不符合規則
spanNode.innerHTML = "錯誤".fontcolor("red");
return false;
}
}
//檢查郵箱
function checkEmail(){
var email = document.getElementById("email").value;
var spanNode = document.getElementById("emailspan");
//編寫郵箱的正則 [email protected] [email protected] [email protected]
var reg = /^[a-z0-9]\[email protected][a-z0-9]+(\.[a-z]{2,3}){1,2}$/i;
if(reg.test(email)){
//符合規則
spanNode.innerHTML = "正確".fontcolor("green");
return true;
}else{
//不符合規則
spanNode.innerHTML = "錯誤".fontcolor("red");
return false;
}
}
function checkAll(){
var userName = checkName();
var email = checkEmail();
if(userName&&email){
return true;
}else{
return false;
}
}
//表單提交的時候是會觸發onsubmit事件的，如果onsubmit事件的方法返回是true，那麼該表單允許提交，如果返回的是false，該表單不允許提交。
</script>
<body>
<form action="success.html" method="get" onsubmit="return checkAll()" > <!--如果表單提交時候觸發的方法返回是false,那麼該表單不允許提交，如果返回的是true允許提交 -->
<table border="1px" width="50%" align="center" cellspacing="0px" cellpadding="3px">
<tr>
<td width="25%">姓名:</td>
<td>
<input type="text" name="userName" id="userName" onblur="checkName()"/>
<span id="userId"></span>
</td>
</tr>
<tr>
<td >密碼:</td><td>
<input type="password" name="pwd" id="pwd" onblur="checkPass()"/>
<span id="passId"></span>
</td>
</tr>
<tr>
<td>確認密碼:</td><td>
<input type="password" name="ensurepwd" id="ensurepwd" onblur="ensurepass()" /> <span id="ensure"></span>
</td>
</tr>
<tr>
<td>郵箱</td><td>
<input type="text" name="email" id="email" onblur="checkEmail()"/>
<span id="emailspan"></span>
</td>
</tr>
<tr>
<td>性別</td><td>
<input type="radio" checked="ture" name="gender" id="male" value="male"/>
男
<input type="radio" name="gender" value="female"/>
女</td>
</tr>
<tr>
<td>愛好:</td><td>
<input type="checkbox" name="like" />
eat
<input type="checkbox" name="like" />
sleep
<input type="checkbox" name="like"/>
play
<span id="hobbySpan"></span>
</td>
</tr>
<tr>
<td>城市</td><td>
<select name="city" id="city">
<option value=""> 請選擇</option>
<option value="bj"> 北京 </option>
<option value="gz"> 廣州 </option>
<option value="sh"> 上海 </option>
</select>
</td>
</tr>
<tr>
<td>自我介紹</td><td> <textarea cols="15" rows="5" name="myInfo" id="myInfo"></textarea></td>
</tr>
<tr align="center">
<td colspan="2"><!--提交按鈕-->
<input type="submit"/>
</td>
</tr>
</table>
</form>
</body>
相關推薦
進階學習之JavaScript的BOM程式設計和DOM程式設計
一、BOM(Browser Object Model)：瀏覽器物件模型 1、瀏覽器物件模型：把瀏覽器 的各個部分都是用了一個物件進行描述，如果我們要 操作瀏覽器的一些屬性，我就可以通過瀏覽器物件模型的物件進行操作。 2、BOM物件 物件 解釋 w
Oracle進階學習之創建數據庫
oracle 用戶 表空間 實例名 寫在前面： Oracle在創建用戶的時候默認使用的表空間為User，我們一般不建議這樣做，因為默認表空間的大小是固定的，如果我們創建的所有用戶都使用默認的表空間會導致表空間空間不足，會導致指向User表空間的所有用戶無法正常使用，聽起來是多麽可怕的一件
進階學習之Oracle增強
一、增刪改資料 1、向emp表中插入一條記錄 ① （方式一：按表預設結構順序）insert into 表名 values ...語法 insert into emp values(1111,'JACK','IT',7788,sysdate,1000,100,40); ② （方式二：按
進階學習之Linux作業系統
一、Linux作業系統概述 1、常見作業系統 ① 服務端作業系統：linux、unix、windows server ② 單機作業系統：windows（dos 、ucdos、win95、win98、win2000、xp、vista、win7、win8）、MAC 、linux（ubun
進階學習之Oracle基礎
一、Oracle概述 1、Oracle資料庫伺服器由二部分組成 ① 例項：理解為物件（看不見的） ② 資料庫：理解為類（看得見的），比如存放在E:\app\Administrator\oradata\orcl\*.DBF 2、Oracle伺服器與orcl資料庫的關係 ① 一個Or
python 進階學習之1
python 安裝 下載Python-3.4.0.tgz，解壓： tar -zxvf Python-3.4.0.tgz cd Python-3.4.0 ./configure --prefix=/自己的安裝目錄 python setup.pyinstall --pref
cocos2dx進階學習之CCNode
繼承關係CCNode -> CCObjectCCNode在cocos2dx中抽象舞臺物件，需要渲染的物件都是從CCNode派生，包括CCScene，CCLayer，CCSprite等等CCNode提供包容關係管理成員函式virtual bool init();stat
cocos2dx進階學習之CCApplication
繼承關係CCApplication-> CCApplicationProtocol類主要成員變數static CCApplication * sm_pSharedApplication;靜態成員變數，儲存唯一的CCApplication例項的地址。在CCApplicat
cocos2dx進階學習之螢幕適配
背景在學習cocos2dx時，我們在main函式中發現一句程式碼，#include "main.h" #include "AppDelegate.h" #include "CCEGLView.h" USING_NS_CC; int APIENTRY _tWinMain(H
PythonI/O進階學習筆記_3.2面向物件程式設計_python的封裝
前言： 本篇相關內容分為3篇多型、繼承、封裝，這篇為第三篇 封裝。 本篇內容圍繞 python基礎教程這段： 在面向物件程式設計中，術語物件大致意味著一系列資料（屬性）以及一套訪問和操作這些資料的方法。使用物件而非全域性變數和函式的原因有多個，下面列出了使用物件的最重要的好處。 多型：可對不
Java進階學習之集合與泛型（1）
[TOC](目錄) ## 1.集合 #### 1.1.集合是什麼 之前的基礎篇中我們知道了一種資料結構：陣列，可以存放很多資料。但是資料有很大的侷限性： - 支援的資料型別單一 - 宣告時需要指定大小，大小固定，可擴充套件性差 - 連續的儲存單元，對記憶體要求苛刻 那麼是否有其他的資料結構或者資料型
Python進階學習筆記——函數語言程式設計之返回函式&閉包
1、返回函式 Python中除了返回函式值之外，還可以返回函式，就像前面說的，函式也可以看做一個變數，那麼返回函式的意義在於什麼呢？——延緩函式的呼叫，有什麼應用場景暫且還不知道，後續理解補充。總之，可以想呼叫該返回的函式的時候再呼叫。 用慕課網上廖老師的例子說明一下：
Spring Boot 進階之Web進階 學習 - 單元測試
自動生成 添加 學習 one 類文件 dma AC mock ring 可在類文件中,右鍵->GO TO->Test 自動生成測試文件 1.添加測試註解 簡單方法測試 @RunWith(SpringRunner.class)@SpringBootTes
MYSQL進階學習筆記十八：MySQL備份和還原！（視頻序號：進階_37)
back 系統 結構 生產 下載地址 family 需要 絕對路徑 isa 知識點十九：MySQL的備份的還原(38) 一、mysql的備份 1、通過使用mysqldump的命令備份 使用mysqldump命令備份，mysqldump命令將數
Android學習筆記進階15之Shader渲染
分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！
Java入門進階學習資料和專案實戰資源
比較好的Java入門資源，逐個知識點選破 比較好的Java入門資源 連結 JAVA 自學網站 http://how2j.cn?p=48616 JAVA 練習題 http://how2j.
家用NAS進階折騰之旅—常見NAS系統介紹和一些體會以及QNAP 威聯通 TS-563 NAS使用感受
原文網址：https://post.smzdm.com/p/653673/ 寫在前面 新人第一篇投稿，因能力一般，水平有限，內容均為個人理解，難免有紕漏指出。如果您對本文內容有異議或有更好的解決方案，請不吝賜教。而且從小語死早，文采可能非常渣，請大家選擇性的 往下看。
Java進階學習第二十三天（Spring框架：代理模式、AOP程式設計、jdbc支援）
一、共性問題 1、伺服器啟動報錯，什麼原因？ ① jar包缺少或者jar包衝突 ◆ 先檢查專案中是否缺少jar包引用 ◆ 伺服器：檢查jar包有沒有釋出到伺服器下；使用者庫jar包，需要手動釋出到tomcat（每次新建專案） ◆ 重新發布專案 ② 配置檔案錯誤（
Java進階篇之十五 ----- JDK1.8的Lambda、Stream和日期的使用詳解(很詳細)
前言 本篇主要講述是Java中JDK1.8的一些新語法特性使用，主要是Lambda、Stream和LocalDate日期的一些使用講解。 Lambda Lambda介紹 Lambda 表示式(lambda expression)是一個匿名函式，Lambda表示式基於數學中的λ演算得名，直接對應於
Ffmpeg學習進階二----ffplay的使用和分析
Ffmpeg中的ffplay的使用和分析 1、預設的ffmpeg中沒有編譯fffplay（可能是因為ffplay引用了SDL庫，而SDL庫需要另外下載），config後，確認Makefile中指定的config.mak（在ffmpeg根目錄下）中：CONFIG_FFPLA