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>显示，隐藏，例如：

思路：点击的时候向当前菜单添加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')；这样的思路会不会更清晰一些。