频道栏目
首页 > 资讯 > JavaScript > 正文

jQuery学习笔记(二)

17-01-20        来源:[db:作者]  
收藏   我要投稿

一、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里的动画跟其它一样,还有很多别的效果,比如:渐变,淡入淡出等等,具体大家可以参考http://www.w3school.com.cn/jquery/jquery_ref_effects.asp“>jQuery 效果参考手册

二、Chaining操作

这个很容易理解,如果你知道面向对象的话。相反,如果你不知道什么是面向对象,那么你还得下点功夫补下课,因为js也是面向对象的。

在前面那些例子中,我们通过选择器去查找相应的元素时,都是通过$或jQuery对象来进行操作,其实它后面的所有操作方法都可以返回jQuery对象,基于此,我们就可以通过链操作实现一系列的方法调用。

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

三、jQuery DOM/属性/CSS 操作

3.1、 DOM操作

对于jQuery DOM文档操作,其实我们已经很熟悉了,我们经常通过jQuery来查询相应的元素。

其实对于DOM操作,我们还有其它一些很方便的方法,下面是三个最实用的代表:

1. text() : set或get所需文本的内容;

2. html() : set或get所选元素的内容(包括HTML标记);

3. val() : set或get表单字段的值。

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

DOM操作还有另外一个比较重要的操作就是DOM树的遍历。

即,在DOM树上,通过jQuery遍历,我们可以从当前的被选元素开始,向上查找父类或向下查找子类,也可以水平方向查找同类。不理解的同学,我们看一下DOM树:

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>

假设

为被选元素。

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

prepend():在被选元素的所包裹的内容开头插入内容,上例是指插入在

后面”这里是,,,,,”前面插入。

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

before():在被选元素开始标签之前添加,上例是在

前。

3.2、 属性attr操作

属性,即元素所拥有的特性。

jQuery通过attr(“attrName”)方法来set或get属性值。由于一个元素可能有很多属性,因此调用attr()方法必须指明属性名。

比如:获取元素中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属性,

- 在

四、综合案例

<!DOCTYPE html>
<html>
<head>
<script src="/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>
相关TAG标签
上一篇:PHP开发之链表简介
下一篇:小程序快递查询
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站