jQuery Note

来源：互联网发布：testflight是什么软件编辑：程序博客网时间：2024/05/22 17:33

关于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);});

jQuery Note

关于jQuery常用的一些方法

1. 将括号内转化为jQuery对象

2.滑动面板(sliding panel)特效

3. 插入内容append/prepend, appendTo/prependTo

4. 定位before/after

5. 移除元素empty/remove

6. 添加\删除一个类Adding\Removing a class()

7. 切换类 toggleClass

8. 改变CSS风格

9. 修改html内容

10. jQuery event

11. 鼠标双击事件 dblclick()

12. 鼠标进入和离开事件 mouseenter() , mouseleave()

13. 获得焦点事件 focus()

14. .css() 改变element的css风格，有两个参数，第一个参数是css选择器，第二个参数是元素对应的值

15. 按下键盘事件 keydown()

16. 动画函数.animate() 有两个参数，第一个参数是效果， 第二个参数是响应时间，值越小，反应越快

17. 识别是哪一个键被按下，并作出不同的动画效果，达到键盘控制的作用

18. 文档生成时即隐藏元素

19. 文档生成时让元素的top margin在一秒钟内增加100个像素，动画效果

Continue . . .

16. 动画函数.animate() 有两个参数，第一个参数是效果，第二个参数是响应时间，值越小，反应越快