四. jQuery Web页面管理
1. jquery remove方法从DOM完全删除元素，detach方法将选择的元素取出，不过还会维护这些元素
2. DOM树：parent得到父元素；children得到子元素；prev得到左紧邻元素；next得到右紧邻元素；
before将新内容插入到选择的元素前面，after将新内容插入到选择的元素后面；
过滤方法：first选中第一个元素；eq选中索引号元素；last选中最后一个元素；
slice选中索引号之间的元素；filter选中指定元素；not选中除指定元素外所有元素
jQuery取得DOM返回的元素，把它们整齐地存储在一个数组中
3. each与this关键字的结合，可以实现“自动跟踪处理”元素
例：$(".tofu").each(function(i){$(this).after();});
五. jQuery效果与动画
1. 常用的简单动画：
hide：JS解释器将所选元素的css display属性改为none，并将它从布局中删除；
show：JS解释器改变所选元素的css display属性，使它可见；
toggle：如果一个元素隐藏，JS解释器会让它显示；反之则隐藏；
fadeIn：JS解释器将所选元素的css opacity属性从0改为100；
fadeTo：动画显示所选元素，将它改为某个特定的透明度百分比；
fadeOut：JS解释器将所选元素的css opacity属性从100改为0，不过在页面上仍占据该元素的空间；
slideUp：JS解释器告诉DOM将所选元素的css height属性改为0，然后把display属性设置为none；
slideDown：JS解释器将所选元素的height从0动画变为css样式中设置的height值，使元素在页面上显示；
slideToggle：JS解释器检查图像的高度是完全高度还是0，并根据发现的结果切换滑动效果
2. 可以用方法链结合效果
3. animate方法：建立自己的效果
例：$("#my_div").animate({opacity:0,width:"200",height:"800"},5000);
4. 相对动画，会相对于上一次动画移动到的位置来移动元素
5. css属性的参数必须用DOM标准来设置，而不是css标准。例如：DOM记法为borderWidth，css记法为border-width
六. jQuery与JavaScript
1. 需要存储关于一个特定事物的多个数据时可以使用对象
2. 描述对象的统一标准：UML（Unified Modeling Language，统一建模语言）
3. inArray方法：返回要查找的值在数组中的位置（索引）
var index = $.inArray( value, array);
4. 代码示例：
<!-- index.html -->
<!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>
<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>/* my_scripts.js */
$(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 = {
cards : new Array(),
current_total : 0,
sumCardTotal: function(){
this.current_total = 0;
for(var i=0;i<this.cards.length;i++){
var c = this.cards[i];
this.current_total += c.value;
}
$("#hdrTotal").html("Total: " + this.current_total );
if(this.current_total > 21){
$("#btnStick").trigger("click");
$("#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);
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;
hand.sumCardTotal();
}
$("#btnDeal").click( function(){
deal();
$(this).toggle();
$("#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');
used_cards.length = 0;
hand.cards.length = 0;
hand.current_total = 0;
$("#btnDeal").toggle().trigger('click');
});
});/* my_style.css */
#controls{
clear:both;
}
.current_hand{
float:left;
}
.win{
color:green;
}
.lose{
color:red;
}
#my_hand{
clear:both;
border: 1px solid gray;
height: 250px;
width: 835px;
}
#btnHit, #btnStick, #btnRestart{
display:none;
float:left;
}
h3 {
display: inline;
padding-right: 40px;
}
#result{
display:none;
position:absolute;
top: 100px;
left: 20px;
}
#result > img {
width: 500px;
height: 250px;
}
七. 定制函数
1. JavaScript定时器方法：
setTimeout，setInterval，delay
2. 代码示例：
<!-- index.html -->
<!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>/* my_scripts.js */
$(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
);
int2 = setInterval( function() {
lightning_two();
},
5000
);
int3 = setInterval( function() {
lightning_three();
},
7000
);
}
function stopMe()
{
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.onblur = stopMe;
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
/* my_style.css */
body{
background-color:#000000;
}
p{
color:#33FF66;
font-family: Tahoma, Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
#text_top {
position:relative;
z-index: 4;
}
#top {
position:absolute;
left:191px;
top:15px;
z-index: 4;
}
#container{
position:absolute;
left:0px;
top:0px;
z-index: 0;
}
.lightning{
display:none;
position:absolute;
left:0px;
top:0px;
z-index: 0;
}
#frame {
position:absolute;
left:100px;
top:100px;
width:545px;
height:629px;
background-image:url(../images/frame.png);
z-index: 3;
overflow: hidden;
}
#pic_box{
position:relative;
left:91px;
top:84px;
width:367px;
height:460px;
z-index: 2;
overflow: hidden;
}
.face{
position:relative;
left:0px;
top:0px;
z-index: 1;
}
#head{
height:172px;
}
#eyes{
height:79px;
}
#nose{
height:86px;
}
#mouth{
height:117px;
}
1991
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
