jQuery入门-细节讲解

隐式迭代

Class操作

属性操作

attr()实战

prop()方法

jQuery动画

自定义动画

创建节点与添加节点

清空节点和删除节点

隐式迭代

从上一篇博客我们知道，jQuery对象其实可以看作是一个DOM对象的数组，而当我们给jQuery对象设置样式时，会给jQuery内部所有对象都设置上相同的属性，这就是jQuery里的隐式迭代。

下面看示例

示例2-1：

<!DOCTYPE html>
<html>
<head><title>jQuery隐式迭代</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<ul><li>我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li><li>我是第4个li</li><li>我是第5个li</li>
</ul>
</body><script type="text/javascript" src="jQuery\jquery-1.12.4.js"></script>
<script type="text/javascript">$(function () {//两种方法设置样式,效果相同//1.jQuery对象调用css(propertyName, value)方法$("li").css("backgroundColor", "pink").css("fontSize", "20px").css("color", "blue")//2.jQuery对象调用$("li").css({backgroundColor: "pink",fontSize: "20px",color: "blue"})console.log($("li").css("fontSize"));})
</script>
</html>

运行结果如图所示

示例2-1把jQuery内部所有对象全部设置为同一个属性，而打印出的属性值也是跟我们设置的值一样，那我们要是给jQuery内部的对象分别设置不同的属性呢，这样获取jQuery属性值又会哪个值呢

下面看示例

示例2-2：

<!DOCTYPE html>
<html>
<head><title>jQuery隐式迭代</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<ul><li>我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li><li>我是第4个li</li><li>我是第5个li</li>
</ul>
</body><script type="text/javascript" src="jQuery\jquery-1.12.4.js"></script>
<script type="text/javascript">$(function () {$("li").eq(0).css("backgroundColor","pink").css("fontSize", "18px")$("li").eq(1).css("backgroundColor","blue").css("fontSize", "19px")$("li").eq(2).css("backgroundColor","green").css("fontSize", "20px")$("li").eq(3).css("backgroundColor","orange").css("fontSize", "21px")$("li").eq(4).css("backgroundColor","red").css("fontSize", "22px")console.log($("li").css("fontSize"));})
</script>
</html>

运行结果如图所示：

总结一下

隐式迭代：

在设置操作的时候，会给jQuery内部的所有对象都设置上相同的值，但是，获取的时候，只会返回第一个元素对应的值

Class操作

添加样式类

addClass(“ClassName”)

ClassName:需要添加的样式类名，注意参数不要带点

//例子，给所有div添加one的样式

$(“div”).addClass(“one”)

移除样式类

removeClass(“ClassName”)

ClassName:需要移除的样式类名，注意参数不要带点

//例子，移除div 中one的样式

$(“div”).removeClass(“one”)

判断是否有某个样式类

hasClass(“ClassName”)

ClassName:需要判断的样式类名，返回值是true或false

//例子，判断div是否有one的样式类

$(“div”).hasClass(“one”)

转换样式类

toggleClass(“ClassName”)

ClassName:需要切换的样式类名，如果有，移除该样式，如果没有，添加该样式

//例子

$(“div”). toggleClass (“one”)

看完这些，你已经有了对jQuery的CSS操作的大概认识，下面我们看个示例

示例2-3：

<!DOCTYPE html>
<html>
<head><title>jQuery class操作</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>.basicColor{background-color: pink;}.BigFont{font-size: 32px;}</style>
</head>
<body>
<input type="button" value="添加basicColor类">
<input type="button" value="添加BigFont类">
<input type="button" value="移除一个类">
<input type="button" value="判断样式类">
<input type="button" value="转换样式类">
<ul><li>我是第1个li</li><li>我是第2个li</li><li>我是第3个li</li><li>我是第4个li</li><li>我是第5个li</li>
</ul>
</body><script type="text/javascript" src="jQuery\jquery-1.12.4.js"></script>
<script type="text/javascript">$(function () {// 添加一个类$("input").eq(0).click(function () {$("li").addClass("basicColor")})$("input").eq(1).click(function () {$("li").addClass("BigFont")})// 移除一个类$("input").eq(2).click(function () {$("li").removeClass("BigFont")})// 判断样式类$("input").eq(3).click(function () {console.log($("li").hasClass("BigFont"));})// 转换样式类$("input").eq(4).click(function () {//判断li有没有basicColor类，如果有，就移除他，如果没有，添加他//toggle$("li").toggleClass("basicColor");});})
</script>
</html>

运行结果如图所示：

属性操作

jQuery属性操作跟样式操作有点类似

样式：在style里面写的，用css来操作。

属性：在里面里面写的，用attr方法操作。

下面看一个示例

示例2-4：

<!DOCTYPE html>
<html>
<head><title>jQuery 属性操作</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<img src="01.jpg" title="jQuery" alt="YES"/>
</body>
<script type="text/javascript" src="jQuery\jquery-1.12.4.js"></script>
<script type="text/javascript">
$(function () {// 属性操作的方法跟设置样式的方法差不多// 第一种方式$("img").attr("title", "JavaScript");$("img").attr("alt", "NO");// 第二种方式$("img").attr({title: "C++",alt: "start"})// 获取元素的值console.log($("img").attr("title"));})
</script>
</html>

运行结果如图所示：

attr()实战

示例2-5：

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style type="text/css">body {font-family: "Helvetica", "Arial", serif;color: #333;background-color: #ccc;margin: 1em 10%;}h1 {color: #333;background-color: transparent;}a {color: #c60;background-color: transparent;font-weight: bold;text-decoration: none;}ul {padding: 0;}li {float: left;padding: 1em;list-style: none;}#imagegallery {list-style: none;}#imagegallery li {margin: 0px 20px 20px 0px;padding: 0px;display: inline;}#imagegallery li a img {border: 0;}</style><script src="../jquery-1.12.4.js"></script><script>$(function () {//  给所有的a注册点击事件$("#imagegallery a").click(function () {var href = $(this).attr("href");$("#image").attr("src", href);var title = $(this).attr("title");$("#des").text(title);return false;});});</script>
</head>
<body>
<h2>美女画廊
</h2><ul id="imagegallery"><li><a href="images/1.jpg" title="美女A"><img src="data:images/1-small.jpg" width="100" alt="美女1"/></a></li><li><a href="images/2.jpg" title="美女B"><img src="data:images/2-small.jpg" width="100" alt="美女2"/></a></li><li><a href="images/3.jpg" title="美女C"><img src="data:images/3-small.jpg" width="100" alt="美女3"/></a></li><li><a href="images/4.jpg" title="美女D"><img src="data:images/4-small.jpg" width="100" alt="美女4"/></a></li>
</ul><div style="clear:both"></div><img id="image" src="data:images/placeholder.png" alt="" width="450px"/><p id="des">选择一个图片</p></body>
</html>

运行结果如图所示：

这里有一个小细节

关于return false的作用

有两个作用，禁止向上冒泡和禁止默认行为。

请先看以下代码：

<div id="box"><div id="txt">123</div><input id="btn" type="submit"></div>

禁止向上冒泡：event.stopPropagation();

在你点击了 txt 或者 btn 后，将会触发 onclick 事件。然后会触发 txt 或 btn 的上一层，box 的 onclick 也会被触发。当你在 txt 或 btn 的函数最后加入了 return false 后，那么就不会触发 box 的 onclick 事件了。

禁止默认行为：event. preventDefault();

在你单击了 btn 后，默认是会提交表单的。当你在 btn 单机触发的函数内，如果写入 return false 的话，那么就只执行函数，不会提交表单了。

使用一次 return false，将会同时达到 event.stopPropagation() 和 event.preventDefault() 的功效。

prop()方法

prop()的用法跟attr()方法类似，只不过略有不同

下面看示例

示例2-6：

<!DOCTYPE html>
<html>
<head><title>jQuery 实现表格全选案例</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>
<body>
<input type="button" value="选中">
<input type="button" value="不选中">
<input type="checkbox" >
</body>
<script type="text/javascript" src="jQuery\jquery-1.12.4.js"></script>
<script type="text/javascript">$(function () {// $("input").eq(0).click(function () {//     $("input").eq(2).attr("checked", true)// });// $("input").eq(1).click(function () {//     $("input").eq(2).attr("checked", false)// });//对于布尔类型的属性，不要使用attr方法，应该用prop方法 prop用法跟attr方法一样。$("input").eq(0).click(function () {$("input").eq(2).prop("checked", true)});$("input").eq(1).click(function () {$("input").eq(2).prop("checked", false)});})
</script>
</html>

运行效果如图所示：

为什么布尔类型的属性，类似checked的不用attr()方法呢？

从官方文档我们看到，从jQuery1.6起，attr()方法对尚未设置的属性返回未定义的属性。

所以，对于布尔类型的属性，我们应该使用prop()方法。

jQuery动画

show()方法：显示匹配的元素

hide()方法：隐藏匹配的元素

下面看示例

示例2-7：

<!DOCTYPE html>
<html>
<head><title>jQuery 动画</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>div{width:300px;height:300px;background-color: aqua;display: none;}</style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<div></div>
</body>
<script type="text/javascript" src="jQuery\jquery-1.12.4.js"></script>
<script type="text/javascript">$(function () {$("input").eq(0).click(function () {$("div").show();})$("input").eq(1).click(function () {$("div").hide();})})
</script>
</html>

运行效果如图所示：

当然，show()和hide方法都可以传参数，比如将上面的show()方法修改成show(600),修改后效果如下

show不传参数，没有动画效果

$("div").show();

show(speed)

speed:动画的持续时间可以是毫秒值还可以是固定字符串，默认值是normal

fast:200ms normal:400ms slow:600ms

$("div").show("ddd");//传的参数字符串无效，默认normal
$("div").show("fast")
$("div").show(600)

当然，还有一种写法：show([speed], [callback])

$("div").show(1000, function () {console.log("哈哈，动画执行完成啦");})

当然，hide()方法也一样，可以传参数

slideDown():用滑动动作显示匹配的元素。

slideUp():用滑动动作隐藏匹配的元素。

slideToggle():用滑动动作显示或隐藏匹配的元素。

下面看示例

示例2-8：

<!DOCTYPE html>
<html>
<head><title>jQuery 动画</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><style>img{width:300px;height:300px;display: none;}</style>
</head>
<body>
<input type="button" value="显示">
<input type="button" value="隐藏">
<input type="button" value="切换">
<div><img src="01.jpg"></div>
</body>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>$(function () {//滑入slideDown$("input").eq(0).click(function () {$("img").slideDown();})//滑出slideUp$("input").eq(1).click(function () {$("img").slideUp();})//切换slideToggle$("input").eq(2).click(function () {$("img").slideToggle();})})
</script>
</html>

运行效果如图所示：

当然，跟上述所示相似的函数还有

fadeIn():通过将匹配元素淡出到不透明状态来显示匹配的元素。

fadeOut():通过将匹配元素淡出到不透明状态来隐藏匹配的元素。

fadeToggle():通过动画显示或隐藏匹配的元素的不透明度。

自定义动画

animate():执行一组CSS属性的自定义动画。

下面看示例

示例2-9：

<!DOCTYPE html>
<html>
<head><title>jQuery 自定义动画</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><style>div {width: 100px;height: 100px;position: absolute;}#box1 {background-color: deeppink;}#box2 {margin-top: 150px;background-color: chartreuse;}#box3 {margin-top: 300px;background-color: crimson;}</style>
</head>
<body>
<input type="button" value="开始">
<input type="button" value="结束">
<div id="box1">box1</div>
<div id="box2">box2</div>
<div id="box3">box3</div><script src="jQuery/jquery-1.12.4.js"></script>
<script>$(function () {$("input").eq(0).click(function () {//animate()函数//第一个参数：对象，里面可以传需要动画的样式//第二个参数：speed 动画的执行时间ms//第三个参数：动画的执行效果//第四个参数：回调函数// left向右移动 800是指800px，表示向右移动800px$("#box1").animate({left: 800}, 8000);//swing:秋千 摇摆$("#box2").animate({left: 800}, 8000, "swing");//linear:线性 匀速$("#box3").animate({left: 800}, 8000, "linear", function () {console.log("this is box3");});});});</script>
</body>
</html>

运行效果如图所示

动画队列

假设我们在jQuery里这样写动画

      $("div").animate({left:800}).animate({top:400}).animate({width:300,height:300}).animate({top:0}).animate({left:0}).animate({width:100,height:100})

会有这样的效果：

也就是从头开始一个animate()一个animate()地执行，一个animate()执行完再执行下一个。而不是被最后一个animate()函数覆盖

stop():停止匹配元素上当前正在运行的动画。

在上面的示例2-9添加如下代码

        $("input").eq(1).click(function () {//stop()停止当前执行的动画$("#box1").stop();$("#box2").stop();$("#box3").stop();});

运行结果所图所示：

当然，stop()函数也有两个参数

//clearQueue:是否清除动画队列 true  false
//jumpToEnd:是否跳转到当前动画的最终效果 true false

创建节点与添加节点

appened():将参数指定的内容插入到匹配元素集中的每个元素的末尾。

appendTo():将匹配元素集中的每个元素插入到目标的末尾。

prepend():插入由参数指定的内容到匹配元素集中的每个元素的开头。

prepend():将匹配元素集中的每个元素插入到目标的开头。

after():在匹配元素集中的每个元素之后插入由参数指定的内容。

before():在匹配元素集中的每个元素之前插入由参数指定的内容。

下面看示例

示例2-10

<!DOCTYPE html>
<html>
<head><title>jQuery 创建节点</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><style>div{width:300px;height:300px;background-color: deeppink;}</style>
</head>
<body>
<p id="afterDiv">我是after</p>
<div id="div1">我是DIV</div>
<p id="beforeDiv">我是before</p>
<p id="p1">我是外面的p元素append</p>
<p id="p2">我是外面的p元素prepend</p>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>
$(function () {// 创建节点有两种写法// 第一种// $("#div1").append("<p>我是节点</p>");// 第二种// var $p = $("p");// $("#div1").append($p);//添加到子元素的最后面$("div").append($("#p1"));// $("#p1").appendTo($("div"));// 添加到子元素的最前面$("div").prepend($("#p2"));// $("#p1").prependTo($("div"));//添加到元素 前/后 面$('div').after($("#afterDiv"));$('div').before($("#beforeDiv"));
})</script>
</body>
</html>

把jQuery的代码注释后，运行效果如图所示：

使用jQuery代码之后，运行效果如图所示

清空节点和删除节点

empty():从DOM中删除匹配元素集的所有子节点。

remove():从DOM中删除匹配的元素集。

clone():创建匹配元素集的深度副本

下面看一个示例

示例2-11

<!DOCTYPE html>
<html>
<head><title>jQuery 清空节点和删除节点</title><meta http-equiv="Content-Type" content="text/html; charset=utf-8"/><style>div{width:300px;height:300px;background-color: deeppink;}</style>
</head>
<body>
<div><p>我是p1</p><p>我是p2</p>
</div>
<p class="des">我是p3</p>
<script src="jQuery/jquery-1.12.4.js"></script>
<script>$(function () {// 清空div元素下的所有子元素// $("div").empty();//删除div，包括其子元素// $("div").remove();// $("div").clone();//false:不传参数也是深度复制,不会复制事件//true:也是深复制，会复制事件$(".des").clone(true).appendTo("div");  })</script>
</body></html>

运行效果如图所示：