Jquery入门学习的方法经验解析
内容导读
互联网集市收集整理的这篇技术教程文章主要介绍了Jquery入门学习的方法经验解析，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含3492字，纯文字阅读大概需要5分钟。
内容图文
先了解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
推荐学习课Jquery 入门教程
1.jQuery使用
下载 jQuery
有两个版本的 jQuery 可供下载：
Production version - 用于实际的网站中，已被精简和压缩。
Development version - 用于测试和开发（未压缩，是可读的代码）
以上两个版本都可以从 jquery.com 中下载。
<head> <script src="jquery-1.10.2.min.js"></script> </head>
课程链接：http://www.gxlcms.com/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.gxlcms.com/code/3692.html
3.jQuery 选择器；元素选择器、#id 选择器、.class 选择器等
<title>Gxl网(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.gxlcms.com/code/3695.html
4.jQuery 事件
<head>
<meta charset="utf-8">
<title>Gxl网(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.gxlcms.com/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.gxlcms.com/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.gxlcms.com/course/113.html 第4章jQuery遍历
7.必须学会jQuery手册。
jquery的学习是不断地应用和创新的过程，贵在坚持。
以上就是Jquery入门学习的方法经验解析的详细内容，更多请关注Gxl网其它相关文章！
内容总结
以上是互联网集市为您收集整理的Jquery入门学习的方法经验解析全部内容，希望文章能够帮你解决Jquery入门学习的方法经验解析所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。
内容备注
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。
内容手机端
扫描二维码推送至手机访问。