動畫
1、基本效果（顯示和隱藏）
$(“div”).show; //讓div顯示
$(“div”).hide(); //隱藏div
顯示和隱藏.gif
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$("div").css({
"display":"none",
"height":"200px",
"width":"300px",
"background":"gold"
});
$("button").eq(0).click(function(){
//讓div顯示出來
// show()
//$("div").show();
//$("div").show(3000);//毫秒為單位
//$("div").show("slow");
//$("div").show("fast");
//$("div").show("normal");
//第一個 參數是動畫時長， 可以是數字或者字符串
//第二個 參數是動畫執行完成后，要執行的函數
$("div").show(2000,function(){
//alert("show動畫執行完畢")；
$("div").hide(1000);
});
});
$("button:last").click(function(){
//讓div隱藏
$("div").hide();
});
});
</script>
</head>
<body>
<button>顯示</button>
<button>隱藏</button>
<div></div>
</body>
</html>
2、滑動效果
$(“div”).slideDown(); //下拉顯示
$(“div”).slideUp(); //上拉
$(“div”).slideToggle; //切換
3、淡入淡出（淡定）
$(“div”).fadeIn();
$(“div”).fadeOut();
$(“div”).fadeTo();
4、自定義動畫
$(“div”).animate();
$(“div”).stop();
滑動效果.gif
$(“div”).slideDown(); //下拉顯示
$(“div”).slideUp(); //上拉
$(“div”).slideToggle; //切換
//兩個參數的時候
第一個參數是：動畫執行的時長
第二個參數是：動畫執行完畢后要執行的函數
//三個參數的時候
第一個參數是：動畫執行的時長
第二個參數是：動畫效果
第三個參數是：動畫執行完畢后要執行的函數
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
//設置div的默認樣式
$("div").css({
"display":"none",
/* "float":"left"*/
"margin-bottom":"20px",
"height":"200px",
"width":"300px",
"background":"gold"
});
$("input[type='button']").click(function(){
//讓div以下拉的方式展示出來
// $(".divItem").slideDown(3000);
//兩個參數的時候
//第一個參數是：動畫執行的時長
//第二個參數是：動畫執行完畢后要執行的函數
$(".divItem:first").slideDown(3000,function(){
});
//三個參數的時候
//第一個參數是：動畫執行的時長
//第二個參數是：動畫效果
//第三個參數是：動畫執行完畢后要執行的函數
/* $(".divItem:first").slideDown(2000,"linear",function(){
});
//swing 是一個先慢后快 的效果
$(".divItem:last").slideDown(2000,"swing",function(){
});*/
});
$("button:first").click(function(){
$(".divItem").slideUp(3000);
});
$("button:eq(1)").click(function(){
$(".divItem").slideToggle();
});
//淡入淡出效果
$("button:eq(2)").click(function(){
//淡入
$(".divItem").fadeIn(3000);
});
$("button:eq(3)").click(function(){
//淡出
$(".divItem").fadeOut(3000);
});
$("button:eq(4)").click(function(){
//淡入淡出切換
$(".divItem").fadeToggle(2000);
});
//設置不透明度：fadeTo
$("button:eq(5)").click(function(){
//設置不透明度
$(".divItem").fadeTo(1000,0.5);
});
//自定義動畫
$("button:eq(6)").click(function(){
$(".divItem").animate({
"width":"50px",
"height":"60px",
"opacity":1
});
});
});
</script>
</head>
<body>
<!--<button>下拉</button>-->
<input type="button" value="下拉"/>
<button>上拉</button>
<button>上拉下拉切換</button>
<button>淡入</button>
<button>淡出</button>
<button>淡入淡出切換</button>
<button>設置不透明度</button>
<button>自定義動畫</button>
<div class="divItem"></div>
<div class="divItem"></div>
</body>
</html>
案例：右下角的彈出廣告
右下角彈出廣告.gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.ad {
position: fixed;
right: 0;
bottom: 0;
width: 230px;
height: 120px;
background-image: url(imgs/ad.jpg);
display: none;
}
.ad span {
position: absolute;
right: 0;
top: 0;
width: 40px;
height: 18px;
background-image: url(imgs/h.jpg);
}
</style>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function () {
$(".ad")
.slideDown("normal")
.slideUp("slow")
.fadeIn(1000)
.children("span").click(function () {
$(this).parent().fadeOut();
});
});
</script>
</head>
<body>
<div class="ad">
<span></span>
</div>
</body>
</html>
案例素材獲取：鏈接：http://pan.baidu.com/s/1kVhTHXX 密碼：1hhy
操作樣式：
$(“div”).css(“background”,”pink”); //設置背景顏色值
$(“div”).addClass(“color-red”); //添加樣式
給選定的元素添加樣式，注意：樣式名字沒有 點
$(“div”).removeClass(“color-red”); //移除樣式
$(“div”).toggleClass(“color-red”); //切換樣式
$("#hasBtn").click(function(){});//判斷有沒有樣式
//hasClass的返回值為true或者false
//有某個樣式的時候 就返回true
//沒有某個樣式的時候 返回false
補充備注：Windows+R出現運行窗口，輸入“notepad”，即會彈出記事本
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
.divItem{
background: #000;
color: #fff;
}
.divItem1{
font-size: 20px;
}
</style>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
//css
/* $("li").css("font-size","18px");
$("li").css({
"background":"yellow",
"color":"white"
});
var fontsize = $("li").css("font-size");
console.log(fontsize);*/
//給所有的li元素添加樣式
//給選定的元素添加類樣式，注意：樣式名字沒有 點
$("li").addClass("divItem");
//給指定的元素刪除某個樣式
//有參數的時候，移除指定的樣式。如果指定的樣式該元素不存在，那么將
//不刪除任何樣式（類）
//$("li").eq(2).removeClass("divItem1");
//沒有參數，則整個樣式都會被清除
//$("li").eq(2).removeClass();
//切換樣式
$("#demo").click(function(){
$("li").eq(2).toggleClass("divItem1");
});
//判斷有沒有樣式
$("#hasBtn").click(function(){
//hasClass的返回值為true或者false
//有某個樣式的時候 就返回true
//沒有某個樣式的時候 返回false
var hasDivItem1Class = $("li").eq(2).hasClass("divItem1");
/* console.log(hasDivItem1Class);*/
if(hasDivItem1Class){
//有某個樣式
$("li").eq(2).removeClass("divItem1");
}else{
$("li").eq(2).addClass("divItem1");
}
});
});
</script>
</head>
<body>
<input type="button" value="切換樣式" id="demo"/>
<input type="button" value="判斷有沒有樣式" id="hasBtn"/>
<ul>
<li>元素很多1</li>
<li>元素很多2</li>
<li class="divItem1">元素很多3</li>
<li>元素很多4</li>
<li>元素很多5</li>
<li>元素很多6</li>
<li>元素很多7</li>
<li>元素很多8</li>
</ul>
</body>
</html>
生成京東的tab欄目切換
生成京東TAB欄目切換.gif
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
body,div,ul,li,ol,dl,dt,p,dd,img,input,a,span,h1,h2,h3,h4{padding:0; margin:0; border:0; list-style:none;}
.wrapper{width:1000px; height: 475px; margin: 0 auto; margin-top: 100px;}
.tab{ border:1px solid #ddd; border-bottom: 0; height: 36px; width: 320px;}
.tab li{ position: relative; float: left; width: 80px; height: 34px; line-height: 34px; text-align: center; cursor: pointer;
border-top:4px solid #fff;}
.tab span{ position: absolute;right: 0;top:10px;background: #ddd;width: 1px;height: 14px;overflow: hidden; }
.products{ width: 1002px;border:1px solid #ddd;height: 476px;}
.products .main{float: left;display: none;}
.products .main.selected{display: block;}
.tab li.active{border-color: red; border-bottom: 0;}
</style>
<script type="text/javascript" src="../jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".tab > li").mouseenter(function(){
//給當前元素添加active 這個樣式
//給當前這個元素的所有兄弟元素移除 active 這個樣式
$(this).addClass("active").siblings("li").removeClass("active");
// 讓下面的div內容，根據上面tab欄菜單展示相應內容
var index = $(this).index();
$(".main")
.eq(index)
.addClass("selected")
.siblings(".main")
.removeClass("selected");
});
});
</script>
</head>
<body>
<div class="wrapper">
<ul class="tab">
<li class="tab-item active">國際大牌<span>◆</span></li>
<li class="tab-item">國妝名牌<span>◆</span></li>
<li class="tab-item">清潔用品<span>◆</span></li>
<li class="tab-item">男士精品</li>
</ul>
<div class="products">
<div class="main selected">
<a href="###">[站外圖片上傳中……(1)]</a>
</div>
<div class="main">
<a href="###">[站外圖片上傳中……(2)]</a>
</div>
<div class="main">
<a href="###">[站外圖片上傳中……(3)]</a>
</div>
<div class="main">
<a href="###">[站外圖片上傳中……(4)]</a>
</div>
</div>
</div>
</body>
</html>
案例素材獲取：
鏈接：http://pan.baidu.com/s/1eRCpSjC 密碼：xasd
常用的DOM操作--屬性、值和內容
$(“div”).attr(“name”); //獲取name屬性值
$(“div”).removeAttr(“name”); //移除屬性
$(“input”).val(function(I,v){}); //設置input的值
.html
.text
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<style>
p{
background: gray;
height: 300px;
}
</style>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(function(){
//設置屬性
$("input:eq(0)").click(function(){
$(this).attr("title","我是動態設置的屬性");
});
//獲取屬性
$("input:eq(1)").click(function(){
var attr = $("input:eq(0)").attr("title");
console.log(attr);
});
//移除屬性
$("input:eq(2)").click(function(){
$("input:eq(0)").removeAttr("title");
});
//設置值
//有一個參數的時候為設置值
$("input:eq(3)").click(function(){
$("#txt").val("我是動態設置的值");
});
//獲取值
//沒有參數的時候為獲取值
$("input:eq(4)").click(function(){
console.log($("#txt").val());
});
//設置html
$("input:eq(5)").click(function(){
/*$("div").html("我是div的html的內容")*/
$("div").html("<p>我是p元素</p>");
t });
//獲取html
$("input:eq(6)").click(function(){
/*$("div").html("我是div的html內容")； */
alert($("div").html());
});
//設置文本內容
$("input:eq(7)").click(function(){
$("div").text("我是動態創建的文本內容");
});
//獲取文本內容
$("input:eq(8)").click(function(){
alert($("div").text());
});
});
</script>
</head>
<body>
<input type="button" value="設置屬性"/>
<input type="button" value="獲取屬性"/>
<input type="button" value="移除屬性"/>
<input type="button" value="設置值"/>
<input type="button" value="獲取值"/>
<input type="button" value="設置html內容"/>
<input type="button" value="獲取html內容"/>
<input type="button" value="設置text內容"/>
<input type="button" value="獲取text內容"/>
<div>
<input type="text" id="txt"/>
</div>
</body>
</html>
操作文檔
1、內部插入節點
$(“div”).append(node); //把div內部的后面追加元素
node.appendTo(“div”) //把node追加到div
$(“div”).prepend(node) //在div內部的前面追加元素
node.prependTo($(“div”)) //把node追加到div內部的前面
2、外部插入節點
$(“div”).after(node) //在div后面添加兄弟節點node
$(“div”).before(node) //在div前面添加兄弟節點node
$(“div”).insertBefore(node) //把div插入到node前面
$(“div”).insertAfter(node) //把div追加到node后面
3、刪除節點
$(“div”).remove(); //刪除選中的元素，“自殺”
$(“div”).empty(); //清空子元素
$(“div”).html(“”); //清空子元素，推薦使用此方法
4、復制節點
$(“div”).clone(); //復制節點
注意：參數為true的話，那么會之前綁定的事件也復制一份
5、包裹節點
$(“div”).wrap(node); //包裹 單個包裹 --后面包裹前面
$(“div”).wrapAll(node); //包裹 所有包裹在一個node中
6、 替換節點
$(“div”).replaceWith(node); //替換
節點操作源碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<script src="../jquery-1.11.1.min.js"></script>
<script>
$(function(){
$("button:first").click(function(){
//追加節點
$("div").append("<p>我是動態創建出來的p元素</p>");
});
$("button:eq(1)").click(function(){
//把前面這個元素追加給后面$("div")元素
$("<p>我是動態創建出來的</p>").appendTo($("div"));
});
$("button:eq(2)").click(function(){
//給前面這個元素在所有子元素的前面添加一個子元素
$("div").prepend("<p>我是動態創建出來的p元素</p>");
});
$("button:eq(3)").click(function(){
//把前面這個元素添加給后面$("div")元素的所有子元素的前面
$("<p>我是p元素 - prependTo進來</p>").prependTo("div");
});
$("button:eq(4)").click(function(){
//往div的后面添加元素，他們是兄弟關系
$("div").after("<p>我是div后面的p元素</p>");
});
$("button:eq(5)").click(function(){
//往div的前面添加元素，他們是兄弟關系
$("div").before("<p>我是div前面的p元素</p>");
});
$("button:eq(6)").click(function(){
//把前面的元素 放到 后面div元素的前面，他們是兄弟節點關系
$("<p>我在哪？</p>").insertBefore("div");
});
$("button:eq(7)").click(function(){
//把前面的元素 放到 后面div元素的后面，他們是兄弟節點關系
$("<p>我在哪？</p>").insertAfter("div");
});
//刪除節點元素
$("button:eq(8)").click(function(){
//刪除，可以“自殺”
// $("div").remove();
$(this).remove(); //自殺
});
//清空節點元素
$("button:eq(9)").click(function(){
//清空子元素
//$("div").empty();
$("div").html(""); //推薦使用此方法最為高效！
});
//復制
$("button:eq(10)").click(function(){
$("div").append($("p").clone());
});
//包裹元素
$("button:eq(11)").click(function(){
$("span").wrap($(".divItem"));
});
//包裹所有節點
$("button:eq(12)").click(function(){
$("li").wrapAll($(".divItem"));
});
//替換節點
$("button:eq(13)").click(function(){
$("span").replaceWith($("<div>我是大div</div>"));
});
});
</script>
</head>
<body>
<button>append 追加節點 </button>
<button>appendTo 追加節點 </button>
<button>prepend 在內部的前面添加節點 </button>
<button>prependTo 在內部的前面添加節點 </button>
<button>after 往后面添加節點 </button>
<button>before 往前面添加節點 </button>
<button>insertBefore 往前面添加節點 </button>
<button>insertAfter 往后面添加節點 </button>
<br/>
<button>remove 刪除節點</button>
<button>empty 刪除節點</button>
<button>clone 復制節點</button>
<button>wrap 包裹節點</button>
<button>wrapAll 包裹所有節點</button>
<button>replaceWith 替換節點</button>
<div>
<h1>我是標題H1
<span>我是span元素</span>
</h1>
</div>
<p>我是div外面的p元素，不是動態添加的</p>
<div class="divItem">我是一個大div</div>
<span>我是一個小span</span>
<ul>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
<li>我是li</li>
</ul>
</body>
</html>
案例： 360圖片導航效果
360導航效果.gif
案例素材及源碼獲取：鏈接：http://pan.baidu.com/s/1dFHrVxR 密碼：x6xs
今日重點：
動畫：
show、hide、fadeIn、fadeOut、fadeTo、slideDown、slideUp、slideToggle、animate
DOM操作：
.css()、addClass(“className”)、removeClass()、toggleClass、.attr()、removeAttr()、.val()、.html(“<p></p>”)、text()、 node.append(“p我是追加的內容p”)、prePend()
