您的位置：首页 > Web前端 > JQuery

jQuery学习笔记（二）

2017-01-19 19:51 204 查看

重要学习札记

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默认值是否必传描述
stopAllbooleanfalse否是否清除动画队列。true:是，false:仅停止当前活动的动画，队列中尚未执行的动画可以继续排列向后执行
goToEndbooleanfalse否是否立即完成当前所有动画。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树：



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>


以上这些都是很基础的东西，相信每个人都看得懂，但看得懂与会写是两码事！

W3School很不错，它可以边学边练，建议正在看此文想学好javaScript的同学，最好边学边练，哪怕是对着它的例子敲一变，它也会有助于你去理解它，更好的记住它！！

【PS】下一篇，我将贴出Flex的学习笔记！！
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航