[Coursera x K-mooc] JS2 : MD-01 [ jQuery 란, jQuery 적용하기, jQuery API, jQuery를 이용한 접히는 메뉴 바 ]

---

◆ JS2 : MD-01 [ jQuery 란?,  jQuery 적용하기, jQuery API, jQuery를 이용한 접히는 메뉴 바 ]

◆ JS2 : MD-02 [ jQuery - animation효과, Easing Plugin]

◆ JS2 : MD-03

◆ JS2 : MD-04

---

◈ jQuery 란??

" 존 레식"쓰가 2006년에 발표한 크로스 플랫폼을 지원하는 경량의 자바스크립트 라이브러리입니다. HTML 문서의 탐색이나 조작, 이벤트 핸들링, 애니메이션, Ajax등을 멀티 브라우저를 지원하는 API를 통해 더욱 간편하게 사용할 수 있습니다. 

 

   ▶ jQuery의 특징

       1. 어떠한 브라우저에서도 동일하게 동작합니다.

           : 브라우저 호환성을 고려해서 대체 코드(Polyfill) 을 작성할 필요가 없다는 뜻입니다. 

       2. 네이티브 DOM API(DOM Query, Traversing, Manipulation)등 보다 직관적이고 편리한 API를 제공                   : CSS 스타일의 selector을 사용할 수 있으며 조작 또한 강력하고 유연합니다. 

       3. 이벤트 처리, Ajax, Animation 효과를 쉽게 사용할 수 있습니다. 

       4. 다양한 플러그인이 존재하며 다른 라이브러리들과 충돌을 일으키지 않습니다. 

 

 

◈ google CDN - three main version  : Web으로 jQuery 적용하기 

 

≫ google 검색 : google jquery cdn   :   *링크

 

 

---

 

 

◈ JqueryAPI - jQuery Methods

 

≫ JQuery API 링크 : : 클릭!!

jQuery syntax를 이용해서 events를 capture 하고 DOM을 조작/관리?할 수 있다. 그러나 jQuery는 JS의 조금 더 나아간 버전 정도.. JS를 제대로 아는 것이 가장 중요하다. 

 

 

---

 

◈ Folding Sidebar Menus (접히는 사이드바 메뉴)

 

CSS flexbox( " row-reverse " ) 는 navigation bar를 왼쪽에 배치 할 수 있으며, 일반적으로 검색 엔진최적화를 위해 <article>이 코드 소스 중에서 위쪽에 있기를 바랄 겁니다. 

 

### hideMenu CodePen 으로 적용 하기. 

 

 

※  Test ※

1. What are some things to consider before using jQUery(slect all that apply)

   (a).It adds weight to your pages.

   (b). Pages will take longer to load.

 

2. Wich of the following are ways to plug jQuery into your site? 

  (a). Download the library into your project and linke to the local file.

  (b). "HOT Link" to a library on a content delivery network(CDN)

※ (X) Embed encrypted jQuey code into your web pages. : 암호화된 jQuery 코드 page에 삽입하기

         → Plugging into jQuery Libraries

 

3. Which of the following is the correct jQuery object?

  (a). $()

  (b). jQuery()

 

4. What CSS property is used to initially hide a menu?

  (a). display: none.

 

5. What does parentNode do?

  (a). Selects the element that is the parent of the currently referenced element.

        : 현재의 참조된 요소의 부모 요소 선택

 

6. What jQuery helper function is the same as using the CSS function with the "Display" property set to "none"?

  (a). .hide(); 

 

7. Which of these shows the correct way to change the font size and color in jQuery?

  (a). $("#main p").css({ "font-size" : "24px", "color" : "red" });

  (b). $("#main p").css({" font-size" : "24px"}.css{"color" : "red" });