본문 바로가기

강좌/jQuery

제이쿼리(jQuery) - jQuery 선택기(셀렉터, 실렉터, 선택자, Selector) 설명 1


1. 폼요소 정보 가져오기

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

<html>

    <head>

<meta http-equiv="content-type" content="text/html;" charset="utf-8" >

        <title> 요소만큼 반복해서 속성 설정 및 가져오기 </title>

<script src="http://code.jquery.com/jquery-1.7.2.js"></script>

<style type="text/css">

            .red{color:red;}

</style>

<script>

   $(document).ready(function (){

    //alert($(':input').size());

var result = "";

$(':input').each(function(index){

   result += "태그명 : " + this.tagName + ", type속성 : " + $(this).attr('type') + '\n';

});

alert(result);

});

</script>

    </head>


    <body>

<input type="button" value="Input Button" /><br />

<input type="text" /><br />

<input type="password" /><br />

<input type="checkbox" /><br />

<input type="file" /><br />

<input type="hidden" /><br />

<input type="image" /><br />

<input type="radio" /><br />

<input type="reset" /><br />

<input type="submit" /><br />

<select><option>드롭다운리스트</option></select><br />

<textarea>멀티라인텍스트박스</textarea><br />

<button>버튼</button><br />

    </body>

</html>



2. 텍스트 박스의 값 가져와서 다른 텍스트박스에 복사하기
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
    <head>
<meta http-equiv="content-type" content="text/html;" charset="utf-8" >
        <title> jquery </title>
<script src="http://code.jquery.com/jquery-1.7.2.js"></script>
<style type="text/css">
            .red{background-color:red;}
</style>
<script>
   $(document).ready(function (){
//모든 텍스트 박스의 배경을 silver로 설정
$(':text').addClass("red");
//첫번째 텍스트박스의 값을 두번째 텍스트박스로 복사
$('#btncopy').click(function(){
   $('#txtId').val($('#txtUserId').val());
});
});
</script>
    </head>

    <body>
아이디 : <input type="text" id="txtUserId"/>
<hr />
<input type="button" id="btncopy" value="copy" />
<hr />
아이디 : <input type="text" id="txtId"/>
    </body>
</html>