온 코딩

[jQuery] Selector - 홀짝, contains, sibling 등 /.tagName / .bind() 본문

복습 ARCHIVE/java script

[jQuery] Selector - 홀짝, contains, sibling 등 /.tagName / .bind()

SummerON 2021. 6. 7. 23:14

기본 Selector

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>Selector : 선택자/선택기/실렉터/셀렉터</title>

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

    <style type="text/css">
        .bg{ background-color:Yellow;}
        .horizontal { float:left; list-style:none; margin:10px;}
    </style> 

    <script type="text/javascript">
        $(document).ready(function() {
            //[1] li > u 에 대해서 배경색을 Yellow로 설정
            $('li > u').addClass('bg'); // li 자식 요소 중 u 태그인것만 선별

            //[2] id 속성이 myFavorites인 것의 자식 요소중 li에 CSS클래스 적용
            $("#myFavorites > li").addClass("horizontal");

            //[3] id 속성에 대해서 직접 접근
            jQuery('#jquery').click(function(){ alert('jQuery'); });

            $('.sil').click(function(){alert('실버라이트'); });
        	
            }

        );

    </script>

</head>

<body>

<h3>관심사항</h3>

<ul id="myFavorites">

    <li><u>C#</u></li>
    <li>ASP.NET</li>
    <li></li>
    <li class="sil">Silverlight</li>
    <li id="jquery">j<u>Q</u>uery</li>

</ul>


</body>
</html>

 

특정 문자열 포함 Selector

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

    <title>정규표현식 selector</title>

    <style type="text/css">
        .red { color:Red; }
        .green { color:Green; }
        .silver { color:Silver; }
    </style>

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

    <script type="text/javascript">

        $(document).ready(
            function() {

                //[1] dotnet이라는 단어가 들어가는 링크에 배경을 red로 설정
                $("a[href*='dotnet']").addClass("red");

                //[2] aspx로 끝나는 링크의 배경 green으로 설정
                $('a[href$="aspx"]').addClass("green"); // ~로 끝나는

                //[3] mailto:로 시작하는 링크의 배경을 silver로 설정
                jQuery("a[href^='mailto:']").addClass("silver");

				$('a[href$="com"]').addClass("red");

            }
        );

    </script>

</head>

<body>
    <a href="http://www.dotnetkorea.com/">닷넷코리아</a>
    <br>
    <a href="http://www.visualacademy.com/Default.aspx">비주얼아카데미</a>
    <br>
    <a href="mailto:redplus@hawaso.com">이메일</a><br>

	<a href="http://www.naver.com">네이버</a><br>
	<a href="http://www.google.com">구글</a><br>
	<a href="http://www.nate.com">네이트</a>

</body>
</html>

홀수 짝수 Selector

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>테이블의 짝수번째 배경색 변경</title>

    <style type="text/css">
        .redColor { background-color: Red; }
        .blueColor { background-color:Green; }
    </style>

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

    <script type="text/javascript">
        $(document).ready(
            function() {
                $('tr:odd').addClass("redColor");                           
                $('tr:even').addClass("blueColor");
            }
        );
    </script>
</head>

<body>
  <table width="100">
  <tr>
        <td>0</td>
  </tr>
  <tr>
        <td>1</td>
  </tr>
  <tr>
        <td>2</td>
  </tr>
  <tr>
        <td>3</td>
  </tr>
  </table>
</body>
</html>

특정 요소 포함 Selector (contains)

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>특정 텍스트 검색</title>

    <style type="text/css">
        .redColor { color:Red; }
    </style>
    <script src="jquery-1.6.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(
            function() {
                // [1] td 태그내의 텍스트가 RedPlus를 포함하는 요소를 검색 후 배경색을 red
                $("td:contains('RedPlus')").addClass('redColor');
            }
        );
    </script>
</head>

<body>
    <table>
    <tr><td>RedPlus</td></tr>
    <tr><td>DotNetKorea</td></tr>
    <tr><td>Hawaso</td></tr>
    </table>
</body>
</html>

메서드 체인

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
    <title>메서드 체인</title>
    <style type="text/css">
        .redColor{ color:Red }
        .blueColor{ color:Blue }
    </style>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(
            function() {

            	$('td:contains("RedPlus")')    // <td>RedPlus</td>
                .siblings()						// <td>레드플러스</td><td>닷넷</td>
                .addClass("redColor")

                .parent()
                .find('td:eq(0)') //td의 0번째
                .addClass("blueColor");

            }
        );
    </script>

</head>

<body>
    <table>
        <tr>
            <td>NickName</td><td>이름</td><td>비고</td>
        </tr>

        <tr>
            <td>RedPlus</td><td>레드플러스</td><td>닷넷</td>
        </tr>

        <tr>
            <td>Hawaso</td><td>하와소</td><td>강의</td>
        </tr>
    </table>
</body>

</html>

 

요소 가져오기

<!DOCTYPE html>
<html>
<head>

    <title>DOM 요소 가져오기</title>

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

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

                var tagName = $('#dnk').get(0).tagName;
                alert(tagName);

            }
        );
    </script>
</head>

<body>
    <a href="http://www.dotnetkorea.com/" id="dnk">닷넷코리아</a>
</body>

</html>

.bind() - add-remove

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

    <title>스타일 추가/제거</title>

    <style type="text/css">
        .yellowBorder{ background-color: yellow; border:1px solid red }
    </style>

    <script src="jquery-1.6.2.js" type="text/javascript"></script>
    <script type="text/javascript">
        $(document).ready(
          function() {
              $('#btnClick') // 두가지 기능을 하나의 함수로 묶어서 사용
              .bind("mouseover", function() {$('#btnClick').addClass('yellowBorder') })
              //마우스를 올렸을 때 
              .bind("mouseout", function() {$(this).removeClass('yellowBorder')});
              //마우스를 내렸을 때
          }); 
    </script>
</head>

<body>
<div id="btnClick">
    마우스를 올려보세요!!!
</div>
</body>

</html>

.bind() - 배경색 바꾸기

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

    <title>bind() 메서드로 동적으로 이벤트 부여</title>

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

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

                $('#btnClick').bind("click", function() { alert('클릭됨'); });

                $('#btnClick').bind("mouseover", function() {
                    document.getElementById('btnClick').style.backgroundColor = 'red';
                });

                $('#btnClick').bind("mouseout", function() {
                    $('#btnClick').get(0).style.backgroundColor = 'Blue';
                });

            });
    </script>

</head>

<body>

<div id="btnClick">
    클릭하세요!!!
</div>

</body>

</html>

아이디를 selector로 사용 

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

    <title>this.id로 DOM 요소의 id 속성 가져오기</title>

    <style type="text/css">
        .redColor{ color:Red }
    </style>

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

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

            //[1] 닷넷코리아 레이어 클릭시 CSS 클래스 해제
            $('#dnk').bind('click', function() {

                //[a] 해제
                $('#mainMenu .redColor').removeClass('redColor'); //3개의 요소의 CSS 클래스 해제

                //[b] #dnk만 다시 적용
                $(this).addClass('redColor'); // 현재 나만 다시 적용

            });

        });

    </script>

</head>

<body>
    <div id="mainMenu">
        <div id="dnk" class="redColor">닷넷코리아</div>
        <div id="va" class="redColor">비주얼아카데미</div>
        <div id="ll" class="redColor">라이선스랜드</div>
    </div>
</body>

</html>

아이디를 통해 한꺼번에 같은 효과 적용

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

    <title>this.id로 DOM 요소의 id 속성 가져오기</title>

    <style type="text/css">

        .redColor{ color:Red }

    </style>

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

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

            //[2] mainMenu의 모든 항목에 대해서 click 이벤트 적용
            $('#mainMenu .redColor').bind("click", function() {

                //[!] this.id로 분기
                if (this.id == "va") {
                    alert("비주얼 아카데미 클릭");
                }else if (this.id == "ll") {
                    alert($(this).text()); // #ll 안에 들어있는 텍스트
                }
            });
        });
    </script>

</head>

<body>
    <div id="mainMenu">
        <div id="dnk" class="redColor">닷넷코리아</div>
        <div id="va" class="redColor">비주얼아카데미</div>
        <div id="ll" class="redColor">라이선스랜드</div>
    </div>
</body>

</html>
저작자표시 비영리 변경금지

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

[jQuery] .attr(), .text(), .html(), .change()  (0) 2021.06.07
[jQuery] .click(), .filter(), .slice(),.toggle(), .hover(),.one()  (0) 2021.06.07
[jQuery] 기본 사용법 및 함수 모음  (0) 2021.06.07
10_key_slide_converter : 키코드, 숫자맞추기, 사진슬라이드, 섭씨화씨변환기  (0) 2021.05.17
09_bom : 리로케이션, 팝업, 브라우저, 위치  (0) 2021.05.17
'복습 ARCHIVE/java script' Related Articles more
Comments