jQuery Note
董谦
关于jQuery常用的一些方法
1. 将括号内转化为jQuery对象
$() == jQuery() ;2.滑动面板(sliding panel)特效
<div class="panel">
<br />
<br />
<p>Now you see me!</p>
</div>
<p class="slide"><a href="#" class="pull-me">Slide Up/Down</a></p> $(document).ready(function()
{
$('.pull-me').click(function()
{
$('.panel').slideToggle('slow');
});
});3. 插入内容append/prepend, appendTo/prependTo
$("body").append("<p>...</p>"); // 在末尾插入内容
$("body").prepend("<p>...</p>"); // 在开头插入内容
$("<p>我将被插入到末尾</p>").appendTo("body");//将其插入末尾
$("<p>我将被插入到开头</p>").prependTo("body");//将其插入开头4. 定位before/after
$('#one').after('<p>Add some words after the Div #1</p>'); //在一个元素的后面添加一段文字
$('#two').after($('p')); //定位已经存在的元素5. 移除元素empty/remove
$('p').remove(); //删除元素的内容和他本身
$('ol').empty(); //删除元素的内容6. 添加\删除一个类Adding\Removing a class()
$(document).ready(function(){
$('#text').click(function(){
$(this).addClass('highlighted');
});
});
7. 切换类 toggleClass
$(this).click(function(){
$(this).toggleClass('highlighted');
});8. 改变CSS风格
$(document).ready(function(){
$("div").width("200px");
$("div").height("200px");
$("div").css("border-radius", "10px");
});9. 修改html内容
<body>
<h2>To Do</h2>
<form name="checkListForm">
<input type="text" name="checkListItem"/>
</form>
<div id="button">Add!</div>
<br/>
<div class="list"></div>
</body>$(document).ready(function(){
var toAdd = $('input[name=checkListItem]').val();
$("div").append('<div class="item">'+ toAdd + '</div>')
});10. jQuery event
点击事件：
.click()
经过事件：
.hover()
双击事件：.
dblclick()
11. 鼠标双击事件 dblclick()
$(document).ready(function(){
$('div').dblclick(function(){
$(this).fadeOut('fast'); //鼠标双击div即消失
});
});12. 鼠标进入和离开事件 mouseenter() , mouseleave()
$(document).ready(function(){
$('div').mouseenter(function(){
$(this).fadeTo('fast', 1);
});
$('div').mouseleave(function(){
$(this).fadeTo('fast', 0.25);
});
});13. 获得焦点事件 focus()
$(document).ready(function(){
$('input').focus(function(){
$(this).css('outline-color', '#FF0000');
});
});14. .css() 改变element的css风格，有两个参数，第一个参数是css选择器，第二个参数是元素对应的值
$('input').css('outline-color', '#FF0000');15. 按下键盘事件 keydown()
$(document).ready(function(){
$(document).keydown(function(){
$('div').animate({left: '+=10px'}, 10);
});
});16. 动画函数.animate() 有两个参数，第一个参数是效果， 第二个参数是响应时间，值越小，反应越快
$('div').aanimate({left: '+=10px'}, 10); //让div向右移动10个像素17. 识别是哪一个键被按下，并作出不同的动画效果，达到键盘控制的作用
控制图片上下左右移动，W, S, A, D 分别表示up, down, left, right
$(document).ready(function() {
$(document).keydown(function(key) {
switch(parseInt(key.which,10)) {
case 65:
$('img').animate({left: "-=10px"}, 'fast');
break;
case 83:
$('img').animate({top: "+=10px"}, 'fast');
break;
case 87:
$('img').animate({top: "-=10px"}, 'fast');
break;
case 68:
$('img').animate({left: "+=10px"}, 'fast');
break;
default:
break;
}
});
});18. 文档生成时即隐藏元素
$(document).ready(function(){
$('div').hide();
});19. 文档生成时让元素的top margin在一秒钟内增加100个像素，动画效果
$(document).ready(function(){
$('img').animate({top: "+=100"}, 1000);
});
Continue . . .
类似资料：