온 코딩

[jQuery] .eq(), .children(), .is(), .not(), .end() 본문

복습 ARCHIVE/java script

[jQuery] .eq(), .children(), .is(), .not(), .end()

SummerON 2021. 6. 8. 08:44

.eq()

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

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

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

            alert("text() => " + $('p:eq(2)').text()); // 선택기 필터 형식
            alert("html() => " + $('p').eq(2).html()); // 메서드 형식

        });

    </script>
</head>

<body>

	<p>C#</p>		<!-- 0번 -->
	<p>ASP.NET</p>	<!-- 1번 -->
	<p><sup>jQuery</sup></p>	<!-- 2번 -->

	<p>jQuery<sup>1</sup></p>
	
	<p>jQuery<sub>1</sub></p>

</body>

</html>

.children()-자식요소 확인 / .is() - 결과값 T/F 

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

            // myForm 영역에 submit 버튼이 있는지 검사
            if ($('#myForm').children().is("input[type=submit]")) {
                alert("있다.");
            }
            else {
                alert("없다.");
            }

        });

        // children() 특정 요소의 자식들...   <input type="submit" />
        // is() 특정 요소가 있는 지 확인..    true 
    </script>

</head>

<body> 

	<div id="myForm">
	    <input type="checkbox" />
	</div> 

</body> 

</html>

.not()

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>지정된 표현식을 제외한 집합 가져오기</title>

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

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

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

            // 라디오버튼을 제외한 input 태그에 배경색을 Yellow로 설정
            $('input').not("input[type=radio]").each(function() {
                $(this).addClass("Yellow").css("border", "1px solid red");
            });

        });
        
        // 1. $('input') : <input type="text" /> <input type="password" /> <input type="radio" />
        // 2. not("input[type=radio]") : <input type="text" /> <input type="password" />
        // 3. each(function() {    
        // 3-1. <input type="text" /> <= {background-color:Yellow;}    <= "border", "1px solid red"
        // 3-2. <input type="password" /> <= {background-color:Yellow;} <= "border", "1px solid red"
        //    });
        
        
        // not(요소) 지정한 요소를 제외..
        // each() 반복문 (java의 for( : )과 비슷한 역할)
        // addClass(스타일클래스) : <style></style>에서 설정한 스타일클래스를 적용할 때
        // css() : 특정 요소의 스타일 속성 추출
        // css(스타일속성) : 특정요소의 지정된 스타일 속성값을 추출
        // css(스타일속성, 속성값) : 특정 요소의 스타일을 설정..
        
    </script>

</head>

<body>

<div id="myform">
    <input type="text" />
    <input type="password" />
    <input type="radio" />
</div>

</body>

</html>

.end() - 이전단계로 가기

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>방금 실행한 집합 이전으로 되돌리기</title>

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

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

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

            //[1] JavaScript 텍스트 찾아가기
            alert($('div').find('p').html()); // <b>JavaScript</b>

            //[2] jQuery 텍스트 찾아가기
            var result = $('div').find('p:last').find('b').html();

            alert(result); // jQuery

            //[3] 방금 탐색한 기능 이전으로 돌리기
            var html = $('div').find('p:last').find('b').end().html();

            alert(html); // jQuery -> end() -> <b>jQuery</b>

        });
        
        // 요소.find(요소) : 특정 요소 내에서 다시 검색 (주의!! 지정한 요소를 찾으면 검색 중지!!!)
        // 요소.end() : 특정 요소의 부모위치로 이동 (검색 시...)

    </script>
</head>

<body>

		<div id="myForm">
		    <p>
		        <b>JavaScript</b>
		    </p>
		    <p>
		        <b>jQuery</b>
		    </p>
		</div> 

</body>

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

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

[jQuery - Ajax] 기본 사용법  (0) 2021.06.08
[jQuery] .trigger() , .unbind(), .show(), .hide(), .fadeIn(), .fadeOut(), .slideUp(), .slideDown(), .animate(), .stop(), .width(), .height  (0) 2021.06.08
[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] .attr(), .text(), .html(), .change()  (0) 2021.06.07
'복습 ARCHIVE/java script' Related Articles more
Comments