目录
隐式迭代
从上一篇博客我们知道，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="images/1-small.jpg" width="100" alt="美女1"/>
</a></li>
<li><a href="images/2.jpg" title="美女B">
<img src="images/2-small.jpg" width="100" alt="美女2"/>
</a></li>
<li><a href="images/3.jpg" title="美女C">
<img src="images/3-small.jpg" width="100" alt="美女3"/>
</a></li>
<li><a href="images/4.jpg" title="美女D">
<img src="images/4-small.jpg" width="100" alt="美女4"/>
</a></li>
</ul>
<div style="clear:both"></div>
<img id="image" src="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>
运行效果如图所示：
541
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
