day 31 jQuery進階

時間 2021-02-23

標籤 javascript css html java post this url spa code htm 欄目 JQuery 简体版

原文原文鏈接

jQuery中的Ajax：javascript

在jQuery中，$.Ajax()方法屬於最底層的方法，第2層是load()，$.get()，和$.post()，第3層是$.getScript()和$.getJSON()方法。css

1. load() 方法

結構：load(url , [data] , [callback] )html

案例1： load(url)

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title></title>
    </head>
    <body>
        <div id="box">
            
        </div>
    </body>
</html>
<script src="myjQuery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
    $(function(){
        //load方法加載html
        $("#box").load("test.html");
    });
</script>

test.html 文件java

hello world；post

結果：將url返回的內容當作該元素的innerHTML。this

案例2：頁面頭部重複引用

load.html文件url

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            * {
                margin: 0;
                padding: 0;
            }

            header {
                height: 100px;
                background: yellow;
            }

            header ul {
                height: 100px;
                width: 800px;
                position: relative;
                margin: 0 auto;
                opacity: 0.5;
            }

            header ul li {
                list-style: none;
                width: 150px;
                background: red;
                text-align: center;
                line-height: 100px;
                border: 1px solid black;
                float: left;
            }

            section {
                height: 300px;
                background: green;
                opacity: 0.3;
            }

            footer {
                height: 300px;
                background: blue;
                opacity: 0.3;
            }
        </style>
    </head>
    <body>
        <header>


        </header>
        <section>


        </section>
        <footer>

        </footer>
    </body>
</html>
<script src="jQuery.js"></script>
<script type="text/javascript">
    $('header').load("head.html",function(){
        $("li").click(function(){
            console.log($(this).html());
        });
    });
</script>

head.html文件(直接是代碼，不須要寫html head body等那些結構)spa

<ul>
    <li>主題1</li>
    <li>主題2</li>
    <li>主題3</li>
    <li>主題4</li>
    <li>主題5</li>
</ul>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。