jQuery学习总结和进阶展望

jQuery是什么?

jQuery is a fast, small, and feature-rich JavaScript library. It makes things like HTML document traversal and manipulation, event handling, animation, and Ajax much simpler with an easy-to-use API that works across a multitude of browsers. With a combination of versatility and extensibility, jQuery has changed the way that millions of people write JavaScript.
—— jQuery官网

从以上定义可以看出：

• jQuery是一个JavaScript库
• 使得开发人员写JavaScript代码更简单
• 跨浏览器兼容
• 多特性、可扩展

看到jQuery有这么多好处，许多像我一样的前端小菜鸟会热血沸腾，马上去Github下载jQuery源代码，妄想看懂jQuery源代码，然后写出像jQuery精简且优雅的代码。

经过屡次失败后，我不得不承认，这个压缩后只有 32KB JS代码不是目前的我能够看懂的。那么退而求其次，先从使用jQuery开始，待以后再去阅读源代码。这样就分为二步走：

1. 学习使用jQuery。熟悉 jQuery API，调用jQuery函数，不仅让代码精简易阅读，而且能省去解决许多浏览器兼容性的时间。这样大大提高了开发效率。

2. 进阶展望。阅读jQuery源代码，进行分析和学习，理解它的工作原理，学会处理浏览器兼容性，学习写代码的方式，最终写出类似小而美的代码。

---

如何熟悉jQuery?

推荐去菜鸟教程，因为可以实际动手输入代码试试效果，而不是对着文档看枯燥乏味的API。

---

jQuery学习总结

学习完成一阶段，进行总结是很必要的，这样可以对学习的东西进行巩固，对不明白的知识进行思考和整理，也有助于记忆和理解。甚至，可以总结出学习方法，以后学习类似的框架或库时，就可以很快入手。

jQuery基本上由以下几个部分构成：

1. 选择器
2. HTML文档操作
3. HTML文档遍历
4. 事件处理
5. 动画
6. AJAX

选择器

支持绝大部分常用的css选择器。使用方法如下：

$(selector)

其中selector字符串，使用和css选择器相同，最外层要加上双引号或单引号。如

$('#id');$('.class');$('tag');$('a:link');$('.class tag');$('li:even');$("li:odd");$("li:first");

---

HTML文档操作 CRUD

添加

$(selector).prepend('插入内容'); //在被选元素开始位置插入$(selector).append('插入内容');  //在被选元素结束位置插入$(selector).before('插入内容');  //在被选元素之前插入$(selector).after('插入内容');   //在被选元素之后插入

$(selector).addClass(class_selector);    //添加类$(selector).removeClass(class_selector); //删除类$(selector).toggleClass(class_selector); //添加或删除类

删除

$(selector).remove();          //删除该元素及所有后代元素

$(selector).empty();           //empty 清空所有后代元素$(selector1).empty(selector2); //清空selector1中selector2选中元素

访问和修改

/* value */$(selector).val();         $(selector).val('设置的值'); 

/* attribute */$(selector).attr('属性名'); $(selector).attr('属性名':'属性值');

/* text*/$(selector).text();$(selector).text('设置的文本');

/* html*/$(selector).html();$(selector).html('设置的HTML');

/* css */$(selector).css('属性名');$(selector).css({'属性名':'属性值'}); //可以设置多个

/* box size */$(selector).width();          //内容宽度$(selector).height();         //内容高度$(selector).innerWidth();     //内容和填充的宽度之和$(selector).innerHeight();    //内容和填充的高度之和$(selector).outerWidth();     //内容、填充和边框的宽度之和$(selector).outerHeight();    //内容、填充和边框的高度之和$(selector).outerwidth(true); //内容、填充、边框和外边距的宽度之和$(selector).outerHeight(true);//内容、填充、边框和外边距的高度之和

---

HTML文档遍历

/* 祖先 */$(selector).parent();                //父结点$(selector).parents();               //所有祖先,直到html$(selector).parentsUntil(selector2); //父结点到selector2之间的祖先

/* 后代 */$(selector).children();        //子结点$(selector).find(selector2);   //查找并返回后代结点

/* 兄弟 */$(selector).siblings();             //所有兄弟结点，不包括本身$(selector).prev();                 //前一个结点$(selector).prevUntil(selector2);   //前一个结点到selector2之间的结点$(selector).prevAll();              //前面所有结点$(selector).next();                 //与上相对，注释省略                $(selector).nextUntil(selector2);$(selector).nextAll();

/* 查找 */$(selector).first();           //第一个子结点$(selector).last();            //最后一个子结点$(selector).eq(index);         //从0开始，第index个子结点$(selector).filter(selector2); //子结点中筛选selector2选中的元素$(selector).not(selector2);    //了结点中过滤selector2选中的元素

---

事件处理

jQuery所有事件处理都类似，分为带有回调函数和不带回调函数：

$(selector).handler();$(selector).handler(callback);

其中，handler为事件处理器，常用的handler有click, hover, change 等，具体事件可以去查看 JQuery事件API

---

动画

隐藏/显示

$(selector).hide();   //隐藏$(selector).show();   //显示$(selector).toggle(); //对隐藏和显示进行切换

下拉/收起

$(selector).slideDown();$(selector).slideUp();$(selector）.slideToggle();

淡入/淡出

$(selector).fadeIn();$(selector).fadeOut();$(selector).fadeToggle();$(selector).fadeTo();

自定义动画

开始动画：

/* 第一个参数是JavaScript对象或JSON格式，
** 第二个是速度参数，可以是字符串slow, fast，也可以是整数表示毫秒
** 第三个参数是回调函数
** 只有第一个参数是必须的，其余都是可选的
*/

/* 开始动画 */$(selector).animate({参数键值对},speed, callback);

注意： jQuery支持绝大多数css属性动画，但不支持background 顔色带有色彩的动画。带有连字符的属性名要用 驼峰表示法。

结束动画：
stopAll 是Boolean 类型，表示是否结束所有动画。 goToEnd 也是Boolean类型，表示是否把当前停止的动画直接进行到结尾，省略中间的过程。不带参数时表示默认参数都是false 。

$(selector).stop();  //停止当前动画，队列后序动画正常执行$(selector).stop(stopAll?,goToEnd?); 

允许链式动画，即把一个动画挂在另一动画后面，表示动画执行的顺序。

$(selector).animate().animate()...

---

AJAX

常用API：

1. $.get() 用get方法发送请求，从服务器加载数据
2. $.load() 从服务器加载数据并更新HTML
3. $.post() 用post方法发送请求到服务器，并从服务器加载数据
4. $.getJSON() 从服务器加载JSON格式的数据
5. $.getScript() 从服务器加载JS，然后执行
6. 更多

---