jQuery总结第一篇
前言:
从开博到现在,一直想写点东西,可是看了几天书,发现新东西很难深入,但又不想让博客荒芜,遂决定,总结之前所学,以文字记之。一方面看自己学习中遗漏了什么,便于查漏补缺;另一方面则是锻炼一下自己的表达能力,看自己是不是真正的理解透彻了,能不能将自己的知识、自己的经验分享给他人,从而融入一个团队,更好地学习与交流。
准备工作:
1.获取jQuery:从大的方面来说,jQuery有两个版本,一个是完整版(Full),一个是压缩版(Min),这两个版本在使用上是没有任何区别的,只不过Min版本是压缩的,体积更小,在网络上使用起来性能更好,而在功能上并未有任何的阉割。(Tip:以前自己傻×了,以为min就是压缩的,人们都说学习应该用完整版,可是现在才知道,原来那些高手们所谓的学习是学习jQuery的源码啊!所以,如果要学jQuery的使用,用Min就够了。如果真的到了学习jQuery的源码的时候,那就要看Full版了)jQuery下载地址:http://code.jquery.com/jquery-1.7.1.min.js
2.搞一个编辑器:notepad++或Vim(尽量别用notepad或者IDE了,一个太原始,一个太费劲,吃内存太大,学习嘛,总是要不断地修修改改)
vim在更换了js的syntax以后还是用起来还是非常舒服的。
Get Started:
首先需要把jQuery库导入到需要用到它的html文件中,先感性地举一个例子。
1 <html>
2 <head>
3 <title></title>
4 <style>
5
6 </style>
7 <script src="jquery.js"></script>
8 <script type="text/javascript">
9 $(document).ready(function(){
10 $('p').click(function(){
11 $('p').text('Hello jQuery!');
12 });
13 });
14 </script>
15 </head>
16 <body>
17 <p> Hello World! </p>
18 </body>
19 </html>
这是一个完整的jQuery操作DOM的例子。首先 将jQuery文件导入<script src="jquery.js"></script>,然后下面是jQuery的代码。
$(document).ready(function(){............});
几乎每一个jQuery脚本的开头都是这一句,其意思为当所有的DOM元素都加载完毕后执行操作。
看这一句:
1 $('p').click(function(){
2 $('p').text('Hello jQuery!');
3 });
先看它的结构:首先是选择器选择p元素,然后为其绑定一个click事件,让p元素的内容改变为Hello jQuery。
每一条命令都分为四部分:jQuery函数(或者它的别名),选择器(选择器的用法与CSS相似),动作,参数。例如:
选择器 | 动作 | 参数 |
jQuery('p') | .css | ('color','blue') |
$('p') | .css | ('color','blue') |
这两种写法完全一样,$就是jQuery的一个别名。jQuery建立一个jQuery对象,它所有的函数方法都在这个对象之下。其别名$也可以随时交出控制权,因而不会与JavaScript的顶级变量冲突,,可以与其他的JavaScript库共存。