JavaScript（js）筆記

時間  2020-06-07
標籤 javascript 筆記 欄目 JavaScript 简体版
原文   原文鏈接

js註釋

JavaScript註釋與Java註釋相同html

// 單行註釋

/* 
    多行註釋
*/

js五大基本類型：

  number（數值型）、string（字符串性）、boolean（布爾型）、undefined類型、null類型 number包括：數值類型、包含整型、浮點型、NaN和Infinity（無窮大）。java

關於數組的空間長度問題：

  如何獲取數組的空間長度：     經過length屬性獲取數組的空間長度   數組的length詳解：     java：只讀屬性      js：讀寫屬性jquery

數組元素的默認值：

  java：正則表達式

      一、整數類型（byte、short、int、long）的基本類型變量的默認值爲0。數組

      二、浮點型（float、double）的基本類型變量的默認值爲0.0。瀏覽器

      三、字符型（char）的基本類型變量的默認爲 「/u0000」。函數

      四、布爾性的基本類型變量的默認值爲 false。spa

      五、引用類型的變量是默認值爲 null(null就是空對象)。code

   js：undefinedregexp

JavaScript 輸出

JavaScript 沒有任何打印或者輸出的函數。 JavaScript 能夠經過不一樣的方式來輸出數據：   使用 **window.alert() **彈出警告框。   使用 **document.write() **方法將內容寫到 HTML 文檔中。   使用 **innerHTML 寫入到 HTML 元素。   使用console.log() **寫入到瀏覽器的控制檯。

js數組排序：

  sort()： 函數按照字符串順序對值進行升序排序。   數組.sort(function(a, b){return a - b});

//字符串數組（字母順序對數組進行排序）
var arr_str = ["Banana", "Orange", "Apple", "Mango"];
var arr_str_sort = arr_str.sort();
document.write(arr_str_sort);

//整形數組
var arr = [9,5,1,2,7,6,4,3,0];
var arr_sort = arr.sort(function(a, b){return a - b});
console.log(arr_sort);

解決js代碼放在標籤前面或<head>內致使js代碼無效的解決方案：

使用<script>無效的解決方案：

window.οnlοad = function() {
    //js代碼
}

使用jquery無效的解決方案：

$(document).ready(function() {
    //js代碼
})

假設法：

  一、定義一個變量，標記該變量的值爲true。   二、推翻假設，把標記的值修改成false，而且跳出循環。   三、若是標記的值依舊爲true，則證實爲真；     若是標記的值修改成false，則證實爲假

// 1.經過詢問框得到一個正整數
var num = prompt("請輸入一個正整數");
// a)假設num就是一個質數
var flag = true; // 設置標記的值爲true
// 2.經過循環得到[2, num)之間全部的整數
for(var i = 2; i < num; i++) {
    // b)判斷num是否能被i整除。
    if(num % i === 0) {
        // 此處已經證實num不是一個質數，那麼推翻假設，修改標記的值
        flag = false;
        // 由於此處已經肯定num不是一個質數，因此後續循環不必進行，那麼咱們須要跳出循環
        break;
    }
}
// c)價差flag標記的值，從而肯定num是不是一個質數
if(flag) { // flag == true
    document.write(num + "是一個質數");
} else { // flag == false
    document.write(num + "不是一個質數");
}

常見的HTML事件

下面是一些常見的HTML事件的列表:

事件 描述
onload 窗體加載事件
onclick 鼠標單擊事件
ondblclick 鼠標雙擊事件
onfocus 得到焦點事件
onblur 失去焦點事件
onchange 選項改變事件（一般用在下拉列表框）
onmousemove 當鼠標移動到某個事件源就會觸發
onmouseover 當鼠標懸停到某個事件源就會觸發
onmouseout 當鼠標離開某個事件源就會觸發
onmousedown 當鼠標按下某個事件源就會觸發
onmouseup 當鼠標釋放某個事件源就會觸發
onkeyup 鍵盤釋放觸發
onkeydown 鍵盤按下觸發
onkeypress 鍵盤在按下和釋放之間觸發

條件語句

  • if 語句 - 只有當指定條件爲 true 時，使用該語句來執行代碼

  • if...else 語句 - 當條件爲 true 時執行代碼，當條件爲 false 時執行其餘代碼

  • JavaScript三目運算 - 當條件爲true 時執行代碼，當條件爲 false 時執行其餘代碼

  • if...else if....else 語句- 使用該語句來選擇多個代碼塊之一來執行

  • switch 語句 - 使用該語句來選擇多個代碼塊之一來執行

經常使用的正則表達式及使用方法：

在 JavaScript 中，正則表達式一般用於兩個字符串方法 : search() 和 replace()。

  search() 方法 用於檢索字符串中指定的子字符串，或檢索與正則表達式相匹配的子字符串，並返回子字符串的起始位置。

  replace() 方法 用於在字符串中用一些字符替換另外一些字符，或替換一個與正則表達式匹配的子字符串。

    （詳情參照：https://www.runoob.com/js/js-regexp.html）

/*是否帶有小數*/
function    isDecimal(strValue )  {  
   var  objRegExp= /^\d+\.\d+$/;
   return  objRegExp.test(strValue);  
}  

/*校驗是否中文名稱組成 */
function ischina(str) {
    var reg=/^[\u4E00-\u9FA5]{2,4}$/;   /*定義驗證表達式*/
    return reg.test(str);     /*進行驗證*/
}

/*校驗是否全由8位數字組成 */
function isStudentNo(str) {
    var reg=/^[0-9]{8}$/;   /*定義驗證表達式*/
    return reg.test(str);     /*進行驗證*/
}

/*校驗電話碼格式 */
function isTelCode(str) {
    var reg= /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/;
    return reg.test(str);
}

/*校驗郵件地址是否合法 */
function IsEmail(str) {
    var reg=/^\w+@[a-zA-Z0-9]{2,10}(?:\.[a-z]{2,4}){1,3}$/;
    return reg.test(str);
}

操做DOM元素的屬性

innerHTML：改變DOM樹的結構

innerText：不會改變，只會在元素裏面添加文本信息

$("div1").innerHTML="<a href='#'>點擊我</a>";
$("div2").innerText="<a href='#'>點擊我</a>";

setAttribute(屬性名,屬性值);

getAttrribute(屬性名);

removeAttribute(屬性名);

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style>
			img{
				width:200px;
				height:200px;
				border:1px solid red;
			}
		</style>
		<script>
			window.onload=function(){
                function $(id){
					return document.getElementById(id);
				}
                
				$("btn").onclick=function(){
					// 設置操做：將字符串../img/photo.jpg，賦值給img元素的src屬性
					$("myImg").setAttribute("src","../img/photo.jpg");
				}
				$("btn2").onclick=function(){
					var imgPath=$("myImg").getAttribute("src");
					alert(imgPath);
				}
				$("btn3").onclick=function(){
					$("myImg").removeAttribute("src");
				}
			}
		</script>
	</head>
	<body>
		<img src=""  id="myImg"/><br />
		<input type="button" id="btn" value="顯示圖像" />
		<input type="button" id="btn2" value="獲取圖像路徑" />
		<input type="button" id="btn3" value="刪除圖像路徑" />
	</body>
</html>

節點操做

parentNode：訪問子節點的父節點

children：訪問父節點的子節點

建立和插入子節點

  createElement： 創建子節點

  insertBefore：插入子節點

removeChild：刪除父節點的子節點

cloneNode：克隆子節點

全選、全否、反選案例

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>全選、全否、反選</title>
		<script>
			window.onload=function (){
				function $(id){
					return document.getElementById(id);
				}
				/**
				 * 1.定義變量hobbys：存儲全部選擇的愛好
				 * 2.遍歷全部的複選框，取出複選框的值，追加到hobbys變量中
				 * 3.將hobbys變量的值，設置到文本框
				 * */
				// 獲取全部的愛好
				var hobbyList =document.getElementsByName("hobby");
				var hobbys="";
				$("btn1").onclick=function(){
					for(var i=0;i<hobbyList.length;i++){
						hobbyList[i].checked=true;
						hobbys+=hobbyList[i].value+"-";
					}
					$("txtResult").value=hobbys;
				}
				// 全否
				$("btn2").onclick=function(){
					for(var i=0;i<hobbyList.length;i++){
						hobbyList[i].checked=false;
					}
					// 清空以前全選的數據
					hobbys="";
					$("txtResult").value="";
				}
				// 反選：獲取全部的愛好集合，遍歷每一個元素，進行取反操做(true->false, false->true)
				$("btn3").onclick=function(){
					hobbys="";
					for(var i=0;i<hobbyList.length;i++){
						//條件成立表示以前已經選中了，true改成false
						if(hobbyList[i].checked){
							hobbyList[i].checked=false;
						}else{
							hobbyList[i].checked=true;
							//一旦選中將複選框的值追加到hobbys變量
							hobbys+=hobbyList[i].value+"-";
						}
					}
					// 將複選框選中的值設置到文本框
					$("txtResult").value=hobbys;
				}
			}
		</script>
	</head>
	<body>
		<input type="checkbox" name="hobby" value="football" />足球
		<input type="checkbox" name="hobby" value="basketball" />籃球
		<input type="checkbox" name="hobby" value="pingpong" />乒乓球
		<input type="checkbox" name="hobby" value="tennis" />網球
		<input type="checkbox" name="hobby" value="swimming" />游泳
		<br />
		<input type="button" id="btn1" value="全選" />
		<input type="button" id="btn2" value="全否" />
		<input type="button" id="btn3" value="反選" />
		<br />
		<input type="text" id="txtResult" size="50px"  placeholder="展現全部愛好"/>
	</body>
</html>

js中Window方法

一些其餘方法：

  • window.open() - 打開新窗口
  • window.close() - 關閉當前窗口
  • window.moveTo() - 移動當前窗口
  • window.resizeTo() - 調整當前窗口的尺寸
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程