jquery动态待装入 HTML 网页内容和动态引入css、动态引入js

2021年09月15日 阅读数:1
这篇文章主要向大家介绍jquery动态待装入 HTML 网页内容和动态引入css、动态引入js,主要内容包括基础应用、实用技巧、原理机制等方面,希望对大家有所帮助。

jquery动态待装入 HTML 网页内容和动态引入css、动态引入jscss

 

使用 jquery 提供的方法:load(url, [data], [callback]) ,load 能够一次性引入html、css、js,html

经过url引入html内容,经过回调函数callback,引入css、js。jquery

ps:jquery官网文档~https://jquery.cuishifeng.cn/load.htmlandroid

url:待装入 HTML 网页网址。callback:载入成功时回调函数。app

 

(1)只动态引入html内容(使用url参数):语法 jquery对象.load(url);函数

示例:布局

$('header').load('头部.html .container');      //头部是一个包含html内容的文件
❀ 头部.html ~(即你须要的内容写成的html代码)
<div class="container">
    <!-- 头部左侧内容 -->
    <div class="left">
        <a href="#">
            <img  src="images/taptap.png" alt="taptap"/>
        </a>
        <a href="#">
            <i class="wifi"></i>
        </a>
        <ul>
            <li>
                <a class="active" href="#">首页1</a>
            </li>
            <li>
                <a href="#">首页2</a>
            </li>
            <li>
                <a href="#">首页3</a>
            </li>
            <li>
                <a href="#">首页4</a>
            </li>
        </ul>
    </div>
    <!-- 头部右侧内容-->
    <div class="right">
        <div class="ipt-box">
            <input type="text" autocomplete="off" placeholder="请输入..."/>
            <i class="fa fa-search"></i>
        </div>
        <a href="#">
            <img src="images/head_portrait.jpg" alt="搜索" />
        </a>
    </div>
</div>
 

ps: 若是某个部分的布局在不少页面都出现时,把那部分的html布局,放入一个空白的html文件里,ui

而后在js里使用load方法的参数url动态引入.url

 

(2) 动态引入html内容,同时引入其对应的css样式文件:语法 jquery对象.load(url,function(){ //回调函数里引入css文件 });spa

示例:~ 头部.css 文件就是修饰 头部.html 中的样式的css 文件

   $('header').load('头部.html .container',function(){    

    let link = document.createElement('link');

        $(link).attr({

          rel:'stylesheet',

          type:'text/css',

          href:'./css/头部.css'

      });

    $('head').append(link);

});

✿ 将动态引入css封装成一个方法,则能够改写代码:

//封装js动态加载css文件
function addCss(href){
    //判断是不是同文件
    let links = $("link");
    let isHave = false;
    links.each(function (index, element) {
        if($(element).attr('href') === href) {
            isHave = true;
        }
    });
    if (isHave) return;
    let link = document.createElement('link');
    $(link).attr({
        rel:'stylesheet',
        type:'text/css',
        href
    });
    $('head').append(link);
}


//头部:动态加载html页面,且经过function动态引入其对应的css样式
    $('header').load('头部.html .container',addCss('./css/头部.css'));
//或者:
    $('header').load('头部.html .container',function () {
                addCss('./css/Android.css');
          });

 ps:若是某个部分的布局在不少页面都出现时,把那部分的css样式,放入一个空白的css文件里,

而后使用js里使用load方法的参数function动态引入:

 

(3) 动态引入html内容,同时引入其对应的css样式文件和js 文件:语法 jquery对象.load(url,function(){ //回调函数里引入css文件,js 文件的引入函数 });

 

$('header').load('头部.html .container', function () {
                addCss('./css/Android.css');
               //使用jquery的函数getScript(参数是 js文件的路径),动态引入js文件
                $.getScript('js/头部.js',function () {
                    //这里能够写在引入头部.js 文件,还动态生成了什么内容
                });

 

 

 

ps:小案例:使用jquery的load方法,同时引入html、css、js~

//Android对应的内容
            $('section .ranking-core .nav-content').load('Android.html', function () {
                addCss('./css/Android.css');
               //使用jquery动态引入js文件
                $.getScript('js/Android.js',function () {
                    AndroidContInit();
                });
            });

❀ Android.html

<!-- 小导航 -->
<div class="android-content" >
    <nav>
        <ul>
            <li>
                <a href="#" class="active">热榜1</a>
            </li>
            <li>
                <a href="#">热榜2</a>
            </li>
            <li>
                <a href="#">热榜3</a>
            </li>
            <li>
                <a href="#">热榜3</a>
            </li>
        </ul>
    </nav>
    <div class="list">
        <ul>
        </ul>
    </div>
</div>

 

Android.css 省略......

 

❀ Android.js

function AndroidContInit(){
    let data = [
        {
            id:1,
            num:1,
            title_img:'android_covers/1.png',
            title:'真三国无双霸1',
            manufacturer:'级光',
            score:'8.3',
            desc:'难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 而后什么坐骑啊服装加成恶心难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 而后什么坐骑啊服装加成恶心难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 而后什么坐骑啊服装加成恶心难搞角色建模移植过难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 而后什么坐骑啊服装加成恶心难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 而后什么坐骑啊服装加成恶心难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 而后什么坐骑啊服装加成恶心难搞角色建模移植过',
            tags:['冒险',' 解密','角色扮演'],
            tag:'冒险',
            desc_img:'android_images/1.jpg'
        },
        {
            id:2,
            num:2,
            title_img:'android_covers/2.png',
            title:'真三国无双霸2',
            manufacturer:'级光',
            score:'8.3',
            desc:'难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 而后什么坐骑啊服装加成恶心难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 而后什么坐骑啊服装加成恶心难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 而后什么坐骑啊服装加成恶心难搞角色建模移植过难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 而后什么坐骑啊服装加成恶心难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 而后什么坐骑啊服装加成恶心难搞角色建模移植过来了不修边幅 走路打击纸片人轻飘飘按键使劲按 而后什么坐骑啊服装加成恶心难搞角色建模移植过',
            tags:['冒险',' 解密','角色扮演'],
            tag:'冒险',
            desc_img:'android_images/1.jpg'
        },
    ];
    listInit(data);
}

//动态生成list
function listInit(data) {
    let list = $('.android-content .list ul');
    data.forEach(function (value, index) {
        list.append(`
                <li>
                <!-- 封面图片 -->
                <a href="#">
                    <img class="title-img" src="${value.title_img}" alt="封面图片" title="${value.title}" />
                </a>
                <!-- 内容描述  -->
                <div class="desc">
                    <div class="top">
                        <!-- 标题 -->
                        <a href="#">${value.title}</a>
                        <div class=" manufacturer">厂商:${value.manufacturer}</div>
                        <!-- 评分 -->
                        <div class="score">
                            <div class="star">
                                <i class="light-star" style="width: ${value.score} * 10%;"></i>
                            </div>
                            <span>${value.score}</span>
                        </div>
                        <!-- 内容描述 -->
                        <p>
                            ${value.desc}
                        </p>
                    </div>
                    <div class="bottom">
                        <div class="left">
                        ${value.tags.map(function (value2, index2) {
                            return `<a href="#">${value2}</a>`;
                        }).join('')}
                        </div>
                        <!-- 右边 -->
                        <span>${value.tag}</span>
                    </div>
                </div>
                <!-- 图片 -->
                <a href="#">
                    <img class="desc-img" src="${value.desc_img}" />
                </a>
                <!-- 名次 -->
                <div class="rank">
                    <span class="ranking-shape"></span>
                    <span class="num">${value.num}</span>
                </div>
            </li>
        `);
    });
}