读Hean first jQuery笔记3(案例集合)
<!DOCTYPE html>
<html>
<head>
<title>Jump for Joy</title>
<link href="styles/my_style.css" rel="stylesheet">
</head>
<body>
<div id="header">
<h2>Jump for Joy Sale</h2>
</div>
<div id="main">
<div class="guess_box"><img src="images/jump1.jpg"/></div>
<div class="guess_box"><img src="images/jump2.jpg"/></div>
<div class="guess_box"><img src="images/jump3.jpg"/></div>
<div class="guess_box"><img src="images/jump4.jpg"/></div>
</div>
<script src="scripts/jquery-1.6.2.min.js"></script>
<script>
$(document).ready(function() {
$(".guess_box").click( function() {
//把上一次显示的内容清除掉
$(".guess_box p").remove();
//获取5-10范围内的值
//random返回一个介于0-1的随机数，乘以一个数之后肯定就得到0和所乘数之间的一个数
//floor将一个数取整为最接近的整数。
var discount = Math.floor((Math.random()*5) + 5);
var discount_msg = "<p>Your Discount is "+discount+"%</p>";
//this代表当前操作的对象
//guess_box下有四个div，操作的时候不知道指那个，可以用this来直接操作当前元素
$(this).append(discount_msg);
});
});
</script>
</body>
</html>
<!DOCTYPE html> <html> <head> <title>Jump for Joy</title> <link href="styles/my_style.css" rel="stylesheet"> </head> <body> <div id="header"> <h2>Jump for Joy Sale</h2> </div> <div id="main"> <div class="guess_box"><img src="images/jump1.jpg"/></div> <div class="guess_box"><img src="images/jump2.jpg"/></div> <div class="guess_box"><img src="images/jump3.jpg"/></div> <div class="guess_box"><img src="images/jump4.jpg"/></div> <!--显示结果的span--> <span id="result"></span> </div> <script src="scripts/jquery-1.6.2.min.js"></script> <script src="scripts/my_scripts.js"></script> </body> </html>
$(document).ready(function() {
//调用checkForCode不需要括号
$(".guess_box").click( checkForCode );
//返回随机数
function getRandom(num){
var my_num = Math.floor(Math.random()*num);
return my_num;
}
//设置一个has_discount
var hideCode = function houdini(){
var numRand = getRandom(4);
$(".guess_box").each(function(index, value) {
if(numRand == index){
$(this).append("<span id='has_discount'></span>");
return false;
}
});
}
//需要括号
hideCode();
function checkForCode(){
var discount;
//contains 会检查第一个参数的所有子元素，查看是否包含第二个参数
//判断是否是四个图片之一
if($.contains(this, document.getElementById("has_discount") ) )
{
var my_num = getRandom(100);
discount = "<p>Your Code: CODE"+my_num +"</p>";
}else{
discount = "<hr>Sorry, no discount this time!" ;
}
$(".guess_box").each(function() {
//this也就是当前对象和document获取到的id为has_discount的DOM元素是否匹配
if($.contains(this, document.getElementById("has_discount") ) )
{
//要改变一个元素的外观，最容易的方法就是利用css和css类
//为一个元素增加css类，不会影响这个元素已有的css类
$(this).addClass("discount");
}else{
$(this).addClass("no_discount");
}
//删除this对应的元素的所有事件
$(this).unbind();
});
$("#result").append(discount);
} // End checkForCode function
$(".guess_box").hover(
//this is the mouseenter event handler
//用户停在方框上时
function () {
$(this).addClass("my_hover");
},
//this is the mouseleave event handler
function () {
//删除css类
$(this).removeClass("my_hover");
}); // End hover
});
web页面管理
$(document).ready(function(){
var v = false;
//变量前面加一个美元符，指示他要存储由jQuery返回的元素
var $f, $m;
//往上是parent
//往下是children
//左右是 prev next
//遍历所选元素同一层上的所有元素 siblings
//删除一个元素中的内容而不是元素本身 $("p").empty();
//遍历一个元素的所有父元素 parents
//想找到所选元素最近的父元素 closest 类似于parents，会上行查找父元素，匹配到第一个就会停止
$("button#vegOn").click(function(){
if (v == false){
//和remove不同，虽然将选择的元素取出，但是还会维护这些元素，以后还可以重新关联。
$f = $(".fish").parent().parent().detach();
//把选择的元素替换成新元素 只适合一对一的情况
$(".hamburger").replaceWith("<li class='portobello'><em>Portobello Mushroom</em></li>");
$(".portobello").parent().parent().addClass("veg_leaf");
$(".meat").after("<li class='tofu'><em>Tofu</em></li>");
$m = $(".meat").detach();
$(".tofu").parent().parent().addClass("veg_leaf");
v = true;
}// end if
});//end veg button
$("button#restoreMe").click(function(){
if (v == true){
$(".portobello").parent().parent().removeClass("veg_leaf");
$(".portobello").replaceWith("<li class='hamburger'>Hamburger</li>");
//所选元素前插入内容
$(".menu_entrees li").first().before($f);
$(".tofu").parent().parent().removeClass("veg_leaf");
$(".tofu").each( function(i){
//所选元素后插入内容
$(this).after($m[i]);
});//end each
$(".tofu").remove();
v = false;
}//end if
});//end restoreMe button
});//end doc ready
jQuery效果与动画
animate可以完成DIY效果
<!DOCTYPE html> <html> <head> <title>Monster Mash</title> <link type="text/css" href="styles/my_style.css" rel="stylesheet"> </head> <body> <header id="top"> <img id="text_top" src="images/Monster_Mashup.png" /> <p>Make your own monster face by clicking on the picture.</p> </header> <div id="container"> <img class="lightning" id="lightning1" src='images/lightning-01.jpg' /> <img class="lightning" id="lightning2" src='images/lightning-02.jpg' /> <img class="lightning" id="lightning3" src='images/lightning-03.jpg' /> <div id="frame"> <div id="pic_box"> <div id="head" class="face"><img src="images/headsstrip.jpg"></div> <div id="eyes" class="face"><img src="images/eyesstrip.jpg"></div> <div id="nose" class="face"><img src="images/nosesstrip.jpg"></div> <div id="mouth" class="face"><img src="images/mouthsstrip.jpg"></div> </div> </div> </div> <script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="scripts/my_scripts.js"></script> </body> </html>
$(document).ready(function(){
var headclix = 0, eyeclix = 0, noseclix = 0, mouthclix = 0;
lightning_one();
lightning_two();
lightning_three();
$("#head").click(function(){
if (headclix < 9){
$("#head").animate({left:"-=367px"},500);
headclix+=1;
}
else{
$("#head").animate({left:"0px"},500);
headclix = 0;
}
});
//animate 定制动画 通过不断改变所选元素的css属性或者position来实现动画效果
//只能处理使用 数值设置的css属性
$("#eyes").click(function(){
if (eyeclix < 9){
$("#eyes").animate({left:"-=367px"},500);
eyeclix+=1;
}
else{
$("#eyes").animate({left:"0px"},500);
eyeclix = 0;
}
});
$("#nose").click(function(){
if (noseclix < 9){
$("#nose").animate({left:"-=367px"},500);
noseclix+=1;
}
else{
$("#nose").animate({left:"0px"},500);
noseclix = 0;
}
});//end click
$("#mouth").click(function(){
if (mouthclix < 9){
$("#mouth").animate({left:"-=367px"},500);
mouthclix+=1;
}
else{
$("#mouth").animate({left:"0px"},500);
mouthclix = 0;
}
});
});//end doc.onready function
function lightning_one(){
$("#container #lightning1").fadeIn(250).fadeOut(250);
//定时函数
setTimeout("lightning_one()",4000);
};
function lightning_two(){
$("#container #lightning2").fadeIn("fast").fadeOut("fast");
setTimeout("lightning_two()",5000);
};
function lightning_three(){
$("#container #lightning3").fadeIn("fast").fadeOut("fast");
setTimeout("lightning_three()",7000);
};
<!DOCTYPE html> <html> <head> <title>Head First Black Jack</title> <link href="styles/my_style.css" rel="stylesheet"> </head> <body> <div id="main"> <h1>Click to reveal your cards</h1> <h3 id="hdrTotal"></h3><h3 id="hdrResult"></h3> <div id="my_hand"> </div> <div id="result"><img src="images/check.png" id="imgResult"></div> <div id="controls"> <!--刚开始发两张牌--> <div id="btnDeal"> <img src="images/deck_small.jpg"> </div> <!--点击发一张牌--> <div id="btnHit"> <img src="images/deck_small.jpg"> </div> <!--选择结束--> <div id="btnStick"> <img src="images/stick_small.jpg"> </div> <!--输了或者赢了又或者超21点结束后重新开始--> <div id="btnRestart"> <img src="images/restart_small.jpg"> </div> </div> </div> <script src="scripts/jquery-1.6.2.min.js"></script> <script src="scripts/my_scripts.js"></script> </body> </html>
$(document).ready(function(){
/* New Additons for end
Added more output for winning/loosing to the 'hand' object
Added a restart button click to re-deal
*/
//定义一个数组
var used_cards = new Array();
//定义一个类
function card(name,suit,value) {
this.name = name;
this.suit = suit;
this.value = value;
}
//需要存储关于一个特定事物的多个数据时可以使用对象
var deck = [
new card('Ace', 'Hearts',11),
new card('Two', 'Hearts',2),
new card('Three', 'Hearts',3),
new card('Four', 'Hearts',4),
new card('Five', 'Hearts',5),
new card('Six', 'Hearts',6),
new card('Seven', 'Hearts',7),
new card('Eight', 'Hearts',8),
new card('Nine', 'Hearts',9),
new card('Ten', 'Hearts',10),
new card('Jack', 'Hearts',10),
new card('Queen', 'Hearts',10),
new card('King', 'Hearts',10),
new card('Ace', 'Diamonds',11),
new card('Two', 'Diamonds',2),
new card('Three', 'Diamonds',3),
new card('Four', 'Diamonds',4),
new card('Five', 'Diamonds',5),
new card('Six', 'Diamonds',6),
new card('Seven', 'Diamonds',7),
new card('Eight', 'Diamonds',8),
new card('Nine', 'Diamonds',9),
new card('Ten', 'Diamonds',10),
new card('Jack', 'Diamonds',10),
new card('Queen', 'Diamonds',10),
new card('King', 'Diamonds',10),
new card('Ace', 'Clubs',11),
new card('Two', 'Clubs',2),
new card('Three', 'Clubs',3),
new card('Four', 'Clubs',4),
new card('Five', 'Clubs',5),
new card('Six', 'Clubs',6),
new card('Seven', 'Clubs',7),
new card('Eight', 'Clubs',8),
new card('Nine', 'Clubs',9),
new card('Ten', 'Clubs',10),
new card('Jack', 'Clubs',10),
new card('Queen', 'Clubs',10),
new card('King', 'Clubs',10),
new card('Ace', 'Spades',11),
new card('Two', 'Spades',2),
new card('Three', 'Spades',3),
new card('Four', 'Spades',4),
new card('Five', 'Spades',5),
new card('Six', 'Spades',6),
new card('Seven', 'Spades',7),
new card('Eight', 'Spades',8),
new card('Nine', 'Spades',9),
new card('Ten', 'Spades',10),
new card('Jack', 'Spades',10),
new card('Queen', 'Spades',10),
new card('King', 'Spades',10)
];
//计算当前有多少点并根据规则进行处理
var hand = {
//将card属性设置为一个新数组
cards : new Array(),
current_total : 0,
sumCardTotal: function(){
this.current_total = 0;
//循环处理card数组，统计当前点数
for(var i=0;i<this.cards.length;i++){
var c = this.cards[i];
this.current_total += c.value;
}
//将总数输出到屏幕上的hdrTotal元素中
$("#hdrTotal").html("Total: " + this.current_total );
if(this.current_total > 21){
//trigger() 方法触发被选元素的指定事件类型
//这是是自动触发btnStick的click事件
$("#btnStick").trigger("click");
//根据结果将imgResult的src设置为不同的图像
$("#imgResult").attr('src','images/x2.png');
$("#hdrResult").html("BUST!")
.attr('class', 'lose');
}else if(this.current_total == 21){
$("#btnStick").trigger("click");
$("#imgResult").attr('src','images/check.png');
$("#hdrResult").html("BlackJack!")
.attr('class', 'win');
}else if(this.current_total <= 21 && this.cards.length == 5){
$("#btnStick").trigger("click");
$("#imgResult").attr('src','images/check.png');
$("#hdrResult").html("BlackJack - 5 card trick!")
.attr('class', 'win');
}else{ }
}
};
function getRandom(num){
var my_num = Math.floor(Math.random()*num);
return my_num;
}
function deal(){
for(var i=0;i<2;i++){
hit();
}
}
function hit(){
var good_card = false;
do{
var index = getRandom(52);
//$.inArray返回要查找的值在数组中的位置
//检查随机抽取的这张牌是否已经选过了
if( !$.inArray(index, used_cards ) > -1 ){
good_card = true;
var c = deck[ index ];
used_cards[used_cards.length] = index;
hand.cards[hand.cards.length] = c;
var $d = $("<div>");
$d.addClass("current_hand")
.appendTo("#my_hand");
$("<img>").attr('alt', c.name + ' of ' + c.suit )
.attr('title', c.name + ' of ' + c.suit )
.attr('src', 'images/cards/' + c.suit + '/' + c.name + '.jpg' )
.appendTo($d)
.fadeOut('slow')
.fadeIn('slow');
}
}while(!good_card);
good_card = false;
//调用sumCardTotal方法得到一手牌的总点数
hand.sumCardTotal();
}
$("#btnDeal").click( function(){
//发最早的两张牌
deal();
//把这个div隐藏掉
$(this).toggle();
//其他两个div显示出来
$("#btnHit").toggle();
$("#btnStick").toggle();
});
//点击发一张牌
$("#btnHit").click( function(){
hit();
});
//切换所有空间的状态，结束游戏
function end(){
$("#btnHit").toggle();
$("#btnStick").toggle();
$("#btnRestart").toggle();
}
$("#btnStick").click( function(){
$("#hdrResult").html('Stick!')
.attr('class', 'win');
$("#result").toggle();
end();
});
$("#btnRestart").click( function(){
//将所有元素重置为原来的状态
$("#result").toggle();
$(this).toggle();
$("#my_hand").empty();
$("#hdrResult").html('');
$("#imgResult").attr('src','images/check.png');
//要用javascript真正清空一个数组，只需将它的长度设置为0即可
used_cards.length = 0;
hand.cards.length = 0;
hand.current_total = 0;
$("#btnDeal").toggle()
.trigger('click');
});
});
定制函数
<!DOCTYPE html> <html> <head> <title>Monster Mash</title> <link href="styles/my_style.css" rel="stylesheet"> </head> <body> <header id="top"> <img src="images/Monster_Mashup.png" /> <button id="btnRandom">Randomize</button> <button id="btnReset">Reset</button> <p>Make your own monster face by clicking on the picture.</p> </header> <div id="container"> <img class="lightning" id="lightning1" src='images/lightning-01.jpg' /> <img class="lightning" id="lightning2" src='images/lightning-02.jpg' /> <img class="lightning" id="lightning3" src='images/lightning-03.jpg' /> <div id="frame"> <div id="pic_box"> <div id="head" class="face"><img src="images/headsstrip.jpg"></div> <div id="eyes" class="face"><img src="images/eyesstrip.jpg"></div> <div id="nose" class="face"><img src="images/nosesstrip.jpg"></div> <div id="mouth" class="face"><img src="images/mouthsstrip.jpg"></div> </div> </div> </div> <script type="text/javascript" src="scripts/jquery-1.6.2.min.js"></script> <script type="text/javascript" src="scripts/my_scripts.js"></script> </body> </html>
$(document).ready(function(){
var clix = [0,0,0,0]; // head,eyes,nose,mouth
var distance = 367;
var num_monsters = 10;
var int1, int2, int3;
function runLightning(){
int1 = setInterval( function() {
lightning_one();
},
4000
);
//告诉一个函数反复的运行，每次运行前有一个时间间隔
//setTime是设置一个等待时间，时间过了就让一个函数运行
//delay是在效果链中的效果之间加入一个停顿
// slideDown().delay(5000).slideUp();
int2 = setInterval( function() {
lightning_two();
},
5000
);
int3 = setInterval( function() {
lightning_three();
},
7000
);
}
function stopMe()
{
//告诉setInterval清除定时器并停止重复动作
window.clearInterval(int1);
window.clearInterval(int2);
window.clearInterval(int3);
}
function lightning_one(){
$("#container #lightning1").fadeIn(250).fadeOut(250);
};
function lightning_two(){
$("#container #lightning2").fadeIn("fast").fadeOut("fast");
};
function lightning_three(){
$("#container #lightning3").fadeIn("fast").fadeOut("fast");
};
//window失去焦点时触发
window.onblur = stopMe;
//window获取焦点时触发
window.onfocus = runLightning;
runLightning();
$("#head").click( function(){
moveMe(0, this)
});//end click function
$("#eyes").click( function(){
moveMe(1, this)
} );//end click function
$("#nose").click( function(){
moveMe(2, this)
});//end click function
$("#mouth").click( function(){
moveMe(3, this)
});//end click function
$("#btnRandom").click( randomize );
$("#btnReset").click( reset );
function moveMe(i, obj){
if (clix[i] < 9){
$(obj).animate({left:"-=367px"},500);
clix[i] = clix[i]+1;
}else{
clix[i] = 0;
$(obj).animate({left:"0px"},500);
}
}
function reset(){
$(".face").each(function(index){
var move_to = clix[index] * distance;
clix[index] = 0;
$(this).animate({left:"+="+move_to+"px"},500);
});
}
function getRandom(num){
var my_random_num = Math.floor(Math.random()*num);
return my_random_num;
}
function randomize(){
$(".face").each(function(index){
var target_position = parseInt( (getRandom(num_monsters) + clix[index]) % num_monsters);
var current_position = clix[index] ;
clix[index] = target_position;
if( target_position > current_position ) {
var move_to = (target_position - (current_position % distance) ) * distance;
$(this).animate({left:"-="+move_to+"px"},500);
}else if( target_position < current_position ){
var move_to = ( (current_position % distance) - target_position) * distance;
$(this).animate({left:"+="+move_to+"px"},500);
}else{
// They are the same - Don't move it.
}
});
};
});//end doc.onready function