jquery動態待裝入 HTML 網頁內容和動態引入css、動態引入js

jquery動態待裝入 HTML 網頁內容和動態引入css、動態引入js

 

❀ 使用 jquery 提供的方法：load(url, [data], [callback]) ，load 可以一次性引入html、css、js，

通過url引入html內容，通過回調函數callback，引入css、js。

ps:jquery官網文檔~https://jquery.cuishifeng.cn/load.html

url:待裝入 HTML 網頁網址。callback:載入成功時回調函數。

 

(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文件里，

然后在js里使用load方法的參數url動態引入.

 

(2) 動態引入html內容,同時引入其對應的css樣式文件：語法 jquery對象.load(url，function(){ //回調函數里引入css文件 });

示例：~ 頭部.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>
        `);
    });
}