jquery的使用总结以及实例代码

jquery 的bind 绑定方式实例：

$("#allcategory").bind('mouseover',function(){$("#allSort").show();   }); $("#allSort").bind("mouseover",function(){$("#allSort").show();}).bind('mouseout',function(){$("#allSort").hide();})

jquery 的 mouseover 和 mouseout 方法使用

$("#spec-list img").bind("mouseover",function(){var src=$(this).attr("src");$("#spec-n1 img").eq(0).attr({src:src.replace("\/n5\/","\/n1\/"),jqimg:src.replace("\/n5\/","\/n0\/")});$(this).css({"border":"2px solid #ff6600","padding":"1px"});}).bind("mouseout",function(){$(this).css({"border":"1px solid #ccc","padding":"2px"});});

jquery 获取 checkbox 控件 change 方法的值 

//显示有库存商品数据  $('.tabs1 .only-has input[type="checkbox"]').bind("change",function(){  //获取当前选中的id值   //orderBy = $('.tabs1 ul li .select').attr('id');  searchParams['orderBy'] = $('.tabs1 ul li .select').attr('id');  //$(".only-has input[type='checkbox']").prop("checked");  //获取是否需要查看有库存商品  //searchParams['stockcnt'] = $('.only-has input[type="checkbox"]').prop("checked");  //调用初始化数据方法  initLoad(searchParams);  });

jquery 的 click点击事件

//加入收藏        $(".pRemind").bind("click",function(){        var productId = $(this).attr("id");        //加入收藏        addProductFavorite(productId,function(result){  if(result.frf_success)  {  alert("收藏商品成功,感谢收藏!");  }        });        });

jquery 的 find 使用

 //加号    $(".p-add").click(function(){    var num_add = 1;    var numbers = $(this).parent().parent().find('input[class*=text]');    num_add = parseInt(numbers.val()) + 1;    //得到减号对象    var min = $(this).parent().find("a[class*=p-reduce]");    if(num_add > 1){    min.removeClass("disable");    }else{    min.addClass("disable");    }    numbers.val(num_add);    });        //减号    $(".p-reduce").click(function(){        var numbers = $(this).parent().parent().find('input[class*=text]');        var num_min = parseInt(numbers.val()) > 1 ? parseInt(numbers.val()) - 1 : 1;    //得到减号对象    var min = $(this).parent().find("a[class*=p-reduce]");    if(num_min == 1){    min.addClass("disable");    }else{    min.removeClass("disable");    }    numbers.val(num_min);    });        //购物输入框    $("#numbers").change(function(){  var numbers = $("#numbers").val();  var num_min = parseInt(numbers) > 1 ? parseInt(numbers) : 1;  //减号对象  var min = $(this).parent().parent().find("a[class*=p-reduce]");    if(parseInt(num_min) > 1)  {  min.removeClass("disable");  }else{  min.addClass("disable");  }    $("#numbers").val(num_min);    });

jquery 的 addClass，removeClass 的使用

 $("#detail-product ul li").click(function(){        var id = $(this).attr("id");        if(id == "1"){  $(".product_info").removeClass("none");  $(".product_parameter").addClass("none");    }else if(id == "2"){  $(".product_info").addClass("none");  $(".product_parameter").removeClass("none");    }else if(id == "3"){  $(".product_info").addClass("none");  $(".product_parameter").addClass("none");    }        $("#detail-product ul li").removeClass("curr");        $(this).addClass("curr");        })

jquery 的 ajax 方法使用以及 replaceWith 方法。

//加载商品评价信息        function queryProductCommentList(searchParams,id){        $.ajax({  url:'${basePath}web/productListSearch!getProductCommentList.do',  data:searchParams,  cache: false,  success: function(result){  //替换界面  $("#productCommentList").replaceWith(result);    if(id != undefined)  {  $("#"+id).addClass("curr");  }else{  $("#levelCnt").addClass("curr");  }  }});}

jquery 获取 radio  和 checkbox 的选中的值

<span style="white-space:pre"></span>var typeOdds = $('#choosePeriod #reference input[type="radio"]:checked').val();var typeHour = $('#choosePeriod #period input[type="radio"]:checked').val();//获取选中的博彩公司uuidvar checks = $('#chooseCompany').find('ul li input[type="checkbox"]:checked');

jquery 的 getJSON方法 ，设置 radio  和 checkbox 的选中方法 prop 方法使用，prop("checked",false); //不选中  prop("checked",true);//选中

<span style="white-space:pre"></span>jQuery.getJSON("${basePath}web/comboSchemaConfig!comboSchemaLoadByComboId.json",param, function(data){var result = data.result;$("input[type=radio]").prop("checked",false);$("input[type=checkbox]").prop("checked",false);//设置选中项 $("input[name=reference][value='"+result.TYPE+"']").prop("checked",true);$("input[name=period][value='"+result.SECTION+"']").prop("checked",true);//设置方案中的博彩公司  var gambler = result.GAMBLERS;var gamblerArr = new Array();   gamblerArr = gambler.split(",");      for(var i=0;i<gamblerArr.length;i++){$("input[name=gamblers][value='"+gamblerArr[i]+"']").prop("checked",true);}});