博客列表 >0420jquery两种引入方式和载入方式

0420jquery两种引入方式和载入方式

riskcn的博客
riskcn的博客原创
2018年04月03日 17:38:52704浏览

1、jQuery可以本地文件引入和在线库引入;

2、jQuery语句放到页面前方的话须使用$(document).ready()方法提前加载DOM部分

实例

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>0402jquery的二种引入方式</title>
	<!-- jquery的二种引入方式 -->
	<!-- <script type="text/javascript" src="js/jquery.3.3.1.js"></script> -->
	<script type="text/javascript" src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript">
		$(document).ready(
			function(){
				$('ul>li:nth-child(2)~*').css('background-color','lightblue')
			})
	</script>
</head>
<style type="text/css">
	.box{width:500px;margin:0 auto;border:1px solid #eee;}
	ul{overflow: hidden;list-style: none;margin:0;padding: 0}
	.box ul li{float:left;width:40px;height:40px;text-align: center;line-height: 40px;background: lightgreen;border-radius: 50%;margin:20px;}
</style>
<body>
	<div class="box">
		<ul>
			<li>1</li>
			<li>2</li>
			<li>3</li>
			<li>4</li>
			<li>5</li>
		</ul>
	</div>
</body>
</html>

运行实例 »

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


声明:本文内容转载自脚本之家,由网友自发贡献,版权归原作者所有,如您发现涉嫌抄袭侵权,请联系admin@php.cn 核实处理。
全部评论
文明上网理性发言,请遵守新闻评论服务协议