Rumah >hujung hadapan web >tutorial js >Jquery入门学习的方法经验解析

Jquery入门学习的方法经验解析

黄舟asal: 2017-07-31 11:04:201291semak imbas

先了解jquery与js的不同，代码简练、语义易懂、学习快速、文档丰富。 jQuery是一个轻量级的脚本，其代码非常小巧，最新版的JavaScript包只有20K左右。 jQuery支持CSS1-CSS3,以及基本的xPath。 jQuery是跨浏览器的，它支持的浏览器包括IE 6.0+, FF 1.5+, Safari 2.0+, Opera 9.0+。可以很容易的为jQuery扩展其他功能。能将JS代码和HTML代码完全分离，便于代码和维护和修改。

可以通过多种方法在网页中添加 jQuery。您可以使用以下方法：

从 jquery.com 下载 jQuery 库

从 CDN 中载入 jQuery, 如从 Google 中加载 jQuery

XS(}R9K_[AAL)~IV59U397Y.png

推荐学习课Jquery 入门教程

1.jQuery使用

下载 jQuery

有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。

Development version - 用于测试和开发（未压缩，是可读的代码）

以上两个版本都可以从 jquery.com 中下载。

<head>
<script src="jquery-1.10.2.min.js"></script>
</head>

课程链接：http://www.php.cn/code/3688.html

2.jquery的语法：语法是以后应用jquery 的关键所在。

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>表格</title>
 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js" type="text/javascript"></script>
 <script>
// window.onload=function(){
// alert(1)
// };
// window.onload=function(){
// alert(2)
// };
// $(document).ready(function(){
// alert(1)
// });
// $(document).ready(function(){
// alert(2)
// })
 </script>
</head>
<body>
<div id="box">jQuery语法</div>

</body>
</html>

课程链接：http://www.php.cn/code/3692.html

3.jQuery 选择器；元素选择器、#id 选择器、.class 选择器等

 <title>php中文网(php.cn)</title>
 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 </script>
 <script>
 $(document).ready(function(){
 $("button").click(function(){
 $("#test").hide();
 });
 });
 </script>
</head>

<body>
<h2>标题</h2>
<p>段落</p>
<p id="test">#id选择器，点击我会隐藏</p>
<button>点我</button>
</body>

课程链接：http://www.php.cn/code/3695.html

4.jQuery 事件

<head>
<meta charset="utf-8"> 
<title>php中文网(php.cn)</title> 
<script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
 $("#p1").mouseenter(function(){
 alert("您的鼠标移到了 id=p1 的元素上!");
 });
});
</script>
</head>
<body>
<p id="p1">鼠标指针进入此处，会看到弹窗。</p>
</body>

课程链接：http://www.php.cn/code/3704.html

5.jQuery 效果;隐藏与显示、淡入淡出、动画，停止动画等

<head>
 <meta charset="utf-8">
 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 </script>
 <script>
 $(document).ready(function(){
 $("button").click(function(){
 $("p").toggle();
 });
 });
 </script>
</head>
<body>

<button>隐藏/显示</button>
<p>真正的失败不是你没有做成事，而是你甘心于失败。</p>
<p>一切都会好起来的，即使不是在今天，总有一天会的。</p>
</body>

课程链接：http://www.php.cn/course/113.html 第2章jQuery效果

6.jQuery 遍历；遍历、祖先、后代、同胞、过滤等

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8">
 <style>
 .ancestors *
 {
 display: block;
 border: 2px solid lightgrey;
 color: lightgrey;
 padding: 5px;
 margin: 15px;
 }
 </style>
 <script src="http://libs.baidu.com/jquery/1.10.2/jquery.min.js">
 </script>
 <script>
 $(document).ready(function(){
 $("span").parent().css({"color":"red","border":"2px solid red"});
 });
 </script>
</head>
<body>

<div class="ancestors">
 <div style="width:300px;">div (曾祖父元素)
 <ul>ul (祖父元素)
 <li>li (父元素)
 <span>span</span>
 </li>
 </ul>
 </div>

 <div style="width:300px;">div (祖父元素)
 <p>p (父元素)
 <span>span</span>
 </p>
 </div>
</div>

</body>
</html>

课程链接：http://www.php.cn/course/113.html 第4章jQuery遍历

7.必须学会jQuery手册。

jquery的学习是不断地应用和创新的过程，贵在坚持。

Atas ialah kandungan terperinci Jquery入门学习的方法经验解析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan：

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Artikel sebelumnya：JavaScript入门学习的经验分享Artikel seterusnya：如何学习JavaScript语言？学习重难点有哪些？

Artikel berkaitan

Lihat lagi