初探JavaScript魅力

JavaScript是什么？

網(wǎng)頁特效原理

  • 淘寶、新浪、報讀
  • JavaScript就是修改樣式

編寫JS的流程

  • 布局：HTML+CSS
  • 屬性：確定要修改哪些屬性
  • 事件：確定用戶做哪些操作（產品設計）
    -編寫JS：在事件中，用JS來修改頁面元素的樣式

第一個JS特效——鼠標提示框

分析效果實現(xiàn)原理:

  • 樣式：div的display
  • 事件：onmouseover、onmouseout
  • 動手編寫此效果

特效基礎

  • 事件驅動：onmouseover
  • 元素屬性操作：obj.style.[……]
  • 特效實現(xiàn)原理概括：相應用戶操作，對頁面元素（標簽）進行某種修改

代碼如下：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #div1 {
            width: 200px;
            height: 100px;
            background:#e2e1e1;
            border:1px solid #999;
            display: none;
        }
    </style>
</head>
<body>
    <!-- 鼠標經過提示功能： -->
    <input type="checkbox">
    <label for="" onmouseover="document.getElementById('div1').style.display='block';" onmouseout="document.getElementById('div1').style.display='none';">兩周內自動登錄</label>
    <div id="div1">
        為了您的信息安全，請不要在網(wǎng)吧、公司或者其他公共電腦上使用此功能……
    </div>
</body>
</html>

初識函數(shù)

  • 制作更復雜的效果（DIV的顏色、大小都變化）
  • 直接在事件內寫代碼會很亂
    1、引入function()函數(shù)的基本形式
    2、把JS從標簽里放入到函數(shù)里，類似css的class
    3、變量的使用——別名
  • 定義和調用
    1、函數(shù)的定義：只是告訴系統(tǒng)有這個函數(shù)，不會實際執(zhí)行
    2、函數(shù)的調用：真正執(zhí)行函數(shù)里面的代碼
    3、關系和區(qū)別

初步使用函數(shù)：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style type="text/css">
        #div1 {
            width: 200px;
            height:200px;
            background:red;
        }
    </style>
</head>
<body>
    <div id="div1" onmouseover="toGreen()" onmouseout="toRed()"></div>
    <script>
        var oDiv = document.getElementById('div1');
        function toGreen() {
            oDiv.style.width='300px';
            oDiv.style.height='300px';
            oDiv.style.background='green';
        }
        function toRed() {
            oDiv.style.width='200px';
            oDiv.style.height='200px';
            oDiv.style.background='red';
        }
    </script>
</body>
</html>

getElementById

  • 這是一個兼容性問題
  • 在FF下直接使用id存在問題
    1、引入document.getElementById()
    2、doucument.getElementById在任何瀏覽器下均可使用
  • 網(wǎng)頁換膚
    1.土豆網(wǎng)“開燈、關燈”效果
    2.任何標簽都可以加id，包括link
    3.任何標簽的任何屬性，也可以修改
    4.HTML里面怎么寫，JS里就怎么寫

換膚：
HTML：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <link id="l1" rel="stylesheet" type="text/css" href="">
</head>
<body>
    <input type="button" value="皮膚1" onclick="skin1()">
    <input type="button" value="皮膚2" onclick="skin2()">
    <script>
        var oL = document.getElementById('l1');
        function skin1(){
            oL.href='css1.css';
        }
        function skin2(){
            oL.href='css2.css';
        }
    </script>
</body>
</html>

css1.css:

@charset "utf-8";

body {
    background-color: black;
}

input {
    width: 200px;
    height: 100px;
    background-color: yellow;
}

css2.css:

@charset "utf-8";

body {
    background-color: #ccc;
}

input {
    width: 100px;
    height: 50px;
    background-color: red;
}

HTML里面怎么寫，JS里就怎么寫:
如，修改input里面的文字：

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <input id="text1" type="text">
    <input type="button" value="改文字" onclick="setText()">
    <script>
        var oTxt = document.getElementById('text1');
        function setText(){
            oTxt.value="改變input里面的文字";
        }
        
    </script>
</body>
</html>

if判斷

if，翻譯過來就是“如果”的意思，if在javascript里面就是判斷，所謂判斷就是遇到不同的情況就做不同的操作，不同的問題就做不同的處理；
if的基本格式：

if(條件){
    //  語句1
}else{
    //  語句2
}

意思是，如果條件成立，那么執(zhí)行語句1，如果條件不成立，則執(zhí)行語句2

  • 點擊按鈕顯示/隱藏div（點擊下拉菜單）
    特效實現(xiàn)過程及原理分析

當點擊的時候
如果div是顯示的，則隱藏（oDiv.style.display='none'）
如果div是隱藏的，則顯示（oDiv.style.display='block'）

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1 {
            width: 100px;
            height: 200px;
            background-color: #ccc;
            border:1px solid #999;
            display: none;
        }
    </style>
</head>
<body>
    <button onclick="showHide()">更多></button>
    <div id="div1">
        <ul>
            <li>北京</li>
            <li>天津</li>
            <li>上海</li>
            <li>廣州</li>
            <li>深圳</li>
        </ul>
    </div>
    <script>
        function showHide(){
            var oDiv = document.getElementById('div1');
            if(oDiv.style.display == 'block'){
                oDiv.style.display = 'none';
            }else{
                oDiv.style.display = 'block';
            }
        }
    </script>
</body>
</html>
Paste_Image.png

if的基本形式

  • 擴展
    為a鏈接添加JS
<a href="javascript:;"></a>

className的使用:
DOM 0級事件綁定方式，可以將js事件代碼跟HTML分離；

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        #div1 {
            width: 100px;
            height: 200px;
            border:1px solid black;
        }
        .box {
            background-color: red;
        }
    </style>
</head>
<body>
    <button id="btn">變紅</button>
    <div id="div1">
        
    </div>
    <script>
        var oDiv = document.getElementById('div1');
        var oBtn = document.getElementById('btn');
        //DOM 0級事件處理程序：
        //將js事件代碼和HTML代碼相分離
        oBtn.onclick = function(){
            oDiv.className = "box";
        }
    </script>
</body>
</html>
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯(lián)系作者
【社區(qū)內容提示】社區(qū)部分內容疑似由AI輔助生成，瀏覽時請結合常識與多方信息審慎甄別。
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發(fā)布，文章內容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務。

相關閱讀更多精彩內容

  • 1.函數(shù) 1.1.函數(shù)的基礎知識 1.1.1.為什么要使用函數(shù) 在寫代碼的時候，有一些常用的代碼需要書寫多次，如果...
    想做一個畫家閱讀 96評論 0贊 0
  • 一、JS前言 （1）認識JS 也許你已經了解HTML標記(也稱為結構)，知道了CSS樣式(也稱為表示)，會使用HT...
    凜0_0閱讀 2,913評論 0贊 8
  • 在去尼泊爾之前，和高老師的對話 —“嘿 ，我終于要在畢業(yè)三年后的今天去尼泊爾了，只不過看著各路游記，有點失望，好發(fā)...
    行走的路癡少女閱讀 2,035評論 0贊 1
  • 雖然我們生活在同一個世界里，但是他會有兩個鏡像。一正一反，一陰一陽。，就像我們照鏡子一樣，我們舉右手，鏡子的你舉左...
    七年劍閱讀 368評論 2贊 0
  • 遇見我之前，阿聰做著自由旅者，以夢為馬，隨處可棲，他從未停下過， 遇見我之后，他開始在一個城市定居，安穩(wěn)工作，學著...
    白大貍閱讀 1,882評論 0贊 3

友情鏈接更多精彩內容