jQuery学习笔记（二）

• jQuery结束动画stop()与stop(stopAll,goToEnd)方法；
• jQuery Chaining链操作；
• jQuery DOM/属性/CSS 操作；
• jQuery设置内容或属性的监听回调函数；
• jQuery 添加/删除元素；
• jQuery 中AJAX应用

结束动画的操作在很多业务场景都是很必需的，比如：当我点击一个Button的时候，某个块会产生一个动画，但当这个动画还没有执行完的时候，我又接着进行了别的操作，这时为了体验效果与充分利用内存等，我们就必须手动结束这些还没有结束的动画。
在jQuery库里面，结束动画有无参跟有参两个方法

立即停止被选元素当前正在进行的动画。即不管被选元素有多少个动画组合，只要都在进行，则都将被停止。eg:

停止动画


标题啊
somethins.....

这个是有参的结束动画的方法，参数含义如下：

有时，我们可能会在动画完成的同时去进行相应的其它操作，比如刷新界面等。这时我们就必须得知道动画何时结束。为此jQuery作出了很好的支持，通过回调来达到目的。

$("#panel").stop(function(){
 //todo 做相应的操作
});

此外，jQuery里的动画跟其它一样，还有很多别的效果，比如：渐变，淡入淡出等等，具体大家可以参考jQuery 效果参考手册

这个很容易理解，如果你知道面向对象的话。相反，如果你不知道什么是面向对象，那么你还得下点功夫补下课，因为js也是面向对象的。
在前面那些例子中，我们通过选择器去查找相应的元素时，都是通过$或jQuery对象来进行操作，其实它后面的所有操作方法都可以返回jQuery对象，基于此，我们就可以通过链操作实现一系列的方法调用。

var jqObj = $.noConflict();
//让button显示，并且显示文字
jqObj("#btn1").show().text("我显示了！");

对于jQuery DOM文档操作，其实我们已经很熟悉了，我们经常通过jQuery来查询相应的元素。
其实对于DOM操作，我们还有其它一些很方便的方法，下面是三个最实用的代表：

1. text() : set或get所需文本的内容；
2. html() : set或get所选元素的内容（包括HTML标记）;
3. val() : set或get表单字段的值。

【注】以上这些方法，每个其实都包含有两个方法，即setter()与getter()方法。

DOM操作还有另外一个比较重要的操作就是DOM树的遍历。
即，在DOM树上，通过jQuery遍历，我们可以从当前的被选元素开始，向上查找父类或向下查找子类，也可以水平方向查找同类。不理解的同学，我们看一下DOM树：

这个很容易理解，就没有再举例了。

在实际项目开发中，可能要求动态的增减元素，jQuery支持这一点，使我们开发又便捷了一步。具体怎么操作呢？这里同样，我们记录jQuery的几个常用的代表，其它的，各位可以去W3School上查看。
jQuery4个常用的添加内容的方法：
为了方便下面的方法讲解，假如统一有下面这段代码:

这里是，，，，，

假设为被选元素。

• append()：在被选元素的所包裹的内容的结尾插入内容,上例则是指在“，，，，，”后面与前面插入。

• prepend()：在被选元素的所包裹的内容开头插入内容,上例是指插入在后面"这里是,,,,,"前面插入。

• after()：在被选元素结束标签之后添加，上例是在后。

• before()：在被选元素开始标签之前添加，上例是在前。

属性，即元素所拥有的特性。
jQuery通过attr("attrName")方法来set或get属性值。由于一个元素可能有很多属性，因此调用attr()方法必须指明属性名。
比如：获取元素中href属性的属性值。

$("#btn1").click(function(){
 $("a").attr("href");
});

attr()方法也有回调函数，支持对原数据进行更改后返回。

$("#btn1").click(function(){
 $("#a1").attr("href",function(i,origValue){
   //这个i表示被选元素的位置，当只有一个时，i=0,如果有多个元素，
   //id为a1的元素在第三个，则i=2;依此类推
  })
});

......


标题
百度
阳洋的空间

jQuery对被选元素进行动态的样式操作提供了便捷，通过css()方法，开发者可以方便的get被选元素当前的css样式属性以及set样式给被选元素。
主要注意几点：

• 被选元素得添加class属性，
• 在里面为对应的class定义相关的样式。

css操作主要有以下4个常用方法：

1. addClass()：向被选元素添加一个或多个定义的样式类；
2. removeClass()：与addClass()相反
3. toggleClass()：即addClass()与removeClass()之间的切换操作；
4. css()：setter/getter样式属性。

具体的例子见后面的综合案例

div.addCls{
 width:'200px';
 height:'100px';
 background-color:#e5eecc;
}




这是段落中的粗体文本。
显示文本
显示 HTML

读取值

请输入内容

以上这些都是很基础的东西，相信每个人都看得懂，但看得懂与会写是两码事！
W3School很不错，它可以边学边练，建议正在看此文想学好javascript的同学，最好边学边练，哪怕是对着它的例子敲一变，它也会有助于你去理解它，更好的记住它！！

【PS】下一篇，我将贴出Flex的学习笔记！！