前端

1.閉包

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>閉包</title>
    <script type="text/javascript">
        /*
        閉包的本質(zhì)就是函數(shù)嵌套，就是在函數(shù)里面定義函數(shù)，
        內(nèi)部函數(shù)可以引用外部函數(shù)的參數(shù)和變量
        參數(shù)和變量不會被垃圾回收機制給回收
        閉包的用途：可以存循環(huán)的索引值、做私有變量計數(shù)器
        */
        /*
        //閉包的一般寫法
        function aa(b){
            var a = 12;

            function bb(){
                alert(a);
                alert(b);
            }

            return bb;
        }

        var cc = aa(24);*/

        
        //閉包的封閉函數(shù)寫法
        var cc = (function(b){
            var a = 12;

            function bb(){
                alert(a);
                alert(b);
            }

            return bb;
        })(24);

        cc();
        

        /*
        //只能調(diào)用一次的閉包
        (function(b){
            var a = 12;

            function bb(){
                alert(a);
                alert(b);
            }

            return bb;
        })(24)();
        */
    </script>
</head>
<body>
    
</body>
</html>

2.JQ加載

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery加載</title>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        // alert($);//彈出function (a,b){return new n.fn.init(a,b)}表示JQuery已經(jīng)引進來了，這是它的一個構(gòu)造函數(shù)

        //JS寫法
        window.onload = function(){
            var oDiv = document.getElementById('div');
            alert(oDiv.innerHTML);//這是一個div元素
        }

        //jQuery的完整寫法
        //比上面JS寫法先彈出，因為window.onload是把頁面元素加載、渲染完才彈出，而ready()是把所有頁面的節(jié)點加載完之后就彈出了，不用等渲染了
        /*$(document).ready(function(){
            var $div = $('#div');
            alert('jQuery:' + $div.html());//jQuery:這是一個div元素
        })*/

        //簡寫方式
        $(function(){
            var $div = $('#div');//CSS樣式怎么寫，這里就怎么寫
            //html()方法相當(dāng)于原生JS的innerHTML
            alert($div.html() + 'jQuery');
        })
    </script>
</head>
<body>
    <div id="div">這是一個div元素</div>
</body>
</html>

3.JQ選擇器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>jQuery選擇器</title>
    <style type="text/css">
        #div1{
            color: red;
        }
        .box{
            color: green;
        }
        .list li{
            margin-bottom: 10px;
        }
    </style>
    <script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>
    <script type="text/javascript">
        $(function(){
            //選擇元素的規(guī)則和css樣式相同
            $('#div1').css({color: 'pink'});
            $('.box').css({fontSize: '30px'});
            $('.list li').css({
                background: 'green',
                color: '#fff',
                fontSize: '20px',
                marginBottom: '10px'
            });
        })
    </script>
</head>
<body>
    <div id="div1">這是一個div元素</div>
    <div class="box">這是第二個div元素</div>
    <ul class="list">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點，簡書系信息發(fā)布平臺，僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容