1、文档加载完成之后,修改span的内容
$(document).ready(
function()
{
$("span").text("$100");
}
);
2、id及类选择器
$("#vacations .america")
3、子选择器和直属子选择器
$("#vacations li") $("#vacations > li")
4、同时选择id及类选择器
$("#vacations,.america")
5、选择第一个,最后一个,奇数,偶素 位置的 li(伪选择器)
$("#vacations li:first,#vacations li:last",#vacations li:odd,#vacations li:even)
6、tours直属且是偶数位的li
$("#tours > li:even")
7、$("#destinations").find("li") 类似于 $("#destinations li")。
$("#destinations").children() 但是children只找直属部分
8、回朔
$("li").last()
$("li").first()
$("li").first().next().prev();
$("li").first().parent();
9、切换成另外一个节点(append 在最后追加,prepend在前面追加,before在同级前面添加,after在同级后面添加。appendto,prependto,insertafter,insertbefore 这4个和前面4个类似,只是操作类型不一致,例如price.appendto($('.vacation')))
$(document).ready(function(){
var price=$('<p>From $399.99</p>');
$('.vacation').append(price);
$('button').remove();
}
);
10、只响应当前点击按钮事件
$(document).ready(function(){
$('button').on('click',function(){
var price=$('<p>From $399.99</p>');
$(this).after(price);
$(this).remove();
});
}
);
但是当按钮本身在div里面,after会将价格也放在div里面。如果希望点击后的价格和div同级(即div外面,可以用$(this).parent('.vacation'),但是parent会找所有父亲为vacation的,所以改成用 closest
$(document).ready(function(){
$('button').on('click',function(){
var price=$('<p>From $399.99</p>');
$(this).closest('.vacation').append(price);
$(this).remove();
});
}
);
11、获取价格属性
$(document).ready(function(){
$('button').on('click',function(){
var vacation = $(this).closest('.vacation');
var amount = vacation.data('price');
var price=$('<p>From '+amount+'</p>');
vacation.append(price);
$(this).remove();
});
}
);
12、对vacation内部的按钮点击生效.
$('.vacation button').on('click',function(){}) 等价于 $('.vacation').on('click',button,function(){})
$(document).ready(function(){
$('.vacation button').on('click',function(){
var vacation = $(this).closest('.vacation');
var amount = vacation.data('price');
var price=$('<p>From '+amount+'</p>');
vacation.append(price);
$(this).remove();
});
}
);
13、点击之后,高亮显示(addclass,removeclass,toggleclass)
$('#filters').on('click','.onsale-filter',function(){
$('.highlighted').removeclass('highlighted');
$('.vacation').filter('.onsale').addclass('highlighted');
});
14、点击之后,展开ul中的信息。做法是 ul默认是hidden,点击之后,显示即可(slidedown 展开,slideup 收起,toggle()展开收起)
$(document).ready(function(){
$('.confirmmation').on('click','button',function(){
$(this).closest('.confirmation').find('.ticket').slidedown();
})
}
);
15、鼠标划过事件(click,focusin,mousedown,mouseover,mousemove,mouseenter,dbclick,focusout,mouseup,mouseout,mouseleave)
function showTicket(){
$(this).closest('.confirmation').find('.ticket').slidedown();
}
$(document).ready(function(){
$('.confirmmation').on('click','button',showTicket);
$('.confirmmation').on('mouseover','h3',showTicket);
}
);
16、键盘事件(keypress,keydown,keyup) 表单事件(blur,focus,select,submit,change)
$(document).ready(function(){
$('.vacation').on('keyup','.quantity',function(){
var price = +$(this).closest('.vacation').data('price');
var quantity = +$(this).val();
$('#total').text(price*quantity);
})
}
);
{
17、冒泡行为
$(document).ready(function(){
$('.vacation').on('click','.expand',function(event){
event.preventdefault();
$(this).closest('.vacation').find('.comments').fadetoggle();
})
}
);
18、动画
$(document).ready(function(){
$('#vacations').on('click','.vacation',function(){
$(this).toggleclass('hightlighted');
if($(this).hasclass('hightlighted')){
$(this).animate({'top':'-10px'},'fast');
}
else{
$(this).animate({'top':'0px'},'fast');
}
});
}
);
$(document).ready(
function()
{
$("span").text("$100");
}
);
2、id及类选择器
$("#vacations .america")
3、子选择器和直属子选择器
$("#vacations li") $("#vacations > li")
4、同时选择id及类选择器
$("#vacations,.america")
5、选择第一个,最后一个,奇数,偶素 位置的 li(伪选择器)
$("#vacations li:first,#vacations li:last",#vacations li:odd,#vacations li:even)
6、tours直属且是偶数位的li
$("#tours > li:even")
7、$("#destinations").find("li") 类似于 $("#destinations li")。
$("#destinations").children() 但是children只找直属部分
8、回朔
$("li").last()
$("li").first()
$("li").first().next().prev();
$("li").first().parent();
9、切换成另外一个节点(append 在最后追加,prepend在前面追加,before在同级前面添加,after在同级后面添加。appendto,prependto,insertafter,insertbefore 这4个和前面4个类似,只是操作类型不一致,例如price.appendto($('.vacation')))
$(document).ready(function(){
var price=$('<p>From $399.99</p>');
$('.vacation').append(price);
$('button').remove();
}
);
10、只响应当前点击按钮事件
$(document).ready(function(){
$('button').on('click',function(){
var price=$('<p>From $399.99</p>');
$(this).after(price);
$(this).remove();
});
}
);
但是当按钮本身在div里面,after会将价格也放在div里面。如果希望点击后的价格和div同级(即div外面,可以用$(this).parent('.vacation'),但是parent会找所有父亲为vacation的,所以改成用 closest
$(document).ready(function(){
$('button').on('click',function(){
var price=$('<p>From $399.99</p>');
$(this).closest('.vacation').append(price);
$(this).remove();
});
}
);
11、获取价格属性
$(document).ready(function(){
$('button').on('click',function(){
var vacation = $(this).closest('.vacation');
var amount = vacation.data('price');
var price=$('<p>From '+amount+'</p>');
vacation.append(price);
$(this).remove();
});
}
);
12、对vacation内部的按钮点击生效.
$('.vacation button').on('click',function(){}) 等价于 $('.vacation').on('click',button,function(){})
$(document).ready(function(){
$('.vacation button').on('click',function(){
var vacation = $(this).closest('.vacation');
var amount = vacation.data('price');
var price=$('<p>From '+amount+'</p>');
vacation.append(price);
$(this).remove();
});
}
);
13、点击之后,高亮显示(addclass,removeclass,toggleclass)
$('#filters').on('click','.onsale-filter',function(){
$('.highlighted').removeclass('highlighted');
$('.vacation').filter('.onsale').addclass('highlighted');
});
14、点击之后,展开ul中的信息。做法是 ul默认是hidden,点击之后,显示即可(slidedown 展开,slideup 收起,toggle()展开收起)
$(document).ready(function(){
$('.confirmmation').on('click','button',function(){
$(this).closest('.confirmation').find('.ticket').slidedown();
})
}
);
15、鼠标划过事件(click,focusin,mousedown,mouseover,mousemove,mouseenter,dbclick,focusout,mouseup,mouseout,mouseleave)
function showTicket(){
$(this).closest('.confirmation').find('.ticket').slidedown();
}
$(document).ready(function(){
$('.confirmmation').on('click','button',showTicket);
$('.confirmmation').on('mouseover','h3',showTicket);
}
);
16、键盘事件(keypress,keydown,keyup) 表单事件(blur,focus,select,submit,change)
$(document).ready(function(){
$('.vacation').on('keyup','.quantity',function(){
var price = +$(this).closest('.vacation').data('price');
var quantity = +$(this).val();
$('#total').text(price*quantity);
})
}
);
{
17、冒泡行为
$(document).ready(function(){
$('.vacation').on('click','.expand',function(event){
event.preventdefault();
$(this).closest('.vacation').find('.comments').fadetoggle();
})
}
);
18、动画
$(document).ready(function(){
$('#vacations').on('click','.vacation',function(){
$(this).toggleclass('hightlighted');
if($(this).hasclass('hightlighted')){
$(this).animate({'top':'-10px'},'fast');
}
else{
$(this).animate({'top':'0px'},'fast');
}
});
}
);