JQuery学习

1.事件:

    例如下拉列表的选择改变事件:

   

$("select[name='areaID']").change(function() {
        alert('gaga');
    });

 

select表示要'选择',name表示表单控件的名字,而不是id,若用id需

$("#areaID").change(function() {
        alert('gaga');
    });

 

或者

$("select[name='areaID']").bind("change",function(){
     alert('gaga');
  });

  

 bind是为每个匹配的元素特定事件,如:click,submit,change等.

2.利用JQuery改变导航的Class:

$(document).ready(function(){
		//alert($("title").html());
		var title = $("title").html();
		$("#main_nav").find("li").each(function(){
			//alert("asd:"+$(this).children("a").html());
			var html = $(this).children("a").html();
			$(this).removeClass("current");
			if(html == title){
				$(this).addClass("current");
			}
		});
	});

  3.利用JQuery改变表单元素属性:

 

$(document).ready(function(){
		$("#areaId").change(function(){
			$("#area").removeAttr("disabled");
			$("#city").removeAttr("disabled");
		});
		$("#cityId").change(function(){
			if(this.value != -1){
				$("#area").attr("disabled","disabled");	
				$("#city").removeAttr("disabled");
			}
			else{
				$("#area").removeAttr("disabled");
			}
			
		});
		$("#countyId").change(function(){
			if(this.value != -1){
				$("#area").attr("disabled","disabled");
				$("#city").attr("disabled","disabled");
			}
			else{
				$("#city").removeAttr("disabled");
			}
		});
	});

 4.为表单元素赋值:

    div:$("#message").html("message");

          $("#message").html("<img id='alert' src='/images/del.gif' />&nbsp;&nbsp;" + message);

    文本框:$("#message").val("message");

 

 5.隐藏表单元素:

   $("#page").attr("style","display:none");

   $("#page").css({display:"none"});

   $("div[class='search_right']").css({display:"block"});(显示)

 6.

$(function(){
		
	});
等价于
	$(document).ready(function(){
		
	});