1、CSS样式操作
1.1、CSS类：
|
addClass() |
为每个匹配的元素添加指定的类名，添加样式 |
|
removeClass() |
从所有匹配的元素中删除全部或者指定的类，删除样式 |
|
toggleClass() |
如果存在（不存在）就删除（添加）一个类，有就删除，没有就添加样式 |
1.2、CSS:
|
css() |
访问匹配元素的样式属性。 |
1.3、位置：
|
offset() |
获取匹配元素在当前视口的相对偏移，返回的对象包含两个整型属性：top 和 left，此方法只对可见元素有效 |
|
position() |
获取匹配元素相对父元素的偏移，返回的对象包含两个整型属性：top 和 left，为精确计算结果，请在补白、边框和填充属性上使用像素单位。此方法只对可见元素有效 |
|
scrollTop() |
获取匹配元素相对滚动条顶部的偏移，此方法对可见和隐藏元素均有效 |
|
scrollLeft() |
获取匹配元素相对滚动条左侧的偏移，此方法对可见和隐藏元素均有效 |
1.4、尺寸：
|
height() |
取得匹配元素当前计算的高度值（px），在 jQuery 1.2 以后可以用来获取 window 和 document 的高 |
|
width() |
取得第一个匹配元素当前计算的宽度值（px），在 jQuery 1.2 以后可以用来获取 window 和 document 的宽 |
|
innerHeight() |
获取第一个匹配元素内部区域高度（包括补白、不包括边框），此方法对可见和隐藏元素均有效 |
|
innerWidth() |
获取第一个匹配元素内部区域宽度（包括补白、不包括边框），此方法对可见和隐藏元素均有效 |
|
outerHeight() |
获取第一个匹配元素外部高度（默认包括补白和边框），此方法对可见和隐藏元素均有效 |
|
outerWidth() |
获取第一个匹配元素外部宽度（默认包括补白和边框），此方法对可见和隐藏元素均有效 |
2、jQuery动画效果
2.1、基本动画：
|
show() |
显示隐藏的匹配元素 |
|
hide() |
隐藏显示的元素 |
|
toggle() |
用于绑定两个或多个事件处理器函数，以响应被选元素的轮流的 click 事件，可见就隐藏，不可见就显示 |
|
以上动画方法都可以添加参数。 1、第一个参数是动画 执行的时长，以毫秒为单位 2、第二个参数是动画的回调函数 (动画完成后自动调用的函数) |
|
2.2、滑动动画：
|
slideDown() |
通过高度变化（向下增大）来动态地显示所有匹配的元素，在显示完成后可选地触发一个回调函数，这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅 |
|
slideUp() |
通过高度变化（向上减小）来动态地隐藏所有匹配的元素，在隐藏完成后可选地触发一个回调函数，这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅 |
|
slideToggle() |
通过高度变化来切换所有匹配元素的可见性，并在切换完成后可选地触发一个回调函数，这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏或显示。在jQuery 1.3中，上下的padding和margin也会有动画，效果更流畅 |
2.3、淡入淡出动画：
|
fadeIn() |
通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数，淡入（慢慢可见） |
|
fadeOut() |
通过不透明度的变化来实现所有匹配元素的淡出效果，并在动画完成后可选地触发一个回调函数，淡出（慢慢消失） |
|
fadeTo() |
把所有匹配元素的不透明度以渐进方式调整到指定的不透明度，并在动画完成后可选地触发一个回调函数，这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化，在指定时长内慢慢的将透明度修改到指定的值。0透明，1完成可见，0.5半透明 |
|
fadeToggle() |
通过不透明度的变化来开关所有匹配元素的淡入和淡出效果，并在动画完成后可选地触发一个回调函数，这个动画只调整元素的不透明度，也就是说所有匹配的元素的高度和宽度不会发生变化，淡入/淡出 切换 |
2.4、自定义动画：
|
animate() |
用于创建自定义动画的函数 注意：所有指定的属性必须用骆驼形式，比如用marginLeft代替margin-left |
|
stop() |
停止所有在指定元素上正在运行的动画，如果队列中有等待执行的动画(并且clearQueue没有设为true)，他们将被马上执行 |
|
delay() |
设置一个延时来推迟执行队列中之后的项目，jQuery 1.4新增。用于将队列中的函数延时执行。他既可以推迟动画队列的执行，也可以用于自定义队列 |
2.5、动画设置：
|
jQuery.fx.off |
关闭页面上所有的动画。 把这个属性设置为true可以立即关闭所有动画(所有效果会立即执行完毕)。有些情况下可能需要这样，比如： * 你在配置比较低的电脑上使用jQuery。 * 你的一些用户由于动画效果而遇到了 可访问性问题 当把这个属性设成false之后，可以重新开启所有动画
|
|
jQuery.fx.interval |
设置动画的显示帧速 |
3、练习：CSS_动画 品牌展示
需求：
1.点击按钮的时候，隐藏和显示卡西欧之后的品牌。
2.当显示全部内容的时候，按钮文本为“显示精简品牌”
然后，小三角形向上。所有品牌产品为默认颜色。
3.当只显示精简品牌的时候，要隐藏卡西欧之后的品牌，按钮文本为“显示全部品牌”
然后小三形向下。并且把佳能，尼康的品牌颜色改为红色（给li标签添加promoted样式即可）
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>品牌展示练习</title> <style type="text/css"> * {
margin: 0; padding: 0; } body {
font-size: 12px; text-align: center; } a {
color: #04D; text-decoration: none; } a:hover {
color: #F50; text-decoration: underline; } .SubCategoryBox {
width: 600px; margin: 0 auto; text-align: center; margin-top: 40px; } .SubCategoryBox ul {
list-style: none; } .SubCategoryBox ul li {
display: block; float: left; width: 200px; line-height: 20px; } .showmore , .showless{
clear: both; text-align: center; padding-top: 10px; } .showmore a , .showless a{
display: block; width: 120px; margin: 0 auto; line-height: 24px; border: 1px solid #AAA; } .showmore a span {
padding-left: 15px; background: url(img/down.gif) no-repeat 0 0; } .showless a span {
padding-left: 15px; background: url(img/up.gif) no-repeat 0 0; } .promoted a {
color: #F50; } </style> <script type="text/javascript" src="script/jquery-1.7.2.js"></script> <script type="text/javascript"> $(function() {
// 基本初始状态 $("li:gt(5):not(:last)").hide();
// 给功能的按钮绑定单击事件 $("div div a").click(function () {
// 让某些品牌，显示，或隐藏 $("li:gt(5):not(:last)").toggle();
// 判断 品牌，当前是否可见 if( $("li:gt(5):not(:last)").is(":hidden") ){
// 品牌隐藏的状态 ：1 显示全部品牌 == 角标向下 showmore $("div div a span").text("显示全部品牌");
$("div div").removeClass()
$("div div").addClass("showmore")
// 去掉高 $("li:contains('索尼')").removeClass("promoted");
// 品牌可见的状态：2 显示精简品牌 == 角标向上 showless $("div div a span").text("显示精简品牌");
$("div div").removeClass();
$("div div").addClass("showless");
// 加高亮 $("li:contains('索尼')").addClass("promoted");
} return false; }); }); </script> </head> <body> <div class="SubCategoryBox"> <ul> <li><a href="#">佳能</a><i>(30440) </i></li> <li><a href="#">索尼</a><i>(27220) </i></li> <li><a href="#">三星</a><i>(20808) </i></li> <li><a href="#">尼康</a><i>(17821) </i></li> <li><a href="#">松下</a><i>(12289) </i></li> <li><a href="#">卡西欧</a><i>(8242) </i></li> <li><a href="#">富士</a><i>(14894) </i></li> <li><a href="#">柯达</a><i>(9520) </i></li> <li><a href="#">宾得</a><i>(2195) </i></li> <li><a href="#">理光</a><i>(4114) </i></li> <li><a href="#">奥林巴斯</a><i>(12205) </i></li> <li><a href="#">明基</a><i>(1466) </i></li> <li><a href="#">爱国者</a><i>(3091) </i></li> <li><a href="#">其它品牌相机</a><i>(7275) </i></li> </ul> <div class="showmore"> <a href="more.html"><span>显示全部品牌</span></a> </div> </div> </body> </html> |
4、jQuery事件操作
4.1、$( function(){} );和window.onload = function(){}的区别？
|
分别是在什么时候触发？ |
|
1、jQuery的页面加载完成之后是浏览器的内核解析完页面的标签创建好DOM对象之后就会马上执行 2、原生js的页面加载完成之后，除了要等浏览器内核解析完标签创建好DOM对象，还要等标签显示时需要的内容加载完成
|
|
触发的顺序？ |
|
1、jQuery页面加载完成之后先执行 2、原生js的页面加载完成之后 |
|
执行的次数？ |
|
1、原生js的页面加载完成之后，只会执行最后一次的赋值函数 2、jQuery的页面加载完成之后是全部把注册的function函数，依次顺序全部执行 |
4.2、jQuery中其他的事件处理方法：
|
click() |
它可以绑定单击事件，以及触发单击事件，触发每一个匹配元素的click事件，这个函数会调用执行绑定到click事件的所有函数 |
|
mouseover() |
鼠标移入事件，在每一个匹配元素的mouseover事件中绑定一个处理函数，mouseover事件会在鼠标移入对象时触发 |
|
mouseout() |
鼠标移出事件，在每一个匹配元素的mouseout事件中绑定一个处理函数，mouseout事件在鼠标从元素上离开后会触发 |
|
bind() |
可以给元素一次性绑定一个或多个事件，为每个匹配元素的特定事件绑定事件处理函数 |
|
one() |
为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数，在每个对象上，这个事件处理函数只会被执行一次。其他规则与bind()函数相同。 |
|
unbind() |
bind()的反向操作，从每一个匹配的元素中删除绑定的事件。 |
|
live() |
jQuery 给所有匹配的元素附加一个事件处理函数，即使这个元素是以后再添加进来的也有效，这个方法是基本是的 .bind() 方法的一个变体。使用 .bind() 时，选择器匹配的元素会附加一个事件处理函数，而以后再添加的元素则不会有。为此需要再使用一次 .bind() 才行 |
4.3、事件的冒泡
事件的冒泡是指，父子元素同时监听同一个事件。当触发子元素的事件的时候，同一个事件也被传递到了父元素的事件里去响应。
如何阻止事件冒泡：在子元素事件函数体内，return false; 可以阻止事件的冒泡传递。
4.4、javaScript事件对象
事件对象，是封装有触发的事件信息的一个javascript对象。
如何获取javascript事件对象？
在给元素绑定事件的时候，在事件的function( event ) 参数列表中添加一个参数，这个参数名，我们习惯取名为event。
这个event就是javascript传递参事件处理函数的事件对象。
比如：
4.4.1、原生javascript获取 事件对象
window.onload = function () {
document.getElementById("areaDiv").onclick = function (event) {
console.log(event); } } |
4.4.2、jQuery代码获取 事件对象
$(function () {
$("#areaDiv").click(function (event) {
console.log(event);
});
});
4.4.3、使用bind同时对多个事件绑定同一个函数。怎么获取当前操作是什么事件。
$("#areaDiv").bind("mouseover mouseout",function (event) {
if (event.type == "mouseover") {
console.log("鼠标移入");
} else if (event.type == "mouseout") {
console.log("鼠标移出");
}
});
5、练习：事件
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<style type="text/css">
body {
text-align: center;
}
#small {
margin-top: 150px;
}
#showBig {
position: absolute;
display: none;
}
</style>
<script type="text/javascript" src="script/jquery-1.7.2.js"></script>
<script type="text/javascript">
$(function(){
$("#small").bind("mouseover mouseout mousemove",function (event) {
if (event.type == "mouseover") {
$("#showBig").show();
} else if (event.type == "mousemove") {
console.log(event);
$("#showBig").offset({
//坐标加10，使原图与放大的图片出现重叠发生无法识别原图坐标现象
left: event.pageX + 10,
top: event.pageY + 10
});
} else if (event.type == "mouseout") {
$("#showBig").hide();
}
});
});
</script>
</head>
<body>
<img id="small" src="img/small.jpg" />
<div id="showBig">
<img src="img/big.jpg">
</div>
</body>
</html>