一步步教你使用PHP制作网站（五）：jQuery的常见技巧与事件处理

jquery通常会用到 click、change、blur、hover事件，还会经常用到ajax。div的显示show()，隐藏hide();

下面会逐步说明：

click会用到button按钮、菜单切换；

change 会用在<input type='file'>自动上传图片，和select触发事件；

blur 用在<input type='text'>

hover用在前台下拉菜单

格式都是固定的，所以没有必要一点一点地记牢，只要写好一个其他的复制粘贴就可以。

完整格式如下

$(document).ready(function() {  $("#tags").click(function(){      console.log('这是click点击事件');    });})

tags 是ID属性，也可以使用class，#tags这里修改成 .tags，注意前边的“.”;但是这样写大部分情况下是没有问题的，如果是通过ajax返回的数据，例如：<input type='text' id="tags">,再使用上边的click是获取不到焦点的，在这样的情况下，我们需要做一下修改，代码改成这样的

$(document).ready(function() { $(document).delegate("#tags", 'click', function() {     console.log('这是ajax返回的数据点击事件');  });})

其他的hover、change、blur只需要把click对换就可以了。

ajax的使用，先看用法

$.ajax({   url:picurl,//这里picurl是处理提交数据的URL地址   data:formData, //数据的参数，formData格式{'a':123,'b':222} 传递$a=123,$b=22   type:'post', //提交的方式 也可以是get   dataType: 'json',//可以是html 不过通常会使用json  就是处理完数据以后返回的格式   success:function(result){     if(result.error=="0000"){ //以返回格式json为例  error为错误代码  返回0000表示正确    console.log(result.msg);     $("#pic").attr("src",result.msg);  //这里如果返回0000代码 msg存放图片地址    }else{      console.log(result.msg);//返回不是0000代码 提示错误信息      return false;      );   } }

会在click等事件之后使用ajax进行数据的交互，例如：

$(document).ready(function() {$(".list dd").click(function(){       console.log('这是ajax返回的数据点击事件');    $.ajax({          });  });})

click点击以后<div class='showdiv'></div>显示，隐藏，例如：

图1 jquery click实现菜单切换效果

思路：点击的时候向当前菜单添加class=‘active’其他菜单移除该class，当前点击的是第几个，下边的div 就显示第几个，其他的class=‘da’隐藏

html代码：

<div class='list'>  <dl>   <dd dataid='da' class='active'>菜单1</dd>   <dd dataid='da'>菜单2</dd> </dl></div><div class='clear'></div><div class='da'>这是菜单1的显示</div><div class='da none'>这是菜单2的显示</div>

js代码：

$(document).ready(function() {$(".list dd").click(function(){ var dataid=$(this).attr('dataid');var indexof=$(".list dd").index(this);$(this).addClass('active').siblings().removeClass('active');$('.da').hide();$("."+dataid).eq(indexof).show();});})

总结：很多的效果，我们都可以拆分，用简单的方式来实现。

$(this).addClass('active').siblings().removeClass('active');

我们可以先全部取消$('.list dd').removeClass('active');然后当前的dd添加$(this).addClass('active')；这样的思路会不会更清晰一些。