Jquery 메모 사용 (1)

9591 단어 JavaScripthtmljqueryC++c
최근 에 jquery 를 많이 사용 해서 인터넷 에서 유용 한 물건 을 많이 찾 았 습 니 다. 먼저 적어 두 세 요!
 
1. 동적 으로 표 줄 추가
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="../jquery-1.3.2.js"></script>
<title>demo about table</title>
<script>
	$(document).ready(function(){
	for(var i=0;i<5;i++){//   5    
		var $table=$("#tab tr");
		var len=$table.length;
		$("#tab").append("<tr id="+(len+1)+"><td>    "+(len+1)+": <input type='text' class='required' name='eng"+len+"' id='"+len+"'><a href='#' onclick='deltr("+(len+1)+")'>  </a></td></tr>");
	}	
	$("#but").click(function(){//  add  ，       
		var $table=$("#tab tr");
		var len=$table.length;
		$("#tab").append("<tr id="+(len+1)+"><td>    "+(len+1)+": <input type='text' class='required' name='eng"+len+"' id='"+len+"'><a href='#' onclick='deltr("+(len+1)+")'>  </a></td></tr>");			
	})
});
function deltr(index){//     
	$table=$("#tab tr");
	if(index>$table.length)
		return;
	else{
		$("tr[id='"+index+"']").remove();
		for(var temp=index+1;temp<=$table.length;temp++){
			$("tr[id='"+temp+"']").replaceWith("<tr id="+(temp-1)+"><td>    "+(temp-1)+": <input type='text' class='required' name='eng"+(temp-2)+"' id='"+(temp-2)+"' value='"+document.getElementById(temp-1).value+"'><a href='#' onclick='deltr("+(temp-1)+")'>  </a></td></tr>");
		}
	}	
}
</script>
</head>

<body>
<table>
<tr><td>
	<table id="tab" border="1" width="300px" align="center"></table>
</td></tr>
<tr><td>
	<input type="button" id="but" value="add"/>
</td></tr>
</table>


</div>
</body>
</html>

 
 
2. 드 롭 다운 박스 연동
<html>
<head>
<META http-equiv=Content-Type content="text/html; charset=utf-8">
<script type="text/javascript" src="JQuery/jquery-1.3.2.js"></script>
<script>
(function($){
$.fn.selInit = function(){return $(this).html("<option>   </option>");};
$.area = function(){
	$("#province").selInit();
	$("#city").selInit();
	$("#county").selInit();
	var area = {
		  :{  :"  ,  ,  ,  ,  "},
		  :{  :"  ,  ,  ,  ",  :"  ,  ,  ,  "},
		  :{  :"  ,   ",  :"  a,  b"}
		//...
	};
	$.each(area,function(p){$("#province").append("<option>"+p+"</option>");});
	$("#province").change(function(){
		$("#city").selInit();
		$("#county").selInit();
		$.each(area,function(p,x){
			if($("#province option:selected").text() == p){
				$.each(x,function(c,cx){
					$("#city").append("<option>"+c+"</option>");
				});
				$("#city").bind("change",function(){
					$("#county").selInit();
					$.each(x,function(c,cx){
						if($("#city option:selected").text() == c){
								$.each(cx.split(","),function(){
									$("#county").append("<option>"+this+"</option>");
								});
							}
					});
				});
			}
		});
	});
};
})(jQuery);
$(function(){
	$("select").css("width","100px");
	$.area();
	});
</script>
</head>
<body>
	<select id="province"><option>   </option></select>
       <select id="city"><option>   </option></select>
       <select id="county"><option>   </option></select>
</body>
</html>

 
3. 폼 검증 은 jquery. vaidate 를 사용 할 수 있 습 니 다. 사이트 주 소 는 http://docs.jquery.com/Plugins/Validation 입 니 다.
4. 자동 충전, jquery. autocomplete 를 사용 할 수 있 습 니 다. 주 소 는 http://jquery.bassistance.de/autocomplete/demo/ 입 니 다.
5. text 와 textarea 의 높이 증가:  
input    ，    <br>
<input  type="text"  style="width:60;overflow-x:visible;overflow-y:visible;">
textarea     ，    <br>
<textarea  type="text"  style="width:260;overflow-x:visible;overflow-y:visible;"></textarea>

6. CheckBox 콤 보 상자 가 그룹 으로 연 결 됩 니 다.
여러 개의 콤 보 상 자 를 그룹 으로 만 들 려 면 콤 보 상자 의 HTML 코드 를 쓸 때 사용자 정의 속성 group 을 추가 합 니 다. 예 를 들 어 < input type = "checkbox" group = "groupname" / > < input type = "checkbox" group = "groupname" / >... 이렇게 페이지 에 표 시 될 때 group 이름 이 같은 그룹 이 됩 니 다.마찬가지 로 연동 이 필요 한 대상 의 코드 에 사용자 정의 속성 forcheckbox group 을 추가 합 니 다. 이름 은 연동 체크 상자 그룹의 group 속성 값 입 니 다.연결 대상 이 체크 상자 일 때 전체 그룹의 체크 상 태 를 제어 합 니 다. 연결 대상 이 다른 요소 일 때 체크 상자 그룹 은 disabled 속성 을 제어 합 니 다. 규칙 은 그룹 내 체크 상자 가 선택 되 었 을 때 연 결 된 요소 대상 의 disabled 속성 이 false 이 고 그렇지 않 으 면 true 입 니 다.예 를 들 어 < input type = "checkbox" forcheckbox group = "groupname" / > < input type = "button" value = "단추" forcheckbox group = "groupname" / >...  
$(function(){ 
    //                    
    $("[forcheckboxgroup]:not(:checkbox)").attr("disabled",true); 
    $(":checkbox[forcheckboxgroup]")    //                   
        .click(function(){  //    click    
            //              ： 
            // 1.                     
            $(":checkbox[group='" + this.getAttribute('forcheckboxgroup') + "']").attr("checked",this.checked); 
            // 2.                    
            $(":checkbox[forcheckboxgroup='" + this.getAttribute('forcheckboxgroup') + "']").attr("checked",this.checked).attr("indeterminate",false); 
            // 3.                     
            $("[forcheckboxgroup='" + this.getAttribute('forcheckboxgroup') + "']:not(:checkbox)").attr("disabled",!this.checked); 
        }); 
    $(":checkbox[group]")   //           
        .click(function(){  //   click    
            var blnStat = this.checked; //       
            var blnEqual = true;    //           
            $(":checkbox[group='" + this.getAttribute('group') + "']")  //       
                .each(function(){    
                    blnEqual = blnStat == this.checked; 
                    return blnEqual ;   //         
                }); 
             
            //                   
            $("[forcheckboxgroup='" + this.getAttribute('group') + "']:not(:checkbox)").attr("disabled",!(blnStat||!blnEqual)); 
            //                   
            $(":checkbox[forcheckboxgroup='" + this.getAttribute('group') + "']").attr("checked",blnStat).attr("indeterminate",!blnEqual); 
        }); 
});

 
 7. 내 비게 이 션 메뉴 sdMenu, 순수 js 버 전과 jquery 버 전 포함
 8. 숫자 만 입력 가능:
isNumber = function (e) {   
    if ($.browser.msie) {   
        if ( ((event.keyCode > 47) && (event.keyCode < 58)) ||   
              (event.keyCode == 8) || (event.keyCode == 46)) {   
            return true;   
        } else {   
            return false;   
        }   
    } else {   
        if ( ((e.which > 47) && (e.which < 58)) ||   
              (e.which == 8) || (e.which == 46)) {   
            return true;   
        } else {   
            return false;   
        }   
    }   
}

 html 에 이렇게 쓰 여 있 습 니 다:
<input type="text" onKeyPress="return isNumber(event);" onKeyUp="return isNumber(event);" >

 
첨부 파일 안 은 원본 코드 입 니 다.
C#컴파일러 명령행 인스턴스
Windows Server 2008 R2 SP1 설치 MongoDB

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage