Html之JavaScript學習筆記02

1.js的常用事件（一定知道）

onfocus(獲得焦點事件)
onblur（失去焦點的事件）

<body>
    用戶名:<input id="name" type="text" name="name" /><span id="spanname"></span>
</body>
<script type="text/javascript">
    var txt=document.getElementById("name");
    var spantxt=document.getElementById("spanname");
    //獲得焦點
    txt.οnfοcus=function(){
        document.getElementById("spanname").innerHTML="用戶名至少6位";
    }
    //失去焦點
    txt.οnblur=function(){
        var s=txt.value;
        if(s.length<6){
            spantxt.innerHTML="錯誤,用戶名至少6位";
        }else{
            spantxt.innerHTML="";
        }
    }
</script>

onchange事件(select控件選中值發生改變)

<body>
    <select id="province">
        <option value="js">江蘇</option>
        <option value="sh">上海</option>
    </select>
    <select id="city">
        <option>南京</option>
        <option>蘇州</option>
        <option>無錫</option>
    </select>
</body>
<script type="text/javascript">
    var p=document.getElementById("province");
    var c=document.getElementById("city");
    p.οnchange=function(){
        var selectP=p.value;
        if(selectP=="js"){
            c.innerHTML="<option>南京</option><option>蘇州</option><option>無錫</option>";
        }else if(selectP=="sh"){
            c.innerHTML="<option>浦東</option><option>浦西</option><option>徐匯</option>";
        }
    }
</script>

鼠標事件

onmouseover（鼠標移動到指定元素上方）
onmouseout(鼠標移出指定元素)
onmousedown(鼠標按下)
onmouseup(鼠標彈起)
onload 事件

<body>
    <div id="box"></div>
</body>
<script type="text/javascript">
    var b=document.getElementById("box");
    //鼠標移動到指定元素上
    b.οnmοuseοver=function(){
        b.style.background="orangered";
        b.innerHTML="鼠標移動到與元素上onmousedown";
    }
    //鼠標被按下
    b.οnmοusedοwn=function(){
        b.style.background="greenyellow";
        b.innerHTML="鼠標被按下onmousedown";
    }
    //鼠標從指定元素移出
    b.οnmοuseοut=function(){
        b.style.background="pink";
        b.innerHTML="鼠標從指定元素移出onmouseout";
    }
//  b.οnmοusemοve=function(){
//      b.style.background="palevioletred";
//  }
    //鼠標彈起
    b.οnmοuseup=function(){
        b.style.background="#A9BBE7";
        b.innerHTML="鼠標彈起onmouseup";
    }
</script>

阻止默認行爲：(瞭解)

<a href="#" onclick="clickA(event)">點我</a>
<script type="text/javascript">
   function clickA(e) {
    //查看e是否存在preventDefault方法
    //火狐瀏覽器(w3c標準)
    if(e && e.preventDefault) {
     //組織默認行爲
     e.preventDefault();
    }
    //ie瀏覽器(後期版本的ie也遵從了w3c規範)
    else {
     window.event.returnValue = true;
    }
   }
  </script>

阻止事件傳遞：（瞭解）

<div id="box" onclick="boxclicked(event)">
   <div id="inner" onclick="innerclicked(event)"></div>
</div>
<script>
   function boxclicked(e) {
    alert("box");
    //該瀏覽器是否遵循w3c規範
    if(e && e.stopPropagation) {
     e.stopPropagation();
    }
    //ie
    else {
     window.event.cancelBubble = true;
    }
   }
   function innerclicked(e) {
    alert("inner");
    //該瀏覽器是否遵循w3c規範
    if(e && e.stopPropagation) {
     e.stopPropagation();
    }
    //ie
    else {
     window.event.cancelBubble = true;
    }
   }
  </script>

關於隱藏和顯示
設置Style.display=”none” 隱藏之後不會佔位置
設置Style.visibility=”hidden”隱藏之後位置仍然存在

<html>
    <head>
        <meta charset="UTF-8">
        <title>事件練習</title>
    </head>
    <body>
        <img id="pic" src="../2.17Pro/bookcover/fish.jpg" />
        <span id="show">顯示</span>
        <span id="hidden">隱藏</span>
    </body>
    <script type="text/javascript">
        document.getElementById("show").οnclick=function(){
            document.getElementById("pic").style.visibility="visible";
        }
        document.getElementById("hidden").οnclick=function(){
            document.getElementById("pic").style.visibility="hidden";
        }
    </script>
</html>

- js的自定義對象(面試非常喜歡問掌握):
自定義對象的方式：在javascript中，所有的對象都是通過函數來創建
- 1.直接通過無參的方法來創建,這種情況下，name的信息專屬於p，如果再new一個新的p，無法共享name

function Person(){}//函數
var p=new Person();//對象
p.name="小明";

2.通過構造方法來創建,這種情況下，name和age是屬於所有對象共有的信息

function Person2(name,age){
    this.name=name;
    this.age=age;
    this.say=function(){
    alert(this.name);
    }
}
var p2=new Person2("小紅","12");
p2.say();

3.通過Object來創建

 var p4=new Object();
p4.name="小黃";

4.通過字面量方式來創建

var p5={
    name:"小孩",
    age:"12",
    say:function(){
        alert(this.name);
    }
}
p5.say();

js的”繼承”（瞭解）

js中所有的對象都是從Object過來的
js中對象的分類：普通對象和函數對象

函數：擁有prototype屬性

prototype：顯示原型，記錄着所有實例公用的屬性和方法，主要是用來繼承用的(被子類用的)

對象：擁有__proto__

__proto__：隱式原型，對於普通對象而言，這個記錄這父類的prototype

函數對象：同時擁有prototype，__proto__兩個屬性

ECMAScript6開始:js就開始支持class
關於給一個函數添加方法一定要會:(掌握)
String.prototype.reverse=function(){
}
3.javascript組成

1.ECMAScript

2.BOM

3.DOM

BOM : 瀏覽器對象模型（瞭解）

alert(“提示信息”);
confirm(“確認信息”); //該方法有返回值,點擊確認按鈕返回值是true，取消按鈕返回值false
prompt(“請輸入提示信息”); //該方法有返回值，點擊確認返回輸入的文本，點擊取消返回null
open(“網址”) //打開指定網頁

定時器：（瞭解）

var timer = null;
document.getElementById("start").onclick = function(){
  timer =  setInterval(function(){
   alert("xxx");
  },3000);
 }

document.getElementById("close").onclick = function(){
  clearInterval(timer);
}

location對象：

location.href = “指定網址”；讓當前頁面跳轉指定url（掌握）

DOM（掌握）

DOM：文檔對象模型

<html>
  <head></head>
  <body>
    <div id="aa"></div>
    <div></div>
  </body>
</html>
document.getElementById("aa")

當我們寫了一個html文本信息後，會自動將這個html文本轉化爲對象模型（DOM樹）
在DOM樹種，每一個交叉的地方都叫節點(Node)

Node節點的分類：（掌握）

文檔節點：document
元素節點：標籤
屬性節點：標籤的屬性值
文本節點：標籤的文本內容

常用方法：

getElementById(“”)；根據id找到符合條件的標籤

getElementByName(“”); 根據標籤的name找到所有符合條件的標籤

getElementByTagName(“”); 根據指定的標籤名找到所有符合條件的標籤

hasChildNodes() 查看一個節點是否擁有子節點

childNodes 獲取一個節點的子節點

nodeName查看節點名稱

nodeType 查看節點類型（1表示元素節點，2表示屬性節點，3表示文本節點）

nodeValue 查看節點值

firstChild 獲取某個節點下的第一個節點

getAttributeNode 獲取某個節點下的屬性節點

getAttribute 獲取某個節點下的屬性節點的值

setAttribute 設置某個節點下的屬性節點

注意：nodeValue屬性值對於元素節點，其值是不存在的，一般用innerHTML來訪問.
對於文本節點，nodeValue的值是文本值.對於屬性節點，nodeValue就是屬性值
掌握:

createElement 創建一個新節點

createTextNode 創建一個文本節點

appendChild 拼接子節點

insertBefore 在指定節點前面插入目標節點

removeChild 刪除節點

Html之JavaScript學習筆記02

Wireshark 安裝+使用（一）

購物車動態修改購買條數和總計(上一篇代碼的補充)

CSS完成一個帶跳轉功能的導航欄頁面

JSON的學習和使用

Html之JavaScript學習筆記02

CSS完成一個帶跳轉功能的導航欄頁面(修改之前代碼出現亂碼的情況)

Mac下配置sublime實現LaTeX

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結