源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

jQuery事件与动画基础详解

  • 时间:2020-04-05 09:25 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jQuery事件与动画基础详解
今天我们就谈谈jquery中的事件和简单动画吧,它们毕竟基础是进阶华丽的根本!! [b]1.事件[/b] [b]1.window事件[/b] ready   准备就绪 [b]2.鼠标事件[/b] [b]方法                        执行时机[/b] [b]click(fn)                单击鼠标[/b]
$(document).ready(function(){
 $("dd>img").click(function(){
 $("dt>img").show();
 });
[b]mouseover(fn)     鼠标指针移过时[/b] [b]mouseout(fn)       鼠标指针移出时[/b]
 $("#nav .navsBox ul li").mouseover(function(){
  $(this).addClass("onbg"); //为该元素添加类样式.onbg
 }).mouseout(function(){
  $(this).removeClass("onbg");//为该元素移除类样式.onbg
 });
[b]hover()[/b]
 $(".top").hover(function(){
  $(this).addClass('bgreen');
 },function(){
 $(this).removeClass('bgreen');
 }); 
[b]3.键盘事件[/b] [b]keydown()        按下键盘时[/b] [b]keyup()             释放按键时[/b] [b]keypress()        产生可打印的字符时[/b]
$(function(){
 $("[type=password]").keyup(function(){
 $("#e").append("keyup");
 }).keydown(function(){
  $("#e").append("keydown");
 }).keypress(function(){
  $("#e").append("keypress");
 });
 
 $(document).keydown(function(event){
  if(event.keyCode=="13"){
  alert("确认要提交么???");
  }
 });
});
[b]4.表单事件[/b] [b]focus()             获得焦点[/b] [b]blur()                失去焦点[/b]
$(function(){
  $("input").focus(function(){ 
   $(this).next().css("color","red");
   //alert("1123");
  });
  $("input").blur(function(){
   $(this).next().css("color","");
  });
  });
[b]绑定事件与移除事件[/b] [b]bind(type,[data],fn)   (绑定)[/b] type     主要包括blur,focus,click,mouseout等基础事件,此外,还可以是自定义事件 [data]   作为event.data属性值传递给事件对象的额外数据对象,该参数不是必需的 fn         用来绑定处理函数 [b]unbind([type],[fn])    (移除)[/b] type    主要包括blur,focus,click,mouseout等基础事件,此外,还可以自定义事件 fn        用来解除绑定的处理函数
$(function(){
 $("li").bind({
 mouseover:function(){
 $(this).css("background-color","green");
 },mouseout:function(){
 $(this).css("background-color","");
 }
 });
 $("li").unbind();
});
 
[b]2.动画[/b] [b]1.控制元素显示与隐藏  $(selector).show([speed],[callback])[/b]  [code] $(selector).hide([speed],[callback])[/code] speed:可选。规定元素从隐藏(显示)到可见(不可见)的速度 callback :可选。show函数执行完了之后,要执行的函数
$(function(){
  $("p:visible").hide(100);
 });
 //$("p:hidden").show(100);
[b]2.改变元素的透明度[/b]
$(function(){
 $("input").click(function(){
  $("img").fadeOut(100); //浅出
  //$("img").fadeIn(100); 淡入
 });
 })
[b]3.改变元素的高度[/b]
$(function(){
 $("h2").click(function(){
 // $(".txt").slideup();
 $(".txt").slideDown();
 });
});
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持编程素材网!
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部