(补充)如何将javascript代码和HTML分开

最新推荐文章于 2022-11-06 10:18:19 发布

龙腾四海365

最新推荐文章于 2022-11-06 10:18:19 发布

阅读量3.8k

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/u011637069/article/details/50186971

版权

jQuery 专栏收录该内容

23 篇文章 0 订阅

订阅专栏

(补充)如何将javascript代码和HTML分开

很多时候都是需要把视图和数据、数据和操作分开的，这样的好处是便于代码的维护：

下面就讲讲如何将js代码和html代码分开方法：

方法一：传统js方法

//方式一
window.onload = function(){
	//当整个页面加载完毕会调用onload方法
}

方法二：用jQuery框架

//方式二
//jQuery的方式实现
$(function(){
	//页面加载完毕会执行这的代码
});

示例代码：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>javascript代码和HTML分开</title>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <script type="text/javascript" src="../js/jquery-1.11.1.js"></script>
    <script type="text/javascript">
    	//方式一
    	//当整个页面加载完毕会调用onload方法
    	window.onload = function(){
    		var obj = document.getElementById('d1');
    		obj.onclick = function(){
    			this.innerHTML = 'hello java111';
    		};
        }
		//方式二
        //jQuery的方式实现
        $(function(){
			//页面加载完毕会执行这的代码
			//=="onclick = function(){}"
			$('#d2').click(function(){
				//this代表绑定了该事件的dom对象
				//this.innerHTML = 'hello ketty';
				$(this).html('hello dom');
			});
        });
    </script>
  </head>
  <body style="font-size:30px;">
  	<div id="d1">dom方式实现</div>
  	<div id="d2">jQuery的方式实现</div>

  </body>
</html>

龙腾四海365

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
(补充)如何将javascript代码和HTML分开

(补充)如何将javascript代码和HTML分开很多时候都是需要把视图和数据、数据和操作分开的，这样的好处是便于代码的维护：下面就讲讲如何将js代码和html代码分开方法：方法一：传统js方法//方式一window.onload = function(){ //当整个页面加载完毕会调用onload方法}方法二：用jQuery框架//方式二//jQ
复制链接

扫一扫