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();
			//获取选中的博彩公司uuid
			var 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);
					}
				}
			);