국비지원학원/HTML,JavaScript,jQ

83일차-jQuery_selector/Event Handling/DOM

초코맛 2019. 3. 3. 23:03
반응형
*selector 사용
  • jQueryObject이 접근하게 될 tag를 지정하는 것.
  • 접근하여 값설정,값얻기, 디자인을 변경, 효과,이벤트처리,,,등의 일을 하기 위해 사용.
  • 형식)
    • $(selector).jQuery에서 제공하는 함수(값,,,);   //태그를 지정해 일을하게 함이런 값을 넣어서=>jqueryobject한테 이태그에 이값을 넣어 일을 하게 한다고 읽음
    • =>$: jQueryObject/ selector: 기능을 적용받을 tag지정/ 함수: 제공하는 기능/ 그때 적용할 값

*selector
  • 기능을 적용할 태그를 찾는 것
  • 형태)
    • $(selector).함수(값,,,); 
    • 이때의 selector
      • id selector : #id명
        • ex)
        • <div id="a">
        • $("#a").함수명(값);
      • class selector : .class명
      • tag selector : -single :단일 종류 태그 : tag명
      •                      -multiple : 여러 종류 태그 : tag명,,,
      • sub selector : 특정태그의 자식태그만 적용 : tag명>자식태그명
      • (해당하는 태그중)가장처음 등장하는 태그만 지정하는 selector : 태그명:first
      • (해당하는 태그중)가장 마지막에 등장하는 태그에 지정하는 selector : 태그명:last
      • 홀수번째에 등장하는 태그만 지정하는 selector : 태그명:odd
      • 짝수번째에 등장하는 태그만 지정하는 selector : 태그명:even
      • 특정태그에 인덱스를(와?) 비교하는 selector : 태그명:eq(인덱스)
      • attribute selector : 속성이 같은지 비교
        • 되게 다양하게 사용할 수 있는데,대괄호를 가지고 사용하게 된다.
        • [속성명='값']
          • ex)
          • <input type=text" name="name" value="a" id="a" class="a"/>//이때의 속성은 input 뒤 전부
          • $("[type ='text'|name='name'|value='a'|,,,|"#a"|".a"]")//id와 class로의 접근도 가능해 짐
      • ex)
      • $("[a[target='b']")
      • $("a:eq(1)")
      • <a target="a">
      • <a target="b">
      • <a target="c">
      • $(  ).css(값)
      • jQuery 기능(함수)
      • 함수 : method/selector에서 선택된 태그에 CSS적용하고나 CSS의 값을 얻는 일을 할 수 있다.
      • $("selector").css("속성명")=>속성에 대한 값
      • $("selector").css("속성명","값") =>CSS를 설정하는 일
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<!-- CDN을 사용하여 jQuery를 다운로드 받아 사용. -->
<!-- <script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script> -->
<!-- 다운로드 받은 js를 사용 -->
<script type="text/javascript"  src="../common/js/jquery2.2.4.min.js"></script>
<script type="text/javascript">
     //$("div").css("background-color","#FF0000");//body가  로딩되기 전이라 적용되지 않는다.
     $(function(){
     //$(document).ready(function(){
//   $(window).load(function(){
//         $("div").css("background-color","#FF0000");
           
           //ID Selector : #ID명
           //$("#a").css("background-color","#FF0000");
           //Class Selector : .클래스명
           //$(".b").css("background-color","#FF0000");
           
           //tag Selector(single) :태그명
           //$("div").css("background-color","#FF0000");
           //tag Selector(multiple) :태그명,태그명,,,
           //$("div,span,a").css("background-color","#FF0000");
     
           //sub Selector : 태그명(부모)>태그명(자식)
           //$("div>p>span").css("background-color","#FF0000");
           
           //가장 처음 태그만 : 태그명:first
           //$("li:first").css("background-color","#FF0000");
           
           //가장 마지막 태그만 : 태그명:last
          //$("li:last").css("background-color","#aa0055");//제주
          //$("ol>li:last").css("background-color","#aa0055");//딸기
           
           //홀수번째 태그만 : 태그명:odd
           //$("li:odd").css("background-color","#CDCDCD");
           //짝수번째 태그만 : 태그명:even
           //$("li:even").css("background-color","#CDCDCD");
           //$("ol>li:even").css("background-color","#5F5F5F");
           
           //특정 인덱스 번째 : 태그명:eq(인덱스)
           //$("li:eq(3)").css("background-color","#FF0000");
           
           //attribute Selector : [속성명='값']
          //$("[type='text']").css("background-color","#FF0000");
          //$("[name='name']").css("background-color","#FF0000");
          //$("[value='이름']").css("background-color","#FF0000");
           //$("[id='name']").css("background-color","#FF0000");
          //$("[class='name']").css("background-color","#FF0000");//id  selector 보다 느림
           
          //$("a[target='b']").css("background-color","#FF0000");//a는  태그명
          //$("[target='c']").css("background-color","#FF0000");//위와  아래가 같다.
           
           //특정 태그의 class를 식별하여 적용
           //p의 class가 c인 태그에만 디자인 적용 : 태그명.class명
           //$("p.c").css("background-color","#5F5F5F");
          //$("p[class='b']").css("background-color","#5F5F5F");//같은듯  하다...
           
           //테이블 홀수줄
           $("tr:odd").css("background-color","#FF0000");
           //1,4,9
           $("td:eq(0)").css("background-color","#CDCDCD");
           $("td:eq(3)").css("background-color","#CDCDCD");
           $("td:eq(8)").css("background-color","#CDCDCD");
           
     });
</script>
</head>
<body>
     <strong>selector의 사용</strong>
     <div id="a">id가 a인 DIV</div>
     <p class="b">처음 P</p>
     <p class="c">class가 c인 두번째 P</p>
     <div class="c">class가 c인 DIV</div>
     <div class="b">
           <p>DIV안의 p <span>DIV&gt; P &gt; SPAN</span></p>
     </div>
     <span>SPAN</span>
     <p>세번째 P</p>
     <ol>
           <li>사과</li>
           <li>배</li>
           <li>포도</li>
           <li>딸기</li>
     </ol>
     <ul>
           <li>서울</li>
           <li>경기</li>
           <li>충청</li>
           <li>경상</li>
           <li>전라</li>
           <li>제주</li>
     </ul>
     <a href="#void" target="a">링크1</a><br/>
     <a href="#void" target="b">링크2</a><br/>
     <a href="#void" target="c">링크3</a><br/>
     <input type="text" name="name" value="이름" id="name"  class="name"/>
     
     <table border="1">
     <tr>
           <td width="50">1</td>
           <td width="50">2</td>
           <td width="50">3</td>
     </tr>
     <tr>
           <td>4</td>
           <td>5</td>
           <td>6</td>
     </tr>
     <tr>
           <td>7</td>
           <td>8</td>
           <td>9</td>
     </tr>
     
     </table>
     
<!-- <script type="text/javascript">
$("div").css("background-color","#FF0000");//body가 로딩되어  적용됨.아무리 그래도 HTML중간에는 넣지 않는다!
</script> -->
     
</body>
</html>



*Event Handling
  • javaScript에서 제공하는 모든 이벤트를 처리할 수 있다.
  • $("selector").이벤트종류(function(){
  •       //=>이벤트를 발생시킬 대상 태그).함수
  •     이벤트가 발생되었을 때 실행 될 코드
  • });

ex)
$("#btn").click(function(){
     alert("클릭");
});
ex)
window.onload=function(){
document.getElementById("btn").addEventListener("click",a);
}
function a(){
     alert("클릭");
}
<input type ="button" class="btn" id="btn"/>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<!-- CDN을 사용하여 jQuery를 다운로드 받아 사용. -->
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
     $(function(){
           $("#btn").click(function(){
                alert("버튼 클릭!!");
           });
           
           $("#f_in").focusin(function(){
                alert("커서가 들어옴!");
           });
           $("#f_out").focusout(function(){
                alert("커서가 나감!");
           });
           
           //어떤 키든 키가 눌렸을때
           /* $("#keydown").keydown(function(){
                alert("키가 눌림!!");
           }); */
           //특정 키가 눌렸을때 (이벤트 발생 함수는 매개변수를  정의하면 event객체가 값으로 들어온다. )
           $("#keydown").keydown(function(evt){
                //alert("특정 키가  눌림!!"+window.event.which);// 자바에서 키코드를 얻기위해 이렇게  사용했었음.
                //alert("특정 키가 눌림!!"+evt.which);
                if(evt.which==13){
                     alert("엔터!"+evt.which);
                }//end if
           });
           $("#keyup").keyup(function(){
                alert("키가 올라감!!");
           });
           
           $("#chg").change(function(){
                alert("값이 변경되었습니다.(다른옵션이 선택)");
           });
//          $("#m_in").mouseover(function(){//mouseover==mouseenter
          $("#m_in").mouseenter(function(){//mouseover==mouseenter
                alert("마우스 포인터가 들어왔을 때");
           });
           $("#m_out").mouseout(function(){
                alert("마우스 포인터가 나갔을 때");
           });
           $("#m_move").mousemove(function(evt){
                //alert("마우스 포인터가 움직일 때");
                $("#output").html("마우스 포인터 X좌표  :"+evt.pageX+"/Y좌표 :"+evt.pageY);
                //=document.getElementById("output").innerHTML=값;
           });
           
     });//ready
</script>
</head>
<body>
     <strong>이벤트 발생과 처리</strong>
     <input type="button" value="클릭" id="btn"/><br/>
     <input type="text" value="커서가 들어올 때"  id="f_in"/><br/>
     <input type="text" value="커서가 나갈 때" id="f_out"/><br/>
     <input type="text" value="키가 눌릴 때" id="keydown"/><br/>
     <input type="text" value="키가 올라올 때" id="keyup"/><br/>
     <select id="chg">
           <option>DBMS-Oracle</option>
           <option>Java SE</option>
           <option>HTML</option>
           <option>JavaScript</option>
           <option>CSS</option>
     </select>  
     <br/>
     <strong>포인터가 들어왔을 때</strong>
     <img src="../common/images/img.png" id="m_in"  width="100"/><br/>
     <strong>포인터가 나갔을 때</strong>
     <img src="../common/images/img.png" id="m_out"  width="100"/><br/>
     <strong>포인터가 object일 때</strong>
     <img src="../common/images/img.png" id="m_move"  width="100"/><br/>
     
     <div id="output"></div>
</body>
</html>



*CSS 관련
  • 특정 대상의 style속성값 얻기
    • $("selector").css("속성명")
  • 특정 대상에 css속성 하나 설정
    • $("selector").css("속성명".속성값);
  • class 속성 부여//동일 속성이 존재하면 설정되지 않을수 있다.
    • <style>
    •       .클래스명{속성:값,,,,}       <=얘를 고칠 예정
    • </style>
    • $("selector").addClass("클래스명")
  • 부여된 속성 삭제
    • $("selector").removeClass("클래스명")   //속성을 여러개 부여할 때에는 지운다음에 부여하면 된다.?
  • //jquery는 .찍어 체인으로 계속 쓸수 있다.?$("selector").addClass("클래스명").  //이렇게???
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
     .class1{border: 5px solid #333; text-decoration: none;  font-weight: normal; font-size: 10px; color:#0000FF;}
     .class2{border:2px solid #333; text-decoration: underline;  font-weight: bold; font-size: 20px;}
</style>
<!-- CDN을 사용하여 jQuery를 다운로드 받아 사용. -->
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
     $(function(){
           $("#getAttr").click(function(){
                var width=$("#a").css("width");
                var height=$("#a").css("height");
                var color=$("#a").css("background-color");
                alert("넓이: "+width+"/ 높이: "+height+"/  바닥색: "+color);
           });//click
           
           $("#setCss").click(function(){
                $("#b").css("color","#FF0000");
           });//click
           
           $("#removeClass").click(function(){
                $("#d").removeClass("class2");
           });//click
           
           $("#addClass").click(function(){
                //기존 class가 설정되어 있으면 변경되지 않을 수  있다.
                $("#c").addClass("class1");//적용이 되는게 있고  안되는게 있다..!border같은 경우 안바뀌고 색은 바뀜
           });//click
           
           $("#chain").click(function(){
                //$("#e").removeClass("class2");
                //$("#e").addClass("class1");
                $("#e").removeClass("class2").addClass("class1");
           });//click
           
     });//ready
</script>
</head>
<body>
<div>
     <input type="button" value="style속성 얻기" class="btn"  id="getAttr"/>
     <input type="button" value="style속성하나 설정" class="btn"  id="setCss"/>
     <input type="button" value="class 추가" class="btn"  id="addClass"/>
     <input type="button" value="class 삭제" class="btn"  id="removeClass"/>
     <input type="button" value="class 삭제 후 추가" class="btn"  id="chain"/>
</div>
<div id="a" style="width: 500px; height: 50px; background:  #DFDFDF">속성 얻기 DIV</div>
<div id="b">속성 설정하는 DIV</div>
<div id="c" class="class2">class 추가 DIV</div>
<div id="d" class="class2">class 삭제 DIV</div>
<div id="e" class="class2">class 삭제 후 추가 DIV</div>
</body>
</html>



*DOM(Document Object Model)
  • 화면 일부분 변경
  • HTML태그가 반영되어야 하는 경우
    •  $("selector").html(값);
    • //이때의 값은 "<b>짜장</b>" g하면 그대로 반영되 짜짱 으로 나옴
    • //태그가 실행되 반영되어 보여준다.
  • HTML태그가 반영되지 않게 되는 경우(태그가 그대로 나온다)
    •  $("selector").text(값);
    • //이때 값에 "<b>짜장</b>"하면 그대로 <b>짜장</b>으로 나옴
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<!-- CDN을 사용하여 jQuery를 다운로드 받아 사용. -->
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
     $(function(){
           //var cnt=0;
           
           $(".btn").click(function(){
                //HTML Form Control의 값을 얻을 때에는 .val()
                var name=$("[name='name']").val();
                //var output="<marquee  scrollamount='10'>"+name+"</marquee>";
                //입력된 이름이 여러개가 누적되어 출력되게!
                var output=$("#html").html()+"<marquee  scrollamount='10'>"+name+"</marquee>";
                
                //for(var i=0; i<=cnt; i++){
                     $("#html").html(output);//html함수를  사용하면 tag가 반영되어 그려진다.
                     $("#text").text(output);//text함수를  사용하면 tag가 반영되어 그려지지 않고 그대로 나온다.
                     //output+="<marquee  scrollamount='10'>"+name+"</marquee>";
                //}//end for
                //cnt++;
           });//click
           
           $("#sel").change(function(){
//              var selValue=$("#sel").val();//id가 sel인
                var selValue=$(this).val();//나랑 가장 가까이에  있는..jquery object이 찾은 객체
                //this : 이벤트를 발생시킨 HTML Form Control 객체  자신.
                //alert(selValue);
                if(selValue!="none"){//선택해야하는 상태이면  안나옴
                     if(selValue=="html"){
                           //html()로 얻으면 태그자체가 모두  얻어진다.
                           //alert($("#html").html());
                           $("#output").html("html로 얻기 :  "+$("#html").html());
                     }else{
                           //text()로 얻으면 태그자체가  얻어지지않고 문자열만 얻어진다.                   
                           //alert($("#text").text());
                           $("#output").html("text로 얻기 :  "+$("#html").text());
                           
                     }//end if
                }//end if
           });//change
     });//ready
     
</script>
</head>
<body>
     <div id="inputFrm">
           <label>이름</label>
           <input type="text" name="name" class="inputBox"/>
           <input type="button" value="입력" class="btn"/>
     </div>
     <div id="html"></div>
     <div id="text"></div>
     
     <select id="sel">
           <option value="none">---선택---</option>
           <option value="html">html얻기</option>
           <option value="text">text얻기</option>
     </select>
     <div id="output"></div>
</body>
</html>



*반복함수
  • jQueryObject에서 지원
  • $.each(반복시킬대상, function(인덱스저장할변수, 값을 저장할 변수){
  •          인덱스저장할변수: 인덱스 사용
  •          값을 저장할 변수: 배열 해당인덱스의 값
  • });
  • ex)
  • var arr=[값,,,,];
  • $.each(arr,function(i,ele){
  •        i(0,1,2,3,,,,) ele(값1,값2,,,)?//에러를 발생시킬 확률을 줄였다. //for를 돌려 배열명[i]로 사용하려고 할때, for에서 없는 i로 에러방지
  • });
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css"  href="http://localhost:8080/html_prj/common/main_v190130.css"/>
<style type="text/css">
</style>
<!-- CDN을 사용하여 jQuery를 다운로드 받아 사용. -->
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
//var nameArr=["김","박","노","김"];//이자리도  가능!
$(function(){
     var nameArr=["김","박","노","김"];
     $("#arr").click(function(){
           var output="<ul>"
           $.each(nameArr,function(idx,name){
                output+="<li>"+name+"("+idx+")</li>";
                //alert(name+"/"+idx);
           });//each
           output+="</ul>";
           $("#output").html(output);           
     });//click//반복문을 안써도 사용 가능
     
     var  data="[{'name':'김','img':'img.png','age':31,'spec':'디잘잘','job':'개발자'}"+
          ",{'name':'정','img':'img1_1.png','age':27,'spec':'춤잘잘','job':'개발자'},"+
          "{'name':'이','img':'img2.jpg','age':28,'spec':'잠잘잘','job':'개발자'}]";
     
     var jsonArray=eval("("+data+")");
     //alert(jsonArray);//나오면 맞게 한것
     $("#jsonArr").click(function(){
           var tab="<table border='1'>";
          tab+="<tr><th>번호</th><th>이름</th><th>이미지</th></tr>";
           $.each(jsonArray,function(i,json_obj){
                //alert(json_obj.spec);
               tab+="<tr><td>"+(i+1)+"</td><td>"+json_obj.name+"</td>"+
                     "<td  style='position:relative;height:150px; width:150px;'><img  style='position:absolute; top:0px;  left:0px;width:150px;height:150px;'  src='../common/images/"+json_obj.img+"'/>"+
                     "<div style='position:absolute;  top:120px;left:20px;color:#DFDFDF; font-weight:bold'>"+
                     json_obj.age+"세/  "+json_obj.spec+"</div>"+
                     "</td></tr>";
           });//each
           tab+="</table>";
           $("#output").html(tab);
     });//click
});//ready
</script>
</head>
<body>
     <input type="button" value="배열 사용" id="arr"  class="inputBox"/>
     <input type="button" value="JSONArray사용" id="jsonArr"  class="inputBox"/>
     <div id="output"></div>
</body>
</html>

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

'국비지원학원 > HTML,JavaScript,jQ' 카테고리의 다른 글

85일차-jQuery_effect/plugin+Servlet  (0) 2019.03.07
84일차-jQuery_태그의 값 설정/값 얻기  (0) 2019.03.05
82일차-JavaScript_closure/class  (0) 2019.03.03
81일차-JavaScript_회원가입 추가/canvas,storage,JSON  (0) 2019.02.28
80일차-javaScript_회원가입 유효성 검증(더해야 함)  (0) 2019.02.20

'국비지원학원/HTML,JavaScript,jQ'의 다른글

  • 현재글83일차-jQuery_selector/Event Handling/DOM

관련글

티스토리툴바