2. 程式人生 > >【JavaScript】js02

【JavaScript】js02

阿新 • • 發佈：2017-05-19
mode oninput on() tag tle blur replace absolute padding

正則對象。
　　聲明：
　　　　//var reg = new RegExp(‘‘, ‘‘);// i,g 修正符。
　　　　// i，不區分大小寫，g 全局匹配。
　　　　//var reg = /\w/i;

　　方法：
　　　　//exec(); 如果匹配到，返回結果，如果匹配不到，返回 null
　　　　//test(); 如果匹配到，返回 true，如果匹配不到，返回 false

　　元字符。
　　　　. 查找單個字符，除了換行和行結束符。
　　　　\w 查找單詞字符。// 字母數字下劃線。
　　　　\W 查找非單詞字符。
　　　　\d 查找數字。
　　　　\D 查找非數字。
　　　　\s 查找空白符。
　　　　\S 查找非空白符。
　　量詞
　　　　+ 至少有一個。
　　　　* 0個或者多個。
　　　　? 0個或者一個。
　　　　{m,} 至少 m 個。
　　　　{m,n} m - n個。
　　　　{m} m 個。
　　　　^ 以什麽 開頭。
　　　　$ 以什麽 結尾。　　　

　　　　註意： js 對象大致分類。
　　　　　　內置對象。
　　　　　　自定義對象。new Object(); {}
　　　　　　DOM對象。

三，事件。
　　定義：就是瀏覽器（文檔）裏發生一件事。

　　準備知識。
　　　　網頁元素的默認行為。

　　事件的三要素。
　　　　事件源，
　　　　事件類型，
　　　　事件處理程序，

技術分享 
<div id="did" style="width: 200px;height: 200px;background: #f00;"></div>

<script type="text/javascript">
    
    //
 
 1. 獲取 did
    var did = document.getElementById(‘did‘);// did 就是事件源。

    // 2. 添加事件。
    // onclick 就是事件類型。
    did.onclick = function(e)// 事件處理程序。
    {
        // console.log(e);
        var x = e.clientX;
        var y = e.clientY;
        console.log(x + ‘:‘ + y);// 獲取鼠標距離窗口的坐標。

        var _x = e.pageX;
        
 
var _y = e.pageY;
        console.log(_x + ‘:‘ + _y);// 獲取鼠標距離文檔的坐標。

        did.innerHTML = x + ‘:‘ + y + "-----" + _x + ‘:‘ + _y;
        did.style.textAlign = ‘center‘;
        did.style.lineHeight = ‘200px‘;


        did.style.backgroundColor = ‘yellow‘;
    }

</script>
View Code

　　　　事件對象。
　　　　　　事件對象並不是必須的。根據需求，如果需要，就寫上。
　　　　　　事件對象，是系統自動封裝好的。不同的事件類型有不同的事件對象。

　　// 獲取鼠標距離窗口的坐標
　　　　//e.clientX;
　　　　e.clientY;
　　// 獲取鼠標距離文檔的坐標。
　　　　//e.pageX;
　　　　//e.pageY;

　　綁定事件。
　　　　//onclick="alert(111)"; 事件屬性綁定。DOM 0 級。

技術分享 
<div id="did" onclick="alert(‘111‘);" style="width:200px;background: #f00;height: 200px;"></div>
View Code

　　　　//did.onclick = function(){}// 匿名函數綁定。重復添加相同事件時，會覆蓋。

技術分享 
獲取元素。
var did = document.getElementById(‘did‘);
//  綁定事件。
did.onclick = function()
{
    alert(‘222‘);
}
View Code

　　　　//did.addEventListener// 添加事件監聽，可疊加多個相同事件。attachEvent()// 早期IE DOM 2 級。

技術分享 
//addEventListener 添加事件監聽。
var did = document.getElementById(‘did‘);

did.addEventListener(‘click‘, function(){
    alert(‘333‘);
});

did.addEventListener(‘click‘, function(){
    alert(‘333----2‘);
});
View Code

　　各種事件。
　　　　文檔事件。
　　　　　　onload，當文檔加載完成之後，執行（即事件源可以放在事件處理程序之後）。

技術分享 
<script type="text/javascript">
    
    // window 對象。
    window.onload = function()
    {
        // 1. 獲取元素。
        var did = document.getElementById(‘did‘);

        // 2. 綁定事件。
        did.onclick = function()
        {
            did.style.backgroundColor = ‘#0f0‘;
        }
    }

</script>

<div id="did" style="width: 200px;height: 200px;background: #f0f;"></div>
View Code

　　　　　　onunload，文檔卸載事件。// 兼容性有問題。
　　　　　　onbeforeunload，文檔卸載事件。// 兼容性有問題。
　　　　鼠標事件。
　　　　　　onclick，單擊。
　　　　　　ondblclick，雙擊
　　　　　　onmouseover，鼠標移入
　　　　　　onmouseout，鼠標移出
　　　　　　onmousemove，鼠標移動
　　　　　　onmousedown，鼠標按下
　　　　　　onmouseup，鼠標擡起
　　　　　　oncontextmenu，右鍵

　　　　　　例子：鼠標拖動div

技術分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 鼠標拖動 div</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }
    </style>
</head>
<body>

    <div id="did" style="width: 200px;height: 200px;background: #ccc;position: absolute;"></div>
    
    <script type="text/javascript">
        
        // 聲明全局變量。
        var _x = 0;
        var _y = 0;

        // 控制是否按下。
        var isDown = false;


        // 獲取元素。
        var did = document.getElementById(‘did‘);
        // 添加事件。
        did.onmousedown = function(e)
        {

            // 設置 為 true
            isDown = true;
            this.style.background = "#f00";
            this.style.cursor = ‘move‘;

            // 獲取鼠標的坐標。
            var mx = e.pageX;
            var my = e.pageY;
            // console.log(mx + ‘----‘ + my);
            
            // 獲取 div 的依稀量。
            var dx = did.offsetLeft;
            var dy = did.offsetTop;
            // console.log(dx + ‘----‘ + dy);
            
            _x = mx - dx;
            _y = my - dy;
        }

        window.onmousemove = function(e)
        {
            if(!isDown)
            {
                return ;
            }

            // 不停 地獲取鼠標的 坐標。
            var mmx = e.pageX;
            var mmy = e.pageY;

            // 計算div 新的位置。
            var newX = mmx - _x;
            var newY = mmy - _y;

            // 設置 div 的位置。
            did.style.left = newX + ‘px‘;
            did.style.top = newY + ‘px‘;


        }

        did.onmouseup = function()
        {
            isDown = false;
            this.style.background = ‘#ccc‘;
            this.style.cursor = ‘default‘;

        }

    </script>

</body>
</html>
View Code

　　　　鍵盤事件
　　　　　　onkeydown，keyCode ，表示你按下的是哪一個鍵。
　　　　　　onkeypress
　　　　　　onkeyup

　　　　　　例子：鍵盤移動div

技術分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 鍵盤 移動</title>
    <style type="text/css">
        *
        {
            margin: 0;
            padding: 0;
        }

        #con
        {
            width: 500px;
            height: 400px;
            background: #ccc;
            margin: 0 auto;
        }
        #did
        {
            position: absolute;
            width: 50px;
            height: 50px;
            background: blue;
        }
    </style>
</head>
<body>
    
    <div id="con">
        <div id="did"></div>
    </div>

    <script type="text/javascript">
        
        //獲取元素。
        var did=document.getElementById(‘did‘);
        var con=document.getElementById(‘con‘);

        //獲取con的left,top
        var conLeft=con.offsetLeft;
        var conTop=con.offsetTop;

        //獲取con的寬度、高度
        var conWidth=con.offsetWidth;
        var conHeight=con.offsetHeight;

        //獲取did的寬度、高度
        var didWidth=did.offsetWidth;
        var didHeight=did.offsetHeight;

        //步進速度
        var step=2;

        //定義判斷是否有計時器存在的變量
        var inte=null;

        //添加事件
        window.onkeydown=function(e){

            //獲取代碼。
            var keyCode=e.keyCode;
            switch(keyCode) {
                case 37:
                    moveLeft();
                    break;
                case 38:
                    moveUp();
                    break;
                case 39:
                    moveRight();
                    break;
                case 40:
                    moveDown();
                    break;
            }

        }

        function moveLeft(){

            //判斷當前是否有定時器存在
            if (inte!=null) {
                return;
            }

            inte=setInterval(function(){

                //獲取原來的left
                var oldLeft=did.offsetLeft;

                //計算現在的left
                var newLeft=oldLeft-step;

                var minLeft=conLeft;

                //判斷邊界
                if (newLeft<minLeft) {
                    newLeft=minLeft;
                }

                //設置
                did.style.left=newLeft+‘px‘;

                },1);

        }

        function moveRight(){

            if (inte!=null) {
                return;
            }

            inte=setInterval(function(){

                //獲取原來的left
                var oldLeft=did.offsetLeft;

                //計算。
                var newLeft=oldLeft+step;

                //最大邊界
                var maxLeft=conLeft+conWidth-didWidth;

                //判斷
                if (newLeft>maxLeft) {
                    newLeft=maxLeft;
                }

                //設置
                did.style.left=newLeft+‘px‘;

            },1)

        }

        function moveDown(){

            if (inte!=null) {
                return;
            }

            inte=setInterval(function(){

                //獲取原來的top
                var oldTop=did.offsetTop;

                //計算。
                var newTop=oldTop+step;

                //最大邊界
                var maxTop=conTop+conHeight-didHeight;

                //判斷
                if (newTop>maxTop) {
                    newTop=maxTop;
                }

                //設置
                did.style.top=newTop+‘px‘;

            },1)

        }

        function moveUp(){

            //判斷當前是否有定時器存在
            if (inte!=null) {
                return;
            }

            inte=setInterval(function(){

                //獲取原來的top
                var oldTop=did.offsetTop;

                //計算現在的top
                var newTop=oldTop-step;

                var minTop=conTop;

                //判斷邊界
                if (newTop<minTop) {
                    newTop=minTop;
                }

                //設置
                did.style.top=newTop+‘px‘;

                },1);

        }

        //鍵盤擡起事件。
        window.onkeyup=function(){

            //清除定時器
            clearInterval(inte);
            inte=null;

        }

    </script>

</body>
</html>
View Code

　　　　表單事件。
　　　　　　onfoucs，獲取焦點事件。
　　　　　　onblur，失去焦點事件。

　　　　　　例子：移入移出正則驗證

技術分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 表單事件 onfocus onblur</title>
    <style type="text/css">
        #inp
        {
            height: 30px;
            border:1px solid #ccc;
            font-size: 14px;
            line-height: 30px;
            padding-left:10px;
        }
    </style>
</head>
<body>
    
    <input id="inp" type="text" name="username" value="">

    <script type="text/javascript">
        
        //獲取元素
        var inp=document.getElementById(‘inp‘);

        //獲取焦點。
        inp.onfocus=function(){

            // alert(‘111‘);

            this.style.border=‘1px solid blue‘;

        }

        inp.onblur=function(){

            //獲取當前字符串
            var value=this.value;

            //聲明正則。
            var reg=/^\w{6,18}$/;

            //驗證。
            var res=reg.test(value);

            if (res) {
                this.style.border=‘1px solid green‘;
            }else{
                this.style.border=‘1px solid red‘;
            }

        }

    </script>

</body>
</html>
View Code

　　　　　　onsubmit，表單提交事件。
　　　　　　onreset，表單重置事件。

　　　　　　例子：表單正則驗證

技術分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 表單提交和重置 事件onsubmit onreset</title>
    <style type="text/css">
        #inp
        {
            height: 30px;
            border:1px solid #ccc;
            font-size: 14px;
            line-height: 30px;
            padding-left:10px;
        }
    </style>
</head>
<body>
    
    <form id="myform" accept="">
        <input type="text" name="username" id="inp"><br>

        <input type="submit" name="" value="提交">
        <input type="reset" name="" value="重置">
    </form>

    <script type="text/javascript">
        
        //獲取元素。
        var myform=document.getElementById(‘myform‘);
        var inp=document.getElementById(‘inp‘);

        //添加提交事件。
        myform.onsubmit=function(){

            //獲取當前字符串
            var value=inp.value;

            //聲明正則
            var reg=/^\w{6,18}$/;

            //驗證。
            var res=reg.test(value);

            if (res) {
                inp.style.border=‘1px solid green‘;
            }else{
                inp.style.border=‘1px solid red‘;
                return false;
            }

        }

        //添加重置事件
        myform.onreset=function(){

            // return false;
            //confirm 確認框
            var res=confirm(‘是否要重置？‘);

            if (!res) {
                return false;
            }

        }

    </script>

</body>
</html>
View Code

　　　　　　onchange，下拉框事件。// 城市聯動。

　　　　　　例子：城市聯動

技術分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 城市聯動</title>
</head>
<body>
    
    <select id="p">
        
    </select>

    <select id="c">
        
    </select>
    

    <script type="text/javascript">
        
        // 獲取元素。
        var p = document.getElementById(‘p‘);
        var c = document.getElementById(‘c‘);

        // 創建省市關系。
        var pro = [‘北京‘, ‘河北‘, ‘河南‘, ‘山東‘, ‘山西‘];
        var city = [];
        city[0] = [‘昌平‘, ‘朝陽‘, ‘海澱‘, ‘東城‘];
        city[1] = [‘石家莊‘, ‘保定‘, ‘唐山‘, ‘廊坊‘];
        city[2] = [‘鄭州‘, ‘駐馬店‘, ‘洛陽‘, ‘漯河‘ ];
        city[3] = [‘青島‘, ‘煙臺‘, ‘濟南‘, ‘德州‘];
        city[4] = [‘太原‘, ‘長治‘, ‘運城‘, ‘呂梁‘];

        // 寫業務。
        var pstr = ‘‘;
        for(var i = 0; i < pro.length; i ++)
        {
            pstr += "<option value="+ i +">"+ pro[i] +"</option>";
        }

        p.innerHTML = pstr;


        // 添加事件。
        p.onchange = function()
        {
            init();
        }

        init();

        // 封裝函數。
        function init()
        {
            var cstr = ‘‘;
            // 獲取當前省份的下標。
            var value = p.value;

            for(var j = 0; j < city[value].length; j ++)
            {
                
                cstr += "<option value="+ j +">"+ city[value][j] +"</option>";
            }
            
            c.innerHTML = cstr;
        }


    </script>
</body>
</html>
View Code

　　　　　　onselect，文本選中事件。
　　　　　　oninput，正在輸入事件。

　　　　圖片事件。
　　　　　　onerror，圖片加載失敗事件。

　　　　窗口事件。
　　　　　　onresize

　　　　滾動事件。
　　　　　　onscroll

　　　　獲取多個元素。 document.getElementsByTagName();
　　　　循環內部，要找到當前對象，使用 this。


　　　　事件的冒泡。（如兩個div相套時，點擊上方的小div時會先觸發小div的事件再觸發大div的事件）
　　　　　　// 阻止事件冒泡。
　　　　　　e.stopPropagation();

　　　　　　例子：阻止事件冒泡

技術分享 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js 冒泡。</title>
    <style type="text/css">
        
        #d1
        {
            width: 300px;
            height: 300px;
            background: #f00;
            position: relative;
        }

        #d2
        {
            position: absolute;
            left:100px;
            top:100px;
            width: 100px;
            height: 100px;
            background: yellow;
        }

    </style>
</head>
<body>
    
    <div id="d1">
        <div id="d2"></div>
    </div>


    <script type="text/javascript">
        
        // 獲取元素。
        var d1 = document.getElementById(‘d1‘);
        var d2 = document.getElementById(‘d2‘);


        d1.onclick = function(e)
        {
            alert(‘d1‘);
        }

        d2.onclick = function(e)
        {
            // 阻止事件冒泡。
            e.stopPropagation();
            alert(‘d2‘);
        }

    </script>
</body>
</html>
View Code

獲取計算後的樣式。
var style = getComputedStyle(對象);
style.width;
style.background;

全選，反選，全不選。

三，DOM，文檔對象模型。document Object Model。

在學習 HTML 的階段，我們認為 html 中的所有內容都叫元素。
在學習 js 階段，我們把html 中的所有內容都叫 節點。

節點類型。
元素節點
屬性節點
文本節點
註釋節點
文檔節點
節點關系。
childNodes
children
firstChild
firstElementChild
lastChild
lastElementChild
previousSibling
previousElementSibling
nextSibling
nextElementSibling
parentNode
parentElement

通用方法。
document.getElementById
document.getElementsByTagName
document.getElementsByName
document.getElementsByClassName

節點操作。
document.createElement(‘img‘);
did.appendChild(img);
did.insertBefore(img, childNode);
did.setAttribute(‘src‘, ‘./images/1.jpg‘);
did.getAttribute(‘src‘);
did.replaceChild()
did.removeChild()
document.createAttribute();
document.createTextNode();
img.clone();
img.clone(true);

【JavaScript】js02

相關推薦

【JavaScript】js02

mode oninput on() tag tle blur replace absolute padding 正則對象。 　　聲明： 　　　　//var reg = new RegExp(‘‘, ‘‘);// i,g 修正符。

【JavaScript】讓事件支持先發布後訂閱

class 問題 想要 png trigger 很快 9.png area ++ 之前寫過一個的事件管理器，就是普通的先訂閱後發布模式。但實際場景中我們需要做到後訂閱的也能收到發布的消息。比如我們關註微信公眾號，還是能看到歷史消息的。類似於qq離線消息，我先發給你，你登錄了

【Javascript】call 和aplly

方法的參數 call ava apply 調用 javascrip bsp 方法 rip apply和call是Function類型的原型函數。所有的函數都會自動繼承這兩個方法。 func.apply(thisArg, [argsArray])func.call(thisA

【JavaScript】插件參數的寫法

log var [0 gin script ams selector lpar cti 就是實現復制的一個過程 (function() { var Explode = function(container, params) { ‘use stric

【JavaScript】explode動畫

lte ctu 起點 運動 max cnblogs pic 位置 raw 這是一個js實現的粒子聚合文字或圖片的動畫特效 部分程序如下 n.container = n.container[0] || n.container; /*有且僅有一個cont

【JavaScript】富文本編輯器

bject repl active last rri file data 樣式 current 這是js寫的富文本編輯器，還存在一些bug，但基本功能已經實現，通過這個練習，鞏固了js富文本編輯方面的知識，裏面包含顏色選擇器、全屏、表情、上傳圖片等功能，每個功能實際對應的就

【JavaScript】particle

page 循環 通過 and die 不支持 rst window inner 這是js實現的粒子動畫，有兩種模式，分別是zoom和line，它們對應的效果不同，但是原理都相同，具體分析如下： 部分程序如下： var p = this;

【JavaScript】筆記01——Making Stuff Happen？？？

文件 eight tin clas 快捷 strong init chrome scrip While, generally speaking, HTML is for content and CSS is for presentation, JavaScript is

【JavaScript】時間戳轉日期格式

number cnblogs 數據 style .ajax con etime subst new 時間戳： 1480570979000 $.ajax({ url : "getOrderMsg?ship

【JavaScript】離開頁面前提示

bin clas 什麽 || pos 窗體 art 提示 java 離開頁面前的提示不能夠用onunload去做，由於它僅僅是兼容IE，你要兼容Google與FireFox就蛋疼了。 並且這個事件還是關閉之後才會觸發的。 取而代之能夠用onbeforeunloa

【javascript】詳解javascript閉包 — 大家準備好瓜子，我要開始講故事啦~~

重要 參數 銷毀 弘揚 它的 bject 標題 多層嵌套 早就 前言： 在這篇文章裏，我將對那些在各種有關閉包的資料中頻繁出現，但卻又千篇一律，且曖昧模糊得讓人難以理解的表述，做一次自己的解讀。或者說是對“紅寶書”的《函數表達式/閉包》的那一章節所寫

【JavaScript】JavaScript(V8)實現輸入輸出

https func split 舉例 tps blog turn 輸出 ret 首先看牛客網的樣例：https://www.nowcoder.com/questionTerminal/dae9959d6df7466d9a1f6d70d6a11417 計算a+b的和，每行包

【JavaScript】read_line()、print()實現輸入輸出

包含 col line div () parseint 一個 print split /*輸入 輸入的第一行為一個正整數T，表示有T組測試數據。隨後的T行中，每行為一組測試數據。 每組測試數據包含由3個正整數構成，分別為N、M和a，其中1<=N, M, a <

【javascript】異步編年史，從“純回調”到Promise

條件 one org 場景 存在 gofunc ges 語句 += 異步和分塊——程序的分塊執行 一開始學習javascript的時候， 我對異步的概念一臉懵逼， 因為當時百度了很多文章，但很多各種文章不負責任的把籠統的描述混雜在一起，讓我對

【javascript】slice()的用法

spl 定位 .html 指定位置 gree 只需要 相等 綜合應用 個數 js splice()的用法 在javascript中splice()方法有如下3種方式： 刪除——可以刪除任意數量的項，只需要指定2個參數：要刪除的第一項的位置和要刪除項的項數。 例如，s

【javascript】JavaScript數組常用方法

map return 函數調用 turn 就會 開頭 滿足 函數 沒有 JavaScript數組常用方法 一、數組創建 1.（1）使用Array創建數組： 1 var arr1 = new Array(); //創建一個空數組 2 var arr2 = new Array

【javascript】正則表達式match、exec和test的使用

p s 下標 mat http [0 使用 regex es2017 false 正則表達式match、exec和test的使用 match和exec在匹配成功時返回的都是數組，在沒有匹配上時返回的都是null；test在匹配成功是返回true，在沒有匹配時返回的是fals

【JavaScript】設計模式-module模式及其改進

uid ... hello 代碼 first 其中 nbsp amp 初學者 寫在前面 編寫易於維護的代碼，其中最重要的方面就是能夠找到代碼中重復出現的主題並優化他們，這也是設計模式最有價值的地方 說到這裏...... 《head first設計模式》裏有一篇文章，是說使用

【javascript】DOM操作方法（1）——節點屬性

demo1 tex rip tar nerd 屬於 fin ntb art 一、節點屬性Node.nodeName //返回節點名稱，只讀 Node.nodeType //返回節點類型的常數值，只讀 Node.nodeValue //返回Text或Comment

【javascript】數據結構-集合

一個 turn itl ole ctype rop highlight per text <!DOCTYPE html> <html> <head> <title>集合</title> <meta ch