• 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧

day 31 jQuery进阶

互联网 diligentman 3天前 5次浏览

jQuery中的Ajax:

在jQuery中,$.Ajax()方法属于最底层的方法,第2层是load(),$.get(),和$.post(),第3层是$.getScript()和$.getJSON()方法。

1. load() 方法

结构:load(url , [data] , [callback] )

案例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 文件

hello world;

结果:将url返回的内容当做该元素的innerHTML。

day 31 jQuery进阶

案例2:页面头部重复引用

load.html文件

<!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等那些结构)

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

程序员灯塔
转载请注明原文链接:day 31 jQuery进阶
喜欢 (0)