使用jquery 引用公用组件的方法

已于 2023-01-06 08:54:45 修改
阅读量661 收藏 1
点赞数
分类专栏： Js 文章标签： jquery Powered by 金山文档
于 2023-01-04 13:10:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_64547949/article/details/128546321
版权
本文介绍了如何在不使用Vue等框架的情况下，利用jQuery在原生JavaScript中引用公用组件，如导航栏。通过在需要引用组件的页面引入jQuery，然后在根目录创建包含组件的HTML文件，并在目标页面插入特定标签。如果使用Bootstrap框架，可以在组件中直接引用，但需注意可能的缓存问题，解决方案见作者提供的教程链接。
摘要由CSDN通过智能技术生成

今天我在写代码的时候，想写一个导航栏，但是我用的原生，没有用Vue

所以我在找一个方法 使原生的也可以引用公用组件，找到了一个方法

要引入使用jquery

这里以我要引用的导航栏组件为例子：

  1. 在需要引入导航组件的页面 引入jquery

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.js"></script>

  1. 在根目录创建一个名字为header.html 的文件，这个文件里就可以写你的导航栏了

最低0.47元/天 解锁文章
小博的学习之路
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack打包jquery多页_webpack 多页面支持 & 公共组件单独打包
weixin_39541600的博客
12-20 243
webpack - 多页面/入口支持 & 公共组件单独打包webpack系列目录本系列并非全部原创，如非原创，正文篇首会注明转载地址正文本篇主要介绍：如何自动构建入口文件，并生成对应的output；公共js库如何单独打包。多入口文件，自动扫描入口。同时支持SPA和多页面型的项目公共js库如何单独打包。上一篇示例，主要介绍如何集成第三方js库到项目中使用，如jquery。示例的入口只有一个i...
jQuery自定义组件(导入组件)
11-28
1.组件js (function($){ //自定义去除字符串两边空白 String.prototype.trim=function(){ return this.replace(/(^\s*)|(\s*$)/g, ""); } //自定义导入组件 $.fn.customImport = function(methodOroptions,value){ if(typeof methodOroptions == "string"){//存在方法时，调用方法 return $.fn.customImport.methods[methodOroptions](this, value); } var
jquery封装公共的header、footer等组件
白白的博客
11-30 2117
在 index.html 中先引入 jquery.min.js 在index.html 页面中预留公共页面的引入位置： … 写一个公共js,在每个html中引入该js 对于选中当前页面对应的菜单项处理方法，一定要放在公共页面加载完毕之后。 <style> .footer{ width: 100%;padding: 20px 0;text-align: center;font-size: 16px;background:#FAFAFA;color: #..
jquery调用其他页面的js方法_经典的jQuery实现页面公共部分方法，附代码
weixin_35795792的博客
02-01 1729
首先想到的自然是js来处理了，利用js(jQuery)或ajax从服务器上取回需要的公共页面然后插入页面。一、使用jqury的load方法填充dom，不写回调函数也是可以的，例如：$("#div1").load("/example/jquery/demo_test.txt") load方法使用示例：使用 jQuery AJAX 来改变文本获得外部内容------------------------...
jquery自定义导入组件
风火一回，一生不毁
11-08 1824
1.组件js (function($){ //自定义去除字符串两边空白 String.prototype.trim=function(){ return this.replace(/(^\s*)|(\s*$)/g, ""); } //自定义导入组件 $.fn.customImport = function(methodOroptions,value){ if(typeof
jquery引用文件——jquery.js
11-25
jquery引用文件，jquery.min.js和jquery.js............希望可以帮助到大家
jquery组件复用
最新发布
07-27
在使用jQuery进行组件复用时，可以使用load方法来引入公用部分的内容。例如，可以创建一个存放复用内容的HTML文件，如header.html，其中只包含相关内容，不需要完整的HTML结构。然后，在需要引入该内容的页面中，...
使用jquery+aos.js+ajax搭建一个兼容IE8的web官网项目
qq_38170252的博客
04-03 1086
目录创建项目新建一个website空文件夹并在此中添加目录目录结构在pages>index目录下新建一个index.html，引入框架组件实现导航栏固定，内容页面刷新使用aos.js动画AJAX 请求封装 创建项目 新建一个website空文件夹并在此中添加目录 目录结构 |-- src // 源码目录 | |-- public ...
html中引入调用另一个公用html模板文件的方法
minpad的博客
08-15 9526
一、需要借助 jquery div+$("#page1").load(“b.html”) 。 参考代码： <body> <div id="page1"></div> <div id="page2"></div> <script> $("#page1").load("page/Page...
jquery的引用包文件
05-14
两个版本的jquery包，jquery-1.3.1.js，jquery-1.4.min.js
引入公共头部时，控制引入js、css、title
04-09
NULL 博文链接：https://liuxing87327.iteye.com/blog/1634033
JQuery.js(导入文件)
01-29
Jquery是继prototype之后又一个优秀的Javascrīpt框架。它是轻量级的js库(压缩后只有21k) ，它兼容CSS3，还兼容各种浏览器 （IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+）。jQuery使用户能更方便地处理HTML documents、events、实现动画效果，并且方便地为网站提供AJAX交互。jQuery还有一个比较大的优势是，它的文档说明很全，而且各种应用也说得很详细，同时还有许多成熟的插件可供选择。jQuery能够使用户的html页保持代码和html内容分离，也就是说，不用再在html里面插入一堆js来调用命令了，只需定义id即可。
运用jquery抽离出html公用部分实现多页面复用
海阔天空
05-23 6348
最近做的一个网站项目，由于种种原因技术选的是jquery。但网站的顶部导航栏 和 底部每个页面都是一模一样的，重复的写固然可以，但这样做是不推荐的，代码冗余不说，主要是不好维护，中途要改公用部分的东西你就需要每个页面去改，麻烦而且有可能会有遗漏。那如何抽离出公用的部分呢？(有点类似Vue，React等框架的组件化)我选的是运用jquery的load方法，还有很多其他方法，如iframe ，incl...
使用jquery.load 处理 HTML页面公共部分引入
King Saj
12-03 1756
HTML公用部分抽离出来使用,使后期维护起来更加方便 创建一个index.html页面, 和common文件夹(用来存储公用页面部分) header.html <header class="mui-bar mui-bar-nav"> <h1 class="mui-title">头部公共部分</h1> </header> footer.html <footer>底部公用内容</footer> index.html <!DOC
公共头部引入页面
黎成诃月的博客
04-27 516
var header = '&lt;div class="headernav"&gt;';    header += '&lt;ul class="wrap wow fadeInUp animated" data-wow-delay=".0.05s" style="visibility: visible; animation-name: fadeInUp;"&gt;';    header +=
jq load 方法加载公共页面时，浏览器报错Cross origin requests are only supported for protocol schemes: http, data
luckydie的博客
01-08 856
  jq load  方法加载公共页面时，当我在文件中直接使用浏览器打开时，浏览器报错  无法加载页面：   解决方法： 首先关闭所有正在运行的Chrome实例 这里重要的一词是“全部”。 在Windows上，您可以使用Windows任务管理器检查Chrome实例。或者，如果您在系统托盘中看到Chrome图标，则可以打开其上下文菜单并单击“退出”。这应关闭所有Chrome实例。 然...
JQuery 公网 CDN
weixin_34082789的博客
09-30 199
JQuery 公网 CDN <script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.12.4.min.js"></script> 转载于:https://www.cnblogs.com/time-is-life/p/5923073.html
多页面公用头部---通过js的.load()方法加载页面头部文件（header.html）
程序员一枚，仅记录工作中的难点
01-05 488
【代码】多页面公用头部---通过js的.load()方法加载页面头部文件（header.html）
使用jQuery Easy UI创建Tabs组件
在使用 jQuery Easy UI 的 Tabs 组件时，不需要额外的依赖库。 选项 jQuery Easy UI 的 Tabs 组件有许多可配置的选项，可以通过 `$.fn.tabs.defaults` 来覆盖默认值。以下是一些关键选项： - width: 整个 tabs ...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值