온 코딩

[jQuery] .each(), .attr(), .val(), .substr(), .show() , .removeAttr(), .join() 본문

복습 ARCHIVE/java script

[jQuery] .each(), .attr(), .val(), .substr(), .show() , .removeAttr(), .join()

SummerON 2021. 6. 7. 23:48

.each()

<!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] each 메서드 설명
            //$('p').each(function(index) { alert(index); });

            //[2] for문처럼 반복한다. index는 0부터 자동 증가됨
            // for문 처럼 반복한다. index는 0부터 자동 증가됨
            $('p').each( // p 태그 있는 만큼 반복

                function(index) {

                    $(this).attr({ // attr({어트리뷰트:값});
                        'id': "para-" + index // id 속성 동적으로 부여
                    });

                });

            //[3] 0번째 요소의 텍스트 읽어오기
            $('#btn').click(function() {
                alert($('#para-0').text()); // text() : 태그안의 값 : C#
            });

        });
    </script>

</head>

<body>

    <p>C#</p>
    <p>ASP.NET</p>
    <p>Silverlight</p>
    <input type="button" id="btn" value="동적으로 생성된 id로 개체 접근" />

</body>

</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>HTML 요소 가져오기</title>

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

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

            // h3 요소 모두 가져오기
            //            var headers = $('h3'); // 0번 : <h3>제목1</h3>    1번 : <h3>제목2</h3>
            //            // 반복문을 써서 반복 : for문 보다는 jQuery의 each문이 사용하기 편리
            //            for (var i = 0; i < headers.length; i++) {
            //                alert($(headers[i]).html());
            //            }

            // 위 코드를 each문으로 변경
            $('h3').each(
                function(index) {
                    alert($(this).html());
            });

        });
    </script>

</head>

<body>

    <h3><u>제목1</u></h3>
    <h3><b>제목2</b></h3>

</body>

</html>

.attr()

1. 속성 값을 통한 이미지 변경

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>DOM요소의 attribute 읽어오기</title> 

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

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

        	// attr('속성명') : 추출 기능
            //[1] get            
            alert($('a').attr('href')); // get

            
         	// attr('속성명', '속성값') : 설정 기능
         	
            //[2] img에 마우스 오버시 이미지 변경
            $("#logo").mouseover(function() {
                $(this).attr("src", "http://www.dotnetkorea.com/website/portals/0/dotnetkorealogo.gif");
            });

            //[3] 마우스오버/아웃시 다른 이미지 표시
            $("#copy").mouseover(function() {
                $(this).attr("src", "icon_members.gif");
            });

            $("#copy").mouseout(function() {
                $(this).attr("src", "icon_home.gif");
            });
            
        });
    </script>

</head>

<body> 

<a href="http://www.dotnetkorea.com/">닷넷코리아</a> 
<img id="logo" src="dotnetkorealogo.gif" alt="닷넷코리아로고" /> 
<img id="copy" src="icon_copy.gif" /> 

</body>

</html>

.val() / .val("설정할 값")

 

<!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() {

            // Init 값 설정..
            $('#txtName').val("RedPlus"); //단일값

            $('input:radio').val(['여자']);    // 다중값 : []

            $('#lstFavorites').val(['자바','제이쿼리']); // 다중값 : [,]
            
			// 버튼 클릭 후, value 값 추출..
            $('#btnOK').click(function() {

                var msg = "";

                //[1] 반드시 폼 요소의 value 속성을 가져온다. <> 에러
                msg += $('#txtName').val() +'\n';

                //[2] 라디오버튼의 체크된 value 속성을 가져옴 <> undefined
                msg += $('input:radio[name=Gender]:checked').val() + '\n';

                //[3] 리스트박스에서 여러개 값 가져오기
                msg += $('#lstFavorites').val().join(" | ") + '\n';

                //[!]
                alert(msg);

            });

        });
    </script>
</head>

<body>

    텍스트박스 : <input type="text" id="txtName" /><br />
    라디오버튼 : 
        <input type="radio" id="optGender1" name="Gender" value="남자"/>남
        <input type="radio" id="optGender2" name="Gender" value="여자"/>여<br />

    드롭다운리스트 : 
        <select id="lstFavorites" multiple="multiple" size="3">
            <option value="자바">JavaScript</option>
            <option value="제이쿼리">jQuery</option>
            <option value="프로토타입">Prototype</option>
        </select><br />

    <input type="button" value="확인" id="btnOK" />
       
</body>

</html>

.subStr() - 마우스오버 시 큰 이미지 보여주기

<!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() {

            // 아래 코드는 모든 이미지 파일의 이미지명을 얻어,
            // bigs/ 폴더에 있는 동일한 이미지를 div에 보여준다.
            $('#product img').mouseover(function() {

                $("#showImage").show(); // 이미지 보여줄 레이어 보이기

                var imgSrc = ""; // 이미지 소스 저장 변수 ("ico_go_up_s.gif")

             // 이미지 파일 <img src="../image/small/ico_go_up_s.gif" />
                imgSrc = $(this).attr("src"); // attr()로 src get하기 : "ico_go_up_s.gif"
				// imgSrc <= "../image/small/ico_go_up_s.gif"
                
				// imgSrc.lastIndexOf("/")  => 14
				// imgSrc.lastIndexOf("/") + 1 => 15
				// imgSrc.substr(6) => "ico_go_up_s.gif"
                imgSrc = imgSrc.substr(imgSrc.lastIndexOf("/") + 1); // 순수 파일명만 얻기
                // imgSrc <= "ico_go_up_s.gif"

                
                imgSrc = "<img src='../image/bigs/" + imgSrc + "' />";// 큰이미지 설정
				// <img src="../image/bigs/ico_go_up_s.gif" />
                
                $("#showImage").html(imgSrc); // 레이어에 HTML추가

            });
            

            // 마우스 아웃시 레이어 숨기기
            $('#product img').mouseout(function() {

                $("#showImage").hide(); // 레이어 숨기기

            });

        });
    </script>    

</head>

<body>

	<div id="product">
	    <img src="ico_go_up_s.gif" />    <!-- ../image/bigs/~~.gif -->
	    <img src="ico_go_down_s.gif" />    
	
	    <div id="showImage" style="border:1px solid red;width:400px;height:400px;">
	     <!-- <img src="../image/bigs/ico_go_down_s.gif" /> -->
	    </div>
	
	</div>

</body>

</html>

.show() - 마우스오버 시 큰 이미지 보여주기

<!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() {

            // 아래 코드는 모든 이미지 파일의 이미지명을 얻어,
            // bigs/ 폴더에 있는 동일한 이미지를 div에 보여준다.
            $('#product img').mouseover(function() {

                $("#showImage").show(); // 이미지 보여줄 레이어 보이기

                var imgSrc = ""; // 이미지 소스 저장 변수

                imgSrc = $(this).attr("src"); // attr()로 src get하기

                //imgSrc = imgSrc.substr(imgSrc.lastIndexOf("/") + 1); // 순수 파일명만 얻기

                imgSrc = "<img src='imgSrc' />";// 큰이미지 설정

                $("#showImage").html(imgSrc); // 레이어에 HTML추가

            });

            // 마우스 오버시 레이어 숨기기
            $('#product img').mouseout(function() {

                $("#ShowImage").hide(); // 레이어 숨기기

            });

        });
    </script>    

</head>

<body>

<div id="product">
    <img src="ico_go_up_s.gif" />    
    <img src="ico_go_down_s.gif" />    

    <div id="showImage"
        style="border:1px solid red;width:400px;height:400px;">
    </div>

</div>

</body>

</html>

.attr() - 다중 속성 값 지정

<!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() {
	
	        $("#com").attr({
	
	            src: "ico_go_down_s.gif",
	            alt: "컴퓨터",
	            title:"좋은컴퓨터"
	
	        });

        });
    </script>

</head>
 
<body>

    <img id="com"/>

</body>

</html>

.removeAttr() 

<!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() {

            // 버튼 클릭시 특성(속성/attribute/어트리뷰트/애트리뷰트) 제거
            $('#btnRemove').click(function() {
            	
                $('img:first').removeAttr("src"); // src 속성 삭제
            });

        });
    </script>

</head>

<body>

    <input type="button" id="btnRemove" value="src삭제" />
    <img src="ico_go_up_s.gif" />
    <img src="ico_go_down_s.gif" />

</body>

</html>

.join() 

<!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() {

            // Init 값 설정..
            $('#txtName').val("RedPlus"); //단일값

            $('input:radio').val(['여자']);    // 다중값 : []

            $('#lstFavorites').val(['자바','제이쿼리']); // 다중값 : [,]
            
			// 버튼 클릭 후, value 값 추출..
            $('#btnOK').click(function() {

                var msg = "";

                //[1] 반드시 폼 요소의 value 속성을 가져온다. <> 에러
                msg += $('#txtName').val() +'\n';

                //[2] 라디오버튼의 체크된 value 속성을 가져옴 <> undefined
                msg += $('input:radio[name=Gender]:checked').val() + '\n';

                //[3] 리스트박스에서 여러개 값 가져오기
                msg += $('#lstFavorites').val().join(" | ") + '\n';

                //[!]
                alert(msg);

            });

        });
    </script>
</head>

<body>

    텍스트박스 : <input type="text" id="txtName" /><br />
    라디오버튼 : 
        <input type="radio" id="optGender1" name="Gender" value="남자"/>남
        <input type="radio" id="optGender2" name="Gender" value="여자"/>여<br />

    드롭다운리스트 : 
        <select id="lstFavorites" multiple="multiple" size="3">
            <option value="자바">JavaScript</option>
            <option value="제이쿼리">jQuery</option>
            <option value="프로토타입">Prototype</option>
        </select><br />

    <input type="button" value="확인" id="btnOK" />
       
</body>

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

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

[jQuery] .eq(), .children(), .is(), .not(), .end()  (0) 2021.06.08
[jQuery] .append(), .empty(), .wrap(), insertAfter(), .before(), .colon(), .replaceWith(), .remove() , .css()  (0) 2021.06.08
[jQuery] .attr(), .text(), .html(), .change()  (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
'복습 ARCHIVE/java script' Related Articles more
Comments