html基础开发-jQuery框架基础语法攻略（攻略一）

2023-09-10 阅读 21 评论 0

摘要：1 jquery框架 ready方法使用使用方法：$(document).ready（）当document中的所有节点全部加载完成后ready中的方法例如下面的使用案例中，访问页面，当整个页面加载完成后，再向页面中的指定标签写入内容 html框架布局模板， <!D

1 jquery框架 ready方法使用

使用方法：$(document).ready（）当document中的所有节点全部加载完成后ready中的方法

例如下面的使用案例中，访问页面，当整个页面加载完成后，再向页面中的指定标签写入内容

html框架布局模板，

<!DOCTYPE html>
<html>
<head>
<title>synthesize.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">.content {width: 300px;height: 100px;background-color: #e8e9e6;border: 2px solid red;}.contentMain {width: 400px;height: 200px;background-color: #e8e9e6;border: 2px solid blue;}
</style><script type="text/javascript">$(document).ready(function() {$("#p_main_show_des").html("这是一个神奇的体验");});</script>
</head><body><div class="content"><p>主要内容</p></div><br><div class="contentMain"><p >显示内容域</p><p id="p_main_show_des" style="background-color: blue"></p></div>
</body>
</html>

效果图 1-1

我们可以看到，在id为p_main_show_des的p标签中原来是没有内容的，但是我们在ready方法中向这个标签中写入了相关内容，当页面加载完成后就会执行写入的方法，页面加载完成后，这个p标签中就有了相关的内容

jquery前端框架、注： script标签中使用的的相关方法（例（$(document)）下面会一一解说

2 jQuery对象与DOM对象

2-1 DOM对象说明

通过原生DOM模型提供的document.getElementById(“id”) 方法获取的DOM元素就是DOM对象，通过DOM方法将自己的innerHTML与style属性处理文本与颜色。

2-2 jQuery对象说明

jquery的基本语法、通过jQuery方法获取的对象

例如：

<!DOCTYPE html>
<html>
<head>
<title>synthesize.html</title><meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="this is my page">
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>
<style type="text/css">.content {width: 300px;height: 100px;background-color: #e8e9e6;border: 2px solid red;}.contentMain {width: 400px;height: 200px;background-color: #e8e9e6;border: 2px solid blue;}
</style><script type="text/javascript"></script>
</head><body><div class="content"><p>主要内容</p></div><br><div class="contentMain"><p>显示内容域</p><p id="p_main_show_des" style="background-color: #ffffff">孤独的路，我在这里想你</p><p id="p_main_write_des" style="background-color: #e9e9e9">孤独的路，我在这里想你</p></div>
</body><script type="text/javascript">window.onload = function() {//通过js原生的方法来获取ID为p_main_show_des的标签var p = document.getElementById("p_main_show_des");//设置P标签中的内容p.innerHTML = "通过js原生的方法来获取ID为p_main_show_des的标签";//将显示元素的内容改为红色p.style.color = "red";}
</script>
<script type="text/javascript">$(document).ready(function(){//通过jQuery方法获取ID为 p_main_write_des的P标签var p = $("#p_main_write_des");//向这个标签中写入内容p.html("通过jQuery方法获取ID为 p_main_write_des的P标签");});
</script>
</html>

html网页框架。

效果图：