jquery动态加载页面 load方法 注意事项

已于 2022-10-26 16:06:43 修改
阅读量1.4w 收藏 7
点赞数
文章标签： jquery javascript html
于 2017-03-07 10:24:16 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Edu_enth/article/details/60754489
版权
本文详细介绍了 jQuery 中 load 方法的功能及使用技巧，包括如何加载 HTML 文档的全部或部分内容，以及加载过程中 CSS 和 JavaScript 的处理方式。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

 

 

  •  
  
    • jquery代码
     
  
    • $("#div").load("test.html"); 
     
  
     
  
    •   test.html   ----------------被加载页面（有<HTML><HEAD><META><BODY>等的完整页面 ）
     
  


    •    
     
  
    • $("#div")所在页面----------------------------容器页面（也是完整页面）
     
  
    • 1、被加载页面      可以使用     自己页面的CSS样式
     
  


    •    
     
  
    • 2、被加载页面      可以使用     容器页面的CSS样式，当自己页面css样式和容器页面的CSS样式冲突时，自己页面的css样式起作用！
     
  


    •    
     
  
    • 3、被加载页面 能使用     自己页面的javascript
     
  


    •    
     
  
    • 4、被加载页面 能使用     容器页面的javascript，当自己页面javascript和容器页面的javascript冲突时，都起作用，形成“冒泡”；
     
  


    •    
     
  
    • 5、     容器页面的head里面的   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ）     对      被加载页面      无效
     
  


    •    
     
  
    • 6、 被加载页面的head里面的   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> ）     对      被加载页面      无效
     
  


    •    
     
  


    •    
     
  
    • 7、被加载页面的字符编码只能是UTF-8
     
  
    • jquery代码
     
  
    • load() 方法允许加载html文档的一部分，语法如下：
     
  
    • $("#div").load("test.html #content");  
     
  
    • test.html    #content（中间有一个空格）  ----------------被加载页面的id是content的部分
     
  


    •    
     
  
    • 加载html文档的一部分的情况有所不同（自己页面的css样式和javascript都丢失，能使用容器页面的css样式和javascript），
     
  


    •    
     
  
    • 不过都是按照下面做法实现的，可以根据   把html文件加载到容器页面形成的文档情况   而定
     
  


    •    
     
  
    • w3cshcool说load() 方法是这样实现的：
     
  
    • jQuery 使用浏览器的 .innerHTML 属性来解析被取回的文档，并把它插入当前文档。在此过程中，浏览器常会从文档中过滤掉元素，
     
  


    •    
     
  
    • 比如 <html>, <title> 或 <head> 元素。结果是，由 .load() 取回的元素可能与由浏览器直接取回的文档不完全相同。
     
  


    •    
     
  
    • 注释：由于浏览器安全方面的限制，大多数 "Ajax" 请求遵守同源策略；请求无法从不同的域、子域或协议成功地取回数据
 


                

        

    

  


            

                    
            


    


                



	

		

			

				
					
load()方法---------jQuery动态加载html

				
			

			

				

					weixin_30339457的博客
				

				

					01-05
					
					1934
					
				

			

		

		

			
				
我的个人德州扑克项目https://github.com/mingzijian/pokers，欢迎给星星。
jquery代码
$("#div").load("test.html");




 test.html  ----------------被加载页面（有<HTML><HEAD><META><BODY>等的完整页面 ）	$...

			
		

	



                

            
              



	

		

			

				
					
jquery页面加载

				
			

			

				

					qq_45649907的博客
				

				

					12-01
					
					440
					
				

			

		

		

			
				
jquery事件添加，全部采用现代事件添加方式，一个事件可以绑定多个函数
jquery对象=================================
dom转化为jquery
var obj=
document.getElementById(“div1”)
//dom对象转化为jquery
var jq=$(obj);
alert(jq.html());
jquery转为dom
var j...

			
		

	



              


  
              

                


	

		

			

				
					
jquery加载页面的方法(页面加载完成就执行)

				
			

			

				

					10-28
				

			

		

		

			
				
jquery加载页面的方法(页面加载完成就执行),建议大家看下windows.onload与$(document).ready之间的区别。

			
		

	





	

		

			

				
					
jQuery加载

				
			

			

				

					dinan9786的博客
				

				

					03-11
					
					166
					
				

			

		

		

			
				
原文来自：脚本之家

1. Jquery中$(document).ready()与原生JS的window.onload的区别：

   1）执行时间：
     window.onload必须等到页面内包括图片的所有元素加载完毕后才能执行。
     $(document).ready()是DOM结构绘制完毕后就执行，无需等到图片或其他媒...

			
		

	



		

			
		



	

		

			

				
					
利用 JQuery的load函数动态加载页面

				
			

			

				

					weixin_33901926的博客
				

				

					04-09
					
					218
					
				

			

		

		

			
				
利用JQuery的load函数动态加载页面     JQuery有好多Ajax函数，其中load是用来动态加载一个页面的内容到指定的dom元素上。我们来做个例子：做一个上下（左右）结构的页面，其中下左部分放2个以前我们做过的div按钮，下右部分则为动态加载内容。按每个按钮，加载该按钮相应的网页内容到下右区域。基本语法为：$('#区域id').load('页面名称');完整的网页代码如下： <...

			
		

	





	

		

			

				
					
jquery中load方法的用法及注意事项说明

				
			

			

				

					01-19
				

			

		

		

			
				
调用load方法的完整格式是：load( url, [data], [callback] ),其中 url：是指要导入文件的地址。 data：可选参数；因为Load不仅仅可以导入静态的html文件，还可以导入动态脚本，例如PHP文件，所以要导入的是动态文件...

			
		

	





	

		

			

				
					
jQuery中Ajax的load方法详解

				
			

			

				

					10-24
				

			

		

		

			
				
jQuery的load方法为开发者提供了一个简单的方式来实现动态内容加载，极大地简化了Ajax操作。通过合理使用load方法，可以有效地改善网页的用户体验，减少不必要的页面重载。不过，随着Web技术的发展，许多新的HTTP...

			
		

	





	

		

			

				
					
jquery load事件(callback/data)使用方法及注意事项

				
			

			

				

					12-04
				

			

		

		

			
				
注意:只有当在这个元素完全加载完之前绑定load的处理函数,才会在他加载完后触发。如果之后再绑定就永远不会触发了。所以不要在$(document).ready()里绑定load事件，因为jQuery会在所有DOM加载完成后再绑定load事件。...

			
		

	





	

		

			

				
					
使用jquery中的load方法加载界面

				
			

			

				

					温大侠的博客
				

				

					06-25
					
					4546
					
				

			

		

		

			
				
当我们需要在界面的某一个模块中显示另一个界面的某个模块时,可以jquery中的load方法实现界面的重用.下面的案例:当点击导航栏中不同的选项时,下方界面展示对应的内容:



首先写一个content.html,里面是各个选项所对应的模板:


<!DOCTYPE html>
<html>
<head>
	<title>content</ti...

			
		

	





	

		

			

				
					
jQuery之页面加载函数

				
			

			

				

					python全栈
				

				

					01-22
					
					2189
					
				

			

		

		

			
				
body中的οnlοad="fun1()"表示页面加载事件，只有body中的元素加载完毕之后才会调用fun1()方法
第一种方式
<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script type="text/javascript">
			function fun1(){
				var element=windo

			
		

	





	

		

			

				
					
用jQuery的load方法动态加载页面，以及脚本问题

				
			

			

				

					weilikk的博客
				

				

					08-19
					
					7312
					
				

			

		

		

			
				
一、了解load方法

load(url, [data], [callback]) 概述 载入远程 HTML 文件代码并插入至 DOM 中。
默认使用 GET 方式 - 传递附加参数时自动转换为 POST 方式。jQuery 1.2 中，可以指定选择符，来筛选载入的 HTML
文档，DOM 中将仅插入筛选出的 HTML 代码。语法形如 “url #some > selector”。请查看示例。
参数 url,[data,[callback]]String,Map/String,CallbackV1.0

			
		

	





	

		

			

				
					
使用jQuery的 load() 方法加载html公共模块

				
			

			

				

					橙-极纪元-JJYCheng
				

				

					03-18
					
					4707
					
				

			

		

		

			
				
例如：网站头部


 $(".header").load("header.html");

例如：网站导航


 $(".nav").load("nav.html");

例如：网站底部


 $(".footer").load("footer.html");





官方解释


转载：https://www.runoob.com/jquery/jquery-ajax-load.html


jQuery load() 方法

jQuery load() 方法是简单但强大的 AJAX 方法。

lo..

			
		

	





	

		

			

				
					
利用jQuery实现动态加载页面内容并融入当前页面的全面解析

					
最新发布

				
			

			

				

					Programming Talk
				

				

					04-03
					
					1072
					
				

			

		

		

			
				
jQuery作为一款广泛使用的JavaScript库，提供了丰富的API以简化DOM操作和AJAX请求，使得开发者能够轻松实现将远程页面内容加载到当前页面的功能。通过jQuery提供的强大功能，我们可以方便地将远程页面的内容无缝融合到当前页面中，极大地增强了网页的交互性和灵活性。在实际应用中，还需根据具体需求，综合运用AJAX的各种方法，以及恰当的缓存控制、事件处理和错误处理策略，确保页面动态加载功能既高效又稳定。.ajax()方法的便捷封装，特别适用于简单的页面片段加载场景。

			
		

	





	

		

			

				
					
利用Jquery的load函数实现页面的动态加载

				
			

			

				

					瓜爪牛的博客
				

				

					11-22
					
					3154
					
				

			

		

		

			
				
js的强大功能相信大家都知晓，今天通过jquery的库函数load可以更加方便的实现页面的动态刷新，经过几天的研究与探索，终于有所成效！吾心甚蔚！　　  一、基本语法为：　　  $(‘#区域id’).load(‘页面名称’);　　 具体来说，此事件有4个方法，格式分别是： 　　　　 1、load(url)　　　　   2、load(url,[data])　　　　  3、load(url,[callb

			
		

	





	

		

			

				
					
jquery load html片段,jQuery .load（）调用未在加载的HTML文件中执行JavaScript

				
			

			

				

					weixin_30046717的博客
				

				

					06-21
					
					184
					
				

			

		

		

			
				
小编典典您正在将整个HTML页面加载到div中，包括html，head和body标签。如果您执行加载并且仅在加载的HTML中包含打开脚本，关闭脚本和JavaScript代码，会发生什么情况？这是驱动程序页面：jQuery Load of Scriptgoogle.load("jquery", "1.3.2");$(document).ready(function(){$("#myButton")....

			
		

	





	

		

			

				
					
在ASP.NET MVC中使用jQuery的Load方法加载静态页面的一个注意点

				
			

			

				

					weixin_34014555的博客
				

				

					01-08
					
					309
					
				

			

		

		

			
				
使用使用jQuery的Load方法可以加载静态页面，本篇就在ASP.NET MVC下实现。   Model先行：      public class Article
    {
        public int Id { get; set; }
        public string Url { get; set; }
    }
 
在HomeController中的Inde...

			
		

	





	

		

			

				
					
jquery load加载公共页面

				
			

			

				

					q1755416113的博客
				

				

					01-02
					
					1312
					
				

			

		

		

			
				
load会把你要加载的文件里面的所有内容都加载进来 所有不要有一些html的文件格式，将默认的格式删除留下想要的html代码即可 如下图所示
load加载其他页面可以加入jquery代码 如下图所示 一般将要导的包放在主页面中。
如果用到layui的nav的话没有动态效果则加入element.render(‘nav’); 重新渲染nav 即可有效果


...

			
		

	





	

		

			

				
					

				
			

			

				

					
				

			

		

		

			
				

			
		

	



              




          




        



    





    



      

      

        
      

      





	

		评论	
	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  





	
打赏作者

	

		

		
			
		
		

		

			
InterestingFigure

			
迈克 Let's Go

		

	

	

			

	

	

    ¥1
    ¥2
    ¥4
    ¥6
    ¥10
    ¥20
	

	

		

			

				

					扫码支付：¥1
				

				

					

					
					获取中
					

				

				

					
					
					扫码支付
				

			

		

		

			
您的余额不足，请更换扫码支付或充值

			
打赏作者

		

	



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值