jquery 代码实例效果

JQuery是一种流行的JavaScript库，可以轻松地实现各种效果。以下是一些实例代码及其效果：

$(document).ready(function(){
  $("button").click(function(){
    $("p").toggle();
  });
});

上面的代码会在单击按钮时切换文本的可见性。如果文本当前可见，那么单击按钮将隐藏文本。如果文本当前隐藏，那么单击按钮将显示文本。使用toggle方法可以轻松实现这种切换效果。

$(document).ready(function(){
  $("button").click(function(){
    $("#test").css("background-color", "yellow");
  });
});

上面的代码会在单击按钮时将元素的背景颜色更改为黄色。可以使用css方法来更改元素的样式属性。

$(document).ready(function(){
  $("input").focus(function(){
    $(this).css("background-color", "#cccccc");
  });
  $("input").blur(function(){
    $(this).css("background-color", "#ffffff");
  });
});

上面的代码会在用户焦点集中在输入框时将其背景颜色更改为浅灰色，并在用户离开输入框时恢复其默认白色背景。可以使用focus和blur事件来实现这种效果。

$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left: '250px'});
  });
});

上面的代码会在单击按钮时使div元素向右移动。可以使用animate方法轻松地实现平滑的元素动画。

$(document).ready(function(){
  $("p").click(function(){
    $(this).hide();
  });
});

上面的代码会在单击文本时隐藏该元素。可以使用hide方法控制元素的可见性。

这只是JQuery中一些可能的实例。有了JQuery的强大功能，可以实现更多的效果。