jQuery 学习笔记

最新推荐文章于 2022-09-16 14:43:31 发布

江昌南er

最新推荐文章于 2022-09-16 14:43:31 发布

阅读量243

点赞数

分类专栏： jQuery

本文链接：https://blog.csdn.net/qq_39683463/article/details/88876970

版权

jQuery 专栏收录该内容

1 篇文章 0 订阅

订阅专栏

1.把jQuery添加在页面里

如果把下载jQuery，放在与html相同文件夹的_js文件夹里，可以看下面：

<script src="../_js/jquery.min.js"></script>

如果没下载也可以引用其它公开jQuery的引用地址

<script src="http://code.jquery.com/jquery-latest.js"></script>
//其他有效地址
//http://code.jquery.com/jquery-1.4.1.min.js
//http://code.jquery.com/jquery-1.4.1.js
//也可以引用Google的
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"type="text/javascript"></script>

参考《JavaScript和jQuery实战手册》的一个简单的页面：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Complete Pull Quotes</title>
<link href="../_css/site.css" rel="stylesheet">
<style>
.pullquote {
	float: right;
	clear: right;
	width: 200px;
	padding: 10px;
	font-size: 20px;
	background-color: rgba(255, 211, 224, 0.5);
	border-radius: 10px;
	margin: 20px 0 10px 10px;
	font-style: italic;
}
</style>
<script src="../_js/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('span.pq').each(function() {
  var quote=$(this).clone();
  quote.removeClass('pq');
  quote.addClass('pullquote');
  $(this).before(quote);
}); // end each
}); // end ready
</script>
</head>

<body>
<div class="wrapper">
	<header>
	    JAVASCRIPT <span class="amp">&amp;</span> jQUERY: THE&nbsp;MISSING&nbsp;MANUAL
	</header>
<div class="content">
	<div class="main">
<h1>Auto-Pull Quotes</h1>
  <h2>Vestibulum semper</h2>
  <p>Vestibulum semper tincidunt sem. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Donec pulvinar, justo non fringilla dapibus, sapien tortor cursus erat, at posuere magna nisi tincidunt sapien. Sed nisl. Fusce venenatis, libero porta porta fringilla, sapien odio tincidunt sem, id aliquam tellus sapien sit amet quam. <span class="pq">Vivamus justo mi, aliquam vitae, eleifend et, lobortis quis, eros.</span> Ut felis arcu, mollis ut, interdum molestie, vehicula a, sapien. Sed nisi nunc, bibendum vel, adipiscing sed, placerat quis, augue. Nullam ut nibh sed orci tempor rutrum. Sed iaculis. Suspendisse potenti. Donec semper molestie felis. Sed vitae diam. Curabitur sed velit convallis orci luctus viverra. Quisque et quam non tortor ultrices rutrum. Nulla porttitor mauris sed nunc. Donec lectus. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Cras quis massa. Sed mattis erat vitae nisi.</p>
  <h2>Morbi dictum</h2>
  <p>Donec at sapien non dolor tempor congue. Morbi dictum rutrum nisl. Curabitur tellus metus, pharetra vitae, tempus sit amet, semper ac, sapien. In hac habitasse platea dictumst. Mauris est velit, placerat eu, porta eget, aliquam in, dui. Nam mi quam, lobortis in, dictum vel, gravida et, sapien. <span class="pq">Etiam mattis. Donec sed diam nec odio molestie iaculis.</span> Vestibulum elementum odio sed nunc. Vestibulum ac nisl a lectus posuere malesuada. Praesent lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos hymenaeos. Morbi eu nibh. In hac habitasse platea dictumst. Integer posuere tellus. Fusce et justo ac sem sagittis consectetuer. Aliquam erat volutpat. Vivamus interdum ullamcorper felis. Vestibulum pulvinar. Integer ornare malesuada diam.</p>
  <h2>Praesent sed est</h2>
  <p>Praesent sed est ac metus facilisis pharetra. Maecenas risus risus, facilisis vitae, tempus id, dapibus non, nunc. Etiam pulvinar egestas pede. Cras elit. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Ut quam. Vivamus at orci. In hac habitasse platea dictumst. Nunc et magna. Ut sollicitudin scelerisque mauris. Nam elementum nisl a enim.</p>
  <p>Integer lacus. Mauris condimentum scelerisque mauris. Nullam luctus. Vestibulum neque dolor, tempus quis, aliquam quis, mollis at, odio. Quisque in mi eu velit pretium commodo. Nullam fringilla mollis pede. Praesent eleifend tellus et tellus. Ut in sem. In aliquam dignissim mauris. Aenean ac magna blandit quam scelerisque accumsan. Sed suscipit odio at pede. In hac habitasse platea dictumst. Aenean sed tortor sit amet dui commodo tempus. Vestibulum sit amet arcu eu lectus scelerisque fermentum. Vivamus at arcu at est feugiat convallis. Fusce eu metus. Donec vel tellus eu massa ultrices ultricies. Cras dapibus tellus sed libero. Fusce et dolor.  </p>
</div>
	<footer>
		<p>JavaScript &amp; jQuery: The Missing Manual, 3rd Edition, by <a href="http://sawmac.com/">David McFarland</a>. Published by <a href="http://oreilly.com/">O'Reilly Media, Inc</a>.</p>
	</footer>
</div>
</div>
</body>
</html>