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



目录
相关文章
|
6天前
|
前端开发 JavaScript
用HTML CSS JS打造企业级官网 —— 源码直接可用
必看!用HTML+CSS+JS打造企业级官网-源码直接可用,文章代码仅用于学习,禁止用于商业
35 1
|
11天前
|
前端开发 JavaScript 安全
HTML+CSS+JS密码灯登录表单
通过结合使用HTML、CSS和JavaScript,我们创建了一个带有密码强度指示器的登录表单。这不仅提高了用户体验,还帮助用户创建更安全的密码。希望本文的详细介绍和代码示例能帮助您在实际项目中实现类似功能,提升网站的安全性和用户友好性。
22 3
|
14天前
|
JavaScript
JS鼠标框选并删除HTML源码
这是一个js鼠标框选效果,可实现鼠标右击出现框选效果的功能。右击鼠标可拖拽框选元素,向下拖拽可实现删除效果,简单实用,欢迎下载
27 4
|
13天前
|
移动开发 HTML5
html5+three.js公路开车小游戏源码
html5公路开车小游戏是一款html5基于three.js制作的汽车开车小游戏源代码,在公路上开车网页小游戏源代码。
40 0
html5+three.js公路开车小游戏源码
|
22天前
|
JSON 移动开发 数据格式
html5+css3+js移动端带歌词音乐播放器代码
音乐播放器特效是一款html5+css3+js制作的手机移动端音乐播放器代码,带歌词显示。包括支持单曲循环,歌词显示,歌曲搜索,音量控制,列表循环等功能。利用json获取音乐歌单和歌词,基于html5 audio属性手机音乐播放器代码。
74 6
|
1月前
|
XML 前端开发 JavaScript
前端开发进阶:从HTML到React.js
【10月更文挑战第9天】前端开发进阶:从HTML到React.js
|
1月前
|
XML JavaScript 数据格式
jquery中html()方法的使用
jquery中html()方法的使用
19 1
|
1月前
|
JavaScript 前端开发
JavaScript 与 HTML 的结合
JavaScript 与 HTML 的结合
15 0
|
JavaScript 前端开发 UED
9款设计独特的jQuery/CSS3插件
今天要为大家分享9款设计非常独特的jQuery/CSS3全新应用插件,插件包含菜单、jQuery焦点图、jQuery表单、jQuery图片特效等。下面大家一起来看看吧。
177 0
9款设计独特的jQuery/CSS3插件
|
JavaScript 前端开发
推荐20款基于 jQuery & CSS 的文本效果插件
  jQuery 和 CSS 可以说是设计和开发行业的一次革命。这一切如此简单,快捷的一站式服务。jQuery 允许你在你的网页中添加一些真正令人惊叹的东西而不用付出很大的努力,要感谢那些优秀的 jQuery 插件。
1429 0