SlideShare uma empresa Scribd logo
1 de 14
Baixar para ler offline
HACOSA jQuery STUDY
#4. jQuery 유틸리티
jQuery.support로 기능 찾기
• 1.3버전에서 추가된 기능
• 브라우저의 특정 기능 지원 여부 확인 기능
• jQuery.support.xxxx
• 많이 사용되지는 않는다고 함……
jQuery.support로 기능 찾기
 boxModel
   - 브라우저가 W3C CSS 박스 모델 명세에 따라 렌더링 하면 True 반환

 cssFloat
   - style.cssFloat가 현재의 CSS float 값을 가져오기 위해 사용되었다면 True 반환
     IE의 경우 styleFloat를 지원. false를 반환 함

 hrefNormalized
   - 브라우저가 getAttribute(‘href’)값을 원래 값 그대로 가져오면 True 반환
     IE의 경우 full-URL을 반환한다고 함….
   jQuery Document에는 false를 반환한다고 나와있으나 IE8에서 테스트해보면 true 반환… -ㅅ- ;;;

 htmlSerialize
   - 브라우저가 innerHTML을 사용하여 <link>요소를 적절히 직렬화하면 True 반환
     IE의 경우 false 반환

 noCloneEvent
   - 브라우저가 DOM 요소를 복제할 때 이벤트 핸들러를 복제하지 않으면 True 반환
     IE의 경우 false 반환
jQuery.support로 기능 찾기
 opacity
   - 브라우저가 CSS opacity 스타일을 해석 할 수 있으면 True 반환
     IE의 경우 alpha filter를 대신 사용하고 있으며 false 반환

 objectAll
   - 요소에 대해 getElementsByTagName(‘*’)를 사용할 때 모든 자식 요소를 반환하면 True 반환
   1.6.4 버전에서 지원되지 않음…… -ㅅ- ;; 실제로 찍어보면 undefined 반환, jQuery Document에도 없음

 scriptEval
   - <script> 태그에 대해 appendChild 사용하는 것이 스크립트를 실행하게 되면 True 반환
   1.6버전에서 삭제 됨. 1.5.1 이후 버전에서는 scriptEval() method로 변경

 style
    - getAttribute(‘style’)이 요소에 지정된 인라인 스타일을 반환할 수 있으면 True 반환

 tbody
   - <tbody> 요소 없이도 <table> 요소를 허용하면 True 반환
   IE에선 false를 반환한다고 되어 있으나… IE8에서 테스트 결과 true 반환… -ㅅ- ;;
jQuery.each를 사용하여 배열과 개체를 반복하여 처리하기

• $.each( ) method
   ‒ $.each(collection, callback(indexInArray, valueOfElement))
   var week = [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’];
   $.each(week, function(index, value){
       $(‘#week’).append(‘<li>’ + value + ‘</li>’;
   });

  ‒ $( ).each 와는 다른 메소드
   <ul>
      <li><a href=“http://mail.naver.com”>네이버 메일</a></li>
      <li><a href=“http://cafe.naver.com”>네이버 카페</a></li>
      <li><a href=“http:// mail.naver.com/note”>네이버 쪽지</a></li>
   </ul>

   $(“ul li a”).each(function(index){
      var link = $(this).attr(“href”);
      window.open(link);
      return false;
   }


  ‒ $.each()는 개체나 배열을 첫번째 매개변수로 받으며, $( ).each( )는 선택
    된 jQuery 컬렉션만 처리가 가능하다
jQuery.grep을 사용하여 배열 필터링 하기

• $.grep( ) method
   ‒ $. grep(array, function(elementOfArray, indexInArray) [ , invert])
   ‒ 배열로부터 필터링 시키는 함수를 통해 특정한 배열만 반환
  <dt> 평일 </dt><dd id=“weekday”></dd>
  <dt> 주말 </dt><dd id=“weekend”></dd>


  var week = [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’];
  var weekday = $.grep(week, function(day, index){
      return (index < 5)
  });
  var weekend = $.grep(week, function(day, index){
      return (index >= 5)
  });

  $(“#weekday”).text(weekday.join(“, “));
  $(“#weekend”).text(weekend.join(“, “));
jQuery.map을 사용하여 배열 항목을 반복하며 수정하기

• $.map( ) method
   ‒ $. map(array, callback(elementOfArray, indexInArray)) v1.0
     $. map(arrayOrObject, callback(value, indexOrKey)) v1.6
   ‒ 배열[이나 객체]의 모든 요소를 콜백함수를 통해 가공하여 새로운 배열[객
     체 v1.6]로 변환
  var dayOfWeek = [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’, ‘Sunday’];

  var weekdayname = $.map(dayOfWeek, function(value, i){
     return value.substr(0, 3);
  };
jQuery.merge로 두 개의 배열을 결합하기

• $.merge( ) method
   ‒ $. merge(first, second)
   ‒ 두 개의 배열의 요소들을 첫번째 배열에 합친다.
  var weekday = [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’];
  var weekend = [‘Saturday’, ‘Sunday’];

  var week = $.merge(weekday, weekend);




 ‒ 주의! 첫 번째 배열의 원래값이 필요하다면 $.merge( ) 메소드 호출 전에
   카피해 놓아야 한다.
jQuery.merge로 두 개의 배열을 결합하기

• $.merge( ) method
   ‒ $. merge(first, second)
   ‒ 두 개의 배열의 요소들을 첫번째 배열에 합친다.
  var weekday = [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’];
  var weekend = [‘Saturday’, ‘Sunday’];

  var week = $.merge(weekday, weekend);

 ‒ 주의! 첫 번째 배열의 원래값이 필요하다면 $.merge( ) 메소드 호출 전에
   카피해 놓아야 한다.
  var weekday = [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’];
  var weekend = [‘Saturday’, ‘Sunday’];
  document.writeln("weekday : " + weekday.join(', ‘) + “<br />” );
  var week = $.merge(weekday, weekend);
  document.writeln("week : " + week.join(', ‘) + “<br />” );
  document.writeln("weekday : " + weekday.join(', ‘) + “<br />” );

  weekday : Monday, Tuesday, Wednesday, Thursday, Friday
  week : Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday
  weekday : Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday
jQuery.unique를 사용하여 중복된 배열 항목 필터링 하기

• $.unique( ) method
   ‒ $. unique(array)
   ‒ DOM 요소 배열을 정렬하고 중복된 요소를 삭제
   ‒ 문자열이나 숫자의 배열에서는 동작 X, DOM 요소 배열에서만 동작
  <div> 1번 </div>
  <div id="target"> 2번 </div>
  <div class="dup"> 3번 </div>
  <div class="dup"> 4번 </div>
  <div class="dup"> 5번 </div>
  <div> 6번 </div>

  <script>
     var divs = $("div").get();
     document.writeln("처음 DIV 갯수 : " + divs.length + "개 <br />");
     divs = divs.concat($(".dup").get());
     document.writeln("가공중 DIV 갯수 : " + divs.length + "개 <br />");
     divs = $.unique(divs);
     document.writeln("유니크한 DIV 갯수 : " + divs.length + "개 <br />");
  </script>

  처음 DIV 갯수 : 6개
  가공중 DIV 갯수 : 9개
  유니크한 DIV 갯수 : 6개
jQuery.trim을 사용하여 폼 값 또는 문자열에서 공백 제거하기

• $.trim( ) method
   ‒ $. trim(str)
   ‒ 문자열의 시작, 끝 부분의 공백 제거

  <input type=“text” id=“usrID” value=“      mulder21c   ” />

  <script>
     var usrID = $.trim($(“input”).val());
  </script>
jQuery.data를 사용하여 DOM에 개체와 데이터 첨부하기

• $.data( ) method
   ‒ $.data(element, key, value)
   ‒ Json 형식으로 데이터를 저장
    var store = $(“div”).get(0);

    $.data(store);                  // store의 unique id 반환 (데이터 저장소 index)
    $.data(store, “name”, “지성봉”);   // store의 데이터 저장소의 “name” 키에 “지성봉” 을 저장
    $.data(store, “name”);          // store의 데이터 저장소에서 “name” 키에 해당하는 값 반환
jQuery.extend를 사용하여 개체 확장하기

• $.extend(target [,object1][,objectN]) method
   ‒ 두 개 이상의 개체를 첫번째 개체에 합침
   ‒ 동일한 속성이 있을 경우 후자의 것으로 덮어 씌움

    <script>
       var obj = {apple:1,banana:5}
       var obj2 = {apple:3, graph : 4}
       $.extend(obj, obj2);

       $.each(obj, function(index, value){
           document.writeln(index + " : " + value + "<br />");
       });
    </script>


    apple : 3
    banana : 5
    graph : 4
END

Mais conteúdo relacionado

Mais procurados

Mongo db 활용 가이드 ch7
Mongo db 활용 가이드 ch7Mongo db 활용 가이드 ch7
Mongo db 활용 가이드 ch7주영 송
 
Node.js and react
Node.js and reactNode.js and react
Node.js and reactHyungKuIm
 
Node.js + Express + MongoDB
Node.js + Express + MongoDBNode.js + Express + MongoDB
Node.js + Express + MongoDBVincent Park
 
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modificationSecrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modificationHyuncheol Jeon
 
MongoDB 하루만에 끝내기
MongoDB 하루만에 끝내기MongoDB 하루만에 끝내기
MongoDB 하루만에 끝내기Seongkuk Park
 
옛날 웹 개발자가 잠깐 맛본 Vue.js 소개
옛날 웹 개발자가 잠깐 맛본 Vue.js 소개옛날 웹 개발자가 잠깐 맛본 Vue.js 소개
옛날 웹 개발자가 잠깐 맛본 Vue.js 소개beom kyun choi
 
Jquery javascript_ed10
Jquery javascript_ed10Jquery javascript_ed10
Jquery javascript_ed10hungrok
 
안드로이드스터디 5
안드로이드스터디 5안드로이드스터디 5
안드로이드스터디 5jangpd007
 
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기NAVER Engineering
 
예제로 맛보는 Backbone 연습
예제로 맛보는 Backbone 연습예제로 맛보는 Backbone 연습
예제로 맛보는 Backbone 연습은숙 이
 
집단지성 프로그래밍 04-검색과 랭킹-02
집단지성 프로그래밍 04-검색과 랭킹-02집단지성 프로그래밍 04-검색과 랭킹-02
집단지성 프로그래밍 04-검색과 랭킹-02Kwang Woo NAM
 
PHP에서 객체와 데이터 연결 유지
PHP에서 객체와 데이터 연결 유지PHP에서 객체와 데이터 연결 유지
PHP에서 객체와 데이터 연결 유지Yoonwhan Lee
 
Java advancd ed10
Java advancd ed10Java advancd ed10
Java advancd ed10hungrok
 
자바야 놀자 PPT
자바야 놀자 PPT자바야 놀자 PPT
자바야 놀자 PPTJinKyoungHeo
 

Mais procurados (20)

Swt J Face 2/3
Swt J Face 2/3Swt J Face 2/3
Swt J Face 2/3
 
MySQL 기초
MySQL 기초MySQL 기초
MySQL 기초
 
4-3. jquery
4-3. jquery4-3. jquery
4-3. jquery
 
Class10
Class10Class10
Class10
 
Mongo db 활용 가이드 ch7
Mongo db 활용 가이드 ch7Mongo db 활용 가이드 ch7
Mongo db 활용 가이드 ch7
 
Node.js and react
Node.js and reactNode.js and react
Node.js and react
 
Node.js + Express + MongoDB
Node.js + Express + MongoDBNode.js + Express + MongoDB
Node.js + Express + MongoDB
 
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modificationSecrets of the JavaScript Ninja - Chapter 12. DOM modification
Secrets of the JavaScript Ninja - Chapter 12. DOM modification
 
MongoDB 하루만에 끝내기
MongoDB 하루만에 끝내기MongoDB 하루만에 끝내기
MongoDB 하루만에 끝내기
 
옛날 웹 개발자가 잠깐 맛본 Vue.js 소개
옛날 웹 개발자가 잠깐 맛본 Vue.js 소개옛날 웹 개발자가 잠깐 맛본 Vue.js 소개
옛날 웹 개발자가 잠깐 맛본 Vue.js 소개
 
Jquery javascript_ed10
Jquery javascript_ed10Jquery javascript_ed10
Jquery javascript_ed10
 
안드로이드스터디 5
안드로이드스터디 5안드로이드스터디 5
안드로이드스터디 5
 
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
[TECHCON 2019: MOBILE - Android]2.예제에서는 알려주지 않는 Model 이야기
 
Mymysql basic sql
Mymysql basic sqlMymysql basic sql
Mymysql basic sql
 
Hacosa j query 2th
Hacosa j query 2thHacosa j query 2th
Hacosa j query 2th
 
예제로 맛보는 Backbone 연습
예제로 맛보는 Backbone 연습예제로 맛보는 Backbone 연습
예제로 맛보는 Backbone 연습
 
집단지성 프로그래밍 04-검색과 랭킹-02
집단지성 프로그래밍 04-검색과 랭킹-02집단지성 프로그래밍 04-검색과 랭킹-02
집단지성 프로그래밍 04-검색과 랭킹-02
 
PHP에서 객체와 데이터 연결 유지
PHP에서 객체와 데이터 연결 유지PHP에서 객체와 데이터 연결 유지
PHP에서 객체와 데이터 연결 유지
 
Java advancd ed10
Java advancd ed10Java advancd ed10
Java advancd ed10
 
자바야 놀자 PPT
자바야 놀자 PPT자바야 놀자 PPT
자바야 놀자 PPT
 

Semelhante a Hacosa j query 4th

[115] clean fe development_윤지수
[115] clean fe development_윤지수[115] clean fe development_윤지수
[115] clean fe development_윤지수NAVER D2
 
Apache solr소개 20120629
Apache solr소개 20120629Apache solr소개 20120629
Apache solr소개 20120629Dosang Yoon
 
처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4성일 한
 
Undefined 2월발표 backbonejs
Undefined 2월발표 backbonejsUndefined 2월발표 backbonejs
Undefined 2월발표 backbonejsKyungree Bae
 
Yapp a.a 2 2 sugar orm
Yapp a.a 2 2 sugar ormYapp a.a 2 2 sugar orm
Yapp a.a 2 2 sugar ormJunyoung Lee
 
Clean Front-End Development
Clean Front-End DevelopmentClean Front-End Development
Clean Front-End Development지수 윤
 
Deep dive into Modern frameworks - HTML5 Forum 2018
Deep dive into Modern frameworks - HTML5 Forum 2018Deep dive into Modern frameworks - HTML5 Forum 2018
Deep dive into Modern frameworks - HTML5 Forum 2018Kenneth Ceyer
 
XE 레이아웃 제작 실무 노하우 1 - XECon2014 by 고진화
XE 레이아웃 제작 실무 노하우 1 - XECon2014 by 고진화XE 레이아웃 제작 실무 노하우 1 - XECon2014 by 고진화
XE 레이아웃 제작 실무 노하우 1 - XECon2014 by 고진화Jinhwa Ko
 
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기Jeado Ko
 
Xe3.0 frontend validator
Xe3.0 frontend validatorXe3.0 frontend validator
Xe3.0 frontend validator승훈 오
 
Collection framework
Collection frameworkCollection framework
Collection frameworkssuser34b989
 
[DevOn 2013] Backbone.js로 능동적 M-V 디자인 구현하기
[DevOn 2013] Backbone.js로 능동적  M-V 디자인 구현하기[DevOn 2013] Backbone.js로 능동적  M-V 디자인 구현하기
[DevOn 2013] Backbone.js로 능동적 M-V 디자인 구현하기Gyutae Jo
 
자바스크립트 패턴 3장
자바스크립트 패턴 3장자바스크립트 패턴 3장
자바스크립트 패턴 3장Software in Life
 

Semelhante a Hacosa j query 4th (20)

Xe hack
Xe hackXe hack
Xe hack
 
Hacosa jquery 1th
Hacosa jquery 1thHacosa jquery 1th
Hacosa jquery 1th
 
[115] clean fe development_윤지수
[115] clean fe development_윤지수[115] clean fe development_윤지수
[115] clean fe development_윤지수
 
Hacosa j query 11th
Hacosa j query 11thHacosa j query 11th
Hacosa j query 11th
 
Hacosa j query 6th
Hacosa j query 6thHacosa j query 6th
Hacosa j query 6th
 
Apache solr소개 20120629
Apache solr소개 20120629Apache solr소개 20120629
Apache solr소개 20120629
 
처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4처음배우는 자바스크립트, 제이쿼리 #4
처음배우는 자바스크립트, 제이쿼리 #4
 
Undefined 2월발표 backbonejs
Undefined 2월발표 backbonejsUndefined 2월발표 backbonejs
Undefined 2월발표 backbonejs
 
Yapp a.a 2 2 sugar orm
Yapp a.a 2 2 sugar ormYapp a.a 2 2 sugar orm
Yapp a.a 2 2 sugar orm
 
Hacosa j query 10th
Hacosa j query 10thHacosa j query 10th
Hacosa j query 10th
 
Clean Front-End Development
Clean Front-End DevelopmentClean Front-End Development
Clean Front-End Development
 
Deep dive into Modern frameworks - HTML5 Forum 2018
Deep dive into Modern frameworks - HTML5 Forum 2018Deep dive into Modern frameworks - HTML5 Forum 2018
Deep dive into Modern frameworks - HTML5 Forum 2018
 
XE 레이아웃 제작 실무 노하우 1 - XECon2014 by 고진화
XE 레이아웃 제작 실무 노하우 1 - XECon2014 by 고진화XE 레이아웃 제작 실무 노하우 1 - XECon2014 by 고진화
XE 레이아웃 제작 실무 노하우 1 - XECon2014 by 고진화
 
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
[XECon+PHPFest 2014] jQuery 개발자에서 AngularJS 개발자 되기
 
Xe3.0 frontend validator
Xe3.0 frontend validatorXe3.0 frontend validator
Xe3.0 frontend validator
 
Collection framework
Collection frameworkCollection framework
Collection framework
 
[DevOn 2013] Backbone.js로 능동적 M-V 디자인 구현하기
[DevOn 2013] Backbone.js로 능동적  M-V 디자인 구현하기[DevOn 2013] Backbone.js로 능동적  M-V 디자인 구현하기
[DevOn 2013] Backbone.js로 능동적 M-V 디자인 구현하기
 
자바스크립트 패턴 3장
자바스크립트 패턴 3장자바스크립트 패턴 3장
자바스크립트 패턴 3장
 
ES6 for Node.js Study 5주차
ES6 for Node.js Study 5주차ES6 for Node.js Study 5주차
ES6 for Node.js Study 5주차
 
[Codelab 2017] ReactJS 기초
[Codelab 2017] ReactJS 기초[Codelab 2017] ReactJS 기초
[Codelab 2017] ReactJS 기초
 

Mais de Seong Bong Ji

Hacosa js study 4주차
Hacosa js study 4주차Hacosa js study 4주차
Hacosa js study 4주차Seong Bong Ji
 
Hacosa js study 2주차
Hacosa js study 2주차Hacosa js study 2주차
Hacosa js study 2주차Seong Bong Ji
 
Hacosa js study 1주차
Hacosa js study 1주차Hacosa js study 1주차
Hacosa js study 1주차Seong Bong Ji
 

Mais de Seong Bong Ji (9)

Hacosa j query 8th
Hacosa j query 8thHacosa j query 8th
Hacosa j query 8th
 
Hacosa j query 7th
Hacosa j query 7thHacosa j query 7th
Hacosa j query 7th
 
Hacosa js study 8th
Hacosa js study 8thHacosa js study 8th
Hacosa js study 8th
 
Hacosa js study 7th
Hacosa js study 7thHacosa js study 7th
Hacosa js study 7th
 
Hacosa js study 6th
Hacosa js study 6thHacosa js study 6th
Hacosa js study 6th
 
Hacosa js study 5th
Hacosa js study 5thHacosa js study 5th
Hacosa js study 5th
 
Hacosa js study 4주차
Hacosa js study 4주차Hacosa js study 4주차
Hacosa js study 4주차
 
Hacosa js study 2주차
Hacosa js study 2주차Hacosa js study 2주차
Hacosa js study 2주차
 
Hacosa js study 1주차
Hacosa js study 1주차Hacosa js study 1주차
Hacosa js study 1주차
 

Hacosa j query 4th

  • 1. HACOSA jQuery STUDY #4. jQuery 유틸리티
  • 2. jQuery.support로 기능 찾기 • 1.3버전에서 추가된 기능 • 브라우저의 특정 기능 지원 여부 확인 기능 • jQuery.support.xxxx • 많이 사용되지는 않는다고 함……
  • 3. jQuery.support로 기능 찾기 boxModel - 브라우저가 W3C CSS 박스 모델 명세에 따라 렌더링 하면 True 반환 cssFloat - style.cssFloat가 현재의 CSS float 값을 가져오기 위해 사용되었다면 True 반환 IE의 경우 styleFloat를 지원. false를 반환 함 hrefNormalized - 브라우저가 getAttribute(‘href’)값을 원래 값 그대로 가져오면 True 반환 IE의 경우 full-URL을 반환한다고 함…. jQuery Document에는 false를 반환한다고 나와있으나 IE8에서 테스트해보면 true 반환… -ㅅ- ;;; htmlSerialize - 브라우저가 innerHTML을 사용하여 <link>요소를 적절히 직렬화하면 True 반환 IE의 경우 false 반환 noCloneEvent - 브라우저가 DOM 요소를 복제할 때 이벤트 핸들러를 복제하지 않으면 True 반환 IE의 경우 false 반환
  • 4. jQuery.support로 기능 찾기 opacity - 브라우저가 CSS opacity 스타일을 해석 할 수 있으면 True 반환 IE의 경우 alpha filter를 대신 사용하고 있으며 false 반환 objectAll - 요소에 대해 getElementsByTagName(‘*’)를 사용할 때 모든 자식 요소를 반환하면 True 반환 1.6.4 버전에서 지원되지 않음…… -ㅅ- ;; 실제로 찍어보면 undefined 반환, jQuery Document에도 없음 scriptEval - <script> 태그에 대해 appendChild 사용하는 것이 스크립트를 실행하게 되면 True 반환 1.6버전에서 삭제 됨. 1.5.1 이후 버전에서는 scriptEval() method로 변경 style - getAttribute(‘style’)이 요소에 지정된 인라인 스타일을 반환할 수 있으면 True 반환 tbody - <tbody> 요소 없이도 <table> 요소를 허용하면 True 반환 IE에선 false를 반환한다고 되어 있으나… IE8에서 테스트 결과 true 반환… -ㅅ- ;;
  • 5. jQuery.each를 사용하여 배열과 개체를 반복하여 처리하기 • $.each( ) method ‒ $.each(collection, callback(indexInArray, valueOfElement)) var week = [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]; $.each(week, function(index, value){ $(‘#week’).append(‘<li>’ + value + ‘</li>’; }); ‒ $( ).each 와는 다른 메소드 <ul> <li><a href=“http://mail.naver.com”>네이버 메일</a></li> <li><a href=“http://cafe.naver.com”>네이버 카페</a></li> <li><a href=“http:// mail.naver.com/note”>네이버 쪽지</a></li> </ul> $(“ul li a”).each(function(index){ var link = $(this).attr(“href”); window.open(link); return false; } ‒ $.each()는 개체나 배열을 첫번째 매개변수로 받으며, $( ).each( )는 선택 된 jQuery 컬렉션만 처리가 가능하다
  • 6. jQuery.grep을 사용하여 배열 필터링 하기 • $.grep( ) method ‒ $. grep(array, function(elementOfArray, indexInArray) [ , invert]) ‒ 배열로부터 필터링 시키는 함수를 통해 특정한 배열만 반환 <dt> 평일 </dt><dd id=“weekday”></dd> <dt> 주말 </dt><dd id=“weekend”></dd> var week = [‘Mon’, ‘Tue’, ‘Wed’, ‘Thu’, ‘Fri’, ‘Sat’, ‘Sun’]; var weekday = $.grep(week, function(day, index){ return (index < 5) }); var weekend = $.grep(week, function(day, index){ return (index >= 5) }); $(“#weekday”).text(weekday.join(“, “)); $(“#weekend”).text(weekend.join(“, “));
  • 7. jQuery.map을 사용하여 배열 항목을 반복하며 수정하기 • $.map( ) method ‒ $. map(array, callback(elementOfArray, indexInArray)) v1.0 $. map(arrayOrObject, callback(value, indexOrKey)) v1.6 ‒ 배열[이나 객체]의 모든 요소를 콜백함수를 통해 가공하여 새로운 배열[객 체 v1.6]로 변환 var dayOfWeek = [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’, ‘Saturday’, ‘Sunday’]; var weekdayname = $.map(dayOfWeek, function(value, i){ return value.substr(0, 3); };
  • 8. jQuery.merge로 두 개의 배열을 결합하기 • $.merge( ) method ‒ $. merge(first, second) ‒ 두 개의 배열의 요소들을 첫번째 배열에 합친다. var weekday = [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’]; var weekend = [‘Saturday’, ‘Sunday’]; var week = $.merge(weekday, weekend); ‒ 주의! 첫 번째 배열의 원래값이 필요하다면 $.merge( ) 메소드 호출 전에 카피해 놓아야 한다.
  • 9. jQuery.merge로 두 개의 배열을 결합하기 • $.merge( ) method ‒ $. merge(first, second) ‒ 두 개의 배열의 요소들을 첫번째 배열에 합친다. var weekday = [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’]; var weekend = [‘Saturday’, ‘Sunday’]; var week = $.merge(weekday, weekend); ‒ 주의! 첫 번째 배열의 원래값이 필요하다면 $.merge( ) 메소드 호출 전에 카피해 놓아야 한다. var weekday = [‘Monday’, ‘Tuesday’, ‘Wednesday’, ‘Thursday’, ‘Friday’]; var weekend = [‘Saturday’, ‘Sunday’]; document.writeln("weekday : " + weekday.join(', ‘) + “<br />” ); var week = $.merge(weekday, weekend); document.writeln("week : " + week.join(', ‘) + “<br />” ); document.writeln("weekday : " + weekday.join(', ‘) + “<br />” ); weekday : Monday, Tuesday, Wednesday, Thursday, Friday week : Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday weekday : Monday, Tuesday, Wednesday, Thursday, Friday, Saturday, Sunday
  • 10. jQuery.unique를 사용하여 중복된 배열 항목 필터링 하기 • $.unique( ) method ‒ $. unique(array) ‒ DOM 요소 배열을 정렬하고 중복된 요소를 삭제 ‒ 문자열이나 숫자의 배열에서는 동작 X, DOM 요소 배열에서만 동작 <div> 1번 </div> <div id="target"> 2번 </div> <div class="dup"> 3번 </div> <div class="dup"> 4번 </div> <div class="dup"> 5번 </div> <div> 6번 </div> <script> var divs = $("div").get(); document.writeln("처음 DIV 갯수 : " + divs.length + "개 <br />"); divs = divs.concat($(".dup").get()); document.writeln("가공중 DIV 갯수 : " + divs.length + "개 <br />"); divs = $.unique(divs); document.writeln("유니크한 DIV 갯수 : " + divs.length + "개 <br />"); </script> 처음 DIV 갯수 : 6개 가공중 DIV 갯수 : 9개 유니크한 DIV 갯수 : 6개
  • 11. jQuery.trim을 사용하여 폼 값 또는 문자열에서 공백 제거하기 • $.trim( ) method ‒ $. trim(str) ‒ 문자열의 시작, 끝 부분의 공백 제거 <input type=“text” id=“usrID” value=“ mulder21c ” /> <script> var usrID = $.trim($(“input”).val()); </script>
  • 12. jQuery.data를 사용하여 DOM에 개체와 데이터 첨부하기 • $.data( ) method ‒ $.data(element, key, value) ‒ Json 형식으로 데이터를 저장 var store = $(“div”).get(0); $.data(store); // store의 unique id 반환 (데이터 저장소 index) $.data(store, “name”, “지성봉”); // store의 데이터 저장소의 “name” 키에 “지성봉” 을 저장 $.data(store, “name”); // store의 데이터 저장소에서 “name” 키에 해당하는 값 반환
  • 13. jQuery.extend를 사용하여 개체 확장하기 • $.extend(target [,object1][,objectN]) method ‒ 두 개 이상의 개체를 첫번째 개체에 합침 ‒ 동일한 속성이 있을 경우 후자의 것으로 덮어 씌움 <script> var obj = {apple:1,banana:5} var obj2 = {apple:3, graph : 4} $.extend(obj, obj2); $.each(obj, function(index, value){ document.writeln(index + " : " + value + "<br />"); }); </script> apple : 3 banana : 5 graph : 4
  • 14. END