jQuery : 디자이너를위한 쉬운 JavaScript

키 테이크 아웃

jQuery는 웹 디자인에 JavaScript를 사용하는 프로세스를 단순화하는 JavaScript 라이브러리로 기능과 사용자 경험을 향상시키기위한 다양한 사전 제작 된 기능 및 도구를 제공합니다. jQuery는 디자이너가 HTML 요소를 조작하고, 이벤트를 처리하고, 애니메이션을 만들고, 다른 작업 중에서도 RAW JavaScript보다 더 능률적이고 효율적인 방식으로 Ajax 호출을 할 수 있습니다. jQuery의 주요 특징 중 하나는 함께 기능을 "체인"하는 능력으로 한 줄의 코드로 여러 동작을 수행 할 수 있습니다. 이것은 복잡한 JavaScript 작업을 단순화하기위한 강력한 도구입니다.

. jQuery의로드 이벤트 기능을 사용하면 페이지를로드하는 동안 작업을 완료 할 수 있으며 필요한 모든 부분이있는 즉시 작동하기 시작합니다. 이것은 기존의 온부하 방법에 대한 개선입니다.

고급 트릭에 대한 기능에도 불구하고 JQuery의 가장 큰 매력은 작은 문제를 빠르고 최소한의 소란으로 웹 디자이너에게 귀중한 도구로 만드는 능력입니다.

.
• JavaScript의 중생이 지난 2 년 동안 가장 큰 주제라면이 주제를 둘러싼 대부분의 대화를 두 가지 주요 영역으로 나눌 수 있습니다. 마을의 괴짜 끝에서, 우리는 Smarties가 JavaScript를 활용하여 Ajax와 함께 모든 종류의 놀랍고 때로는 말도 안되는 일을하는 것을 보았습니다. 그러나 나와 같은 프론트 엔드 사람들의 경우, 스크립팅 피즈와 버블의 대부분은 마크 업을 다시 설정하는 데 집중되어 있습니다. 디자인 뷰 뉴스 레터의 오랜 독자는 아마도 지난 몇 년 동안이 라인을 따라 몇 가지 실험을 기억할 것입니다.
• DOM과 함께 이미지 스타일링에서 JavaScript를 사용하여 둥근 모서리를 이미지에 추가했습니다. dom 텍스트 그림자에서, 우리는 JavaScript를 사용하여 제목 텍스트에 그림자를 만들었습니다.
수평 rulez에서! OK!, 우리는 JavaScript를 사용하여 Dodgy HR 요소를 고정했습니다.
• 각 스크립트는 상당히 다른 목적을 가지고 있지만, 모두 깔끔한 시맨틱 마크 업을 브라우저로 보내고 JavaScript를 사용하여 이해하기에 충분히 똑똑한 브라우저의 능력을 수정하거나 확장하는 것을 포함합니다. 대부분의 경우, 여기에는 마크 업의 일부를 "포장"하는 것이 포함됩니다. 오늘 우리는 언제 어디서나이 작업을 수행 할 수있는 쉬운 다목적 방법을 살펴볼 것입니다. 그래서 jQuery 란 무엇입니까?
jQuery는 프로토 타입, 스크립트 성, 리코, MOO.FX 등이 포함 된 이미 혼잡 한 공간에 합류하는 또 다른 JavaScript 라이브러리입니다. 이를 사용하려면 페이지 헤드에 .js 파일을 첨부하기 만하면 마술처럼, 많은 사전 제작 된 기능 및 기즈모에 액세스 할 수 있습니다. Q : 왜 다른 Arcane JavaScript 라이브러리를 다루기를 원하십니까?

A : jQuery의 주요 매력은 사용한 후 처음 10 분 이내에 제공 할 수있는 것입니다. 얼마 전에, 우리는 SitePoint의 시장이 운영되는 방식을 개선하는 데 시간을 보냈습니다. 메인 경매 페이지를 남기지 않고 판매자가 대형 스크린 샷, 통계, 그래프 및 기타 이미지를 표시 할 수있는 우아한 방법을 찾고 있지만 John Resig의 JQuery JavaScript 라이브러리가 구동하는 Cody Lindley의 Thickbox를 발견했습니다. 아래 이미지는 실제로 작동하는 두꺼운 박스를 보여줍니다


Deginbox와 함께 5 분만 연기 한 후에는 그 잠재력을보기 시작할 것입니다. 마켓 플레이스에서는 링크 된 이미지와 전체 HTML 문서를 Thickbox 창으로 가져 와서 동시에 런칭 페이지를 디밍 (손실되지는 않음) 할 수있었습니다. JavaScript가 비활성화되거나 사용할 수없는 브라우저가있는 사용자는 단순히 항목 (즉, 이미지 또는 페이지)으로 직접 가져갑니다. “이 썸네일 확대”문제에 대한 매우 영리하고 사용 가능하며 접근 가능한 솔루션입니다. 그러나 우리는 이미 페이지에 jQuery 라이브러리를 포함시키기로 결정했기 때문에 (약 10kb) 우리를 위해 무엇을 할 수 있는지 알아내는 것이 좋은 생각이라고 생각했습니다.

. 한 시간 후, 나는 jQuery 개종자였습니다. jQuery의 진정한 아름다움은 단순성입니다. jQuery 코드의 단일 줄은 12 줄의 일반 JavaScript를 대체 할 수 있지만 매우 원소적이고 유연하게 유지됩니다. 이 점을 예제로 설명하겠습니다. 2 년 전의“수평 규칙 고정 장치”에서 다음 스크립트를 사용했습니다.

이 코드의 빠른 요약으로, 브라우저는 페이지가 RIFLING 전에 HR의 각 발생을 찾기 전에 페이지가로드를 완료하기를 기다립니다. 하나를 찾을 때마다 새 div를 생성하고 클래스 이름 "line"을 제공하고, HR이있는 곳에 삽입하고, 새 Div 내부에 이전 HR을 팝 하여이 특정 효과를 구현하는 데 필요한 마크 업을 달성합니다. 시맨틱 페단 트리를 제외 하고이 스크립트의 최종 결과는 수백 페이지를 변경하지 않고도 원하는 결과를 얻을 수 있다는 것이 었습니다. 당시에는 12 줄의 코드에 대한 결과가 나쁜 결과가 아니라고 생각했습니다. 그러나 jQuery를 사용하여 동일한 결과를 얻는 방법을 살펴 보겠습니다.

나는 당신을 아이를 키우지 않습니다.

분해하려면 (깨지는 것이 많지 않음) :
첫 번째 및 세 번째 줄은 jQuery의 하중 이벤트이며, 위의 이전 창을 대체합니다. 페이지를로드하는 동안 완료하고자하는 모든 작업은 이러한 곱슬 괄호 안에 떨어질 수 있습니다. 이것은 기존 온부하 방법을 크게 개선 한 것입니다. 모든 것이로드가 끝날 때까지 기다리는 대신 JQuery의 기능은 들어오는 모든 것을보고 필요한 모든 부품을 갖 자마자 작동하기 시작하기 때문입니다. 정말 깔끔합니다.

놀랍게도, 두 번째 줄은 훨씬 더 간단합니다 :

"Dollar Object" - $ ( "HR") -이 페이지의 모든 수평 규칙을 잡기 위해 jQuery에게 말하는 데 필요한 전부이며, 랩은 해당 HR 요소에게 할 일입니다.

. jQuery의 내장 랩 함수는 우리가 제공하는 HTML을 사용하여 (이 경우 "

") 페이지의 각 HR 주위에 랩핑합니다. 루프 나 테스트가 필요하지 않습니다. . 우리는 여기서 div를 사용했지만 b, 스팬 또는 요소를 쉽게 수정하거나 포장 할 수 있습니다. 우리는 여기에서 매우 간단한 선택 규칙 (모든 HR)을 사용했지만 우리가 목표로 한 것과 훨씬 더 쉽게 구체적으로 할 수있었습니다. 친숙한 오래된 CSS 구문을 사용하여 다음 중 하나를 사용할 수있었습니다.

function fancyRules() {  <br>
  if (!document.getElementsByTagName) return;  <br>
    var hr = document.getElementsByTagName("hr"); <br>
  for (var i=0; i<hr.length; i++) {  <br>
    var newhr = hr[i];  <br>
    var wrapdiv = document.createElement('div'); <br>
    wrapdiv.className = 'line';   <br>
    newhr.parentNode.replaceChild(wrapdiv, newhr);   <br>
    wrapdiv.appendChild(newhr);   <br>
  }  <br>
}  <br>
 <br>
window.onload = fancyRules;

$ ( "hr.separate") - 클래스 이름을 "별도"로 가져 오는 HR 요소를 얻으십시오.

• $ ( "Li : Only-Child")-그 자체로 목록 항목을 얻으십시오
  $ ( "ul> li") - 정렬되지 않은 상위 ​​목록이있는 목록 항목 만 가져옵니다.
개인적으로 랩이 가장 즉시 유용한 jQuery 함수라는 것을 알았지 만 Hide, Show, Fadeout ( "Slow") 및 SlideUp ( "Fast")을 포함한 많은 사람들 중 하나 일뿐입니다. 이 기능 각각이 무엇을하는지 추측 할 수 있습니다. jQuery 사이트의 JQuery Starter의 자습서는 초보자 가이드이며 가장 일반적인 기능 중 일부를 안내합니다. 그러나 아마도 JQuery의 단일 깔끔한 기능은 함께 기능을 "체인"하는 기능 일 것입니다. 다시 말해, 미친 이유 때문에 HR 요소에 두 번째 div를 추가하고 싶다면 코드 끝에 랩 함수에 또 다른 호출을 추가 할 수 있습니다.

너무 쉽습니다. 미쳤어. 여우처럼 미쳤어! 마켓 플레이스의 사이트 판매 섹션은 아래에서 볼 수 있듯이 이것이 유용 할 수있는 곳의 또 다른 예를 제공합니다.

이 페이지를 개발할 때 각 썸네일의 하단 모서리에 작은 아이콘을 추가하고 싶었습니다. 이를 위해서는 각 IMG 요소가 컨테이너 DIV에 감싸고 컨테이너 DIV에 위치 할 아이콘을 보여주는 다른 DIV가 필요했습니다. 다시, jQuery 코드는 한 줄에 불과합니다 (작업 할 열 폭이 제한되어 있기 때문에 여기에서 분할).

일반 영어로,이 코드는 단순히 jQuery를 다음을 요청합니다
#thumbnails 내부에있는 Li 요소에서 모든 이미지를 찾으십시오. 이 이미지를 "랩"이라는 div로 감싸십시오
내 이미지 바로 직전에 내 "랩"Div에서 다른 div (아이콘 그래픽이있는 하나)를 압박하십시오.

이제 우리는 구조를 가지고 있으므로 CSS는 나머지를 수행합니다.

물론, JavaScript가 꺼지면 썸네일은 원시 이미지 파일에 직접 연결되며 아이콘이 필요하지 않습니다. 이것이 바로 내가 우아한 성능 저하라고 부르는 것입니다.

대부분의 다른 JavaScript 라이브러리와 마찬가지로 JQuery는 매우 고급 트릭을 수행 할 수 있지만 (이전 기사에서 AJAX 기능을 다루었습니다), 가장 큰 매력은 작은 문제를 최소한의 최소한의 소란으로 해결할 수있는 능력이었습니다.

. 아마도 말할 수 있듯이, 나는 이미 큰 jQuery 팬입니다. 당신도 유용하다는 것을 알기를 바랍니다.

물론 JavaScript 지평을 확장하고 있다면 Joe Hewitt의 Firebug Extension의 최신 버전으로 업그레이드하는 것을 잊지 마십시오. 이 기사는 원래 Design View #23에 출판되었습니다 디자이너의 jQuery 및 JavaScript에 대한 자주 질문 jQuery와 JavaScript의 차이점은 무엇입니까?

JavaScript는 웹 페이지에서 복잡한 기능을 구현할 수있는 프로그래밍 언어입니다. 반면에 JQuery는 빠르고 작으며 기능이 풍부한 JavaScript 라이브러리입니다. 수많은 브라우저에서 작동하는 사용하기 쉬운 API로 HTML 문서 트래버스 및 조작 및 애니메이션과 같은 것들을 훨씬 간단하게 만듭니다. 본질적으로 JQuery는 HTML 문서 트래징, 이벤트 처리 및 애니메이션을 단순화하도록 설계된 JavaScript 라이브러리 세트입니다.

내 프로젝트에서 jQuery를 사용하는 방법은 어떻게 jQuery를 사용하려면 프로젝트에 jquery 라이브러리를 포함시켜야합니다. 공식 jQuery 웹 사이트에서 다운로드하거나 CDN (Content Delivery Network)에서 직접 포함시킬 수 있습니다. 도서관이 프로젝트에 포함되면 $ 부호와 선택기 (선택한 요소를 선택하기 위해)와 jQuery 액션 (선택한 요소를 수행하기 위해)을 사용하여 jQuery 함수를 사용하여 시작할 수 있습니다. (클릭 또는 마우스 움직임과 같은) 애니메이션 생성 및 Ajax 호출을 통해 서버로 데이터를 검색하거나 보내십시오. 또한 이미지 슬라이더, 양식 검증 및 동적 컨텐츠 로딩과 같은 대화식 기능을 만드는 데 사용됩니다. jQuery는 JavaScript와의 작업을 단순화하는 방법?

jQuery는 일반적인 웹 작업에 사용하기 쉬운 API를 제공하여 복잡한 JavaScript 기능을 추상화하여 JavaScript를 단순화합니다. 또한 RAW JavaScript를 작성할 때 발생할 수있는 많은 크로스 브라우저 호환성 문제를 처리하여 코드를 작성하고 유지 관리하기 쉽게 만들 수 있습니다.

다른 JavaScript 라이브러리와 함께 jQuery를 사용할 수 있습니까?

예, JQuery는 다른 JavaScript 라이브러리와 함께 사용할 수 있습니다. Noconflict Mode라는 기능을 제공합니다.이 기능은 $ 기호를 사용하는 다른 라이브러리와 함께 jQuery를 사용할 수 있습니다.

jQuery를 학습하기위한 리소스는 무엇입니까?

jQuery를 학습하는 데 사용할 수있는 많은 리소스가 있습니다. 공식 JQuery 웹 사이트는 포괄적 인 문서 및 자습서를 제공합니다. Codecademy, Udemy 및 Khan Academy와 같은 다른 온라인 플랫폼도 jQuery에 대한 과정을 제공합니다.

jQuery 코드를 디버그하는 방법은 어떻게 jQuery 코드를 디버깅하는 것이 JavaScript 디버깅과 유사합니다. 브라우저의 개발자 도구를 사용하여 요소를 검사하고 콘솔 로그를보고 코드를 진행할 수 있습니다. 또한 jQuery에는 .error (), .fail () 및 .done ()과 같은 몇 가지 방법이 오류 및 예외를 처리 할 수있는 몇 가지 방법을 제공합니다.

jQuery를 사용할 때 가장 모범 사례는 무엇입니까?

jQuery를 사용할 때 일부 모범 사례에는 다음이 포함됩니다. jquery의 최신 버전을 사용하여 모든 ZQUERY를 사용하여 모든 ELMENTS를 사용하여 ELMENTS를 사용하여 사용합니다. 더 빠른 로딩 시간을위한 jQuery cdn.

더 나은 성능을 위해 jQuery 코드를 최적화하려면 어떻게해야합니까?

더 나은 성능을 위해 jQuery 코드를 최적화하는 몇 가지 방법이 있습니다. 여기에는 DOM 조작 최소화, 클래스 선택기 대신 ID 선택기를 사용하고 jQuery 객체를 캐싱하고 이벤트 바인딩을 위해 .on () 메소드를 사용합니다.

모바일 웹 개발에 jQuery를 사용할 수 있습니까?

예, JQuery에는 JQuery Mobile이라는 모바일 웹 개발을위한 특정 라이브러리가 있습니다. 모든 인기있는 모바일 장치 플랫폼에 통합 된 HTML5 기반 사용자 인터페이스 시스템을 제공합니다.

위 내용은 jQuery : 디자이너를위한 쉬운 JavaScript의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!