:: 오픈프레임워크

오픈프레임워크_Day55

OpenFrameWork 2015. 6. 2. 19:30

### : 목차 구분 기호
--- : 목차 내에 항목 구분 기호
@@@ : 태그 용도

,,, : 같은 항목 내에 구분 기호

목차
1. 이론 및 정보
2. 설정 및 그 밖에
3. 소스코드 또는 실습
4. 과제

###################################
1. 이론 및 정보
-----------------------------------

4. 문법

(1) JQuery Selector

1) HTML DOM을 마음대로 트래버스(traverse) 가능(어디든 탐색 가능)

2) CSS Selector를 사용하여 원하는 객체 탐색

div p{font-color:red;}

HTML의 div 자식의 p 태그에 대해서 {} 안에 내용의 스타일을 지정

div 띄고 p는 div의 자식을 접근 할때 사용

#loginID{font-weight:bold;}

HTML 태그 중에 id가 'loginID' 인 태그를 모두 {} 안에 내용으로 스타일 지정

.Columns{paddin;10px}

HTML 태그 중에 모든 요소 중에 class 속성이 'Columns'라는 태그들을 모두 {}안에 내용으로 스타일 지정

jQuery(div p).디자인 프로퍼티 , $(div p).디자인 프로퍼티

jQuery(#loginID).디자인 프로퍼티 , $(#loginID).디자인 프로퍼티

jQuery(.Columns).디자인 프로퍼티 , $(.Columns).디자인 프로퍼티

jQuery에 추가된 요소

필터링

p>a : p 요소 바로 아래 자식인 a요소

div+p : div 요소의 바로 다음에 나오는 형제 p요소와 일치

div~p : div 요소에 다음에 나오는 모든 형제 p요소와 일치

---------------------------------------------------------

$(p a) 1.jpg, 2.jpg 인 a 태그

$(p>a) 2.jpg 인 a 태그

<p>

<span>

<a href="1.jpg">1.jpg</a>

</span>

<br/>

<a href="2.jpg">2.jpg</a>

</p>

---------------------------------------------------------

$(div + b) div 바로 뒤에 오는 형제 노드인 b 노라조 태그를 의미 , 형제는 자식이 아니라 동급?

$(div ~ b) 노라조,이적,김동률 b 태그를 전부 의미

<div>앨범 목록입니다.</div>
<b>노라조</b>
<span>슈퍼맨</span>
<b>이적</b>
<span>다행이다</span>
<b>김동률</b>
<span>아이처럼</span>

---------------------------------------------------------

$(a[title]) : 타이틀이라는 속성을 가지는 a태그를 선택하겠음

^= 에서 ^은 정규표현식에서 문장의 시작을 의미, $는 정규표현식에서 단어의 끝을 의미

$(a[title ^= "aaa"]) : aaa로 시작하는 타이틀을 가진 a태그를 의미

$(a[title $= ".jpg"]) : .jpg로 끝나는 title 값을 가진 a태그를 의미

$(a[title *= "jquery"]) : jquery 라는 단어가 들어가 있는 모든 타이틀 속성값을 가진 a태그를 의미

$(input[type="text"]) : type이라는 속성값이 text인 input태그만을 선택

---------------------------------------------------------

$("*") : 이 페이지에 있는 모든 것을 다 선택하겠다는 의미

$("#id") : 요소들 중에서 id를 가진 것만 선택하겠다는 의미

$("elementName") : 직접적으로 해당하는 요소,태그를 선택하겠다는 의미

$(".className") : .은 해당 클래스 속성을 가진 태그를 선택하겠다는 의미

$("s1,s2,s3,sN") : 여러 태그 선택

$("e1 e2") : e1 태그 안에 자식 e2들만 선택하겠다는 의미

$("e1>e2") : e1 태그 안에 바로 아래 자식인 e2 태그를 의미

$("e1 + e2") : e1 태그 바로 뒤에 오는 형제 e2 태그

$("e1 ~ e2") : e1 태그 다음에 오는 모든 e2 태그

$("e1[attr]") : 속성 attr을 가진 e1 태그

$("e1[attr ^= val]") : 속성 attr이 val로 시작하는 e1 태그

$("e1[attr $= val]") : 속성 attr이 val로 끝나는 e1 태그

$("e1[attr *= val]") : 속성 attr이 val이 포함되어 있는 e1 태그

$("e1[attr = val]") : 속성 attr이 val인 e1 태그

$("e1[attr != val]") : 속성 attr이 var과 같지 않은 e1 태그

$("e1[attr ~= val]") : 속성 attr이 val의 값의 공백과 함께 포함하는 e1 태그

* CDN 방식도 지원(홈페이지 다운로드 가면 설명 있음)

-----------------------------------

selector에 의해 선택 되어 있는 내용을 filter로 더 걸러주는 기능

(1) JQuery Selector : filter

1) 기본 필터

:first -> 그 중에 첫번째 있는 것 선택

:last -> 그 중에 마지막에 있는 것 선택

:not(selector) -> selector 가 선택한 것을 제외한 것들만 선택

:even -> 짝수개만 선택, 0부터 시작 그래서 첫번째는 짝수

:odd -> 홀수개만 선택, 두번째가 홀수 1

:eq(index) -> 선택된 위치에 있는 것과 같은거

:gt(index) -> 현재 선택된 위치에 있는 것보다 큰 것들 선택

:lt(index) -> 현재 선택된 위치에 있는 것보다 작은 것들 선택

:header -> 모든 header요소 ,h 태그를 선택하겠다는 의미

:animated -> 현재 애니매이션이 동작 중인 것만 선택

2) 컨텐트 필터(내용으로 접근하는 기능)

:contains(text) -> 내용 중에서 text가 들어간 글자는 전부 선택

:empty -> 비어있는, 자식을 가지지 않는 것을 선택

:has(selector) -> selector를 가지고 있는 것들을 선택

:parent -> 부모인 것들을 선택

-------------------------------------------------------------

b:contains("j") : j라는 글자를 가진 b태그

div:has("ul") : ul 태그를 가지고 있는 div 태그

table.nameTable td:empty -> 클래스 속성이 nameTable을 가진 table 자식 td 중 비어 있는 것을 선택

table#nameTable -> 아이디 속성이 nameTable인 table

table td:empty 테이블이 한개만 있으면 이렇게 해도 됨

.nameTable td:empty 테이블이 한개만 있으면 이렇게 해도 됨

3) 자식 필터 - 자식을 통해서 선택하는 방법

:nth-child(index | even | odd) -> 몇번째 자식을 선택할 것인지 값을 통해서 전달, index 1 부터 시작

index 1은 first와 동일한 의미

td:nth-child(2n+1) = td(even)

td:nth-child(2n) = td(odd)

:first-child -> 첫번째 자식 선택

:last-child -> 마지막 자식 선택

:only-child -> 오직 자식이 하나만 있는 것을 선택

----------------------------------------------------

td:first -> 왼쪽 맨 위에

td:first-child(해당 열을 전부 선택)

td:last -> 오른쪽 맨 아래

td:last-child(해당 열을 전부 선택)

4) 폼 필터 - 폼 태그의 있는 것들을 그대로 선택 가능

:input

:text

:password

:radio

:checkbox

:submit

:image

:reset

:button

:file

:hidden

--------------

:enabled

:disabled

:checked

:selected

-----------------------------------------------------

jQuery 반복문

jQuery(selector).each(function)

(2) 조작 메서드(Manipulation Method)

1) 내용 변경 메서드

인자가 없는 것은 getter 메서드

인자가 있는 것은 setter 메서드

- html()

- html(val)

- text()

- text(val)

2) 추가 관련 메서드(요소 내부)

- append(content)

- appendTo(selector)

- prepend(content)

- prependTo(selector)

3) 추가 관련 메서드(요소 외부)

- after(content)

- before(content)

- insertAfter(selector)

- insertBefore(selector)

4) 삭제 메서드

- empty()

- remove()

5) 복사 메서드

- clone()

- clone(bool)

-----------------------------------

###################################
2. 설정 및 그 밖에
-----------------------------------

-----------------------------------
###################################
3. 소스코드 또는 실습

-----------------------------------

3-1

생성 - jQuery 연습

Workspace : ~\JSP\EclipseWork

/JQueryApp/WebContent/ex01.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>


<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
     //다른 객체가 만들어지기 전에 호출 되는 내용임
     /*
     window.onload = function () {
          alert("나 실행되냐?");
     }
     */

     // 모든 객체가 만들어지고 나서 마지막에 호출되는 내용
     // 가장 안전하게 사용 가능
     /*
     jQuery(document).ready(
          function () {
               alert("나 실행되냐?(jquery)버전");
          }

     );
     */

     //( $ == jQuery ) true
     $(document).ready(
               function () {
                    alert("나 실행되냐?(jquery)버전");
               }
     );
</script>
</head>
<body>

</body>
</html>

-----------------------------------

3-2

생성 - jQuery 연습 - selector

Workspace : ~\JSP\EclipseWork

/JQueryApp/WebContent/ex02.html

<!DOCTYPE html><html><head><meta charset="EUC-KR">
<title>Insert title here</title>
<script src="js/jquery-2.1.4.js"></script>
<script>
     $(document).ready(
               function () {
                    // "앨범목록입니다" 라는 글자에 테두리(solid 1px silver)
                    $("#song").css("border","solid 1px silver");

                    // "강사에게"라는 글자의 배경색을 lightblue로 설정
                    $("a[href ^= 'mailto']").css("background","lightblue");
                    //$("body > a").css("background","lightblue");
                    //$("a[href $= 'naver.com']").css("background","lightblue");

                    //$("span + a").css("background","lightblue");
                    //는 안됨. 이유는 span 바로 뒤가 아니라서 그런 듯 <br/> 있음

                    // 버튼 배경색을 노란색으로 변경
                    $("input[type='button']").css("background","yellow");

                    // div태그 바로 다음에 있는 b태그에만 배경색을 #efefef 적용
                    $("div + b").css("background","#efefef");

                    // div태그와 같은 형제인 모든 b태그에 테두리 solid 1px silver 적용
                    $("div ~ b").css("border","solid 1px silver");

                    // 여러 태그 선택 할 때
                    //$("b,span,a").css("background","lightblue");
               }
     );
</script></head><body>
     <span><a href="http://jquery.com">jquery.com</a></span>
     <br/>
     <a href="mailto:netsong7@naver.com">강사에게</a>
     <p>
          <input type="button" value="클릭!">
          <input type="checkbox" />
          <input type="radio"/>
     </p>
     <div id="song">앨범 목록입니다.</div>
     <b>노라조</b>
     <span>슈퍼맨</span><br/>
     <b>이적</b>
     <span>다행이다</span><br/>
     <b>김동률</b>
     <span>아이처럼</span><br/>
</body></html>

-----------------------------------

3-3

생성 - jQuery 연습 - filter

Workspace : ~\JSP\EclipseWork

/JQueryApp/WebContent/ex03.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="js/jquery-2.1.4.js"></script>
<script>
     $(document).ready(function() {
          $("tr:first").css("background","red");

          // 홀수행마다 배경색을 #efefef 적용
          $("tr:odd").css("background","#efefef");

          // 5번째 행부터 배경색을 silver 적용
          $("tr:gt(4)").css("background","silver");

          // 맨 마지막 행의 배경색을 노란색으로 적용
          $("tr:last").css("background","yellow");

          // h태그에 있는 글자를 진하게 하고 글자색은 파란색으로 지정
          //$(":header").css("font-weight","bold");
          //$("*:header").css("color","blue");
          //$(":header").css("font-weight","bold").css("color","blue");

          // 제목만 적용 시키기
          //$(":header:first").css("font-weight","bold").css("color","blue");
          $(":header:eq(0)").css("font-weight","bold").css("color","blue");
     });
</script>
<style>
     /* 모든 태그 선택 */
     *{font-size: 12px;font-family: 맑은고딕}
     .nameTable{
          background-color: white;
          border-collapse: collapse;
     }
</style>
</head>
<body>
     <h3>수학 점수</h3>
     <table class=".nameTable" border="1" cellpadding="10px">
          <tr><td>이름</td><td>점수</td></tr>
          <tr><td>홍길동</td><td>98</td></tr>
          <tr><td>임꺽정</td><td>87</td></tr>
          <tr><td>유비</td><td>67</td></tr>
          <tr><td>관우</td><td>88</td></tr>
          <tr><td>장비</td><td>78</td></tr>
          <tr><td>전우치</td><td>77</td></tr>
     </table>
     <h3>끝</h3>
</body>
</html>

-----------------------------------

3-4

생성 - jQuery 연습 - 컨텐트 필터

Workspace : ~\JSP\EclipseWork

/JQueryApp/WebContent/ex04.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="js/jquery-2.1.4.js"></script>
<script>
     $(document).ready(function () {
          // b 태그안에 "j"라는 글자가 들어간 태그의 배경색을 노란색으로
          $("b:contains('j')").css("background","yellow");

          // ul태그를 가지고 있는 div만 테두리 작성(solid 1px green)
          $("div:has('ul')").css("border","solid 1px silver");

          // table에 비어있는 셀을 찾아 배경색을 #dddddd로 지정
          //$("table td:empty").css("background","#dddddd");
          $(".nameTable td:empty").css("background","#dddddd");

          // 테이블 제목행의 배경색을 lightblue로 지정
          //$("tr:first").css("background","lightblue");
          $(".nameTable tr:first").css("background","lightblue");

          // 여성에 해당되는 행만 배경색을 pink로 지정
          //$("tr td:contains('F')").parent().css("background","pink");
          $(".nameTable td:contains('F')").parent().css("background","pink");
          $(".nameTable td:contains('F')+td:emtpy").css("background","pink");

     });
</script>
<style>
     /* 모든 태그 선택 */
     *{font-size: 12px;font-family: 맑은고딕}
     .nameTable{
          background-color: white;
          border-collapse: collapse;
     }
</style>
</head>
<body>
     <h3>jQuery란?</h3>
     <div>
          <b>jQuery</b>는 가볍고 빠르며, 간결한 오픈소스 라이브러리입니다.
          이를 이용하면 Rich 웹 UI를 개발하는 데 도움이 되는 다양한 기능들
          즉 <b>HTML 문서 트래버스</b>,<b>이번테 처리</b>,
          <b>애니메이션</b>,<b>ajax 상호작용</b> 등을 지원하며, 빠르고
          견고하게 리치 웹 어플리케이션 개발을 할 수 있도록 지원합니다.
     </div>
     <br/>
     <div>
          이러한 <b>jQuery</b>의 기능적인 특징은 다음과 같습니다.
     </div>
     <br/>
     <div>
          <ul>
               <li>막강한 css 셀렉터</li>
               <li>크로스 브라우저 지원</li>
               <li>메서드 체인</li>
               <li>Ajax 지원</li>
               <li>풍부한 플러그인 지원</li>

          </ul>
     </div>
     <br/>
     <table class="nameTable" border="1" cellpadding="3px">
          <tr>
               <td width="100px">이름</td>
               <td width="100px">성별</td>
               <td width="100px">기타 정보</td>
          </tr>
          <tr><td>홍길동</td><td>M</td><td></td></tr>
          <tr><td>임꺽정</td><td>M</td><td>...</td></tr>
          <tr><td>유비</td><td>M</td><td></td></tr>
          <tr><td>관우</td><td>F</td><td></td></tr>
          <tr><td>장비</td><td>F</td><td>...</td></tr>
          <tr><td>전우치</td><td></td><td>...</td></tr>
     </table>
</body>
</html>

-----------------------------------

3-5

생성 - jQuery 연습 - 자식 필터

Workspace : ~\JSP\EclipseWork

/JQueryApp/WebContent/ex05.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="js/jquery-2.1.4.js"></script>
<script>
     $(document).ready(function() {
          $("td:first-child").css("background","yellow");
          $("td:last-child").css("background","green");
          $("td:nth-child(2)").css("background","silver");
          $("td:nth-child(4)").css("background","silver");
     });
</script>
<style>
     /* 모든 태그 선택 */
     *{font-size: 12px;font-family: 맑은고딕}
     .nameTable{
          background-color: white;
          border-collapse: collapse;
     }
</style>
</head>
<body>
     <table class="nameTable" border="1" cellpadding="3px">
          <tr>
               <td width="100px">이름</td>
               <td width="100px">성별</td>
               <td width="100px">기타 정보</td>
               <td width="100px">나이</td>
               <td width="100px">주소</td>
               <td width="100px">전화번호</td>
          </tr>
          <tr><td>홍길동</td><td>M</td><td></td><td>20</td><td>서울</td><td>1111-1111</td></tr>
          <tr><td>임꺽정</td><td>M</td><td>...</td><td>20</td><td>서울</td><td>1111-1111</td></tr>
          <tr><td>유비</td><td>M</td><td></td><td>20</td><td>서울</td><td>1111-1111</td></tr>
          <tr><td>관우</td><td>F</td><td></td><td>20</td><td>서울</td><td>1111-1111</td></tr>
          <tr><td>장비</td><td>F</td><td>...</td><td>20</td><td>서울</td><td>1111-1111</td></tr>
          <tr><td>전우치</td><td></td><td>...</td><td>20</td><td>서울</td><td>1111-1111</td></tr>
     </table>
</body>
</html>

-----------------------------------

3-6

생성 - jQuery 연습 - 폼 필터

Workspace : ~\JSP\EclipseWork

/JQueryApp/WebContent/ex06.html

<!DOCTYPE html>
<html>
<head>
<meta charset="EUC-KR">
<title>Insert title here</title>
<script src="js/jquery-2.1.4.js"></script>
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script>
     $(document).ready(function() {
          // 아래 내용 중 css 관련 된 내용 전부 잘 안됨

          //var sports1 = $("input:checkbox");
          //alert(sports1.length);
          //sports1.css("background","red");

          // 버튼을 눌렀을 때, 이벤트 처리에 대해서
          /*
          $("#Doit").click(function() {
               //alert("버튼이 눌림");
               var sports = $("input:checkbox");
               sports.css("background","red");
               var result ="";

               for(var i=0;i<sports.length;i++){
                    if(sports[i].checked == true){
                         // 인자가 없으면 get text
                         result += $(sports[i]).next().text()+", ";
                    }
               }
               // 인자가 있으면 set text
               $("#result").text(result);
          });
          */

          // 개선 1, 폼 필터 한개 더 씀
          /*
          $("#Doit").click(function() {
               //alert("버튼이 눌림");
               var sports = $("input:checkbox:checked");
               sports.css("background","red");
               var result ="";

               for(var i=0;i<sports.length;i++){
                    // 인자가 없으면 get text
                    result += $(sports[i]).next().text()+", ";
               }
               // 인자가 있으면 set text
               $("#result").text(result);
          });
          */

          //개선 2, jQuery 반복문 문법

          $("#Doit").click(function() {
               var result ="";
               $("input:checked").each(function() {
                    result += $(this).next().text()+", ";
               }).css("background", "red");
               $("#result").text(result);
          });
     });
</script>
</head>
<body>
     <p>
          스포츠 <br/>
          
          <input type="checkbox" id="c1" /><label for="c1">농구</label>
          <input type="checkbox" id="c2" /><label for="c2">축구</label>
          <input type="checkbox" id="c3" /><label for="c3">배구</label>
          <input type="checkbox" id="c4" /><label for="c4">야구</label>
     </p>
     <p>
          <input type="button" id="Doit" value="선택" />
     </p>
     <p>
          당신이 선택한 스포츠는 <span id="result"></span> 입니다.
     </p>
</body>
</html>

-----------------------------------

###################################
4. 과제
-----------------------------------

-----------------------------------

###################################
5. 과제 해결
-----------------------------------

-----------------------------------

###################################

6. 기타

-----------------------------------

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

'OpenFrameWork' 카테고리의 다른 글

오픈프레임워크_Day57 (0)	2015.06.04
오픈프레임워크_Day56 (0)	2015.06.03
오픈프레임워크_Day54 (0)	2015.06.01
오픈프레임워크_Day53 (0)	2015.05.29
오픈프레임워크_Day52 (0)	2015.05.28

일	월	화	수	목	금	토
		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

오픈프레임워크_Day55

'OpenFrameWork' 카테고리의 다른 글

카테고리

달력

링크

티스토리툴바