html基础开发-jQuery框架基础语法攻略(攻略一)


1 jquery框架 ready方法使用

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


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

<!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标签中就有了相关的内容

注: script标签中使用的的相关方法(例($(document))下面会一一解说



2 jQuery对象与DOM对象

2-1 DOM对象说明

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


2-2 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>

效果图:











  • 0
    点赞
  • 0
    评论
  • 0
    收藏
  • 一键三连
    一键三连
  • 扫一扫,分享海报

<p> <strong> </strong> </p> <p class="MsoNormal" style="text-align:left;margin-left:21pt;text-indent:21pt;"> <br /> </p> <p class="MsoNormal"> <strong><span style="font-size:18px;"></span></strong> </p> <p class="ql-long-24357476"> <strong><span style="font-size:18px;color:#E53333;"><strong>想学好</strong></span><strong><span style="font-size:18px;color:#E53333;">JAVA必须要报两万的培训班吗?</span></strong><span style="color:#E53333;"></span><span id="__kindeditor_bookmark_start_82__"></span><br /> </strong> </p> <p class="ql-long-24357476"> <span id="__kindeditor_bookmark_end_83__"></span><strong><span style="color:#337FE5;">【课程背景】</span></strong> </p> <p class="ql-long-24357476"> <strong>JAVA是市场份额最大的编程语言,每天各大招聘网站上都会有数万个JAVA开发工程师的在招岗位,但是JAVA的技术体系庞大复杂,要想扎实掌握JAVA不是件容易的事,线上学习相比线下两万起的高昂费用便宜了很多,而且具备学习时间灵活的优势,但是线上学习的劣势也很明显,没有线下那种学习氛围,碰到问题没法解决,在家学习很容易偷懒,极简JAVA学习营充分考虑到这些问题,通过每日实战编程练习,分队pk,助教答疑,作业点评,作业讲解,项目答辩等诸多环节充分激发你的学习热情,解决你学习中碰到的问题,让你花十分之的钱学到JAVA的精髓,开启你的人生逆袭之路。</strong> </p> <p class="ql-long-24357476"> <strong><br /> </strong> </p> <strong><span style="color:#337FE5;">【专项的贴心服务】</span> <p class="ql-long-24357476"> 1. 学练结合:定期布置视频任务和编程实战练习:通过每天的视频任务统大家的进度,以便同学更好的交流,针对每天的任务会有相应的编程实战练习,通过练习内化知识。<br /> 2. 分队PK:将就业营的同学分成几队,通过作业统计表统计每队提交作业情况进行PK,激发你的学习动力。<br /> 3. 助教讲师答疑:碰到任何问题,发到群里,助教和讲师十分钟内帮你解决问题,扫清学习中的障碍。<br /> 4. 助教点评讲解作业:你每天提交作业都会有助教进行点评,让你知道有什么问题怎么解决,每三天次视频讲解作业,互动解答问题<br /> 5. 项目答辩:每个阶段学完会有项目答辩,通过做项目巩固前阶段的知识点,锻炼编码能力。 </p> <p class="ql-long-24357476"> <img src="https://img-bss.csdnimg.cn/202007070905305336.png" alt="" /> </p> <p class="ql-long-24357476"> <span style="color:#337FE5;">【往期训练营学习展示】</span> </p> <p class="ql-long-24357476"> <img src="https://img-bss.csdnimg.cn/202007070914574571.png" alt="" /> </p> <p class="ql-long-24357476"> <span style="color:#337FE5;">【套餐内容简介】</span> </p> <p class="ql-long-24357476"> 本套课以市场就业和职位需求为核心,从JAVA入门到多领域实战,设计出学习路线,共分为二十大模块,分别是:JAVA面向对象、Object类与常用API、集合框架、IO流、反射注解、多线程与网络编程、Object类与常用API等等。 </p> <p> 同时采用理论讲解加实战演练的方式,既能让学员听懂听明白达到理解透彻,又能够在个个真实实战案例中,让学员掌握真正有用的开发技能,从而进阶 JAVA 工程师! </p> <p> <br /> </p> <p class="ql-long-24357476"> 套餐中共包含21门JAVA程,助你从零进阶JAVA工程师! </p> <p class="ql-long-24357476"> <span style="color:#337FE5;">阶段:</span><span style="color:#337FE5;">JAVA</span><span style="color:#337FE5;">基</span><span style="color:#337FE5;">础</span> </p> <p class="ql-long-24357476"> 课程1:《极简JAVA学习营开营篇》 </p> <p class="ql-long-24357476"> 课程2:《极简JAVA:JAVA面向对象》 </p> <p class="ql-long-24357476"> 课程3:《极简JAVA:Object类与常用API》 </p> <p class="ql-long-24357476"> 课程4:《极简JAVA:集合框架》 </p> <p class="ql-long-24357476"> 课程5:《极简JAVA:IO流》 </p> <p class="ql-long-24357476"> 课程6:《极简JAVA:反射注解》 </p> <p class="ql-long-24357476"> 课程7:《极简JAVA:多线程与网络编程》 </p> <p class="ql-long-24357476"> <span style="color:#337FE5;">阶段二:</span><span style="color:#337FE5;">数据库入门</span> </p> <p class="ql-long-24357476"> 课程8:《极简JAVA:MySql数据库》 </p> <p class="ql-long-24357476"> 课程9:《极简JAVA:JDBC与连接池》 </p> <p class="ql-long-24357476"> <span style="color:#337FE5;">阶段三:</span><span style="color:#337FE5;">JAVA WEB</span> </p> <p class="ql-long-24357476"> 课程10:《极简JAVA:HTML5与CSS3》 </p> <p class="ql-long-24357476"> 课程11:《极简JAVA:极简JAVA十:Javascript与Jquery》 </p> <p> 课程12:《极简JAVA:BootStrap》 </p> <p class="ql-long-24357476"> 课程13:《极简JAVA:JAVA Web》 </p> <p class="ql-long-24357476"> <span style="color:#337FE5;">阶段四:框架实战</span> </p> <p class="ql-long-24357476"> 课程14:《极简JAVA:Mavean入门》 </p> <p class="ql-long-24357476"> 课程15:《极简JAVA:MyBatis框架》 </p> <p class="ql-long-24357476"> 课程16:《极简JAVA:Spring框架》 </p> <p class="ql-long-24357476"> 课程17:《极简JAVA:Spring Mvc》 </p> <p class="ql-long-24357476"> <span id="__kindeditor_bookmark_end_251__"></span><span id="__kindeditor_bookmark_end_247__"></span>课程18:《极简JAVA:Oracle数据库》 </p> <p class="ql-long-24357476"> 课程19:《极简JAVA:Git入门》 </p> <p class="ql-long-24357476"> 课程20:《极简JAVA:Linux入门》 </p> <p class="ql-long-24357476"> 课程21:《极简JAVA:SpringBoot》 </p> <p> <br /> </p> <p class="ql-long-24357476"> <span style="color:#337FE5;">【课程特色】</span> </p> <p class="ql-long-24357476"> 1、易理解:讲师思路清晰、节奏明确、从易到难讲解透彻明白; </p> <p class="ql-long-24357476"> 2、知识全:知识全面系统,从JAVA入门到实战,由易到难,让你彻底掌握JAVA开发; </p> <p class="ql-long-24357476"> 3、重实战:涵盖大量实战项目,锻炼你的动手实操能力,面向工作编程; </p> <p> <br /> </p> <p class="ql-long-24357476"> <span style="color:#337FE5;">【面向人群】</span> </p> <p class="ql-long-24357476"> 1、在校计算机专业或者对软件编程感兴趣的学生; </p> <p class="ql-long-24357476"> 2、零基础想学JAVA却不知道从何入手 </p> <p class="ql-long-24357476"> 3、囊中羞涩,面对两万起的JAVA培训班不忍直视 </p> <p class="MsoNormal"> 4、在职没有每天大块的时间专门学习JAVA </p> </strong>
相关推荐
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值