소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(function(){
            $('h1').css('border','1px solid red'); 
            $('ol>li:contains("menu3")').css('border','1px solid red'); 
            $('ol>li:has("em")').css('border','1px solid red'); 
            $('ol>li').find('em').css('border','1px solid red'); //위의 em과 비교
            $('ol>li:has("li")').css('border','1px solid red'); 
            $('ol>li:eq(1)').siblings().css('border','1px solid red');
            $('ol>li').not('ol>li:eq(1)').css('border','1px solid red');//위와 동일결과
            $('ol>li').contents().css('border','1px solid red');
            $('ol>li').contents().filter('strong').css('border','1px solid red');
            
            $('ol>li').filter('.cl1').css('border','1px solid red');
            //$('ol>li').find('.cl1').css('border','1px solid red');//적용되지않는다
            $('ol>li').find('a').css('border','1px solid red');//찾는방법 이해하기 자식요소중에 찾는것
            $('a:contains("menu3")').parent().children().css('border','1px solid red');
            $('ol>li:last').children().children('li:last').css('border','1px solid red');
            $('ol>li:last').children().children().children().css('border','1px solid red').end().css('border','1px solid gray');
            
            $('ol>li').not('li:eq(1)').filter('.cl1').css('border','1px solid red').end().css('color','green');
        });
    </script>
    
</head>
<body>
    <h1>목차</h1>
    <ol>
        <li>menu1</li>
        <li>menu<em>2</em></li>
        <li class="cl1"><a href="#">menu3</a></li>
        <li><strong>menu4</strong></li>
        <li>
            <ul>
                <li>menu4-1</li>
                <li><a href="#">menu4-2</a></li>
            </ul>
        </li>
    </ol>
</body>
</html>
cs


결과

$('ol>li:contains("menu3")').css('border','1px solid red');

$('ol>li:contains("menu3")').css('border','1px solid red'); 

contains("")는 괄호 안의 내용과 일치하는 것을 선택. "me", "3" 등의 글을 넣어 보고 비교

$('ol>li:has("em")').css('border','1px solid red');

$('ol>li').find('em').css('border','1px solid red');

둘의 결과를 비교

has를 쓴 결과

find를 쓴 결과

$('ol>li:eq(1)').siblings().css('border','1px solid red');

$('ol>li').not('ol>li:eq(1)').css('border','1px solid red');

siblings()는 형제 노드를 말한다. eq(1)에 해당하는 것을 뺀 형제노드들이 선택된다.

두줄의 결과는 동일하다.

$('ol>li').contents().css('border','1px solid red');

$('ol>li').contents().filter('strong').css('border','1px solid red');

이것은 위의 결과에서 'strong'태그만을 필터로 거쳐 menu4만 선택된다

$('ol>li').filter('.cl1').css('border','1px solid red');

$('ol>li').find('a').css('border','1px solid red');

filter와 find의 차이는 find는 자식노드 중에서 찾는다



...등 실행




저작자표시 비영리 변경금지

'* Programming > JQuery' 카테고리의 다른 글

pdf파일 및 사진파일 팝업창으로 띄우기  (0) 2018.03.08
부트스트랩 달력 기능  (0) 2018.03.08
ex05.html(선택자)  (0) 2016.10.06
ex04.html  (0) 2016.10.06
ex03.html(href)  (0) 2016.10.06

소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(function(){
//            $('input[type="text"]').css('border','1px solid red');
            $(':text').css('border','1px solid red');//위와 동일한 결과
            $(':password').css('background-color','gray')
            $(':submit').css('background-color','yellow')//전송과 버튼1 버튼이 적용
            $(':reset').css('background-color','gray')//취소 버튼2 버튼이 적용
            $(':checked').css('border','1px solid yellow');//선택자는 선택이됨 css가안먹
            $(':checked').next().css('border','2px solid yellow');
            $(':selected').css('color','red');
            
        });
        
    </script>
</head>
<body>
    <h1>회원가입</h1>
    <form action="">
       <p>
            <label for="id">id</label><input type="text" id="id"/>
       </p>
       <p>
           <label for="pw">pw</label><input type="password" id="pw"/>
       </p>
       <p>
           <select>
                <option>축구</option>
                <option selected='selected'>농구</option>
                <option>야구</option>
            </select>
       </p>
       <p>
           <input type="checkbox" id="chk" checked='checked'/>
           <label for="chk">이용약관 동의</label>
       </p>
        <input type="submit" value="전송">
        <input type="reset" value="취소">
        <button>버튼1</button>
        <button type="reset">버튼2</button>
    </form>
</body>
</html>
cs

결과


저작자표시 비영리 변경금지

'* Programming > JQuery' 카테고리의 다른 글

부트스트랩 달력 기능  (0) 2018.03.08
ex06.html  (0) 2016.10.07
ex04.html  (0) 2016.10.06
ex03.html(href)  (0) 2016.10.06
ex02.html  (0) 2016.10.06

소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(function(){
            $('li:visible').css('color',"red");
            $('li:hidden').css("display",'block');
        });
    </script>
</head>
<body>
    <h1>메뉴</h1>
    <ul>
        <li>menu1</li>
        <li style="display:none;">menu2</li>
        <li>menu3</li>
    </ul>
</body>
</html>
cs

결과


저작자표시 비영리 변경금지

'* Programming > JQuery' 카테고리의 다른 글

ex06.html  (0) 2016.10.07
ex05.html(선택자)  (0) 2016.10.06
ex03.html(href)  (0) 2016.10.06
ex02.html  (0) 2016.10.06
ex01.html  (0) 2016.10.06

소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(function(){
            $('a[title]').css("background-color","yellow");//'title을 가지고있는 a태그'가 선택자
            $('a[href="http://naver.com"]').css("color","red");
            $("a[href^='mailto']").css('border',"1px solid red");//mailto 시작하는
            $("a[href$='net']").css("background-color","pink");//net으로 끝나는
            $("a[href*='homeplus']").css("background-color","pink");//중간에
        });
    </script>
</head>
<body>
    <h1>리스트</h1>
    <ul>
        <li><a href="http://naver.com">Naver</a></li>
        <li><a href="http://daum.net">Daum</a></li>
        <li><a href="http://google.com">Google</a></li>
        <li><a href="http://tistory.com" title="티스토리 홈페이지">Tistory</a></li>
        <li><a href="mailto://rudd~~@naver.com">mail</a></li>
        <li><a href="http://www.homeplus.co.kr">홈플러스</a></li>
    </ul>
</body>
</html>
cs

결과


저작자표시 비영리 변경금지

'* Programming > JQuery' 카테고리의 다른 글

ex05.html(선택자)  (0) 2016.10.06
ex04.html  (0) 2016.10.06
ex02.html  (0) 2016.10.06
ex01.html  (0) 2016.10.06
JQuery 시작  (0) 2016.10.06

소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="js/jquery-1.11.3.js"></script>
    <script>
        $(function(){
            $("ul>li:first").css('border',"1px solid red");//첫번째
            $("ul>li:last").css('border',"1px solid red");//마지막
            $("ul>li:even").css('border',"1px solid red");//짝수(index번호로 0부터)
            $("ul>li:odd").css('border',"1px solid red");//홀수
            $('ul>li:nth-child(2n)').css('border',"1px solid red");
            $('ul>li:nth-child(2n+1)').css('border',"1px solid red");
            $('ul>li:nth-child(3n)').css('border',"1px solid red");
            $('ul>li:nth-child(4n)').css('border',"1px solid red");
            $('ul>li:nth-last-of-type(2)').css('border',"1px solid red");//()안의 숫자 올려보기
            $('ul>li:nth-last-child(3)').css('border',"1px solid red");//위와 같은기능
            $('li').slice(3).css('border',"1px solid red");//()안의 숫자 올려보기
            $('li').slice(9).css('border',"1px solid red");//
            
            $('body>ul:first>li:eq(3)').css('border',"1px solid red");//이퀄
            $('body>ul:first>li:lt(3)').css('border',"1px solid red");//작은
            $('body>ul:first>li:gt(3)').css('border',"1px solid red");//큰
            
            $('h1').css('border',"1px solid red").next().children('li:first').next().css('border',"2px solid gray");
            $('h1,h1+ul>li:nth-child(2)').css('border',"1px solid red");//위와 같은 
            
            var h1 = $('h1');
            h1.css('border',"2px solid gray");
            
        });
    </script>
</head>
<body>
    <h1>제이쿼리2</h1>
    <ul>
        <li>menu1</li>
        <li>menu2</li>
        <li>menu3</li>
        <li>menu4</li>
        <li>menu5</li>
        <li>menu6</li>
        <li>menu7</li>
        <li><a>menu8</a></li>
    </ul>
    <ul>
        <li>menu2-1</li>
        <li>menu2-2</li>
    </ul>
</body>
</html>
cs

이것도 역시 모두 주석처리후 한줄씩 주석을 풀어 실행하며 공부한다.

결과

 $("ul>li:first").css('border',"1px solid red");//첫번째
 $("ul>li:last").css('border',"1px solid red");//마지막

 $("ul>li:even").css('border',"1px solid red");//짝수(index번호로 0부터)

인덱스 번호가 0 부터 시작

$('ul>li:nth-last-of-type(2)').css('border',"1px solid red");

$('li').slice(3).css('border',"1px solid red");


...등 





저작자표시 비영리 변경금지

'* Programming > JQuery' 카테고리의 다른 글

ex05.html(선택자)  (0) 2016.10.06
ex04.html  (0) 2016.10.06
ex03.html(href)  (0) 2016.10.06
ex01.html  (0) 2016.10.06
JQuery 시작  (0) 2016.10.06

+ Recent posts

티스토리툴바