Jquery入门学习的方法经验解析-js教程-PHP中文网

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

黄舟

发布： 2017-07-31 11:04:20

原创

1497人浏览过

先了解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

PHP与MySQL程序设计3

本书是全面讲述PHP与MySQL的经典之作，书中不但全面介绍了两种技术的核心特性，还讲解了如何高效地结合这两种技术构建健壮的数据驱动的应用程序。本书涵盖了两种技术新版本中出现的最新特性，书中大量实际的示例和深入的分析均来自于作者在这方面多年的专业经验，可用于解决开发者在实际中所面临的各种挑战。本书内容全面深入，适合各层次PHP和MySQL开发人员阅读，既是优秀的学习教程，也可用作参考手册。

253

查看详情

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的学习是不断地应用和创新的过程，贵在坚持。

以上就是Jquery入门学习的方法经验解析的详细内容，更多请关注php中文网其它相关文章！