js操作属性、函数

作者: 松雪宝宝 | 来源:发表于2018-06-18 19:13 被阅读0次

（1）条件运算符

    条件运算符也叫三元运算符
        语法：
            条件表达式?语句1:语句2;
        - 执行的流程：
            条件运算符在执行时，首先对条件表达式进行求值，
                如果该值为true，则执行语句1，并返回执行结果
                如果该值为false，则执行语句2，并返回执行结果
            如果条件的表达式的求值结果是一个非布尔值，会将其转换为布尔值然后在运算

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>条件运算符</title>
    <script type="text/javascript">
        
        
        //true?alert("语句1"):alert("语句2");
        //false?alert("语句1"):alert("语句2");
        
        var a = 300;
        var b = 143;
        var c = 50;
        
        //a > b ? alert("a大"):alert("b大");
        
        //获取a和b中的最大值
        //var max = a > b ? a : b;
        //获取a b c 中的最大值
        //max = max > c ? max : c;
        
        //这种写法不推荐使用，不方便阅读
        var max = a > b ? (a > c ? a :c) : (b > c ? b : c);
        
        //console.log("max = "+max);
        
        //"hello"?alert("语句1"):alert("语句2");
    </script>
</head>
<body>

</body>
</html>

(2)运算符的优先级
运算符
使用,可以分割多个语句，一般可以在声明多个变量时使用

    就和数学中一样，在JS中运算符也有优先级，
        比如：先乘除 后加减
    在JS中有一个运算符优先级的表，
        在表中越靠上优先级越高，优先级越高越优先计算
        如果优先级一样，则从左往右计算
    但是这个表我们并不需要记忆，如果遇到优先级不清楚
        可以使用()来改变优先级

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>运算符的优先级</title>
    <script type="text/javascript">
        
        //使用,运算符同时声明多个变量
        //var a, b, c;
        
        //可以同时声明多个变量并赋值
        //var a=1, b=2, c=3;
        //alert(b);
        
        
        // var result = 1 + 2 * 3;
        //var result = 1 + 23;
        
        /*
        如果||的优先级高，或者两个一样高，则应该返回3
        如果与的优先级高，则应该返回1
        */
        var result = 1 || 2 && 3;
        
        console.log("result = " + result);
    </script>
</head>
<body>

</body>
</html>

(3)代码块
我们的程序是由一条一条语句构成的
语句是按照自上向下的顺序一条一条执行的
在JS中可以使用{}来为语句进行分组,
同一个{}中的语句我们称为是一组语句，
它们要么都执行，要么都不执行，
一个{}中的语句我们也称为叫一个代码块
在代码块的后边就不用再编写;了

        JS中的代码块，只具有分组的的作用，没有其他的用途
            代码块内容的内容，在外部是完全可见的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>代码块</title>
    <script type="text/javascript">
        {
            var a = 10; 
            alert("hello");
            console.log("你好");
            document.write("语句");
        }
        
        console.log("a = "+a);
    </script>
</head>
<body>

</body>
</html>

(4)js操作属性
DOM是为了操作文档（网页）的API，document是它的一个对象
BOM是为了操作浏览器的API，window是它的一个对象
常用BOM对象还有：alert、定时器等

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js操作属性</title>
    <script type="text/javascript">
        
        //整个文档加载完之后执行一个匿名函数
        window.onload = function(){
            document.getElementById('div1').title = "我看到了！";
            //变量oA代表整个a标签
            var oA = document.getElementById('link1');
            oA.href = "http://www.tencent.com";
            oA.title = "跳转到腾讯网"
            alert(oA.id);
            alert(oA.title);
        }
    </script>
</head>
<body>
    <div id="div1" class="div1" title="这是div元素，看到了吗？">这是一个div元素</div>

    <a href="#" id="link1">腾讯网</a>


    <!-- <script type="text/javascript">
        document.getElementById('div1').title = "我看到了！";
    </script> -->
</body>
</html>

(5)js换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js换肤</title>
    <link rel="stylesheet" type="text/css" href="css/1.css" id="link1">

    <script type="text/javascript">
        window.onload = function(){
            var oLink = document.getElementById('link1');
            oLink.href = "css/2.css";
            alert(oLink.id);
        }
    </script>
</head>
<body>
    <div class="box01"></div>
    <div class="box02"></div>
</body>
</html>

(6)js操作style属性

style属性中的样式属性，没有"-"号的，写法相同
style属性中的样式属性，带"-"号的需要去掉"-"号，写成小驼峰式
例如：font-size属性要写为fontSize

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js操作style属性</title>
    <script type="text/javascript">
        window.onload = function() {
            var oDiv = document.getElementById('div1');
            oDiv.style.color = 'red';
            oDiv.style.background = 'gold';
        
            oDiv.style.fontSize = '30px';
        }
    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>
</body>
</html>

(7)js操作class
由于class是js中的保留关键字，所以设置class属性时，要写为className

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js操作class</title>
    <style type="text/css">
        .box01{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .box02{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        window.onload = function() {
            var oDiv = document.getElementById('div1');
            
            oDiv.className = 'box02';
        }
    </script>
</head>
<body>
    <div class="box01" id="div1"></div>
</body>
</html>

(8)js中括号操作属性
oDiv.style.color = 'red';//red必须加引号，否则会认为它是一个变量，引起来会认为它是一个值，赋值给=号左边
通过innerHTML可以读写元素包括的内容
读取标签里面包裹的元素，即“这是一个div元素
oDiv2.innerHTML = '这是第二个div元素';向div标签中插入内容
document.write和innerHTML的区别
document.write只能重绘整个页面
innerHTML可以重绘页面的一部分

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js中括号操作属性</title>
    <style type="text/css">
        .box01{
            width: 200px;
            height: 200px;
            background-color: gold;
        }
        .box02{
            width: 300px;
            height: 300px;
            background-color: red;
        }
    </style>
    <script type="text/javascript">
        window.onload = function(){
            var oDiv = document.getElementById('div1');
            //oDiv.style.color = 'red';//red必须加引号，否则会认为它是一个变量，引起来会认为它是一个值，赋值给=号左边
            var attr = 'color';
            // oDiv.style[attr] = 'red';
            /* 通过[]操作属性可以写变量 */
            oDiv['style'][attr] = 'red';
            alert(oDiv.innerHTML);
            var oDiv2 = document.getElementById('div2');
            oDiv2.innerHTML = "<a href='http://www.baidu.com'>百度网</a>";//向div标签中插入超链接标签
        
        }
    </script>
</head>
<body>
    <div id="div1">这是一个div元素</div>
    <div id="div2"></div>
</body>
</html>

(9)js函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js函数</title>
    <script type="text/javascript">
        function aa(){
            alert('hello!');
        }
        /*
        //直接调用
        aa();
        */
    </script>
</head>
<body>
    <input type="button" name="" value="弹框" onclick="aa()" />
</body>
</html>

(10)js可控换肤

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js换肤</title>
    <link rel="stylesheet" type="text/css" href="css/1.css" id="link1">

    <script type="text/javascript">
        window.onload = function(){
            /* 提取行间事件 */
            var oBtn01 = document.getElementById('btn01');
            var oBtn02 = document.getElementById('btn02');
            oBtn01.onclick = skin01;//这里不能写skin01()，这样写就马上执行了
            oBtn02.onclick = skin02;
        }
        function skin01(){
            var oLink = document.getElementById('link1');
            oLink.href = "css/1.css";
        }
        function skin02(){
            var oLink = document.getElementById('link1');
            oLink.href = "css/2.css";
        }
    </script>
</head>
<body>
    <!-- 
    行间调用函数
    <input type="button" name="" value="皮肤01" onclick="skin01()" />
    <input type="button" name="" value="皮肤02" onclick="skin02()" /> -->
    <input type="button" name="" value="皮肤01" id="btn01" />
    <input type="button" name="" value="皮肤02" id="btn02" />
    <div class="box01"></div>
    <div class="box02"></div>
</body>
</html>

js操作属性、函数

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读