jQuery中的load方法

最新推荐文章于 2024-04-13 00:36:36 发布

素描本里的男子

最新推荐文章于 2024-04-13 00:36:36 发布

阅读量1.5k

点赞数 2

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/weixin_44963099/article/details/91038238

版权

jQuery 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

结构 load( url , [data] , [callback] ) 参数解释: 1.1 应用案例：简单的load使用

<!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("testFile/test1.txt",function(){
            //异步操作
            console.log($("#box").html());
        });
    });
</script>

test1.txt:
hello world

案例:页面头部重复引用

<!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="myjQuery.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(function(){
        $("header").load("testFile/2_header.html",function(){
            $("li").click(function(){
                alert($(this).html());
            });
        });
    });
</script>

案例:页面头部重复引用

<!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="myjQuery.js" type="text/javascript" charset="utf-8"></script>
<script>
    $(function(){
        $("header").load("testFile/2_header.html",function(){
            $("li").click(function(){
                alert($(this).html());
            });
        });
    });
</script>

header的头部内容

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

筛选载入的HTML文档

上面的例子是将2_header.html页面中的内容都加载到header的元素里，如果只要加载页面内的某些内容，可以使用load（URL selector）方法的URL参数来达到目的。
注意：URL和选择器之间有一个空格。
例如只需要加载2_header.html的ul元素中内容，可以使用如下代码：

    $(function(){
        $("header").load("testFile/3_header.html ul",function(){
            $("li").click(function(){
                alert($(this).html());
            });
        });
    });

3_header.html:文件内容

主题1
主题2
主题3
主题4
主题5

123123

传递方式

**
load（）方法传递方式根据参数data来自动指定。如果没有参数传递，则采用get方式，反之，则自动转换为post方式。

$("button").click(function(){
    $("#cont").load("xi.html li"，{name:"rain"，age"18"}，function（）{
   //code....
  });
})

回调参数

对于必须在加载完成后才能继续的操作，load（）方法提供了回调函数（callback），该函数有3个参数，分别代表“请求返回的内容”，“请求状态”，“XMLHttpRequest对象”，代码如下：

$("header").load("testFile/3_header.html ul"，function（responseText，textStates，XMLHttpRequest）{
   //responseText：请求返回的内容
   //textStates：请求状态：success   error 
   //XMLHttpRequest：XMLHttpRequest对象
  });

注意：在load（）方法中，无论Ajax请求是否成功，只要请求完成。回调函数就被触发。

素描本里的男子

关注

2
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
jQuery中的load方法

结构 load( url , [data] , [callback] ) 参数解释: 1.1 应用案例：简单的load使用<!DOCTYPE html><html> <head> <meta charset="utf-8" /> <title></title> </h...
复制链接

扫一扫