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

简介: 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>
        `);
    });
}



目录
相关文章
|
13天前
|
JavaScript 前端开发 Go
CSS 与 JS 对 DOM 解析和渲染的影响
【10月更文挑战第16天】CSS 和 JS 会在一定程度上影响 DOM 解析和渲染,了解它们之间的相互作用以及采取适当的优化措施是非常重要的。通过合理的布局和加载策略,可以提高网页的性能和用户体验,确保页面能够快速、流畅地呈现给用户。在实际开发中,要根据具体情况进行权衡和调整,以达到最佳的效果。
|
1天前
|
前端开发 JavaScript
如何在 JavaScript 中访问和修改 CSS 变量?
【10月更文挑战第28天】通过以上方法,可以在JavaScript中灵活地访问和修改CSS变量,从而实现根据用户交互、页面状态等动态地改变页面样式,为网页添加更多的交互性和动态效果。在实际应用中,可以根据具体的需求和场景选择合适的方法来操作CSS变量。
|
1天前
|
前端开发 JavaScript UED
如何使用 JavaScript 动态修改 CSS 变量的值?
【10月更文挑战第28天】使用JavaScript动态修改CSS变量的值可以为页面带来更丰富的交互效果和动态样式变化,根据不同的应用场景和需求,可以选择合适的方法来实现CSS变量的动态修改,从而提高页面的灵活性和用户体验。
|
7天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
45 6
|
28天前
|
XML JavaScript 数据格式
jquery中html()方法的使用
jquery中html()方法的使用
17 1
|
2月前
|
前端开发 JavaScript
HTML+JavaScript+CSS DIY 分隔条splitter
HTML+JavaScript+CSS DIY 分隔条splitter
|
28天前
|
前端开发 JavaScript
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
JavaScript动态渲染页面爬取——CSS位置偏移反爬案例分析与爬取实战
|
JavaScript 前端开发
Web前端学习:jQuery基础--2【jQuery事件、设置与获取HTML 】
Web前端学习:jQuery基础--2【jQuery事件、设置与获取HTML 】
128 0
Web前端学习:jQuery基础--2【jQuery事件、设置与获取HTML 】