Blogger Information
Blog 31
fans 0
comment 1
visits 24622
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jquery的两种引入方式与$(document).ready()的使用方式20180402
jobing的博客
Original
1448 people have browsed it

今天学习了jquery,可以简化JS代码的编写,基本语法是$(选择器).方法(),不仅可以通过jquery的选择器$()找到元素,还可以创建元素,并将创建的元素插入到当前的页面中,最后还了解了jquery的执行方式。

代码:


实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>jquery的两种引入方式与$(document).ready()的使用方式</title>
	<style type="text/css">
		.SS{
			color: red;
		}
	</style>
	<!-- 引入方式1:通过本地引入 -->
	<!-- <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> -->
	<!-- 引入方式2:通过外部网站引入 -->
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

	<script type="text/javascript">
		// $(document).ready()的使用
		// $(document).ready(function(){
		// 	$('h2 span').addClass('SS')
		// })
		// 简写
		$(function() {
			$('h2 span').addClass('SS')
		})
	</script>
</head>
<body>
	<h2>Hello <span>world!</span></h2>
</body>
</html>

运行实例 »

点击 "运行实例" 按钮查看在线实例

总结:

  1. jquery可以通过两种方式引入,包括从本地引入和从网络引入。

  2. $(document).ready()事件:只要DOM创建完成就可以触发,不必等到元素全部加载完成。

  3. 而window.onload事件必须要在dom树生成,外部资源全部加载完毕才可以触发。


Correction status:Uncorrected

Teacher's comments:
Statement of this Website
The copyright of this blog article belongs to the blogger. Please specify the address when reprinting! If there is any infringement or violation of the law, please contact admin@php.cn Report processing!
All comments Speak rationally on civilized internet, please comply with News Comment Service Agreement
0 comments
Author's latest blog post