728x90

-개발환경-

IDE : Eclipse IDE for Enterprise Java Developers ver-2020-06 (4.16.0)
Tomcat : Tomcat v8.0 Server
JQuery : jquery-3.6.0.min.js


-설정-

설정에는 두가지 방법이 있는데 , 
1. 인터넷 서비스 제공자로부터 직접 연결하여 데이터를 전송받는 CDN방식(당연히 네트워크필수)
밑 명령줄을 ecilipse의 head태그내에 삽입. 
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous"></script>

2. JQuery 메인 홈페이지에서 js 파일을 다운후 script문 작성.
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>

 

-jquery07_DOM탐색.html-

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<style type="text/css">
 
    a{
        color:white;
        text-decoration: none;
    }
    .menu{
        background:black;
        width: 150px;
        border : 1px solid tomato;
        transition: 0.4s;
    }
    .menu:hover{
        background : hotpink;
        width: 300px;
    }
    div{
        color: white;
    }
    div:hover,a:hover{/*  hover는 마우스 올렸을때 발생하는 이벤트 */
        background: hotpink;
        color : skyblue;
        text-decoration: none;
    }
</style>
<script>
    $(document).ready(function(){
        //class 속성이 menu인 모든 div 태그의 자식인 div 태그를 숨긴다.
        //$('.menu > div').css('display','none');
        $('.menu > div').hide();
        
        //hover() : 자바스크립트의 mouseenter , mouseleave 이벤트를 하나의 이벤트로
        //연결하고 선택된 요소에서 mouseenter , mouseleave 이벤트가 발생되었을때 설정된
        //함수가 실행된다.
        // mouseenter 이벤트 : 마우스가 선택된 요소 위로 올라오면서 발생된다.
        //mouseleave 이벤트 : 마우스가 선택된 요소에서 빠져나가면 발생된다.
        //hover(mouseenter 이벤트가 발생되면 실행할 함수, mouseleave 이벤트가 실행되면 발생될 함수)
        $('.menu').hover(
            function(){
                //stop() : 선택된 요소에서 실행중인 모든 이펙트 효과를 즉시 중지시킨다.
                $(this).children('div').stop().slideDown(500);            
            },
            function(){
                $(this).children('div').stop().slideUp(500);            
                
            }
        );
    });
</script>
 
</head>
<body>
 
    <h2>DOM 탐색 메소드</h2>
 
    <div id="menu1" class="menu">
        <a href="./Jquery07_DOM탐색_1.html">필터링 메소드</a>
        <div>first</div>
        <div>eq()</div>
        <div>slice()</div>
        <div>last</div>
        <div>&npsp;</div>
    </div>
    <div id="menu2" class="menu">
        <a href="./Jquery07_DOM탐색_1.html">필터링 메소드</a>
        <div>find()</div>
        <div>children()</div>
        <div>parent()</div>
        <div>next()</div>
        <div>prev</div>
        <div>&npsp;</div>
    </div>
    <div id="menu3" class="menu">
        <a href="./Jquery07_DOM탐색_1.html">필터링 메소드</a>
        <div>add()</div>
        <div>is()</div>
        <div>&npsp;</div>
    </div>
 
</body>
</html>
 cs
더보기

-Description

GUI :

12 : 밑줄은 none
18 : 마우스를 menu를 포함하는 태그에 옮겼을때 20번째 줄이 가동됨. 이떄 변화되는 시간이
transition 으로 0.4초임
34 : onload 수행 
37 : class 값으로 menu를 가지는 태그의  하위태그중 div태그들에 hide속성을 적용.

 

-요약-

 

 

-마침글-

단순문법공부는 boring하다..

인용

 

'21년이전 > 국비-JQuery+JAVA-SCRIPT' 카테고리의 다른 글

Jquery-form연습3  (0) 2021.03.29
Jquery-속성선택자  (0) 2021.03.25
JQuery-선택자  (0) 2021.03.25
JQuery-기본설정 및 이미지처리  (0) 2021.03.24
728x90

-개발환경-

IDE : Eclipse IDE for Enterprise Java Developers ver-2020-06 (4.16.0)
Tomcat : Tomcat v8.0 Server
JQuery : jquery-3.6.0.min.js


-설정-

설정에는 두가지 방법이 있는데 , 
1. 인터넷 서비스 제공자로부터 직접 연결하여 데이터를 전송받는 CDN방식(당연히 네트워크필수)
밑 명령줄을 ecilipse의 head태그내에 삽입. 
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous"></script>

2. JQuery 메인 홈페이지에서 js 파일을 다운후 script문 작성.
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>

 

-jquery06_form연습3.html-

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
 
<script>
$('#infoBox').focus();//text에 포커스를 넣어줌
                    
    $(document).ready(function() {
            $('.error').hide();  // onload되자마자 class가 error로 지정된 영역을 숨김
            
            $('#single').submit(function(){
                
                var userid=$('#infoBox').val().trim();
                if ( userid == null || userid ==''){
                    $('#infoBox').val('');
                    $('.error').show();
                    return false;
                }
                
                return true;
            });
            
            $('#confirm').click(function(){
                //선택된 과일 가격이 표시될 div 태그 내부의 내용을 지워준다.
                //document.getElementById('result').innerHTML='';//js일 경우
                $('#result').empty();
                
                //input type이 checkbox 혹은 radio 일 경우 :checked를 이용
                //참고로 , select 태그는 option:selected 를 이용
                var count = $('input[name=chk]:checked').length; 
                if ( count == 0){
                } else{
                    $('input[name=chk]:checked').each(function(index){   //checked 된것들을 선택
                        //체크한 체크 상자중에서 index에 해당되는 요소 1개를 얻어온다.
                        var chk = $('input[name=chk]:checked').eq(index);
                        $('#result').append('과일 이름 : '+chk.next().text()+', 가격 : '+chk.val()+'</br>');
                    });
                }
            });
            
             $('input[name=chk]').click(function(){
                //name 속성 값이 chk인 요소의 갯수로써,
                //체크된 요소의 갯수를 비교한다
                if( $('input[name=chk]').length==$('input[name=chk]:checked').length ){
                    $('input[name=all]').prop('checked',true);//checked의 값을 true로 변경하라.
                }else{
                    $('input[name=all]').prop('checked',false);//checked의 값을 false로 변경하라.
                }
             });
    
        $('input[name=all]').click(function(){
            var checked= $('input[name=all]').prop('checked');
            $('input[name=chk]').each(function(index){
                //$('input[name=chk]').eq(index).prop('checked',checked);
                $(this).prop('checked',checked);//윗 명령어와 동일
            });
        });
    
    });
 
</script>
 
</head>
<body>
 
    <form id="single" action="ok.html" method="post">
        <div>
            <span>사용자 ID</span>
            <input id="infoBox" type="text" name="userid"/>
            <span class="error" style="color: red; font-weight:bold;">반드시 입력해야 합니다</span>
        </div>
        <input type="submit" value="입력하기"/>
    </form>
    
    <fieldset style="width: 300px">
        <legend>체크 여부 확인</legend>
        <input type="checkbox" name="all"/>전체선택<br/>
        <input type="checkbox" name="chk" value="1000"/><b>사과</b><br/>
        <input type="checkbox" name="chk" value="2000"/><b>바나나</b><br/>
        <input type="checkbox" name="chk" value="3000"/><b>오렌지</b><br/>
        <input id="confirm" type="button" value="확인"/><br/>
        <span>선택한 과일 가격</span>
        <div id="result">
        
        </div>
    </fieldset>
 
</body>
</html>
 cs
더보기

-Description

GUI :

12 : text에 포커스를 넣어줌
15 : id 속성이 single로 지정된 form에서  submit 버튼이 클릭되면 실행할 이벤트를 지정한다
17 : 텍스트에 있는 글을 trim 처리후 userid에 저장
18~22 : userid에 들어 있는 값이 올바르지 않다면 해당 텍스트를 공백으로 만든후 ,
class 가 error인 태그를 보여준다. 그리고 false를 반환.

21,24 :     // form의 유효성을 검사해서 오류가 발생되면 false를
//리턴시켜 action페이지로 넘어가지 않게 한다.
//반면 true가 리턴되면 action 페이지로 넘어감
27~43 : 체크 박스를 선택하고 확인 버튼을 클릭하면 체크 여부를 확인해서
그 결과를 id속성이 result로 지정된 div 태그 내부에 출력한다.
30 : id가 result인 태그에서,  내부의 내용을 지운다.
34: name속성으로 chk가 지정된 체크상자의 체크된 항목 개수를 검사한다.
40 : .next() : 선택된 요소 바로 다음에 위치한 형제 요소 한개를 선택한다.
45~53 : name 속성이 chk인 체크상자가 클릭되면 
모든 체크 상자가 체크되었나 검사해서 전체 선택 체크 상자를 선택 또는 해제한다.
49 : 모든체크상자가 체크되면 name 속성이 all 인 요소의 checked 프로퍼티를 
true로 변경한다.
55~61 : 전체 선택 체크박스가 클릭되면 모든 체크상자를 체크 또는 해제한다.
56 :  prop 를 이용해 속성을 가져옴

 

-요약-

 

형제(sibling) 요소 탐색
//.siblings() : 선택된 요소의 형제 요소 중에서 지정한 선택자에 해당되는 모든 요소를 선택한다.
//.next() : 선택된 요소 바로 다음에 위치한 형제 요소 한개를 선택한다.
//.nextAll() : 선택된 요소 바로 다음에 위치한 형제 요소를 모두 선택한다.
//.nextUntil() : 선택된 요소 바로 다음에 위치한 형제 요소 중에서 지정한 선택자에 해당되는 요소 바로 이전까지의 요소를 모두 선택한다.
//.prev() : 선택된 요소 바로 이전에 위치한 형제 요소를 선택한다.
//.prevAll() : 선택된 요소 바로 이전에 위치한 형제 요소를 모두 선택한다.
//.prevUntil() : 선택된 요소 바로 이전에 위치한 형제 요소 중에서 지정한 선택자에 해당되는 요소 바로 다음까지의 요소를 모두 선택한다.

//Jquery 에서 input 요소의 선택
// :button : type 속성이 'button'인 모든 요소를 선택한다.
// :checkbox : type 속성이 'checkbox'인 모든 요소를 선택한다.
// :file : type 속성이 'file'인 모든 요소를 선택한다.
// :image : type 속성이 'image'인 모든 요소를 선택한다.
// :password : type 속성이 'password'인 모든 요소를 선택한다.
// :radio : type 속성이 'radio'인 모든 요소를 선택한다.
// :reset : type 속성이 'reset'인 모든 요소를 선택한다.
// :submit : type 속성이 'submit'인 모든 요소를 선택한다.
// :text : type 속성이 'text'인 모든 요소를 선택한다.
// :checked : type 속성이 'checkbox' 또는 'radio'인 요소 중에서 체크된 모든 요소들를 선택한다.
// :selected : option 요소 중에서 선택된 모든 요소들를 선택한다.
// :focus : 현재 포커스를 가지고 있는 요소를 선택한다.
// :disabled : 비활성화 되어있는 모든 요소를 선택한다.
// :enabled : 활성화 되어있는 모든 요소를 선택한다.

 

javascript는 value 속성을 사용해서 ~~~~~.value 형태로 값을 얻어오고 ~~~~~.value = '값' 형태로 값을 저장한다.
jQuery에서는 value 대신 val() 메소드를 사용해서 ~~~~~.val() 형태로 값을 얻어오고 ~~~~~.val('값') 형태로 값을 저장한다.
아래와 같이 사용하면 input 태그의 type 속성의 값이 text인 요소가 여러개 있더라도 첫 번째 요소의 값만 얻어올 수 있다.
var docs = $('input:text').val();

 

javascript는 innerHTML을 사용해서 태그 내부에 텍스트를 넣어주지만 jQuery는 text() 메소드로 넣어준다.
text() 메소드는 html 태그를 지원하지 않고 html() 메소드는 html 태그를 지원한다.
$('#a').text('<h1>doc<h1>'); // html 태그를 지원하지 않기 때문에 <h1>doc<h1> 가 그대로 들어감

 

//javascript는 onclick(클릭이벤트), onchange(변화이벤트)와 같이 이벤트가 'on'으로 시작하지만 jQuery는 'on'을 붙이지 않는다. 
/*  //js 에서 select 태그를 컨트롤
     var selEle = document.getElementsByTagName('select')[0];
          selEle.onchange = function() {
          //selectedIndex : 콤보 박스에서 선택된 option 항목의 index를 얻어온다.
          //options : 콤보 상자의 <option> 태그에 입력된 항목을 배열 형태로 기억하는 객체
          var doc = document.getElementsByTagName('input')[1];
          doc.value = selEle.options[selEle.selectedIndex].value;
          }
*/

 

//Jquery에서 select태그를 컨트롤
$('select:eq(0)').change(() => {
     selValue = $('select:eq(0) > option:selected').val();  //선택된 option의 value값을 가져옴
     $('input:text:eq(1)').val(selValue);
});


input 태그 중에서 type이 text인 요소를 선택해서 배경색 지정하기
/*  //js로 표현
var obj = document.querySelectorAll('input');
for (var i = 0; i < obj.length; i++) {
//getAttribute() : 인수로 지정된 속성의 값을 얻어온다.
     if (obj[i].getAttribute('type') == 'text') {
          obj[i].style.backgroundColor = 'yellowgreen';
     }
}
*/
// Jquery 로 표현
//$('input[type=text]')..css('backgroundColor', 'skyblue');
$('input:text').css('backgroundColor', 'tomato');


//콤보 박스는 한 번에 한 개만 선택되기 때문에 $('select[name=email]:eq(0) > option:selected')와 
//$(this)는 같은 의미로 사용되지만 arrow 함수를 사용할 때는 $(this)가 동작되지 않는다.


//each() : 선택된 요소들의 인덱스를 0 부터 1씩 증가시키며 차례대로 함수의 인수로 전달한다.
//$('input:checkbox[name=hobbies]:checked').each(function(index) {
~
});

 

-마침글-

단순문법공부는 boring하다..

인용

 

'21년이전 > 국비-JQuery+JAVA-SCRIPT' 카테고리의 다른 글

Jquery-메뉴에 특수효과 주기  (0) 2021.03.29
Jquery-속성선택자  (0) 2021.03.25
JQuery-선택자  (0) 2021.03.25
JQuery-기본설정 및 이미지처리  (0) 2021.03.24
728x90

-개발환경-

IDE : Eclipse IDE for Enterprise Java Developers ver-2020-06 (4.16.0)
Tomcat : Tomcat v8.0 Server
JQuery : jquery-3.6.0.min.js


-설정-

설정에는 두가지 방법이 있는데 , 
1. 인터넷 서비스 제공자로부터 직접 연결하여 데이터를 전송받는 CDN방식(당연히 네트워크필수)
밑 명령줄을 ecilipse의 head태그내에 삽입. 
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous"></script>

2. JQuery 메인 홈페이지에서 js 파일을 다운후 script문 작성.
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>

 

-jquery03_속성선택자.html-

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
 
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
 function imgSize(){
     /* var imgs=document.getElementsByTagName('img');
     for(var i=0;i<imgs.length;i++){
         imgs[i].style.width='200px';
         imgs[i].style.height='200px';
     } */  // js방식
     
     $('img').css({'width':'200px','height':'200px'}); //Jquery 방식
 }
 
 function idSelector(){
     var imgs=document.querySelectorAll('#selId');
     for(var i=0;i<imgs.length;i++){
         imgs[i].style.display='none';
     }  // js 방식 모든id속성에적용
     
     //$('#selId').hide();   최초의 id에만 적용
 }
 
 function classSelector(){
    /*  var selClass=document.querySelectorAll('.selClass');
     for(var i=0;i<selClass.length;i++){
         selClass[i].style.opacity='0.5';
     } */    //js방식
     
     $('.selClass').css('opacity','0.5');  // Jquery방식
 }
 
 function includeSelector(){
     //$('img[id]').css('opacity','0.2'); //img태그의 id속성이 있는것만 적용
     //$('img[class]').css('opacity','0.2'); //img태그의 class속성이 있는것만 적용
     //$('img[title=img02]').css('opacity','0.2'); // title속성값이 img02 인 것에 스타일적용
     //$('img[title*=img02]').css('opacity','0.2'); // tile 속성값으로 img02라는 단어가 포함된것 찾음
     //$('img[title$=img002]').css('opacity','0.2'); //지정된 문자열로 끝나는 모든 요소를 선택한다.
     //$('img[title^=image02]').css('opacity','0.2'); //지정된 문자열로 시작하는 모든 요소를 선택한다.
     //$('img[title!=img04]').css('opacity','0.2'); //지정된 문자열과 같지 않은 모든 요소를 선택한다.
 }
 
//    속성(attribute)과 프로퍼티(property)의 차이점
//    속성이란 html 요소가 추가적인 정보를 가지고 있는 이름과 값의 한 쌍을 말한다.
//    프로퍼티란 속성을 객체화 했을 때 html DOM 트리 내부에서의 값을 말한다.
//    <input type="checkbox" name="chk" checked="checked"/>
//    위의 <input> 태그 요소는 checked 라는 속성을 가지고 있으며 속성 값은 "checked" 이며 만약에 해당 체크 박스가 선택되었을 때 checked 속성의 
//    프로퍼티는 "true" 이다.
 
//    속성과 프로퍼티 설정
//    .attr() : 선택된 요소 집합의 첫 번째 요소로 지정된 속성 값을 리턴하거나 선택된 요소의 지정된 속성을 전달받은 값으로 설정한다.
//    .removeAttr() : 지정된 속성을 제거한다.
//    .prop() : 선택된 요소 집합의 첫 번째 요소로 지정된 프로퍼티 값을 리턴하거나 선택된 요소의 지정된 프로퍼티를 전달받은 값으로 설정한다.
//    .removeProp() : 지정된 프로퍼티를 제거한다.    
    
 function changeImg(){
     console.log($('td  img').attr('src')) // 속성값<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
<script type="text/javascript">
 function imgSize(){
     /* var imgs=document.getElementsByTagName('img');
     for(var i=0;i<imgs.length;i++){
         imgs[i].style.width='200px';
         imgs[i].style.height='200px';
     } */  // js방식
     
     $('img').css({'width':'200px','height':'200px'}); //Jquery 방식
 }
 
 function idSelector(){
     var imgs=document.querySelectorAll('#selId');
     for(var i=0;i<imgs.length;i++){
         imgs[i].style.display='none';
     }  // js 방식 모든id속성에적용
     
     //$('#selId').hide();   최초의 id에만 적용
 }
 
 function classSelector(){
    /*  var selClass=document.querySelectorAll('.selClass');
     for(var i=0;i<selClass.length;i++){
         selClass[i].style.opacity='0.5';
     } */    //js방식
     
     $('.selClass').css('opacity','0.5');  // Jquery방식
 }
 
 function includeSelector(){
     //$('img[id]').css('opacity','0.2'); //img태그의 id속성이 있는것만 적용
     //$('img[class]').css('opacity','0.2'); //img태그의 class속성이 있는것만 적용
     //$('img[title=img02]').css('opacity','0.2'); // title속성값이 img02 인 것에 스타일적용
     //$('img[title*=img02]').css('opacity','0.2'); // tile 속성값으로 img02라는 단어가 포함된것 찾음
     //$('img[title$=img002]').css('opacity','0.2'); //지정된 문자열로 끝나는 모든 요소를 선택한다.
     //$('img[title^=image02]').css('opacity','0.2'); //지정된 문자열로 시작하는 모든 요소를 선택한다.
     //$('img[title!=img04]').css('opacity','0.2'); //지정된 문자열과 같지 않은 모든 요소를 선택한다.
 }
 
 
//    속성과 프로퍼티 설정
//    .attr() : 인자가 하나일 경우 , 선택된 요소 집합의 첫 번째 요소로 지정된 속성 값을 리턴.
//         인자가 두개 일 경우 , 속성을 둘째인자값으로 설정한다.
//    .removeAttr() : 지정된 속성을 제거한다.
//    .prop() : 선택된 요소 집합의 첫 번째 요소로 지정된 프로퍼티 값을 리턴하거나 선택된 요소의 지정된 프로퍼티를 전달받은 값으로 설정한다.
//    .removeProp() : 지정된 프로퍼티를 제거한다.    
 
 function changeImg(){
     console.log($('td  img').attr('src')) //속성값을 얻어온다    결과로 ./images/img01.jpg 을 뿌려준다.
     console.log($('td  img').attr('src',"./images/img05.jpg")) // 속성값을 변경한다.
     console.log($('td > span > img').removeAttr('src'));//속성 제거
 }
 
</script>
 
</head>
<body>
 
    <h2>이미지 크기를 모두 200px * 200px로 설정하기</h2>
    <button type="button" onclick="imgSize()">클릭!!</button>
    <h2>이미지 중에서 id 속성이 selId인 이미지 숨기기</h2>
    <button type="button" onclick="idSelector()">클릭!!</button>
    <h2>이미지 중에서 class 속성이 selClass인 이미지 투명도 변경하기</h2>
    <button type="button" onclick="classSelector()">클릭!!</button>
    <h2>이미지 중에서 title 속성값에 '02'가 포함된 이미지 투명도 변경하기</h2>
    <button type="button" onclick="includeSelector()">클릭!!</button>
    <h2>이미지 바꾸기</h2>
    <button type="button" onclick="changeImg()">클릭!!</button>
 
    <table>
        <tr>
            <td><img id="selId" title="img01" src="./images/img01.jpg"/></td>
            <td><img title="image02 img02" src="./images/img02.jpg"/></td>
            <td><img class="selClass" title="img023" src="./images/img03.jpg"/></td>
            <td><img class="selClass" title="img04+" src="./images/img04.jpg"/></td>
        </tr>
        <tr>
            <td><img id="selId" title="img01" src="./images/img01.jpg"/></td>
            <td><span><img title="img02 img002" src="./images/img02.jpg"/></span></td>
            <td><img class="selClass" title="img023" src="./images/img03.jpg"/></td>
            <td><img class="selClass" title="img04-img04" src="./images/img04.jpg"/></td>
        </tr>
    </table>
 
</body>
</html>
 cs
더보기

-Description

GUI :

17 : img태그들에 스타일을 지정
26 : Id값이 selId인 최초의 태그를 숨긴다.
35 : class 속성값으로 selClass를 가지는 모든 태그에 스타일지정. 투명도를 반으로 만든다.

 

-요약-

 

태그와 태그에 지정된 속성 및 속성값으로 요소 찾기
// 태그이름[속성이름] : 지정된 속성을 가지고 있는 모든 요소를 선택한다.
// 태그이름[속성이름=문자열] : 속성 값이 지정된 문자열과 일치하는 모든 요소를 선택한다. 완전일치
// 태그이름[속성이름~=문자열] : 지정된 문자열이 공백을 경계로 포함된 모든 요소를 선택한다. 단어포함
// 태그이름[속성이름*=문자열] : 지정된 문자열이 포함되는 모든 요소를 선택한다. 문장포함
// 태그이름[속성이름$=문자열] : 지정된 문자열로 끝나는 모든 요소를 선택한다.
// 태그이름[속성이름^=문자열] : 지정된 문자열로 시작하는 모든 요소를 선택한다.
// 태그이름[속성이름!=문자열] : 지정된 문자열과 같지 않은 모든 요소를 선택한다.
// 태그이름[속성이름|=문자열] : 지정된 문자열 또는 문자열-로 시작하는 모든 요소를 선택한다.

속성과 프로퍼티 설정
// .attr() : 인자가 하나일 경우 , 선택된 요소 집합의 첫 번째 요소로 지정된 속성 값을 리턴.
//          인자가 두개 일 경우 , 속성을 둘째인자값으로 설정한다.
// .removeAttr() : 지정된 속성을 제거한다.
// .prop() : 선택된 요소 집합의 첫 번째 요소로 지정된 프로퍼티 값을 리턴하거나 선택된 요소의 지정된 프로퍼티를 전달받은 값으로 설정한다.
// .removeProp() : 지정된 프로퍼티를 제거한다.

 

-마침글-

단순문법공부는 boring하다..

인용

 

'21년이전 > 국비-JQuery+JAVA-SCRIPT' 카테고리의 다른 글

Jquery-메뉴에 특수효과 주기  (0) 2021.03.29
Jquery-form연습3  (0) 2021.03.29
JQuery-선택자  (0) 2021.03.25
JQuery-기본설정 및 이미지처리  (0) 2021.03.24
728x90

-개발환경-

IDE : Eclipse IDE for Enterprise Java Developers ver-2020-06 (4.16.0)
Tomcat : Tomcat v8.0 Server
JQuery : jquery-3.6.0.min.js


-설정-

설정에는 두가지 방법이 있는데 , 
1. 인터넷 서비스 제공자로부터 직접 연결하여 데이터를 전송받는 CDN방식(당연히 네트워크필수)
밑 명령줄을 ecilipse의 head태그내에 삽입. 
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous"></script>

2. JQuery 메인 홈페이지에서 js 파일을 다운후 script문 작성.
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>

 

-jquery02_선택자.html-

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
 
<script type="text/javascript">
 
    /* $(document).ready(function(){
        //alert('Hello~~~');
        $('div').eq(0).css({'border':'2px solid red','width':'300px'});
        
    }); */
    
    /* $(function(){  //윗명령어와 같은표현
        $('div:eq(0)').css({'border':'2px solid red','width':'300px'});
        
    });  */
 
    $(() => {  //윗명령어와 같은표현    ECMAScript 6  에서 지원
        $('div:eq(0)').css({'border':'2px solid red','width':'300px'});
        
    }); 
 
    function a1(){
        
        /* var span = document.getElementsByTagName('span');
        for( var i=0; i<span.length;i++ ){
            span[i].style.color='tomato';
        } */  // Javascript 방식
        
        $('span').css('color','blue'); // Jquery 방식
        
    }
    
    function a2(){
        /* var t1=document.querySelectorAll('#t1');
        for( var i=0; i<t1.length;i++ ){
            t1[i].style.color='green';
        }  */  // javascript 방식 ,  id가 다수 선택됨
        
        $('#t1').css('color','green'); //JQuery 방식 , id가 최초의 한개만 선택됨
    }
    
    function a3(){
        $('.t2').css('color','purple'); 
    }
    
    function a4(){
        $('li > span').css('color','red'); // 다수가 선택됨
    }
    
    function a5(){
        $('li span').css('color','red'); // 자손이는 공백으로 구분  ,  자손에는 자식도 포함
    }
    
    
    // :nth-child(), :nth-last-child()
    // 형제 요소중에서 특정 순서에 있는 요소를 선택하는 선택자
    // :nth-child() 는 앞에서 부터 셈
    //:nth-last-child() 는 뒤에서 부터 센다.
    // 인수로 숫자 및 연산식을 사용할 수 있고 odd(홀수) , even(짝수)도 사용할 수 있다.
    function a6(){
        
        //eq(index)는 index가 0부터 시작하고, nth-child의 인자는 1부터 시작함
        //$('li:nth-child(1)').css('backgroundColor','lime'); //첫 li 에 스타일적용
        //$('li:nth-last-child(1)').css('backgroundColor','lime'); //마지막 li 에 스타일적용
        //$('li:nth-child(odd)').css('backgroundColor','skyblue'); // 홀수 번째 li 에 스타일적용
        //$('li:nth-child(even)').css('backgroundColor','skyblue'); // 짝수 번째 li 에 스타일적용
        
        //nth-child()나 nth-last-child() 에 연산식은 n을 사용해서 작성한다.
        //n은 자동으로 0부터 1씩 증가하는 정수이고  곱하기 연산시 '*'를 사용하지 않지만, + -는 사용한다.
        //$('li:nth-child(2n)').css('backgroundColor','cyan'); // even과 똑같음
        //$('li:nth-child(2n+1)').css('backgroundColor','cyan'); // odd와 똑같음
        $('li:nth-child(3n)').css('backgroundColor','cyan'); 
    }
    
    function a7(){
        $('li:first-child').css('backgroundColor','cyan'); 
    }
    
    function a8(){
        $('li:last-child').css('backgroundColor','cyan'); 
    }
</script>
 
</head>
<body>
 
    <h2>셀렉터 표현식</h2>
    <div>
        <ul>
            <li><span>태그로 선택하기</span></li>
            <li id="t1">id로 선택하기</li>
            <li class="t2">class로 선택하기</li>
            <li><span>자식선택자로 선택하기</span></li>
            <li><b><span>자손 선택자로 선택하기</span></b></li>
            <li>nth-child 선택자로 선택하기</li>
            <li id="t1">first로 선택하기</li>
            <li class="t2">last로 선택하기</li>
        </ul>
    </div>
 
    <div>
        <button type="button" onclick="a1()">태그</button>
        <button type="button" onclick="a2()">아이디</button>
        <button type="button" onclick="a3()">클래스</button>
        <button type="button" onclick="a4()">자식선택자</button>
        <button type="button" onclick="a5()">자손선택자</button>
        <button type="button" onclick="a6()">nth-child</button>
        <button type="button" onclick="a7()">first-child</button>
        <button type="button" onclick="a8()">last-child</button>
    </div>
 
 
</body>
</html>
 cs
더보기

-Description

GUI :

22~25 : onload수행으로 , div태그들중 첫번째 태그의 스타일을 지정.
44 : id로 t1인 태그들중 첫번째 태그의 스타일을 지정.
48 : 클래스로 t2인 태그들을 선택해서 스타일지정
52 : li 태그의 자식 태그로 span태그가 있는 것을 선택해서 스타일지정
56 : li태그의 자손 태그(자식 포함)로 span태그가 있는 것을 선택해서 스타일 지정.
77 : li태그의 0,3,6,9... .번째 태그들에 스타일 적용
81 :  같은 부모 태그를 가지는 형제 li 태그들중에서 첫번째 태그만 선택한다.

 

-요약-

 

 :nth-child(), :nth-last-child()    둘다 인자는 1부터 시작.
// 형제 요소중에서 특정 순서에 있는 요소를 선택하는 선택자
// :nth-child() 는 앞에서 부터 셈
//:nth-last-child() 는 뒤에서 부터 센다.
// 인수로 숫자 및 연산식을 사용할 수 있고 odd(홀수) , even(짝수)도 사용할 수 있다.

// :first-child : 같은 부모 태그를 가지는 형제 태그들중에서 첫번째 태그만 선택한다.
// :last-child : 같은 부모 태그를 가지는 형제 태그들중에서 마지막 태그만 선택한다.

 

-마침글-

단순문법공부는 boring하다..

인용

 

'21년이전 > 국비-JQuery+JAVA-SCRIPT' 카테고리의 다른 글

Jquery-메뉴에 특수효과 주기  (0) 2021.03.29
Jquery-form연습3  (0) 2021.03.29
Jquery-속성선택자  (0) 2021.03.25
JQuery-기본설정 및 이미지처리  (0) 2021.03.24
728x90

-개발환경-

IDE : Eclipse IDE for Enterprise Java Developers ver-2020-06 (4.16.0)
Tomcat : Tomcat v8.0 Server
JQuery : jquery-3.6.0.min.js


-설정-

설정에는 두가지 방법이 있는데 , 
1. 인터넷 서비스 제공자로부터 직접 연결하여 데이터를 전송받는 CDN방식(당연히 네트워크필수)
밑 명령줄을 ecilipse의 head태그내에 삽입. 
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="  crossorigin="anonymous"></script>

2. JQuery 메인 홈페이지에서 js 파일을 다운후 script문 작성.
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>

 

-jquery01_시작.html-

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
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
 
<script type="text/javascript" src="./js/jquery-3.6.0.min.js"></script>
  
<script type="text/javascript">
 
//이미지 사이즈변경
    function imgSize(){
        //$('img').css('width','400px');//너비 높이중 하나만 지정할 경우, 나머지는 자동비율조정됨
        //$('img').css('height','2000px');
        //$('img').css({'width':'100px','height':'500px'});  //폭,높이를 한번에 이렇게도 사용가능
        $('img').css({'width':'100px','height':'500px'}).css('opacity','0.5');
        }
 
//필터링 메소드
    function highLight(){
        //document.getElementById('list').style.backgroundColor='tomato';  //javascript 표현식
        $('#list').css('backgroundColor','tomato');//윗 js와 같은의미의 jquery 표현
        
        //document.getElementsByTagName('li')[1].style.backgroundColor='chocolate';//javascript 표현식
        //$('li').eq(1).css('backgroundColor','chocolate'); //윗 js와 같은의미의 jquery 표현
 
        $('#list > li').slice(2,5).css('backgroundColor','chocolate');//인덱스 2부터 4까지
    }
 
    function addImg(){
        //$('div').append( '<img src="./images/img03.jpg"/>' );
        //$('div').prepend( '<img src="./images/img01.jpg"/>' );
        //$('div').before( '<img src="./images/img01.jpg"/>' );
        //$('div').after( '<img src="./images/img01.jpg"/>' );
        $('div').append( '<img src="./images/img03.jpg"/>' );
        $('div').prepend( '<img src="./images/img01.jpg"/>' );
        $('div').before( '<img src="./images/img04.jpg"/>' );
        $('div').after( '<img src="./images/img05.jpg"/>' );
        
    }
    
    function hideImg(){
        
        /*
        var imgs=document.getElementsByTagName('img');
        for (var i=0;i<imgs.length;i++){
            imgs[i].style.display= 'none';
        } */  // javascript로 구현시
 
        //$('img').first().css('display','none');
        //$('img').first().hide();
        //$('img').hide(); // 왼쪽위로 사라진다, 모든이미지 display : none
        //$('img').hide(100); // 인자로 1000은 1초 ,즉 ms단위
        //$('img').fadeOut(1000); // (투명도로)천천히 사라진다.
        //$('div').slideUp(1000); // 위로사라짐
        //$('img').hide(1000);
        $('img').slideUp(1000);
    }
    
    function showImg(){
        /* 
        var imgs=document.getElementsByTagName('img');
        for (var i=0;i<imgs.length;i++){
            imgs[i].style.display= 'block';
        }*/   //javascript로 구현시
        
        //$('img').first().show();
        //$('img').show(); //이미지 전체보이기
        //$('img').fadeIn(1000); // (투명도로) 천천히 현상된다.
        $('img').slideDown(1000);  // 핵심개념으로, hideImg 와  showImg는 태그를 맞춰줘야함.
        
    }
    
    function toggleImg(){
        //$('img').toggle(1000);  //단순토글
        //$('img').fadeToggle(1000);  //투명도 이용한 토글
        $('div').slideToggle(1000);  //슬라이드 토글
        
    }
</script>
 
</head>
<body>
 
    <h2>jQuery</h2>
    <p>
        <ul id="list">
            <li>셀렉터 표현식</li>
            <li>DOM 탐색 메소드</li>
            <li>DOM 검색 메소드</li>
            <li>이벤트 메소드</li>
            <li>이펙트 메소드</li>
            <li>AJAX 메소드</li>
            <li>기타 등등</li>
        </ul>
    </p>
    
    <p>
    <button type="button" onclick="imgSize()">이미지 크기 변경</button>
    <button type="button" onclick="highLight()">리스트 선택</button>
    <button type="button" onclick="addImg()">이미지 추가</button>
    <button type="button" onclick="hideImg()">이미지 숨기기</button>
    <button type="button" onclick="showImg()">이미지 보이기</button>
    <button type="button" onclick="toggleImg()">이미지 토글</button>
    </p>
    
    <div>
        <img alt="피카츄" src="./images/img02.jpg"/>
    </div>
</body>
</html>
 cs

 

더보기

-Description

16 : 두개의 css문장을 엮을수 있음.  opacity= 투명도
22 : id 속성값이 list인 css 스타일을 변경하려는데 , 배경색을 토마토로 변경.
25 : eq(1)은 특정 태그들 중에서 인덱스가 1인 요소를 꺼내오라는 의미
27 : id 속성값이 list인 태그의 자식들중 li 태그를 모으는데 , slice(2,5) 로 인하여 [2,5) 인덱스에 속하는 태그들만
꺼내와서 배경색을 쵸콜릿으로 만듬

 

31~38 : jQuery 명령어로 태그의 추가가 이루어짐

 

57 : 슬라이드효과를 img 태그에서 1초동안 일어나게 하는 명령어

 

main GUI :

 

 

-요약-

Javascript와 JQuery 비교

id 속성에서 속성값으로 'id'를 가진 태그의 배경색을 'tomato'로 변경해보세요.

//javascript 작성법
//=> document.getElementById('id').style.backgroundColor='tomato';


//jquery 작성법 = > $('선택자').메소드()
//=> $('#id').css('backgroundColor','tomato');

 

페이지가 로드되자마자 무언갈 수행되게 해주는 onload(Javascript기준) 메소드 작성해보세요.

//javascript의 onload
//=> onload = function() {};
or
// => window.onload= function(){}; // window는 생략가능

 

//jquery의 onload
//=> $(document).ready(function() { });
or
//=>$(function() {}); //이와 같이 써도 됨

개념

JQuery

//태그의 추가 명령어
//선택된 태그의 내부에 추가
// .append() : 선택된 태그 내부의 마지막에 추가한다
// .prepend() : 선택된 태그 내부의 첫 번째에 추가한다.
//선택된 태그 외부의 윗 부분 or 아랫부분에 추가
// .before() : 선택된 태그 외부의 위쪽에 추가한다.
// .after() : 선택된 태그 외부의 아래쪽에 추가한다.

 

// 필터링 메소드
// .first() : 선택된 요소 중 첫 번째 요소를 선택한다.
// .last() : 선택된 요소 중 마지막 요소를 선택한다.
// .eq(index) : 선택된 요소 중 index 번째 요소를 선택한다.
// .slice() : 선택한 요소 중 전달받은 인덱스 범위에 해당하는 요소만 선택한다.
// .filter() : 선택된 요소 중 전달받은 선택자에 해당된거나, 함수 호출 결과가 참인 모든 요소를 선택한다.
// .not() : 선택된 요소 중 전달받은 선택자에 해당된거나, 함수 호출 결과가 거짓인 모든 요소를 선택한다.
// .has() : 선택된 요소 중 전달받은 선택자에 해당되는 요소의 모든 자손 요소를 선택한다.
// .is() : 선택된 요소 중 전달받은 선택자에 해당되는 요소가 하나라도 존재하면 true를 리턴한다.
// .map() : 선택한 요소 집합의 각 요소마다 콜백 함수를 실행하고 리턴값으로 구성된 객체를 리턴한다.

// 요소의 표시와 숨김
// .hide() : 선택한 요소의 css를 자동으로 조정해서 사라지게 한다.
// .show() : 선택한 요소의 css를 자동으로 조정해서 표시되게 한다.
// .toggle() : 선택한 요소의 css를 자동으로 조절해서 hide(), show() 메소드가 번갈아 적용된다.
// hide(), show() 메소드의 인수로 시간(밀리초)을 설정하거나 "slow", "fast"와 같은 예약어를 전달해 속도를 설정할 수 있다.

// 페이드 효과
// .fadeIn() : 선택한 요소의 css 중 opacity 속성의 값을 높여가며 나타나게 한다.
// .fadeOut() : 선택한 요소의 css 중 opacity 속성의 값을 줄여가며 사리지게 한다.
// .fadeToggle() : fadeIn(), fadeOut() 메소드가 번갈아 적용된다.
// fadeIn(), fadeOut() 메소드의 인수로 시간(밀리초)을 설정하거나 "slow", "fast"와 같은 예약어를 전달해 속도를 설정할 수 있다.
// 슬라이드 효과
// slideUp() : 선택한 요소의 css 중 height 속성의 값을 낮춰가며 사라지게 한다.
// slideDown() : 선택한 요소의 css 중 height 속성의 값을 높여가며 나타나게 한다.
// slideToggle() : slideUp(), slideDown() 메소드가 번갈아 적용된다.
// slideUp(), slideDown() 메소드의 인수로 시간(밀리초)을 설정하거나 "slow", "fast"와 같은 예약어를 전달해 속도를 설정할 수 있다.

 

-마침글-

단순문법공부는 boring하다..

인용

 

'21년이전 > 국비-JQuery+JAVA-SCRIPT' 카테고리의 다른 글

Jquery-메뉴에 특수효과 주기  (0) 2021.03.29
Jquery-form연습3  (0) 2021.03.29
Jquery-속성선택자  (0) 2021.03.25
JQuery-선택자  (0) 2021.03.25

+ Recent posts

티스토리툴바