JavaScript學習一

weixin_33978044發表於2018-09-19
JavaScript

條件運算子（三元運算子，也叫三目運算）

語法：

條件表示式？語句1：

執行流程：

首先對條件表示式進行求值
如果該值為true，則執行語句1，並返回執行結果
如果該值為false，則執行語句2，並返回執行結果

例如：
true ? alert('語句1') ：alert('語句2');

先判斷表示式true，則執行‘語句1’

false ? alert('語句1') ：alert('語句2');

先判斷表示式為false，則執行‘語句2’

JS操作屬性

DOM：document是它的一個物件
BOM：為了操作瀏覽器的API，window是它的一個物件
常用的BOM物件還有alert、定時器等

可以使用document來獲取body標籤中的元素，例如：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/script">
            document.getElementById('div1');
        </script>
    </head>
    <body>
        <div id="div1" class="div1" title="這是div元素，看到了沒？">這是一個div元素</div>
    </body>
</html>

如果想要利用document來獲取元素的屬性，可以這樣做：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/script">
           /* document.getElementById('div1');*/
            window.onload=function(){
                /*通過document獲取元素的屬性，並修改屬性*/
                document.getElementById('div1').title="我看到了！";
                /*可以為元素設定連結*/
                document.getElementById('link').href="http://www.baidu.com";
            }
        </script>
    </head>
    <body>
        <div id="div1" class="div1" title="這是div元素，看到了沒？">這是一個div元素</div>
        <a href="#" id="link">百度網</a>
    </body>
</html>

JS換膚

1.首先在主頁面body標籤中定義兩個div，分別為box1、box2

<body>
    <div class="box1"></div>
    <div class="box2"></div>
</body>
  1. 新建css檔案，為box1、box2以及body進行樣式設定，在主頁面使用link標籤進行引入，再次新建css檔案，並進行不同的樣式設定
    style.css
body{
        background-color :#ddd;
    }
.box1{
        width: 200px;
        height: 200px;
        float: left;;
        background-color: red;
        margin: 20px;
    }
.box2{
        width: 200px;
        height: 200px;
        background-color: green;
        float: left;
        margin: 20px; 
    }

2.css

body{
        background-color :gray;
    }
.box1{
        width: 200px;
        height: 200px;
        float: left;;
        background-color: yellow;
        margin: 20px;
    }
.box2{
        width: 200px;
        height: 200px;
        background-color:blue;
        float: left;
        margin: 20px; 
    }
  1. 在主頁面利用JavaScript程式碼進行換膚
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" href="css/style.css" id="link">
        <script type="text/javascript">
            window.onload=function(){
                var link = document.getElementById('link');
                link.href="css/2.css";
                alert(link.id);
        }
        </script>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
    </body>
</html>

js操作style屬性

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            window.onload=function(){
                var box = document.getElementById('box');
                box.style.fontSize = '50px';
            }
        </script>
    </head>
    <body>
        <div id="box">這是一個box標籤</div>
    </body>
</html>

js操作class屬性

  1. 在body標籤中定義一個class為box01，id為div1的div
<body>
    <div class="box01" id="div1"></div>
</body>
  1. 在style標籤中設定box01樣式，再新增一個box02的樣式
<style type="text/css">
    .box01{
        width:200px;
        height:200px;
        background-color:gold;
    }
    .box02{
        width:300px;
        height:300px;
        background-color:red;
    }
</style>
  1. 用JavaScript程式碼進行class屬性操作
<script type="text/javascript">
            window.onload = function(){
                var div1 = document.getElementById('div1');
                div1.className = 'box02';
            }
        </script>

js函式

示例程式碼：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <script type="text/javascript">
            function aa(){
                alert('hello!')
            }
            
            aa();
        </script>
    </head>
    <body>
        <input type="button" value="彈框" onclick="aa()">
    </body>
</html>

相關文章