jQuery基础:事件、效果

在事件中经常使用术语"触发"(或"激发")例如: "当您按下按键时触发 keypress 事件"。

语法:

$(this).hide() - 隐藏当前元素

$("p").hide() - 隐藏所有段落

$("p .test").hide() - 隐藏所有 class="test" 的段落

$("#test").hide() - 隐藏所有 id="test" 的元素


效果:

隐藏和显示:

hide()和show()

toggle():打包hide和show

$(document).ready(function(){

$("button").click(function(){

$("p").toggle("slow");});

});

淡入淡出:

fadeIn()、fadeOut()

fadeToggle():打包fadeIn()、fadeOut()

fadeTo():允许渐变为给定的不透明度(值介于 0 与 1 之间)


滑动:

上下滑动:slideDown()、slideDown()


滑下


滑上

slideToggle() 方法:打包slideDown()和slideUp()


Chaining:

允许在一条语句中运行多个 jQuery 方法(在相同的元素上)

语法

$(document).ready(function()

{$("button").click(function(){

$("#p1").css("color","red").slideUp(2000).slideDown(2000);});

});

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • jQuery 安装 把 jQuery 添加到您的网页 如需使用 jQuery,您需要下载 jQuery 库(会在下...
    Clover园阅读 312评论 0 0
  • 通过jQuery,您可以选取(查询,query)HTML元素,并对它们执行“操作”(actions)。 jQuer...
    枇杷树8824阅读 676评论 0 3
  • 警告请使用 document.write() 仅仅向文档输出写内容。如果在文档已完成加载后执行 document....
    鹿守心畔光阅读 2,862评论 3 104
  • 第1章 动画基础隐藏和显示 1-1 jQuery中隐藏元素的hide方法 让页面上的元素不可见,一般可以通过设置c...
    mo默22阅读 792评论 0 8
  • 选择器选择器是jQuery的核心。 事件 动画 扩展
    wyude阅读 492评论 0 1