程序博客网 > 北京seo教程

jquery常用事件及特效

来源：互联网 发布：北京seo教程 编辑：程序博客网 时间：2024/06/05 10:22

（1）jquery获取文本框焦点

<input type="text" id="username"/>
<br />
<span style="display: none">你好</span>
<script>
 $('input').focus(function() {
  $('span').show();
 });
</script>


（2）jquery获取鼠标位置

<input type="text" id="username"/>
<br />
<script>
 $(document).click(function(e) {
  var x=e.pageX;
  var y=e.pageY;
  $('#username').val(x+","+y);
 });
</script>

 

（3）jquery避免冒泡事件

<html>
 <head>
  <title>0.0</title>
  <script src="jquery-1.7.2.js"></script>
  <style>
   *{
    margin:0;
    padding:0;
   }
   div{
    width:100px;
    height:auto;
    border:1px solid black;
   }
   ul{
    list-style:none;
    width:100px;
    border: 1px solid black;
    display:none;
   }
   ul li{
    height:24px;
    line-height:24px;
   }
  </style>
 </head>
 <body>
  <div>选择城市</div>
  <br>
  <ul>
   <li>南宁</li>
   <li>钦州</li>
   <li>北海</li>
   <li>桂林</li>
  </ul>
  <script>
   //单击显示列表
   $('div').click(function(e){
    $('ul').show();
    //避免冒泡关键词
    e.stopPropagation();
   });
   
   //鼠标虚浮列表改变背景色，移开恢复背景色
   $('li').hover(function() {
    $(this).css('background','red');
    },function(){
          $(this).css('background','none');
        });
        
        //单击页面其他地方，隐藏列表
        $(document).click(function(){
         $('ul').hide();
        });
  </script>
 </body>
</html>

 

（4）逐渐显示、隐藏内容

  

<html>
 <head>
  <title>0.0</title>
  <script src="jquery-1.7.2.js"></script>
  <style>
   *{margin:0;padding:0;}
   div{width:100px;height:auto;border:1px solid black;}
   p{display:none;}
  </style>
 </head>
 <body>
  <div>显示内容</div>
  <p>花间一壶酒，独酌无相亲。  <br />

   举杯邀明月，对影成三人。  <br />
   
   月既不解饮，影徒随我身。  <br />
   
   暂伴月将影，行乐须及春。  <br />
   
   我歌月徘徊，我舞影零乱。  <br />
   
   醒时同交欢，醉后各分散。  <br />
   
   永结无情游，相期邈云汉。
  </p>
  <script>
   //单击显示内容
   $('div').click(function(){
    $('p').toggle(1000);
   });   
  </script>
 </body>
</html>

 （5）内容渐变动画

<html>
 <head>
  <title>jquery</title>
  <script src="jquery-1.7.2.js"></script>
  <style>
   *{margin:0;padding:0;}
   div{width:100px;height:auto;border:1px solid black;}
   p{display:none;}
  </style>
 </head>
 <body>
  <div>显示内容</div>
  <p>花间一壶酒，独酌无相亲。  <br />

   举杯邀明月，对影成三人。  <br />
   
   月既不解饮，影徒随我身。  <br />
   
   暂伴月将影，行乐须及春。  <br />
   
   我歌月徘徊，我舞影零乱。  <br />
   
   醒时同交欢，醉后各分散。  <br />
   
   永结无情游，相期邈云汉。
  </p>
  <script>
   $('div').click(function(){
    $('p').fadeToggle(3000);
   });   
  </script>
 </body>
</html>

 

（6）内容滑动动画

<html>
 <head>
  <title>jquery</title>
  <script src="jquery-1.7.2.js"></script>
  <style>
   *{margin:0;padding:0;}
   div{width:100px;height:auto;border:1px solid black;}
   p{display:none;}
  </style>
 </head>
 <body>
  <div>显示内容</div>
  <p>花间一壶酒，独酌无相亲。  <br />

   举杯邀明月，对影成三人。  <br />
   
   月既不解饮，影徒随我身。  <br />
   
   暂伴月将影，行乐须及春。  <br />
   
   我歌月徘徊，我舞影零乱。  <br />
   
   醒时同交欢，醉后各分散。  <br />
   
   永结无情游，相期邈云汉。
  </p>
  <script>
   $('div').click(function(){
    $('p').slideToggle(1000);
   });   
  </script>
 </body>
</html>

 

（7）自定义动画：animate

<html>
 <head>
  <title>jquery</title>
  <script src="jquery-1.7.2.js"></script>
  <style>
   div{width:100px;height:100px;background:#abcdef;position:absolute;top:30px;left:50px;}
  </style>
 </head>
 <body>
  <input type="button" value="移动" />
  <div></div>
  <script>
   $('input').click(function(){
    $('div').animate({
     'left':'800px',
     'top':'300px',
     'opacity':'0.1'
    },2000);
   });   
  </script>
 </body>
</html>

 

（8）动画队列

<html>
 <head>
  <meta charset="utf-8"/>
  <title>jquery</title>
  <script src="jquery-1.7.2.js"></script>
  <style>
   p{width:300px;height:300px;background:#abcdef;display:none;}
  </style>
 </head>
 <body>
  <a href="##3">aa</a>
  <p>22222222222222</p>
  <script>
   $('a').hover(function(){
    $('p').stop(false,true).slideDown(500);
   },function(){
    $('p').stop(false,true).slideUp(500);
   });   
  </script>
 </body>
</html>

(9)左边菜单栏的显示隐藏

<!doctype html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 
<title>Document</title>
 
<link rel="stylesheet" href="menu.css">

<script src="jquery.js"></script>
  
<script>
$(function(){

 
$.easing.def = 'easeOutElastic';
 
var oBtn = $('h3');

 
oBtn.click(function(){
  
$(this).next('ul').slideToggle().siblings('ul').slideUp();
 
});


});
</script>

</head>

<body>


<h3>kiwis</h3>
 
<ul style="display:none">
  
<li><a href="#">11111</a></li>
 
 <li><a href="#">11111</a></li>
 
 <li><a href="#">11111</a></li>
 
 <li><a href="#">11111</a></li>
 
</ul>

 
<h3>Oranges</h3>

<ul style="display:none">
 
 <li><a href="#">22222</a></li>
 
 <li><a href="#">22222</a></li>
 
 <li><a href="#">22222</a></li>
 
 <li><a href="#">22222</a></li>
 
</ul>

 
<h3>Grapes</h3>
 
<ul style="display:none">
 
 <li><a href="#">33333</a></li>
 
 <li><a href="#">33333</a></li>
 
 <li><a href="#">33333</a></li>
 
 <li><a href="#">33333</a></li>
 
</ul>


</body>
</html>

 

0 0
北京seo教程 北京seo教程
原创粉丝点击
热门IT博客
南昌高能金域名都南昌高能金域名都
公司淘宝店注册流程公司淘宝店注册流程
网络拓扑画图软件
ching chong 知乎
c语言socket编程
粉底液 mac水漾
狙击手 特别行动 知乎
日本整容知乎
北京淘宝儿童模特
中汇亿达开发待遇知乎
知乎如何开专栏
网络割接回退方案
火炮分类 知乎
网狐棋牌源码下载
ubuntu ifconfig
广州mac口红专柜
淘宝退货退款流程手机
2016电力工程预算软件
四川数据恢复
php protobuf 扩展
热门问题 老师的惩罚 人脸识别 我在镇武司摸鱼那些年 重生之率土为王 我在大康的咸鱼生活 盘龙之生命进化 天生仙种 凡人之先天五行 春回大明朝 姑娘不必设防，我是瞎子 棕红琥珀价格 琥珀的种类和价格 金琥珀的价格 虎珀图片 蜜蜡是什么 蜜蜡手链 虎珀 花珀 hupo 价格蜜蜡 虎珀的图片 蜜蜡怎样保养 佩戴蜜蜡的好处 蜜蜡有什么好处 蜜蜡和塑料的区别 方舟生存进化无限琥珀 方舟进化生存gg改无限琥珀 琦 牌牌琦 琦瑶门 牌牌琦社会摇 漫威琦玉老师 琦怎么读 宋雨琦光着屁屁给我们看 牌牌琦超话 亚琦集团 李jia琦 意琦行 大琦美佳在线播放 琦意思 琦的意思 牌牌琦功夫摇 小伊伊牌牌琦 万琦文 社会摇牌牌琦 牌牌琦社会摇教程 牌牌琦求婚小伊伊 牌牌琦什么时候回归 琦读音 琦亚 琦君

程序博客网，程序员的互联网技术博客家园。csdn论坛精品 msdn技术资料都在这里