首页手记 jQuery学习笔记（二）

jQuery学习笔记（二）

标签：

Html/CSS Html5 CSS3

重要学习札记

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

一、jQuery 结束动画

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

I) stop()

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

<head>
<script>
$(document).ready(function(){
 $("#stop").click(function(){
 //结束id为panel的元素上的正在进行的所有动画
   $("#panel").stop();
 });
});
</script>
</head>

<body>

<button id="stop">停止动画</button>

<div id="panel">
<h1>标题啊</h1>
<p>somethins.....</p>
<div>
</body>

II) stop(stopAll,goToEnd)

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

参数名	type	默认值	是否必传	描述
stopAll	boolean	false	否	是否清除动画队列。true:是，false:仅停止当前活动的动画，队列中尚未执行的动画可以继续排列向后执行
goToEnd	boolean	false	否	是否立即完成当前所有动画。true:是，false:根据设定的动画执行速度，时间来完成

III) 动画完成时的监听回调函数Callback

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

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

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

二、Chaining操作

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

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

三、jQuery DOM/属性/CSS 操作

3.1、 DOM操作

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

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

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

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

3.1.1 DOM树遍历

jQuery提供了很多有用的方法来遍历DOM树，这里我只做一个向上遍历的笔记，想了解更多的同学可以查阅jQuery 遍历向上遍历DOM树的方法：	方法名	描述
parent()	向上一级查询当前被选元素的父元素。【注】：只会向上查询一级
parents()	向上查询当前被选元素的所有父元素
parentsUntil("params")	向上查询从当前被选元素的所有父元素，直到指定的params元素为止

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

3.1.2 添加/删除元素

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

<p>
<div>
这里是，，，，，
</div>
</p>

假设<div>为被选元素。

append()：在被选元素的所包裹的内容的结尾插入内容,上例则是指在“，，，，，”后面与</div>前面插入。
prepend()：在被选元素的所包裹的内容开头插入内容,上例是指插入在<div>后面"这里是,,,,,"前面插入。
after()：在被选元素结束标签之后添加，上例是在</div>后。
before()：在被选元素开始标签之前添加，上例是在<div>前。

3.2、属性attr操作

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

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

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

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

......

<p>
<h1>标题</h1>
<a href="www.baidu.com">百度</a>
<a id = "a1" href="www.520yangyang.cn">阳洋的空间</a>
</p>

3.3、 css操作

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

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

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

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

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

四、综合案例

<!DOCTYPE html>
<html>
<head>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("#btn1").click(function(){
    alert("Text: " + $("#test").text());
  });
  $("#btn2").click(function(){
    alert("HTML: " + $("#test").html());
  });

  $("#btn3").click(function(){
 //假设输入框输入数字为111，则打印222，反之输入222，打印111
  $("#test").text(function(){
     var result = "";
     var inputStr = $("#input1").val().toString();
      if(inputStr === "111"){
       result = "222";
     }else if(inputStr === "222"){
       result = "111";
     }else{
        result = inputStr;
     }

      return result;
   });

  });
 //元素的添加操作
//after:在被选元素结束标签后面添加
 $("p").after("</br>加个链接：<a href='www.w3school.com'>W3School学习</a>");
//before:在被选元素开始标签前面添加
$("p").before("<div class='addCls'>在被选元素前添加</div>");
});
</script>

<style type="text/css">
div.addCls{
 width:'200px';
 height:'100px';
 background-color:#e5eecc;
}
</style>
</head>

<body>
<p id="test">这是段落中的<b>粗体</b>文本。</p>
<button id="btn1">显示文本</button>
<button id="btn2">显示 HTML</button></br>
<button id="btn3">读取值</button>

<input id="input1">请输入内容</input>
</body>

</html>

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

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

点击查看更多内容