简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
Home > List of blog posts > jquery的二种引入方式和$(document).ready()使用方式与简写
Blogger Information
Blog 38
fans 0
comment 1
visits 30414
Special Recommendation
More>
Related recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
jquery的二种引入方式和$(document).ready()使用方式与简写
1
Original
753 people have browsed it

两种引入方法：

    

1.在线引入

谷歌、微软、百度都有提供在线的jQuery引用。比如

<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
2.本地导入
jQuery文件与html文件位于同一目录下，可直接写jQuery的文件名
<script type="text/javascript" src="jquery-3.3.1.js"></script>
不处于相同位置的
<script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

两种的好处：如果你处于线上建议使用第一种，如果处于线下建议使用第二种，不存在优劣，可自信选择

$(document).ready()使用方式与简写：

$(function(){
		//js代码
	})

	$(document).ready(function () {
		//js代码
	})

例子：

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>5.jquery代码的执行方式</title>
	<style type="text/css">
	.horiz {
		float:left;
		list-style: none;
		margin: 10px;
	}
</style>
<!-- 导入1. -->
<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- 导入2. -->
<!-- <script type="text/javascript" src="../js/jquery-3.3.1.js"></script> -->
<script type="text/javascript">
//  $(document).ready
	// 例子1.
	$(function(){
		$('li').css('backgroundColor','lightgreen')
	})
	// 例子2.
	// $(document).ready(function () {
	// 	$('#list > li').addClass('horiz')
	// })
	
</script>
</head>
<body>
	<h2>购物清单</h2>
	<ul id="list">
	<li>生活用品
		<ul>
			<li><a href="">淘宝</a></li>
			<li>箱包</li>
			<li>衣服</li>
			<li>鞋子</li>
		</ul>
	</li>
	<li>数码产品
		<ul>
			<li><a href="">京东</a></li>
			<li>笔记本电脑</li>
			<li>显示器</li>
		</ul>
	</li>
	<li>食品保健
		<ul>
			<li><a href="">拼多多</a></li>
			<li>奶粉</li>
			<a href="">玩具</a>
		</ul>
	</li>
</ul>

<script type="text/javascript">

</script>	
</body>
</html>

运行实例 »

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





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
  • 1
    2018-03-16 00:39:40
About us Disclaimer Sitemap
php.cn：Public welfare online PHP training，Help PHP learners grow quickly！