온 코딩

[jQuery] .attr(), .text(), .html(), .change() 본문

복습 ARCHIVE/java script

[jQuery] .attr(), .text(), .html(), .change()

SummerON 2021. 6. 7. 23:37 
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>드롭다운리스트 선택한 값 가져오기</title>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            // 콤보박스가 변경될 때 : change()  <= onchange="함수명"
            $('#lstFavorites').change(function() {

                // 드롭다운리스트에서 선택된 값을 텍스트박스에 출력
                var selectedText = $(":selected").text();
			                    //$("#lstFavorites option:selected").text();
			                    //$("option:selected").text();
                    
                $('#txtFavorite').val(selectedText);

            });

        });
    </script>

</head>

<body>

    <select id="lstFavorites">
        <option>C#</option>
        <option selected>ASP.NET</option>
        <option>Silverlight</option>
    </select>
    <hr />
    <input type="text" id="txtFavorite" />

</body>

</html>

태그명과 속성명 가져오기 

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title></title>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            var result = "";

            // 폼 요소가 있는 만큼 반복하자.
            alert($(':input').size());
            $(':input').each(function(index) {
                result += "태그명 : " + this.tagName // $(this).get(0).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>

텍스트박스(textbox)의 값 복사

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>텍스트박스(textbox)의 값 복사</title>

    <style type="text/css">
        .silver { background-color:Silver; }
    </style>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            // 모든 텍스트박스의 배경을 Silver로 설정
            $(':text').addClass("silver");

            // 첫번째 텍스트박스의 값을 두번째 텍스트박스로 복사
            $('#btnCopy').click(function() {
                $('#txtID').val($('#txtUserID:text').val());  // val()은 value
            });

        });
    </script>

</head>

<body>

    아이디 : <input type="text" id="txtUserID" /> <!-- 입력값 추출 val() -->
    <hr />
    <input type="button" id="btnCopy" value="복사" />
    <hr />
    아이디 : <input type="text" id="txtID" /> <!-- 입력값 설정 val(값) -->

</body>

</html>

.text() / .html()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>암호확인 기능 구현하기</title>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>

    <script type="text/javascript">
        $(document).ready(function() {

            //[1] lblError 레이어 클리어
            $('#txtPassword').keyup(function() {
                //$('#lblError').remove(); // 제거 : 해당 태그를 완전 제거...
                $('#lblError').text(''); // 제거가 아니라 클리어 : 시작태그와 닫는 태그 사이 글자
            });

            //[2] 암호 확인 기능 구현
            $('#txtPasswordConfirm').keyup(function() {
                if ($('#txtPassword').val() != $('#txtPasswordConfirm').val()) {
                    $('#lblError').text(''); // 클리어
                    $('#lblError').html("<b>암호가 틀립니다.</b>"); // 레이어에 HTML 출력
                }
                else {
                    $('#lblError').text(''); // 클리어
                    $('#lblError').text("<b>암호가 맞습니다.</b>"); // 레이어에 텍스트 출력
                }
            });

        });
    </script>

</head>

<body>
    <table style="border: 1px solid skyblue;">
        <tr>
            <td>암호 : </td>
            <td><input type="password" id="txtPassword" size="20" /></td>
        </tr>
        <tr>
            <td>암호확인 :</td>
            <td><input type="password" id="txtPasswordConfirm" size="20" /></td>
        </tr>
    </table>

    <div id="lblError">암호를 입력하시오.</div>

</body>

</html>

.change()

 

저작자표시 비영리 변경금지 (새창열림)

'복습 ARCHIVE > java script' 카테고리의 다른 글

[jQuery] .append(), .empty(), .wrap(), insertAfter(), .before(), .colon(), .replaceWith(), .remove() , .css()  (0) 2021.06.08
[jQuery] .each(), .attr(), .val(), .substr(), .show() , .removeAttr(), .join()  (0) 2021.06.07
[jQuery] .click(), .filter(), .slice(),.toggle(), .hover(),.one()  (0) 2021.06.07
[jQuery] Selector - 홀짝, contains, sibling 등 /.tagName / .bind()  (0) 2021.06.07
[jQuery] 기본 사용법 및 함수 모음  (0) 2021.06.07
'복습 ARCHIVE/java script' Related Articles more
Comments