jquery 事件应用

最新推荐文章于 2024-07-14 03:40:57 发布

原创最新推荐文章于 2024-07-14 03:40:57 发布 · 93 阅读

CC 4.0 BY-SA版权

本文介绍了一个使用HTML和jQuery实现的网页样式切换功能。通过不同的按钮点击事件来改变页面的字体大小和颜色，同时展示了如何使用jQuery进行DOM操作和事件处理。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<style type="text/css">
#switcher{text-align:center;}

.narrows{
   color:#FF0000;
}
.larges{font-size:24px}
.hidden{display:none}
#switcher .hover{
   cursor:pointer;
   background:#afa;
}
</style>
<script src="../jquery.js"/></script>
<script language="javascript">
// jQuery.noConflict(); 让出$ 给最先包含的库
jQuery(function(){
   /*$('#switcher .button').bind('click',function(event){//绑定单击事件 unbind移除事件
      //alert($(event.target).is('button')); 鼠标指针下的元素
      $("body").removeClass();
   if(this.id == 'switcher_narrow'){
     $("body").addClass("narrows");
   }else if(this.id == "switcher_large"){
     $("body").addClass("larges");
   }
   $("#switcher .button").attr("disabled",false);
   $(this).attr("disabled",true);//不可用状态
   event.stopPropagation();//停止事件传播
   //.preventDefault();可以在触发默认操作之前终止事件
   })*/

   //toggle 元素上单击第一次调用函数一单击第二次调用函数二
/* $("#switcher h3").toggle(function(){
      $("#switcher .button").addClass("hidden");
   },function(){
      $("#switcher .button").removeClass("hidden");
   })*/
    //toggleClass 检验类是否存在
    /* $("#switcher h3").click(function(){
     $("#switcher .button").toggleClass("hidden");
     })
//hover 鼠标悬浮触发函数一离开触发函数二
$("#switcher .button").hover(function(){
$(this).addClass("hover");
},function(){
$(this).removeClass("hover");

})
$("#switcher_large").click(function(){//取消绑定
$("#switcher .button").unbind('click');
})
*/
     //定义函数变量
/* var tog = function(event){
alert("hello world");
}*/
//调用
//$("#switcher").one("click",tog); 只触发一次
//$("#switcher").click(tog);
//$("#switcher").bind("click",tog);
//模拟用户操作
     //$("#switcher").trigger("click");

     var setbody = function(name){
       alert(name);
     }
   //键盘事件
     $(document).keyup(function(event){

     switch(String.fromCharCode(event.keyCode)){
       case 'D':
         setbody("D");
         break;
       case "N":
         setbody("N");
         break;
       case "L":
         setbody("L");
         break;
     }

     })
})

</script>
</head>

<body>
<div id="switcher">
<h3>Style Switcher</h3>
<button class="button" id="switcher_default">
    Default
</button>
<button class="button" id="switcher_narrow" >
    Narrow
</button>
<button class="button" id="switcher_large">
    Large
</button>
</div>
aaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaa<br/>aaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaa<br/>aaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaa<br/>aaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaa<br/>aaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaa<br/>aaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaa<br/>aaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaa<br/>aaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaa<br/>aaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaa<br/>
aaaaaaaaaaaaaaaaaaaaaaa<br/>
</body>
</html>