jquery tutorials series (Hindi) – 1. Introduction to Jquery.

안녕하세요 친구, 당신은 Tech Engine을보고 있습니다 저는 Pankaj Borah가 You Jquery 비디오 시리즈에 선물하는 호스트입니다

친구,이 시리즈에서는 Jquery에 대해 이야기하겠습니다 Jquery는 무엇이며 어떻게 웹 개발에 사용할 수 있습니까? 우리가 더 나아 가기 전에 Jquery에 대해 간략하게 소개하고자합니다 만약 당신들 중 누구라도 DOM을 조작하는 것과 마찬가지로 웹 사이트를 개발하고 Javascript를 사용했다면 아약스 조작 또는 다른 유형의 애니메이션이나 조작을 수행합니다 그렇다면이 모든 작업을 얼마나 힘들고 시간이 오래 걸리는지는 순수한 자바 스크립트라는 점을 알 수 있습니다 이것은 jquery가 우리를 위해 해결하는 경향이있는 주요 문제입니다

시간 낭비없이 이러한 모든 작업을 수행 할 수있는 매우 쉬운 인터페이스를 제공합니다 말하자면, Jquery는 땀을 흘리지 않고도 효과, Dom 연산, 아약스 및 모든 것을 웹 사이트에서 처리 할 수있는 쉽고 유연한 방법입니다 친구, Jquery는 실제로 자바 스크립트 라이브러리이고 프로그래밍 언어가 아닙니다 밖에있는 유일한 도서관은 아닙니다 사실, 비슷한 물건을하는 다른 도서관이 있습니다

하지만 jquery에 대한 멋진 점은 다른 라이브러리에 비해 훨씬 빠르게로드된다는 것입니다 모든 기능을 고려한 파일 크기는 작습니다 Jquery는 크로스 브라우저 호환이므로 자바 스크립트 코드에 포함시킨 경우 다양한 웹 브라우저에서 작동합니다 여러분 모두가 여기에서 볼 수 있듯이 크로스 브라우저 호환이 가능하며 아래에는 Jquery를 지원하는 모든 브라우저 목록이 있습니다 금후, 우리는 프로젝트에 jquery를 어떻게 포함시킬 수 있는지에 대해 논의 할 것입니다

하지만 이전에는 공식 웹 사이트에서 다운로드해야합니다 다운로드 버튼을 클릭하면 여기에서 다운로드 페이지로 이동합니다 다운로드 섹션에서 기본적으로 선택할 수있는 두 가지 옵션이 있습니다 첫 번째는 프로덕션 버전이고 두 번째 버전은 개발 버전입니다 제작은 코드를 완성하고 서버에 업로드 할 준비가되었을 때 사용됩니다

이 버전은 압축 된 버전으로 메모리가 적기 때문에 웹 페이지를 더 빨리로드하는 데 도움이됩니다 개발 버전은 jquery 라이브러리를 실험하고 코드 가독성이 중요한 플러그인을 개발하고자 할 때 사용됩니다 라이브러리를 다운로드하고 나면 코드에 코드를 포함하여 사용할 수 있습니다 jquery의 공식 웹 사이트로 다시 한번 이동합시다 아래로 내려 가면서 우리는 jquery가 얼마나 대중적인지를 볼 수 있습니다

Microsoft, Google 등의 코드에서 jquery를 사용하는 회사가 많이 있습니다 우리는 예를 들어 Google에 대해 이야기 할 수 있습니다 Google에서 무언가를 검색하고 say car라고 타이핑 할 때마다, Google은 가능한 검색 문자열을 추측하려고 시도하고 다른 사용자의 이전 검색을 기반으로 제안 된 결과 목록을 제공합니다 입력시 드롭 다운 메뉴의 결과가 변경됩니다이 작업은 jquery의 ajax 연산을 사용하여 수행됩니다

페이지를 아래로 계속 스크롤하면 볼 수 있고 이미 말했듯이 Jquery는 주로 이러한 3 가지 유형의 작업에 사용됩니다 첫째, DOM 탐색 및 조작 둘째, 이벤트 처리 및 세 번째는 Ajax입니다 친구 Dom은 문서 개체 모델을 의미합니다 순회 및 조작 예를 들어, 여기에 주어진대로 이 코드는 우리가 순수한 js로 작성하려고하면 다음과 같이 작성해야합니다

documentgetElementById ( "id") innerHtml = "뭔가" 그러나 Jquery에서 우리는 이와 같은 것을 씁니다 이 코드는 클래스 선택기를 사용하여 클래스가있는 버튼의 텍스트를 '다음 단계'로 계속 변경합니다 우리는 또한 juery를 사용하여 요소를 선택할 수 있습니다

먼저 달러 기호를 사용해야하고 괄호 안에 선택자를 제공해야합니다 여기에는 클래스 선택기, ID 선택기 또는 다른 유형의 선택기가 될 수 있습니다 그런 다음 이벤트를 추가합니다 이벤트 처리가 온다 버튼을 클릭하면 팝업이 표시되는 상황을 생각해보십시오

우리는 팝업 div 요소에 id = "banner-message"를 할당합니다 hiddenbox라는 변수에 참조를 저장하십시오 그때 우리는 계속 이동하여 달러 기호를 사용하고 그 다음에 괄호 안에 "# button-container button"이있는 선택자를 사용합니다 id = "button"이고 type = "button"인 요소를 선택하십시오 그런 다음 이벤트 핸들러를 바인딩합니다

이 경우 "클릭", 그것은 mouseover 또는 아무것도 될 수 있습니다 누군가가 버튼을 클릭 할 때마다 숨겨진 상자가 표시됩니다 친구는 jquery를 사용하는 것이 얼마나 간단한 지 알 수 있습니다 우리가 순수 자바 스크립트에서이 모든 작업을 수행하도록 선택한 경우 코드가 길고 번거로 웠을 것입니다 따라서 jquery는이 모든 것을 단순하게 만들고 개발 시간을 단축시킵니다

그런 다음 jquery가 주로 사용되는 웹 사이트에 ajax 기능을 추가하는 것이 가장 중요합니다 일반적으로 아약스는 순수하다 js는 고통이며, 코드의 혼란스러워지고 에러가 발생하기 쉬워진다 Jquery는 우리에게 아약스 조작을 처리합니다 필요한 모든 매개 변수를 객체 형식으로 전달하면됩니다

여기에서 우리가 사용한 첫 번째 요소는 URL입니다이 URL은 ajax 요청이 생성 될 파일을 가리 킵니다 다음은 ajax를 통해 URL에있는 파일로 보낸 날짜와 동일한 데이터입니다 그리고 ajax 요청이 성공적으로 수행되면이 성공 블록의 코드가 실행됩니다 이제 jquery 문서 친구에 대해 이야기 해 보겠습니다

jquery를 배우는 동안 어느 시점에 있다면 jquery에서 제공되는 모든 기능에 대해 혼란스러워하거나 jquery의 다른 기능에 대해 알고 싶을 수 있습니다 다음 모든 기능의 광범위한 목록이있는 웹 사이트의 문서 영역을 항상 탐색 할 수 있습니다 예제가 제공되며 검색 창을 사용하여 모든 기능을 검색하십시오 $ get을 검색하여 이것을 시도해보십시오 이 함수는 get과 관련된 모든 함수를 나열합니다 미안 사실 jquery에서 $ get과 같은 함수가 없으므로 다른 것을 시도해 봅시다 ajax 여기서 볼 수 있듯이 ajax가 관련된 모든 기능의 목록을 표시합니다

아무 버튼이나 클릭하면 표시됩니다 그녀가 볼 수있는 eaxamples와 그 기능에 대한 모든 정보, ajaxsend, ajaxstart, ajaxstop, 아약스 성공 annd 모든 따라서 직접 가서 사이트를 탐색하십시오 Ths jquery는 이러한 모든 것들에 대한 쉬운 문서를 제공합니다 당신은 jquery를 많이 배울 수 있습니다

jquery가 다른 확장 라이브러리도 제공한다는 점을 한 가지 더 알려드립니다 추가 기능 및 플러그인을 제공하는 다운로드 한 것 외에도 이 비디오 시리즈에서는 예제를 통해 jquery의 대부분의 기능을 다루려고합니다 시리즈의 끝으로 아약스, 플러그인과 같은 고급 주제도 다루게 될 것입니다 그래서 당신은 쉽게 jquery를 배울 수 있고 시작하는 데 아무런 문제가 없습니다 친구, jquery는 오늘날 우리가 가지고있는 매우 강력한 도구이며, 적절한 방법으로 사용하면 웹 개발을 그 어느 때보 다 빠르고 쉽게 할 수 있습니다

Jumery 라이브러리 외에도 Jquery UI 라이브러리, 우리가 추가 할 수있는 것을 사용합니다 드래그 앤 드롭 기능, 아코디언, 버튼, 체크 박스, 대화 상자, 탭 및 효과도 화면 왼쪽에 볼 수 있습니다 우리는 다가오는 비디오에서 나중에 논의 할 것입니다 첫 번째 비디오에서 우리는 핵심 기능에 대해 이야기 할 것입니다 친구, 그게 오늘이야

그리고 다음 비디오에서 내가 너를 보게 될거야 이 비디오가 마음에 들면, 우리 채널 구독을 신청하지 않았거나 질문이 있으시면 아래에 의견을 게시 할 수 있습니다 고맙습니다