JavaScript学习一

2018-09-19 本文已影响0人 qianxun0921

条件运算符（三元运算符，也叫三目运算）

语法：

条件表达式？语句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>

新建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; 
    }

在主页面利用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属性

在body标签中定义一个class为box01，id为div1的div

<body>
    <div class="box01" id="div1"></div>
</body>

在style标签中设置box01样式，再添加一个box02的样式

<style type="text/css">
    .box01{
        width:200px;
        height:200px;
        background-color:gold;
    }
    .box02{
        width:300px;
        height:300px;
        background-color:red;
    }
</style>

用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>