jQuery-퀵 가이드

jQuery 란 무엇입니까?

jQuery는 2006 년 John Resig가 멋진 모토로 만든 빠르고 간결한 JavaScript 라이브러리입니다. Write less, do more. jQuery는 신속한 웹 개발을 위해 HTML 문서 탐색, 이벤트 처리, 애니메이션 및 Ajax 상호 작용을 단순화합니다. jQuery는 더 적은 코드를 작성하여 다양한 작업을 단순화하도록 설계된 JavaScript 툴킷입니다. 다음은 jQuery가 지원하는 중요한 핵심 기능 목록입니다.

  • DOM manipulation − jQuery를 사용하면 브라우저 간 오픈 소스 선택기 엔진을 사용하여 DOM 요소를 쉽게 선택하고 협상하고 콘텐츠를 수정할 수 있습니다. Sizzle.

  • Event handling − jQuery는 이벤트 핸들러로 HTML 코드 자체를 복잡하게 만들 필요없이 사용자가 링크를 클릭하는 것과 같은 다양한 이벤트를 캡처하는 우아한 방법을 제공합니다.

  • AJAX Support − jQuery는 AJAX 기술을 사용하여 반응적이고 기능이 풍부한 사이트를 개발하는 데 많은 도움이됩니다.

  • Animations − jQuery는 웹 사이트에서 사용할 수있는 많은 내장 애니메이션 효과를 제공합니다.

  • Lightweight − jQuery는 크기가 약 19KB (최소화 및 gzip) 된 매우 가벼운 라이브러리입니다.

  • Cross Browser Support − jQuery는 브라우저 간 지원이 가능하며 IE 6.0+, FF 2.0+, Safari 3.0+, Chrome 및 Opera 9.0+에서 잘 작동합니다.

  • Latest Technology − jQuery는 CSS3 선택기와 기본 XPath 구문을 지원합니다.

jQuery를 사용하는 방법?

jQuery를 사용하는 방법에는 두 가지가 있습니다.

  • Local Installation − 로컬 컴퓨터에 jQuery 라이브러리를 다운로드하여 HTML 코드에 포함 할 수 있습니다.

  • CDN Based Version − CDN (Content Delivery Network)에서 직접 HTML 코드에 jQuery 라이브러리를 포함 할 수 있습니다.

로컬 설치

  • 로 이동 https://jquery.com/download/ 사용 가능한 최신 버전을 다운로드하십시오.

  • 이제 다운로드 jquery-2.1.3.min.js 웹 사이트의 디렉토리에있는 파일, 예 : / jquery.

예

이제 다음과 같이 HTML 파일에 jquery 라이브러리를 포함 할 수 있습니다.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" src = "/jquery/jquery-2.1.3.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

이것은 다음 결과를 생성합니다-

CDN 기반 버전

CDN (Content Delivery Network)에서 직접 jQuery 라이브러리를 HTML 코드에 포함 할 수 있습니다. Google과 Microsoft는 최신 버전의 콘텐츠를 제공합니다.

이 튜토리얼 전체에서 라이브러리의 Google CDN 버전을 사용하고 있습니다.

예

이제 Google CDN의 jQuery 라이브러리를 사용하여 위의 예를 다시 작성하겠습니다.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript">
         $(document).ready(function() {
            document.write("Hello, World!");
         });
      </script>
   </head>
	
   <body>
      <h1>Hello</h1>
   </body>
</html>

이것은 다음 결과를 생성합니다-

jQuery 라이브러리 함수를 호출하는 방법?

거의 모든 것과 마찬가지로 jQuery를 사용하여 DOM (문서 개체 모델)을 읽거나 조작 할 때 DOM이 준비되는 즉시 이벤트 추가 등을 시작해야합니다.

페이지에서 이벤트가 작동하도록하려면 $ (document) .ready () 함수 내에서 이벤트를 호출해야합니다. DOM이로드 되 자마자 페이지 내용이로드되기 전에 그 안에있는 모든 것이로드됩니다.

이를 위해 다음과 같이 문서에 대한 준비 이벤트를 등록합니다.

$(document).ready(function() {
   // do stuff when DOM is ready
});

jQuery 라이브러리 함수를 호출하려면 아래와 같이 HTML 스크립트 태그를 사용하십시오.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function() {alert("Hello, world!");});
         });
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

사용자 지정 스크립트를 사용하는 방법?

사용자 정의 JavaScript 파일에 사용자 정의 코드를 작성하는 것이 좋습니다. custom.js, 다음과 같이-

/* Filename: custom.js */
$(document).ready(function() { $("div").click(function() {
      alert("Hello, world!");
   });
});

이제 우리는 custom.js 다음과 같이 HTML 파일의 파일-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" src = "/jquery/custom.js">
      </script>
   </head>
	
   <body>
      <div id = "mydiv">
         Click on this to see a dialogue box.
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

여러 라이브러리 사용

서로 충돌하지 않고 여러 라이브러리를 함께 사용할 수 있습니다. 예를 들어 jQuery와 MooTool 자바 스크립트 라이브러리를 함께 사용할 수 있습니다. 자세한 내용은 jQuery noConflict 메서드를 확인할 수 있습니다 .

다음은 무엇입니까 ?

위의 예를 이해하지 못했다면 너무 걱정하지 마십시오. 다음 장에서 곧 이해하게 될 것입니다.

다음 장에서는 기존 JavaScript에서 나오는 몇 가지 기본 개념을 다루려고합니다.

jQuery는 JavaScript 기능을 사용하여 구축 된 프레임 워크입니다. 따라서 JavaScript에서 사용할 수있는 모든 기능과 기타 기능을 사용할 수 있습니다. 이 장에서는 대부분의 기본 개념을 설명하지만 jQuery에서 자주 사용됩니다.

끈

JavaScript의 문자열은 문자가 없거나 하나 또는 여러 개 포함 된 불변 객체입니다. 다음은 JavaScript 문자열의 유효한 예입니다-

"This is JavaScript String"
'This is JavaScript String'
'This is "really" a JavaScript String'
"This is 'really' a JavaScript String"

번호

JavaScript의 숫자는 배정 밀도 64 비트 형식 IEEE 754 값입니다. 문자열처럼 변경 불가능합니다. 다음은 JavaScript 숫자의 유효한 예입니다-

5350
120.27
0.26

부울

JavaScript의 부울은 다음 중 하나 일 수 있습니다. true 또는 false. 숫자가 0이면 기본값은 false입니다. 빈 문자열이 기본값 인 경우 false입니다.

다음은 JavaScript 부울의 유효한 예입니다.

true      // true
false     // false
0         // false
1         // true
""        // false
"hello"   // true

사물

JavaScript는 Object 개념을 매우 잘 지원합니다. 다음과 같이 객체 리터럴을 사용하여 객체를 만들 수 있습니다.

var emp = {
   name: "Zara",
   age: 10
};

다음과 같이 점 표기법을 사용하여 객체의 속성을 쓰고 읽을 수 있습니다.

// Getting object properties
emp.name  // ==> Zara
emp.age   // ==> 10

// Setting object properties
emp.name = "Daisy"  // <== Daisy
emp.age  =  20      // <== 20

배열

다음과 같이 배열 리터럴을 사용하여 배열을 정의 할 수 있습니다-

var x = [];
var y = [1, 2, 3, 4, 5];

배열에는 length 반복에 유용한 속성-

var x = [1, 2, 3, 4, 5];

for (var i = 0; i < x.length; i++) {
   // Do something with x[i]
}

기능

JavaScript의 함수는 이름이 지정되거나 익명이 될 수 있습니다. 명명 된 함수는 다음과 같이 function 키워드를 사용하여 정의 할 수 있습니다.

function named(){
   // do some stuff here
}

익명 함수는 일반 함수와 비슷한 방식으로 정의 할 수 있지만 이름이 없습니다.

익명 함수는 변수에 할당되거나 아래와 같이 메서드에 전달 될 수 있습니다.

var handler = function (){
   // do some stuff here
}

JQuery는 다음과 같이 익명 함수를 매우 자주 사용합니다.

$(document).ready(function(){
   // do some stuff here
});

인수

JavaScript 변수 인수 는 길이 속성 을 갖는 일종의 배열입니다 . 다음 예제는 그것을 아주 잘 설명합니다-

function func(x){
   console.log(typeof x, arguments.length);
}

func();                //==> "undefined", 0
func(1);               //==> "number", 1
func("1", "2", "3");   //==> "string", 3

arguments 객체에는 내부에있는 함수를 참조 하는 callee 속성 도 있습니다 . 예를 들면-

function func() {
   return arguments.callee; 
}

func();                // ==> func

문맥

JavaScript 유명 키워드 this항상 현재 컨텍스트를 참조합니다. 함수 내this 컨텍스트는 함수가 호출되는 방식에 따라 변경 될 수 있습니다.

$(document).ready(function() {
   // this refers to window.document
});

$("div").click(function() {
   // this refers to a div DOM element
});

함수 내장 메서드를 사용하여 함수 호출에 대한 컨텍스트를 지정할 수 있습니다. call() 과 apply() 행동 양식.

그들 사이의 차이점은 인수를 전달하는 방법입니다. Call은 모든 인수를 인수로 함수에 전달하는 반면 apply는 배열을 인수로받습니다.

function scope() {
   console.log(this, arguments.length);
}

scope() // window, 0
scope.call("foobar", [1,2]);  //==> "foobar", 1
scope.apply("foobar", [1,2]); //==> "foobar", 2

범위

변수의 범위는 변수가 정의 된 프로그램의 영역입니다. JavaScript 변수에는 두 개의 범위 만 있습니다.

  • Global Variables − 전역 변수에는 전역 범위가 있습니다. 즉, JavaScript 코드의 모든 곳에서 정의됩니다.

  • Local Variables− 지역 변수는 정의 된 함수 내에서만 볼 수 있습니다. 함수 매개 변수는 항상 해당 함수에 국한됩니다.

함수 본문 내에서 지역 변수는 동일한 이름의 전역 변수보다 우선합니다.

var myVar = "global";     // ==> Declare a global variable

function ( ) {
   var myVar = "local";   // ==> Declare a local variable
   document.write(myVar); // ==> local
}

콜백

콜백은 인수 또는 옵션으로 일부 메서드에 전달되는 일반 JavaScript 함수입니다. 일부 콜백은 특정 상태가 트리거 될 때 사용자에게 반응 할 기회를주기 위해 호출되는 이벤트 일뿐입니다.

jQuery의 이벤트 시스템은 모든 곳에서 이러한 콜백을 사용합니다.

$("body").click(function(event) {
   console.log("clicked: " + event.target);
});

대부분의 콜백은 인수와 컨텍스트를 제공합니다. 이벤트 처리기 예제에서 콜백은 하나의 인수 인 Event로 호출됩니다.

일부 콜백은 무언가를 반환하는 데 필요하고 다른 콜백은 반환 값을 선택적으로 만듭니다. 양식 제출을 방지하기 위해 제출 이벤트 핸들러는 다음과 같이 false를 반환 할 수 있습니다.

$("#myform").submit(function() {
   return false;
});

폐쇄

현재 범위 외부에서 정의 된 변수가 일부 내부 범위 내에서 액세스 될 때마다 클로저가 생성됩니다.

다음 예는 변수가 counter 생성, 증분 및 인쇄 기능 내에서 볼 수 있지만 외부에서는 볼 수 없습니다.

function create() {
   var counter = 0;
	
   return {
      increment: function() {
         counter++;
      },
	   print: function() {
         console.log(counter);
      }
   }
}

var c = create();
c.increment();
c.print();     // ==> 1

이 패턴을 사용하면 외부에서 볼 수없는 데이터에서 작동하는 메서드를 사용하여 개체를 만들 수 있습니다. 유의해야합니다data hiding 객체 지향 프로그래밍의 기초입니다.

프록시 패턴

프록시는 다른 개체에 대한 액세스를 제어하는 ​​데 사용할 수있는 개체입니다. 이 다른 객체와 동일한 인터페이스를 구현하고 모든 메서드 호출을 전달합니다. 이 다른 물체를 종종 실제 주제라고합니다.

이 실제 주제 대신 프록시를 인스턴스화하여 원격으로 액세스 할 수 있습니다. jQuery의 setArray 메소드를 클로저에 저장하고 다음과 같이 덮어 쓸 수 있습니다.

(function() {
   // log all calls to setArray
   var proxied = jQuery.fn.setArray;

   jQuery.fn.setArray = function() {
      console.log(this, arguments);
      return proxied.apply(this, arguments);
   };
	
})();

위의 코드는 프록시 변수 를 숨기는 함수로 래핑 합니다. 그런 다음 프록시는 메서드에 대한 모든 호출을 기록하고 호출을 원래 메서드에 위임합니다. 사용 신청 (이 인수) 보장 발신자는 원본과 프록시 방식의 차이를 알 수 없게됩니다.

내장 기능

JavaScript는 유용한 내장 함수 세트와 함께 제공됩니다. 이러한 메서드는 문자열, 숫자 및 날짜를 ​​조작하는 데 사용할 수 있습니다.

다음은 중요한 JavaScript 함수입니다.

Sr. 아니. 방법 및 설명
1

charAt()

지정된 인덱스에있는 문자를 반환합니다.
2

concat()

두 문자열의 텍스트를 결합하고 새 문자열을 반환합니다.
삼

forEach()

배열의 각 요소에 대해 함수를 호출합니다.
4

indexOf()

지정된 값이 처음 발견 된 호출 String 객체 내의 인덱스를 반환하거나, 찾을 수없는 경우 -1을 반환합니다.
5

length()

문자열의 길이를 반환합니다.
6

pop()

배열에서 마지막 요소를 제거하고 해당 요소를 반환합니다.
7

push()

배열 끝에 하나 이상의 요소를 추가하고 배열의 새 길이를 반환합니다.
8

reverse()

배열 요소의 순서를 반대로합니다. 첫 번째가 마지막이되고 마지막이 첫 번째가됩니다.
9

sort()

배열의 요소를 정렬합니다.
10

substr()

지정된 수의 문자를 통해 지정된 위치에서 시작하는 문자열의 문자를 반환합니다.
11

toLowerCase()

소문자로 변환 된 호출 문자열 값을 반환합니다.
12

toString()

숫자 값의 문자열 표현을 반환합니다.
13

toUpperCase()

대문자로 변환 된 호출 문자열 값을 반환합니다.

문서 객체 모델

문서 객체 모델은 다음과 같이 HTML의 다양한 요소의 트리 구조입니다.

<html>
   <head>
      <title>The jQuery Example</title>
   </head>
	
   <body>
      <div>
         <p>This is a paragraph.</p>
         <p>This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

다음은 위의 트리 구조에 대한 중요한 사항입니다.

  • <html>은 다른 모든 요소의 조상입니다. 즉, 다른 모든 요소는 <html>의 자손입니다.

  • <head> 및 <body> 요소는 하위 요소 일뿐만 아니라 <html>의 하위 요소이기도합니다.

  • 마찬가지로 <head>와 <body>의 조상일뿐만 아니라 <html>도 부모입니다.

  • <p> 요소는 <div>의 하위 (및 하위 요소), <body> 및 <html>의 하위 요소 및 서로 <p> 요소의 형제입니다.

jQuery 개념을 배우는 동안 DOM에 대해 이해하는 것이 도움이 될 것입니다. DOM을 알지 못한다면 DOM Tutorial 에 대한 간단한 자습서를 살펴 보는 것이 좋습니다 .

jQuery 라이브러리는 CSS (Cascading Style Sheets) 선택기의 기능을 활용하여 DOM (문서 개체 모델)의 요소 또는 요소 그룹에 빠르고 쉽게 액세스 할 수 있도록합니다.

jQuery 선택기는 주어진 기준에 따라 DOM에서 일치하는 요소를 찾기 위해 표현식을 사용하는 함수입니다. 간단히 말해, 선택기는 jQuery를 사용하여 하나 이상의 HTML 요소를 선택하는 데 사용됩니다. 요소가 선택되면 선택한 요소에 대해 다양한 작업을 수행 할 수 있습니다.

$ () 팩토리 함수

jQuery 선택자는 달러 기호와 괄호로 시작합니다. $(). 공장 기능$() 주어진 문서에서 요소를 선택하는 동안 다음 세 가지 빌딩 블록을 사용합니다.

Sr. 아니. 선택기 및 설명
1

Tag Name

DOM에서 사용 가능한 태그 이름을 나타냅니다. 예를 들면$('p') 문서의 모든 단락 <p>를 선택합니다.
2

Tag ID

DOM에서 지정된 ID로 사용할 수있는 태그를 나타냅니다. 예를 들면$('#some-id') ID가 some-id 인 문서에서 단일 요소를 선택합니다.
삼

Tag Class

DOM의 지정된 클래스에서 사용할 수있는 태그를 나타냅니다. 예를 들면$('.some-class') 클래스가 some-class 인 문서의 모든 요소를 ​​선택합니다.

위의 모든 항목은 단독으로 사용하거나 다른 선택기와 함께 사용할 수 있습니다. 모든 jQuery 선택기는 일부 조정을 제외하고는 동일한 원칙을 기반으로합니다.

NOTE − 공장 기능 $() 의 동의어입니다 jQuery()함수. 따라서 다른 JavaScript 라이브러리를 사용하는 경우$ 기호가 다른 것과 충돌하면 대체 할 수 있습니다. $ 서명하다 jQuery 이름과 기능을 사용할 수 있습니다 jQuery() 대신에 $().

예

다음은 Tag Selector를 사용하는 간단한 예입니다. 태그 이름이있는 모든 요소를 ​​선택합니다.p.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>

      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").css("background-color", "yellow");
         });
      </script>
   </head>
	
   <body>
      <div>
         <p class = "myclass">This is a paragraph.</p>
         <p id = "myid">This is second paragraph.</p>
         <p>This is third paragraph.</p>
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

선택기를 사용하는 방법?

선택기는 매우 유용하며 jQuery를 사용하는 동안 모든 단계에서 필요합니다. HTML 문서에서 원하는 정확한 요소를 얻습니다.

다음 표는 몇 가지 기본 선택기를 나열하고 예제와 함께 설명합니다.

Sr. 아니. 선택기 및 설명
1 이름

주어진 요소와 일치하는 모든 요소를 ​​선택합니다. Name.
2 #신분증

주어진 것과 일치하는 단일 요소를 선택합니다. ID.
삼 .수업

주어진 것과 일치하는 모든 요소를 ​​선택합니다 Class.
4 범용 (*)

DOM에서 사용 가능한 모든 요소를 ​​선택합니다.
5 다중 요소 E, F, G

지정된 모든 선택 자의 결합 된 결과를 선택합니다. E, F 또는 G.

선택기 예

위의 구문 및 예제와 유사하게 다음 예제는 다른 유형의 유용한 선택기 사용에 대한 이해를 제공합니다.

Sr. 아니. 선택기 및 설명
1

$('*')

이 선택기는 문서의 모든 요소를 ​​선택합니다.
2

$("p > *")

이 선택기는 단락 요소의 하위 요소 인 모든 요소를 ​​선택합니다.
삼

$("#specialID")

이 선택기 함수는 id = "specialID"인 요소를 가져옵니다.
4

$(".specialClass")

이 선택기는 specialClass 클래스를 가진 모든 요소를 ​​가져옵니다 .
5

$("li:not(.myclass)")

class = "myclass"가없는 <li>와 일치하는 모든 요소를 ​​선택합니다.
6

$("a#specialID.specialClass")

이 선택기는 ID가 specialID 이고 클래스가 specialClass 인 링크와 일치합니다 .
7

$("p a.specialClass")

이 선택기는 <p> 요소 내에 선언 된 specialClass 클래스와 링크를 일치시킵니다 .
8

$("ul li:first")

이 선택기는 <ul>의 첫 번째 <li> 요소 만 가져옵니다.
9

$("#container p")

ID가 container 인 요소의 자손 인 <p>와 일치하는 모든 요소를 ​​선택합니다 .
10

$("li > ul")

<li>와 일치하는 요소의 하위 인 <ul>과 일치하는 모든 요소를 ​​선택합니다.
11

$("strong + em")

<strong>과 일치하는 형제 요소 바로 뒤에 오는 <em>과 일치하는 모든 요소를 ​​선택합니다.
12

$("p ~ ul")

<p>와 일치하는 형제 요소 뒤에 오는 <ul>과 일치하는 모든 요소를 ​​선택합니다.
13

$("code, em, strong")

<code>, <em> 또는 <strong>와 일치하는 모든 요소를 ​​선택합니다.
14

$("p strong, .myclass")

myclass 클래스가있는 모든 요소는 물론 <p>와 일치하는 요소의 자손 인 <strong>과 일치하는 모든 요소를 ​​선택합니다 .
15

$(":empty")

자식이없는 모든 요소를 ​​선택합니다.
16

$("p:empty")

하위가없는 <p>와 일치하는 모든 요소를 ​​선택합니다.
17

$("div[p]")

<p>와 일치하는 요소를 포함하는 <div>와 일치하는 모든 요소를 ​​선택합니다.
18

$("p[.myclass]")

클래스가 myclass 인 요소를 포함하는 <p>와 일치하는 모든 요소를 ​​선택합니다 .
19

$("a[@rel]")

rel 속성이있는 <a>와 일치하는 모든 요소를 ​​선택합니다.
20

$("input[@name = myname]")

이름 값이 myname 과 정확히 일치하는 <input>과 일치하는 모든 요소를 ​​선택합니다 .
21

$("input[@name^=myname]")

이름 값이 myname으로 시작하는 <input>과 일치하는 모든 요소를 ​​선택합니다 .
22

$("a[@rel$=self]")

<a>와 일치하는 모든 요소를 ​​선택합니다. relself로 끝나는 속성 값 .
23

$("a[@href*=domain.com]")

domain.com을 포함하는 href 값이있는 <a>와 일치하는 모든 요소를 ​​선택합니다.
24

$("li:even")

색인 값이 짝수 인 <li>와 일치하는 모든 요소를 ​​선택합니다.
25

$("tr:odd")

색인 값이 홀수 인 <tr>과 일치하는 모든 요소를 ​​선택합니다.
26

$("li:first")

첫 번째 <li> 요소를 선택합니다.
27

$("li:last")

마지막 <li> 요소를 선택합니다.
28

$("li:visible")

표시되는 <li>와 일치하는 모든 요소를 ​​선택합니다.
29

$("li:hidden")

숨겨진 <li>와 일치하는 모든 요소를 ​​선택합니다.
30

$(":radio")

양식의 모든 라디오 버튼을 선택합니다.
31

$(":checked")

양식에서 선택된 모든 상자를 선택합니다.
32

$(":input")

양식 요소 (입력, 선택, 텍스트 영역, 단추) 만 선택합니다.
33

$(":text")

텍스트 요소 만 선택합니다 (input [type = text]).
34

$("li:eq(2)")

세 번째 <li> 요소를 선택합니다.
35

$("li:eq(4)")

다섯 번째 <li> 요소를 선택합니다.
36

$("li:lt(2)")

세 번째 요소 이전에 <li> 요소와 일치하는 모든 요소를 ​​선택합니다. 즉, 처음 두 개의 <li> 요소입니다.
37

$("p:lt(3)")

네 번째 요소 이전에 <p> 요소와 일치하는 모든 요소를 ​​선택합니다. 즉, 처음 세 개의 <p> 요소입니다.
38

$("li:gt(1)")

두 번째 요소 다음에 <li>와 일치하는 모든 요소를 ​​선택합니다.
39

$("p:gt(2)")

세 번째 요소 이후 <p>와 일치하는 모든 요소를 ​​선택합니다.
40

$("div/p")

<div>와 일치하는 요소의 하위 인 <p>와 일치하는 모든 요소를 ​​선택합니다.
41

$("div//code")

<div>와 일치하는 요소의 하위 항목 인 <code>와 일치하는 모든 요소를 ​​선택합니다.
42

$("//p//a")

<p>와 일치하는 요소의 하위 요소 인 <a>와 일치하는 모든 요소를 ​​선택합니다.
43

$("li:first-child")

부모의 첫 번째 자식 인 <li>와 일치하는 모든 요소를 ​​선택합니다.
44

$("li:last-child")

부모의 마지막 자식 인 <li>와 일치하는 모든 요소를 ​​선택합니다.
45

$(":parent")

텍스트를 포함하여 다른 요소의 부모 인 모든 요소를 ​​선택합니다.
46

$("li:contains(second)")

second 텍스트를 포함하는 <li>와 일치하는 모든 요소를 ​​선택합니다.

HTML / XML 요소와 함께 위의 모든 선택기를 일반적인 방식으로 사용할 수 있습니다. 예를 들어 선택자$("li:first") <li> 요소에서 작동합니다. $("p:first") <p> 요소에서도 작동합니다.

DOM 요소와 관련하여 조작 할 수있는 가장 기본적인 구성 요소 중 일부는 해당 요소에 할당 된 속성과 속성입니다.

이러한 속성의 대부분은 JavaScript를 통해 DOM 노드 속성으로 사용할 수 있습니다. 더 일반적인 속성 중 일부는-

  • className
  • tagName
  • id
  • href
  • title
  • rel
  • src

이미지 요소에 대한 다음 HTML 마크 업을 고려하십시오.

<img id = "imageid" src = "image.gif" alt = "Image" class = "myclass" 
   title = "This is an image"/>

이 요소의 마크 업에서 태그 이름은 img이고 id, src, alt, class 및 title의 마크 업은 요소의 속성을 나타내며 각 요소는 이름과 값으로 구성됩니다.

jQuery는 요소의 속성을 쉽게 조작 할 수있는 수단을 제공하고 요소에 대한 액세스를 제공하여 속성을 변경할 수도 있습니다.

속성 값 가져 오기

그만큼 attr() 메서드는 일치 된 집합의 첫 번째 요소에서 속성 값을 가져 오거나 일치하는 모든 요소에 속성 값을 설정하는 데 사용할 수 있습니다.

예

다음은 <em> 태그의 제목 속성을 가져오고 동일한 값으로 <div id = "divid"> 값을 설정하는 간단한 예입니다.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { var title = $("em").attr("title");
            $("#divid").text(title);
         });
      </script>
   </head>
	
   <body>
      <div>
         <em title = "Bold and Brave">This is first paragraph.</em>
         <p id = "myid">This is second paragraph.</p>
         <div id = "divid"></div>
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

속성 값 설정

그만큼 attr(name, value) 메서드는 전달 된 값을 사용하여 래핑 된 집합의 모든 요소에 명명 된 속성을 설정하는 데 사용할 수 있습니다.

예

다음은 설정하는 간단한 예입니다. src 정확한 위치에 이미지 태그의 속성-

<html>
   <head>
      <title>The jQuery Example</title>
      <base href="https://www.tutorialspoint.com" />
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#myimg").attr("src", "/jquery/images/jquery.jpg");
         });
      </script>
   </head>
	
   <body>
      <div>
         <img id = "myimg" src = "/images/jquery.jpg" alt = "Sample image" />
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

스타일 적용

그만큼 addClass( classes )메서드를 사용하여 일치하는 모든 요소에 정의 된 스타일 시트를 적용 할 수 있습니다. 공백으로 구분 된 여러 클래스를 지정할 수 있습니다.

예

다음은 설정하는 간단한 예입니다. class para <p> 태그의 속성 −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("em").addClass("selected"); $("#myid").addClass("highlight");
         });
      </script>
		
      <style>
         .selected { color:red; }
         .highlight { background:yellow; }
      </style>	
   </head>
	
   <body>
      <em title = "Bold and Brave">This is first paragraph.</em>
      <p id = "myid">This is second paragraph.</p>
   </body>
</html>

이것은 다음 결과를 생성합니다-

속성 방법

다음 표는 속성과 속성을 조작하는 데 사용할 수있는 몇 가지 유용한 방법을 나열합니다.

Sr. 아니. 방법 및 설명
1 attr (속성)

키 / 값 개체를 일치하는 모든 요소의 속성으로 설정합니다.
2 attr (키, fn)

일치하는 모든 요소에서 단일 속성을 계산 된 값으로 설정합니다.
삼 removeAttr (이름)

일치하는 각 요소에서 속성을 제거하십시오.
4 hasClass (클래스)

지정된 클래스가 일치하는 요소 집합 중 하나 이상에 있으면 true를 반환합니다.
5 removeClass (클래스)

일치하는 요소 집합에서 모든 또는 지정된 클래스를 제거합니다.
6 toggleClass (클래스)

지정된 클래스가없는 경우 추가하고 지정된 클래스가있는 경우 제거합니다.
7 html ()

일치하는 첫 번째 요소의 html 내용 (innerHTML)을 가져옵니다.
8 html (발)

일치하는 모든 요소의 HTML 콘텐츠를 설정합니다.
9 텍스트 ()

일치하는 모든 요소의 결합 된 텍스트 콘텐츠를 가져옵니다.
10 텍스트 (발)

일치하는 모든 요소의 텍스트 내용을 설정합니다.
11 발 ()

첫 번째로 일치하는 요소의 입력 값을 가져옵니다.
12 발 (발)

<input>에서 호출되면 일치하는 모든 요소의 값 속성을 설정하지만 전달 된 <option> 값으로 <select>에서 호출되면 전달 된 옵션이 선택되고 체크 박스 또는 라디오 박스에서 호출되면 전달 된 옵션이 선택됩니다. 일치하는 모든 확인란과 radiobox가 선택됩니다.

예

위의 구문 및 예제와 유사하게 다음 예제는 다양한 상황에서 다양한 속성 메소드를 사용하는 방법을 이해하게합니다

Sr. 아니. 선택기 및 설명
1

$("#myID").attr("custom")

이것은 ID myID와 일치하는 첫 번째 요소에 대해 custom 속성 값을 리턴합니다 .
2

$("img").attr("alt", "Sample Image")

이것은 alt 모든 이미지의 속성을 새 값 "Sample Image"로 설정합니다.
삼

$("input").attr({ value: "", title: "Please enter a value" });

모든 <input> 요소의 값을 빈 문자열로 설정하고 The jQuery Example을 문자열 Please enter a value 로 설정 합니다 .
4

$("a[href^=https://]").attr("target","_blank")

https : //로 시작하는 href 속성이있는 모든 링크를 선택 하고 대상 속성을 _blank로 설정합니다 .
5

$("a").removeAttr("target")

이것은 모든 링크의 대상 속성을 제거 합니다.
6

$("form").submit(function() {$(":submit",this).attr("disabled", "disabled");});

제출 버튼을 클릭하는 동안 비활성화 된 속성을 "비활성화 된"값으로 수정합니다.
7

$("p:last").hasClass("selected")

마지막 <p> 태그에 선택된 관련 클래스가 있으면 true를 반환합니다 .
8

$("p").text()

일치하는 모든 <p> 요소의 결합 된 텍스트 콘텐츠가 포함 된 문자열을 반환합니다.
9

$("p").text("<i>Hello World</i>")

이렇게하면 "<I> Hello World </ I>"가 일치하는 <p> 요소의 텍스트 콘텐츠로 설정됩니다.
10

$("p").html()

일치하는 모든 단락의 HTML 콘텐츠를 반환합니다.
11

$("div").html("Hello World")

그러면 일치하는 모든 <div>의 HTML 콘텐츠가 Hello World로 설정 됩니다.
12

$("input:checkbox:checked").val()

선택된 확인란에서 첫 번째 값을 가져옵니다.
13

$("input:radio[name=bar]:checked").val()

라디오 버튼 세트에서 첫 번째 값을 가져옵니다.
14

$("button").val("Hello")

일치하는 모든 요소 <button>의 값 속성을 설정합니다.
15

$("input").val("on")

이것은 값이 "on"인 모든 라디오 또는 확인란 버튼을 확인합니다.
16

$("select").val("Orange")

오렌지, 망고 및 바나나 옵션이있는 드롭 다운 상자에서 오렌지 옵션을 선택합니다.
17

$("select").val("Orange", "Mango")

그러면 오렌지, 망고 및 바나나 옵션이있는 드롭 다운 상자에서 오렌지 및 망고 옵션이 선택됩니다.

jQuery는 문서의 요소를 순차적으로 선택하는 것뿐만 아니라 무작위로 선택할 수 있도록 다양한 DOM 순회 방법을 제공하는 매우 강력한 도구입니다. 대부분의 DOM Traversal 메소드는 jQuery 객체를 수정하지 않으며 주어진 조건에 따라 문서에서 요소를 필터링하는 데 사용됩니다.

색인으로 요소 찾기

다음 HTML 내용이있는 간단한 문서를 고려하십시오.

<html>
   <head>
      <title>The JQuery Example</title>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

  • 모든 목록 위에는 자체 색인이 있으며 다음을 사용하여 직접 찾을 수 있습니다. eq(index) 아래 예와 같이 방법.

  • 모든 자식 요소는 0부터 인덱스를 시작하므로 목록 항목 2 는 다음을 사용하여 액세스됩니다.$("li").eq(1) 등등.

예

다음은 두 번째 목록 항목에 색상을 추가하는 간단한 예입니다.

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

요소 필터링

그만큼 filter( selector )메서드를 사용하여 지정된 선택기와 일치하지 않는 일치하는 요소 집합에서 모든 요소를 ​​필터링 할 수 있습니다. 선택은 어떤 선택 구문을 사용하여 기록 할 수 있습니다.

예

다음은 중산층과 관련된 목록에 색상을 적용하는 간단한 예입니다.

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").filter(".middle").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <div>
         <ul>
            <li class = "top">list item 1</li>
            <li class = "top">list item 2</li>
            <li class = "middle">list item 3</li>
            <li class = "middle">list item 4</li>
            <li class = "bottom">list item 5</li>
            <li class = "bottom">list item 6</li>
         </ul>
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

하위 요소 찾기

그만큼 find( selector )메소드를 사용하여 특정 유형의 요소의 모든 하위 요소를 찾을 수 있습니다. 선택은 어떤 선택 구문을 사용하여 기록 할 수 있습니다.

예

다음은 다른 <p> 요소 내에서 사용할 수있는 모든 <span> 요소를 선택하는 예입니다.

<html>
   <head>
      <title>The JQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("p").find("span").addClass("selected");
         });
      </script>
		
      <style>
         .selected { color:red; }
      </style>
   </head>
	
   <body>
      <p>This is 1st paragraph and <span>THIS IS RED</span></p>
      <p>This is 2nd paragraph and <span>THIS IS ALSO RED</span></p>
   </body>
</html>

이것은 다음 결과를 생성합니다-

JQuery DOM 필터 메서드

다음 표는 DOM 요소 목록에서 다양한 요소를 필터링하는 데 사용할 수있는 유용한 방법을 나열합니다.

Sr. 아니. 방법 및 설명
1 eq (인덱스)

일치하는 요소 집합을 단일 요소로 줄입니다.
2 필터 (선택기)

지정된 선택기와 일치하지 않는 일치하는 요소 집합에서 모든 요소를 ​​제거합니다.
삼 필터 (fn)

지정된 함수와 일치하지 않는 일치하는 요소 집합에서 모든 요소를 ​​제거합니다.
4 is (선택자)

표현식에 대해 현재 선택을 확인하고 선택한 요소 중 하나 이상이 주어진 선택기에 맞는 경우 true를 반환합니다.
5 지도 (콜백)

jQuery 객체의 요소 집합을 jQuery 배열의 다른 값 집합 (요소를 포함하거나 포함하지 않을 수 있음)으로 변환합니다.
6 not (선택자)

일치하는 요소 집합에서 지정된 선택기와 일치하는 요소를 제거합니다.
7 슬라이스 (시작, [끝])

일치하는 요소의 하위 집합을 선택합니다.

JQuery DOM 탐색 방법

다음 표는 DOM에서 다양한 요소를 찾는 데 사용할 수있는 다른 유용한 방법을 나열합니다.

Sr. 아니. 방법 및 설명
1 추가 (선택자)

주어진 선택자와 일치하는 더 많은 요소를 일치하는 요소 집합에 추가합니다.
2 andSelf ()

현재 선택에 이전 선택을 추가합니다.
삼 children ([선택기])

일치하는 각 요소 집합의 고유 한 직계 자식을 모두 포함하는 요소 집합을 가져옵니다.
4 가장 가까운 (선택자)

지정된 선택기와 일치하는 가장 가까운 부모 요소 (시작 요소 포함)를 포함하는 요소 집합을 가져옵니다.
5 내용 ()

일치하는 요소 (텍스트 노드 포함) 또는 콘텐츠 문서 (요소가 iframe 인 경우) 내에서 모든 하위 노드를 찾습니다.
6 끝 ()

가장 최근의 '파괴적'작업을 되돌려 일치하는 요소 집합을 이전 상태로 변경합니다.
7 찾기 (선택기)

지정된 선택자와 일치하는 하위 요소를 검색합니다.
8 다음 ([선택기])

주어진 요소 집합 각각의 고유 한 다음 형제를 포함하는 요소 집합을 가져옵니다.
9 nextAll ([선택기])

현재 요소 뒤의 모든 형제 요소를 찾습니다.
10 offsetParent ()

일치하는 첫 번째 요소의 위치가 지정된 부모가있는 jQuery 컬렉션을 반환합니다.
11 부모 ([선택기])

요소의 직접 부모를 가져옵니다. 요소 집합에서 호출되면 parent는 고유 한 직접 상위 요소 집합을 반환합니다.
12 부모 ([선택기])

일치하는 요소 집합의 고유 조상을 포함하는 요소 집합을 가져옵니다 (루트 요소 제외).
13 prev ([선택기])

일치하는 각 요소 집합의 고유 한 이전 형제를 포함하는 요소 집합을 가져옵니다.
14 prevAll ([선택기])

현재 요소 앞에있는 모든 형제 요소를 찾습니다.
15 형제 ([선택기])

일치하는 각 요소 집합의 모든 고유 형제를 포함하는 요소 집합을 가져옵니다.

jQuery 라이브러리는 World Wide Web Consortium 사이트에 설명 된대로 CSS (Cascading Style Sheet) 사양 1 ~ 3에 포함 된 거의 모든 선택기를 지원합니다.

JQuery 라이브러리를 사용하는 개발자는 브라우저에 JavaScript가 활성화되어있는 한 브라우저와 버전에 대한 걱정없이 웹 사이트를 향상시킬 수 있습니다.

대부분의 JQuery CSS 메소드는 jQuery 객체의 내용을 수정하지 않으며 DOM 요소에 CSS 속성을 적용하는 데 사용됩니다.

CSS 속성 적용

JQuery 메서드를 사용하여 CSS 속성을 적용하는 것은 매우 간단합니다. css( PropertyName, PropertyValue ).

방법의 구문은 다음과 같습니다.

selector.css( PropertyName, PropertyValue );

여기에서 PropertyName 을 자바 스크립트 문자열로 전달할 수 있으며 해당 값에 따라 PropertyValue 는 문자열 또는 정수일 수 있습니다.

예

다음은 두 번째 목록 항목에 글꼴 색상을 추가하는 예입니다.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css("color", "red");
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

여러 CSS 속성 적용

단일 JQuery 메서드를 사용하여 여러 CSS 속성을 적용 할 수 있습니다. CSS( {key1:val1, key2:val2....). 단일 호출에서 원하는만큼 속성을 적용 할 수 있습니다.

방법의 구문은 다음과 같습니다.

selector.css( {key1:val1, key2:val2....keyN:valN})

여기에서 위에서 설명한대로 key를 property로, val을 값으로 전달할 수 있습니다.

예

다음은 두 번째 목록 항목에 글꼴 색상과 배경색을 추가하는 예제입니다.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("li").eq(2).css({"color":"red", "background-color":"green"});
         });
      </script>
   </head>
	
   <body>
      <div>
         <ul>
            <li>list item 1</li>
            <li>list item 2</li>
            <li>list item 3</li>
            <li>list item 4</li>
            <li>list item 5</li>
            <li>list item 6</li>
         </ul>
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

요소 너비 및 높이 설정

그만큼 width( val ) 과 height( val ) 메서드는 모든 요소의 너비와 높이를 각각 설정하는 데 사용할 수 있습니다.

예

다음은 첫 번째 분할 요소의 너비를 설정하는 간단한 예입니다. 나머지 요소는 스타일 시트에 의해 설정된 너비를 갖습니다.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div:first").width(100); $("div:first").css("background-color", "blue");
         });
      </script>
		
      <style>
         div { 
            width:70px; height:50px; float:left; 
            margin:5px; background:red; cursor:pointer; 
         }
      </style>
   </head>
	
   <body>
      <div></div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
      <div>d</div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

JQuery CSS 메서드

다음 표에는 CSS 속성을 사용하는 데 사용할 수있는 모든 방법이 나열되어 있습니다.

Sr. 아니. 방법 및 설명
1 css (이름)

첫 번째로 일치하는 요소에 대한 스타일 속성을 반환합니다.
2 css (이름, 값)

일치하는 모든 요소의 값으로 단일 스타일 속성을 설정합니다.
삼 css (속성)

일치하는 모든 요소에 대한 스타일 속성으로 키 / 값 개체를 설정합니다.
4 높이 (발)

일치하는 모든 요소의 CSS 높이를 설정합니다.
5 높이 ()

첫 번째 일치 요소의 현재 계산 된 픽셀, 높이를 가져옵니다.
6 innerHeight ()

일치하는 첫 번째 요소의 내부 높이 (테두리 제외 및 패딩 포함)를 가져옵니다.
7 innerWidth ()

일치하는 첫 번째 요소의 내부 너비 (테두리 제외 및 안쪽 여백 포함)를 가져옵니다.
8 오프셋 ()

문서를 기준으로 일치하는 첫 번째 요소의 현재 오프셋 (픽셀)을 가져옵니다.
9 offsetParent ()

일치하는 첫 번째 요소의 위치가 지정된 부모가있는 jQuery 컬렉션을 반환합니다.
10 outerHeight ([여백])

일치하는 첫 번째 요소의 외부 높이 (기본적으로 테두리 및 안쪽 여백 포함)를 가져옵니다.
11 outerWidth ([여백])

일치하는 첫 번째 요소의 외부 너비 (기본적으로 테두리 및 패딩 포함)를 가져옵니다.
12 위치 ()

오프셋 부모를 기준으로 요소의 위쪽 및 왼쪽 위치를 가져옵니다.
13 scrollLeft (val)

값이 전달되면 스크롤 왼쪽 오프셋이 일치하는 모든 요소의 해당 값으로 설정됩니다.
14 scrollLeft ()

일치하는 첫 번째 요소의 왼쪽 스크롤 오프셋을 가져옵니다.
15 scrollTop (발)

값이 전달되면 스크롤 상단 오프셋이 일치하는 모든 요소의 해당 값으로 설정됩니다.
16 scrollTop ()

첫 번째로 일치하는 요소의 스크롤 위쪽 오프셋을 가져옵니다.
17 너비 (val)

일치하는 모든 요소의 CSS 너비를 설정합니다.
18 너비 ()

첫 번째 일치 요소의 현재 계산 된 픽셀, 너비를 가져옵니다.

JQuery는 DOM을 효율적으로 조작하는 방법을 제공합니다. 요소의 속성 값을 수정하거나 단락 또는 부서에서 HTML 코드를 추출하기 위해 큰 코드를 작성할 필요가 없습니다.

JQuery는 getter 역할을하는 .attr (), .html () 및 .val ()과 같은 메소드를 제공하여 나중에 사용하기 위해 DOM 요소에서 정보를 검색합니다.

콘텐츠 조작

그만큼 html( ) 메소드는 첫 번째로 일치하는 요소의 html 내용 (innerHTML)을 가져옵니다.

방법의 구문은 다음과 같습니다.

selector.html( )

예

다음은 .html () 및 .text (val) 메소드를 사용하는 예제입니다. 여기서 .html ()은 객체에서 HTML 내용을 검색 한 다음 .text (val) 메소드는 전달 된 매개 변수를 사용하여 객체의 값을 설정합니다.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function () {
               var content = $(this).html(); $("#result").text( content );
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

DOM 요소 교체

완전한 DOM 요소를 지정된 HTML 또는 DOM 요소로 바꿀 수 있습니다. 그만큼replaceWith( content ) 방법은이 목적에 아주 잘 부합합니다

방법의 구문은 다음과 같습니다.

selector.replaceWith( content )

여기 콘텐츠는 원래 요소 대신 원하는 내용입니다. HTML 또는 간단한 텍스트 일 ​​수 있습니다.

예

다음은 분할 요소를 "<h1> JQuery is Great </ h1>"로 대체하는 예입니다.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function () {
               $(this).replaceWith("<h1>JQuery is Great</h1>");
            });
         });
      </script>
		
      <style>
         #division{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on the square below:</p>
      <span id = "result"> </span>
		
      <div id = "division" style = "background-color:blue;">
         This is Blue Square!!
      </div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

DOM 요소 제거

문서에서 하나 이상의 DOM 요소를 제거하려는 상황이있을 수 있습니다. JQuery는 상황을 처리하는 두 가지 방법을 제공합니다.

그만큼 empty( ) 메서드는 일치하는 요소 집합에서 모든 자식 노드를 제거합니다. remove( expr ) 메소드는 DOM에서 일치하는 모든 요소를 ​​제거합니다.

방법의 구문은 다음과 같습니다.

selector.remove( [ expr ])

or 

selector.empty( )

선택적 매개 변수 expr 을 전달 하여 제거 할 요소 세트를 필터링 할 수 있습니다.

예

다음은 요소가 클릭되는 즉시 제거되는 예입니다.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("div").click(function () { $(this).remove( );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

DOM 요소 삽입

기존 문서에 새 하나 이상의 DOM 요소를 삽입하려는 상황이있을 수 있습니다. JQuery는 다양한 위치에 요소를 삽입하는 다양한 방법을 제공합니다.

그만큼 after( content ) 메소드는 일치하는 각 요소 뒤에 내용을 삽입합니다. before( content ) 메서드는 일치하는 각 요소 앞에 콘텐츠를 삽입합니다.

방법의 구문은 다음과 같습니다.

selector.after( content )

or

selector.before( content )

여기에 삽입하려는 내용이 있습니다. HTML 또는 간단한 텍스트 일 ​​수 있습니다.

예

다음은 클릭 한 요소 바로 앞에 <div> 요소가 삽입되는 예입니다.

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("div").click(function () {
               $(this).before('<div class="div"></div>' );
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below:</p>
      <span id = "result"> </span>
		
      <div class = "div" style = "background-color:blue;"></div>
      <div class = "div" style = "background-color:green;"></div>
      <div class = "div" style = "background-color:red;"></div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

DOM 조작 방법

다음 표는 DOM 요소를 조작하는 데 사용할 수있는 모든 방법을 나열합니다.

Sr. 아니. 방법 및 설명
1 이후 (내용)

일치하는 각 요소 뒤에 콘텐츠를 삽입합니다.
2 추가 (내용)

일치하는 모든 요소의 내부에 콘텐츠를 추가합니다.
삼 appendTo (선택자)

일치하는 모든 요소를 ​​지정된 다른 요소 세트에 추가합니다.
4 이전 (내용)

일치하는 각 요소 앞에 콘텐츠를 삽입합니다.
5 클론 (bool)

일치하는 DOM 요소와 모든 이벤트 핸들러를 복제하고 복제를 선택합니다.
6 클론 ()

일치하는 DOM 요소를 복제하고 복제를 선택합니다.
7 비어 있음 ()

일치하는 요소 집합에서 모든 자식 노드를 제거합니다.
8 html (발)

일치하는 모든 요소의 HTML 콘텐츠를 설정합니다.
9 html ()

일치하는 첫 번째 요소의 html 내용 (innerHTML)을 가져옵니다.
10 insertAfter (선택자)

일치하는 모든 요소를 ​​지정된 다른 요소 집합 뒤에 삽입합니다.
11 insertBefore (선택자)

일치하는 모든 요소를 ​​지정된 다른 요소 집합 앞에 삽입합니다.
12 prepend (내용)

일치하는 모든 요소의 내부에 콘텐츠를 추가합니다.
13 prependTo (선택자)

일치하는 모든 요소를 ​​지정된 다른 요소 집합 앞에 추가합니다.
14 제거 (expr)

DOM에서 일치하는 모든 요소를 ​​제거합니다.
15 replaceAll (선택자)

지정된 선택기와 일치하는 요소를 일치하는 요소로 바꿉니다.
16 replaceWith (내용)

일치하는 모든 요소를 ​​지정된 HTML 또는 DOM 요소로 바꿉니다.
17 텍스트 (발)

일치하는 모든 요소의 텍스트 내용을 설정합니다.
18 텍스트 ()

일치하는 모든 요소의 결합 된 텍스트 콘텐츠를 가져옵니다.
19 랩 (elem)

일치하는 각 요소를 지정된 요소로 래핑합니다.
20 랩 (html)

일치하는 각 요소를 지정된 HTML 콘텐츠로 래핑합니다.
21 wrapAll (elem)

일치하는 집합의 모든 요소를 ​​단일 래퍼 요소로 래핑합니다.
22 wrapAll (html)

일치하는 집합의 모든 요소를 ​​단일 래퍼 요소로 래핑합니다.
23 wrapInner (elem)

일치하는 각 요소 (텍스트 노드 포함)의 내부 자식 콘텐츠를 DOM 요소로 래핑합니다.
24 wrapInner (html)

일치하는 각 요소 (텍스트 노드 포함)의 내부 자식 콘텐츠를 HTML 구조로 래핑합니다.

이벤트를 사용하여 동적 웹 페이지를 만들 수 있습니다. 이벤트는 웹 응용 프로그램에서 감지 할 수있는 작업입니다.

다음은 예제 이벤트입니다-

  • 마우스 클릭
  • 웹 페이지 로딩
  • 요소 위로 마우스 가져 가기
  • HTML 양식 제출
  • 키보드 등의 키 입력

이러한 이벤트가 트리거되면 사용자 지정 함수를 사용하여 이벤트로 원하는 작업을 거의 수행 할 수 있습니다. 이러한 사용자 지정 함수는 이벤트 처리기를 호출합니다.

바인딩 이벤트 핸들러

jQuery 이벤트 모델을 사용하여 DOM 요소에 이벤트 핸들러를 설정할 수 있습니다. bind() 다음과 같이 방법-

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Hi there!');
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

이 코드는 나누기 요소가 클릭 이벤트에 응답하도록합니다. 이후 사용자가이 부서 내부를 클릭하면 경고가 표시됩니다.

이것은 다음 결과를 생성합니다-

bind () 명령의 전체 구문은 다음과 같습니다.

selector.bind( eventType[, eventData], handler)

다음은 매개 변수에 대한 설명입니다.

  • eventType− 클릭 또는 제출과 같은 JavaScript 이벤트 유형을 포함하는 문자열. 이벤트 유형의 전체 목록은 다음 섹션을 참조하십시오.

  • eventData − 이것은 선택적 매개 변수이며 이벤트 핸들러로 전달 될 데이터 맵입니다.

  • handler − 이벤트가 발생할 때마다 실행되는 기능.

이벤트 처리기 제거

일반적으로 이벤트 핸들러가 설정되면 페이지의 남은 수명 동안 계속 유효합니다. 이벤트 핸들러를 제거하고 싶을 때 필요할 수 있습니다.

jQuery는 unbind()종료 이벤트 핸들러를 제거하는 명령. unbind ()의 구문은 다음과 같습니다.

selector.unbind(eventType, handler)

or 

selector.unbind(eventType)

다음은 매개 변수에 대한 설명입니다.

  • eventType− 클릭 또는 제출과 같은 JavaScript 이벤트 유형을 포함하는 문자열. 이벤트 유형의 전체 목록은 다음 섹션을 참조하십시오.

  • handler − 제공된 경우 제거 할 특정 리스너를 식별합니다.

이벤트 유형

Sr. 아니. 이벤트 유형 및 설명
1

blur

요소가 포커스를 잃을 때 발생합니다.
2

change

요소가 변경 될 때 발생합니다.
삼

click

마우스를 클릭 할 때 발생합니다.
4

dblclick

마우스를 두 번 클릭하면 발생합니다.
5

error

로드 또는 언로드 등에서 오류가있을 때 발생합니다.
6

focus

요소가 포커스를 받으면 발생합니다.
7

keydown

키를 누를 때 발생합니다.
8

keypress

키를 눌렀다 놓을 때 발생합니다.
9

keyup

키를 놓을 때 발생합니다.
10

load

문서가로드 될 때 발생합니다.
11

mousedown

마우스 단추를 누를 때 발생합니다.
12

mouseenter

마우스가 요소 영역에 들어갈 때 발생합니다.
13

mouseleave

마우스가 요소 영역을 벗어날 때 발생합니다.
14

mousemove

마우스 포인터가 움직일 때 발생합니다.
15

mouseout

마우스 포인터가 요소 밖으로 이동할 때 발생합니다.
16

mouseover

마우스 포인터가 요소 위로 이동할 때 발생합니다.
17

mouseup

마우스 단추를 놓을 때 발생합니다.
18

resize

창 크기를 조정할 때 발생합니다.
19

scroll

창이 스크롤 될 때 발생합니다.
20

select

텍스트를 선택하면 발생합니다.
21

submit

양식이 제출 될 때 발생합니다.
22

unload

문서가 언로드 될 때 발생합니다.

이벤트 객체

콜백 함수는 단일 매개 변수를 사용합니다. 핸들러가 호출되면 JavaScript 이벤트 객체가 전달됩니다.

이벤트 객체는 종종 불필요하고 매개 변수가 생략됩니다. 일반적으로 핸들러가 트리거 될 때 수행해야하는 작업을 정확히 알기 위해 핸들러가 바인드 될 때 충분한 컨텍스트를 사용할 수 있지만 액세스해야하는 특정 속성이 있습니다.

이벤트 속성

Sr. 아니. 속성 및 설명
1

altKey

이벤트가 트리거 될 때 Alt 키를 눌렀 으면 true로 설정하고 그렇지 않으면 false로 설정합니다. Alt 키는 대부분의 Mac 키보드에서 Option으로 표시됩니다.
2

ctrlKey

이벤트가 트리거 될 때 Ctrl 키를 눌렀 으면 true로 설정하고 그렇지 않으면 false로 설정합니다.
삼

data

핸들러가 설정 될 때 bind () 명령에 두 번째 매개 변수로 전달 된 값 (있는 경우).
4

keyCode

keyup 및 keydown 이벤트의 경우 누른 키를 반환합니다.
5

metaKey

이벤트가 트리거 될 때 Meta 키를 눌렀 으면 true로 설정하고 그렇지 않으면 false로 설정합니다. Meta 키는 PC의 경우 Ctrl 키이고 Mac의 경우 Command 키입니다.
6

pageX

마우스 이벤트의 경우 페이지 원점에서 상대적인 이벤트의 수평 좌표를 지정합니다.
7

pageY

마우스 이벤트의 경우 페이지 원점에서 상대적인 이벤트의 수직 좌표를 지정합니다.
8

relatedTarget

일부 마우스 이벤트의 경우 이벤트가 트리거 될 때 커서가 왼쪽 또는 입력 한 요소를 식별합니다.
9

screenX

마우스 이벤트의 경우 화면 원점을 기준으로 이벤트의 수평 좌표를 지정합니다.
10

screenY

마우스 이벤트의 경우 화면 원점을 기준으로 이벤트의 수직 좌표를 지정합니다.
11

shiftKey

이벤트가 트리거 될 때 Shift 키를 눌렀 으면 true로 설정하고 그렇지 않으면 false로 설정합니다.
12

target

이벤트가 트리거 된 요소를 식별합니다.
13

timeStamp

이벤트가 생성 된 타임 스탬프 (밀리 초)입니다.
14

type

모든 이벤트에 대해 트리거 된 이벤트 유형 (예 : 클릭)을 지정합니다.
15

which

키보드 이벤트의 경우 이벤트를 발생시킨 키의 숫자 코드를 지정하고 마우스 이벤트의 경우 눌린 버튼을 지정합니다 (왼쪽은 1, 중간은 2, 오른쪽은 3).

 
<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $('div').bind('click', function( event ){
               alert('Event type is ' + event.type);
               alert('pageX : ' + event.pageX);
               alert('pageY : ' + event.pageY);
               alert('Target : ' + event.target.innerHTML);
            });
         });
      </script>
		
      <style>
         .div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
      </style>
   </head>
	
   <body>
      <p>Click on any square below to see the result:</p>
		
      <div class = "div" style = "background-color:blue;">ONE</div>
      <div class = "div" style = "background-color:green;">TWO</div>
      <div class = "div" style = "background-color:red;">THREE</div>
   </body>
</html>

이것은 다음 결과를 생성합니다-

이벤트 방법

이벤트 객체에서 호출 할 수있는 메소드 목록이 있습니다.

Sr. 아니. 방법 및 설명
1 preventDefault ()

브라우저가 기본 작업을 실행하지 못하도록합니다.
2 isDefaultPrevented ()

이 이벤트 객체에서 event.preventDefault ()가 호출되었는지 여부를 반환합니다.
삼 stopPropagation ()

부모 요소에 대한 이벤트 버블 링을 중지하여 부모 처리기에서 이벤트 알림을받지 못하도록합니다.
4 isPropagationStopped ()

이 이벤트 객체에서 event.stopPropagation ()이 호출되었는지 여부를 반환합니다.
5 stopImmediatePropagation ()

나머지 핸들러의 실행을 중지합니다.
6 isImmediatePropagationStopped ()

이 이벤트 객체에서 event.stopImmediatePropagation ()이 호출되었는지 여부를 반환합니다.

이벤트 조작 방법

다음 표는 중요한 이벤트 관련 방법을 나열합니다.

Sr. 아니. 방법 및 설명
1 bind (유형, [데이터], fn)

일치하는 각 요소에 대해 하나 이상의 이벤트 (예 : 클릭)에 핸들러를 바인딩합니다. 사용자 지정 이벤트를 바인딩 할 수도 있습니다.
2 off (이벤트 [, 선택기] [, 핸들러 (eventObject)])

이것은 라이브와 반대되는 작업을 수행하며 바인딩 된 라이브 이벤트를 제거합니다.
삼 hover (over, out)

예를 들어 개체에서 마우스를 켜고 끄는 등 호버링을 시뮬레이션합니다.
4 on (이벤트 [, 선택기] [, 데이터], 핸들러)

현재 및 미래의 일치하는 모든 요소에 대해 핸들러를 이벤트 (예 : 클릭)에 바인딩합니다. 사용자 지정 이벤트를 바인딩 할 수도 있습니다.
5 one (유형, [데이터], fn)

핸들러를 하나 이상의 이벤트에 바인딩하여 일치하는 각 요소에 대해 한 번 실행합니다.
6 준비 (fn)

DOM이 순회 및 조작 될 준비가 될 때마다 실행될 함수를 바인딩합니다.
7 트리거 (이벤트, [데이터])

일치하는 모든 요소에서 이벤트를 트리거합니다.
8 triggerHandler (이벤트, [데이터])

요소에 대한 모든 바인딩 된 이벤트 처리기를 트리거합니다.
9 바인딩 해제 ([유형], [fn])

이것은 bind의 반대를 수행하며 일치하는 각 요소에서 바인딩 된 이벤트를 제거합니다.

이벤트 도우미 방법

jQuery는 또한 이벤트를 트리거하여 위에서 언급 한 모든 이벤트 유형을 바인딩하는 데 사용할 수있는 이벤트 도우미 함수 세트를 제공합니다.

트리거 방법

다음은 모든 단락에서 흐림 이벤트를 트리거하는 예입니다.

$("p").blur();

바인딩 방법

다음은 바인딩하는 예입니다. click 모든 <div> 이벤트 −

$("div").click( function () { 
   // do something here
});
Sr. 아니. 방법 및 설명
1

blur( )

일치하는 각 요소의 흐림 이벤트를 트리거합니다.
2

blur( fn )

일치하는 각 요소의 흐림 이벤트에 함수를 바인딩합니다.
삼

change( )

일치하는 각 요소의 변경 이벤트를 트리거합니다.
4

change( fn )

일치하는 각 요소의 변경 이벤트에 함수를 바인딩합니다.
5

click( )

일치하는 각 요소의 클릭 이벤트를 트리거합니다.
6

click( fn )

일치하는 각 요소의 클릭 이벤트에 함수를 바인딩합니다.
7

dblclick( )

일치하는 각 요소의 dblclick 이벤트를 트리거합니다.
8

dblclick( fn )

일치하는 각 요소의 dblclick 이벤트에 함수를 바인드합니다.
9

error( )

일치하는 각 요소의 오류 이벤트를 트리거합니다.
10

error( fn )

일치하는 각 요소의 오류 이벤트에 함수를 바인딩합니다.
11

focus( )

일치하는 각 요소의 포커스 이벤트를 트리거합니다.
12

focus( fn )

일치하는 각 요소의 포커스 이벤트에 함수를 바인딩합니다.
13

keydown( )

일치하는 각 요소의 keydown 이벤트를 트리거합니다.
14

keydown( fn )

일치하는 각 요소의 keydown 이벤트에 함수를 바인딩합니다.
15

keypress( )

일치하는 각 요소의 키 누르기 이벤트를 트리거합니다.
16

keypress( fn )

일치하는 각 요소의 키 누르기 이벤트에 함수를 바인딩합니다.
17

keyup( )

일치하는 각 요소의 키업 이벤트를 트리거합니다.
18

keyup( fn )

일치하는 각 요소의 keyup 이벤트에 함수를 바인딩합니다.
19

load( fn )

일치하는 각 요소의로드 이벤트에 함수를 바인딩합니다.
20

mousedown( fn )

일치하는 각 요소의 mousedown 이벤트에 함수를 바인딩합니다.
21

mouseenter( fn )

일치하는 각 요소의 mouseenter 이벤트에 함수를 바인딩합니다.
22

mouseleave( fn )

일치하는 각 요소의 mouseleave 이벤트에 함수를 바인딩합니다.
23

mousemove( fn )

일치하는 각 요소의 mousemove 이벤트에 함수를 바인딩합니다.
24

mouseout( fn )

일치하는 각 요소의 mouseout 이벤트에 함수를 바인딩합니다.
25

mouseover( fn )

일치하는 각 요소의 mouseover 이벤트에 함수를 바인딩합니다.
26

mouseup( fn )

일치하는 각 요소의 mouseup 이벤트에 함수를 바인딩합니다.
27

resize( fn )

일치하는 각 요소의 크기 조정 이벤트에 함수를 바인딩합니다.
28

scroll( fn )

일치하는 각 요소의 스크롤 이벤트에 함수를 바인딩합니다.
29

select( )

일치하는 각 요소의 선택 이벤트를 트리거합니다.
30

select( fn )

일치하는 각 요소의 선택 이벤트에 함수를 바인딩합니다.
31

submit( )

일치하는 각 요소의 제출 이벤트를 트리거합니다.
32

submit( fn )

일치하는 각 요소의 제출 이벤트에 함수를 바인드하십시오.
33

unload( fn )

일치하는 각 요소의 언로드 이벤트에 함수를 바인딩합니다.

AJAX는 Asynchronous JavaScript 및 XML의 약어이며이 기술은 브라우저 페이지를 새로 고치지 않고도 서버에서 데이터를로드하는 데 도움이됩니다.

AJAX를 처음 사용하는 경우 계속 진행하기 전에 Ajax 자습서 를 살펴 보는 것이 좋습니다 .

JQuery is a great tool which provides a rich set of AJAX methods to develop next generation web application.

Loading Simple Data

This is very easy to load any static or dynamic data using JQuery AJAX. JQuery provides load() method to do the job −

Syntax

Here is the simple syntax for load() method −

[selector].load( URL, [data], [callback] );

Here is the description of all the parameters −

  • URL − The URL of the server-side resource to which the request is sent. It could be a CGI, ASP, JSP, or PHP script which generates data dynamically or out of a database.

  • data − This optional parameter represents an object whose properties are serialized into properly encoded parameters to be passed to the request. If specified, the request is made using the POST method. If omitted, the GET method is used.

  • callback − A callback function invoked after the response data has been loaded into the elements of the matched set. The first parameter passed to this function is the response text received from the server and second parameter is the status code.

Example

Consider the following HTML file with a small JQuery coding −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $("#driver").click(function(event){ $('#stage').load('/jquery/result.html');
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load /jquery/result.html file −</p>
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

Here load() initiates an Ajax request to the specified URL /jquery/result.html file. After loading this file, all the content would be populated inside <div> tagged with ID stage. Assuming, our /jquery/result.html file has just one HTML line −

<h1>THIS IS RESULT...</h1>

When you click the given button, then result.html file gets loaded.

Getting JSON Data

There would be a situation when server would return JSON string against your request. JQuery utility function getJSON() parses the returned JSON string and makes the resulting string available to the callback function as first parameter to take further action.

Syntax

Here is the simple syntax for getJSON() method −

[selector].getJSON( URL, [data], [callback] );

Here is the description of all the parameters −

  • URL − The URL of the server-side resource contacted via the GET method.

  • data − An object whose properties serve as the name/value pairs used to construct a query string to be appended to the URL, or a preformatted and encoded query string.

  • callback − A function invoked when the request completes. The data value resulting from digesting the response body as a JSON string is passed as the first parameter to this callback, and the status as the second.

Example

Consider the following HTML file with a small JQuery coding −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("#driver").click(function(event){
				
               $.getJSON('/jquery/result.json', function(jd) { $('#stage').html('<p> Name: ' + jd.name + '</p>');
                  $('#stage').append('<p>Age : ' + jd.age+ '</p>'); $('#stage').append('<p> Sex: ' + jd.sex+ '</p>');
               });
					
            });
         });
      </script>
   </head>
	
   <body>
      <p>Click on the button to load result.json file −</p>
		
      <div id = "stage" style = "background-color:#eee;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Load Data" />
   </body>
</html>

Here JQuery utility method getJSON() initiates an Ajax request to the specified URL result.json file. After loading this file, all the content would be passed to the callback function which finally would be populated inside <div> tagged with ID stage. Assuming, our result.json file has following json formatted content −

{
   "name": "Zara Ali",
   "age" : "67",
   "sex": "female"
}

When you click the given button, then result.json file gets loaded.

Passing Data to the Server

Many times you collect input from the user and you pass that input to the server for further processing. JQuery AJAX made it easy enough to pass collected data to the server using data parameter of any available Ajax method.

Example

This example demonstrate how can pass user input to a web server script which would send the same result back and we would print it −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("#driver").click(function(event){
               var name = $("#name").val(); $("#stage").load('/jquery/result.php', {"name":name} );
            });
         });
      </script>
   </head>
	
   <body>
      <p>Enter your name and click on the button:</p>
      <input type = "input" id = "name" size = "40" /><br />
		
      <div id = "stage" style = "background-color:cc0;">
         STAGE
      </div>
		
      <input type = "button" id = "driver" value = "Show Result" />
   </body>
</html>

Here is the code written in result.php script −

<?php
   if( $_REQUEST["name"] ){ $name = $_REQUEST['name']; echo "Welcome ". $name;
   }
?>

Now you can enter any text in the given input box and then click "Show Result" button to see what you have entered in the input box.

JQuery AJAX Methods

You have seen basic concept of AJAX using JQuery. Following table lists down all important JQuery AJAX methods which you can use based your programming need −

Sr.No. Methods & Description
1 jQuery.ajax( options )

Load a remote page using an HTTP request.
2 jQuery.ajaxSetup( options )

Setup global settings for AJAX requests.
3 jQuery.get( url, [data], [callback], [type] )

Load a remote page using an HTTP GET request.
4 jQuery.getJSON( url, [data], [callback] )

Load JSON data using an HTTP GET request.
5 jQuery.getScript( url, [callback] )

Loads and executes a JavaScript file using an HTTP GET request.
6 jQuery.post( url, [data], [callback], [type] )

Load a remote page using an HTTP POST request.
7 load( url, [data], [callback] )

Load HTML from a remote file and inject it into the DOM.
8 serialize( )

Serializes a set of input elements into a string of data.
9 serializeArray( )

Serializes all forms and form elements like the .serialize() method but returns a JSON data structure for you to work with.

JQuery AJAX Events

You can call various JQuery methods during the life cycle of AJAX call progress. Based on different events/stages following methods are available −

You can go through all the AJAX Events.

Sr.No. Methods & Description
1 ajaxComplete( callback )

Attach a function to be executed whenever an AJAX request completes.
2 ajaxStart( callback )

Attach a function to be executed whenever an AJAX request begins and there is none already active.
3 ajaxError( callback )

Attach a function to be executed whenever an AJAX request fails.
4 ajaxSend( callback )

Attach a function to be executed before an AJAX request is sent.
5 ajaxStop( callback )

Attach a function to be executed whenever all AJAX requests have ended.
6 ajaxSuccess( callback )

Attach a function to be executed whenever an AJAX request completes successfully.

jQuery provides a trivially simple interface for doing various kind of amazing effects. jQuery methods allow us to quickly apply commonly used effects with a minimum configuration. This tutorial covers all the important jQuery methods to create visual effects.

Showing and Hiding Elements

The commands for showing and hiding elements are pretty much what we would expect − show() to show the elements in a wrapped set and hide() to hide them.

Syntax

Here is the simple syntax for show() method −

[selector].show( speed, [callback] );

Here is the description of all the parameters −

  • speed − A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

  • callback − This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.

Following is the simple syntax for hide() method −

[selector].hide( speed, [callback] );

Here is the description of all the parameters −

  • speed − A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

  • callback − This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.

Example

Consider the following HTML file with a small JQuery coding −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() { $("#show").click(function () {
               $(".mydiv").show( 1000 ); }); $("#hide").click(function () {
               $(".mydiv").hide( 1000 );
            });
				
         });
      </script>
		
      <style>
         .mydiv{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:100px;
         }
      </style>
   </head>
	
   <body>
      <div class = "mydiv">
         This is a SQUARE
      </div>

      <input id = "hide" type = "button" value = "Hide" />   
      <input id = "show" type = "button" value = "Show" />
   </body>
</html>

This will produce following result −

Toggling the Elements

jQuery provides methods to toggle the display state of elements between revealed or hidden. If the element is initially displayed, it will be hidden; if hidden, it will be shown.

Syntax

Here is the simple syntax for one of the toggle() methods −

[selector]..toggle([speed][, callback]);

Here is the description of all the parameters −

  • speed − A string representing one of the three predefined speeds ("slow", "normal", or "fast") or the number of milliseconds to run the animation (e.g. 1000).

  • callback − This optional parameter represents a function to be executed whenever the animation completes; executes once for each element animated against.

Example

We can animate any element, such as a simple <div> containing an image −

<html>
   <head>
      <title>The jQuery Example</title>
      <script type = "text/javascript" 
         src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
      </script>
		
      <script type = "text/javascript" language = "javascript">
         $(document).ready(function() {
            $(".clickme").click(function(event){ $(".target").toggle('slow', function(){
                  $(".log").text('Transition Complete');
               });
            });
         });
      </script>
		
      <style>
         .clickme{ 
            margin:10px;
            padding:12px; 
            border:2px solid #666; 
            width:100px; 
            height:50px;
         }
      </style>
   </head>
	
   <body>
      <div class = "content">
         <div class = "clickme">Click Me</div>
         <div class = "target">
            <img src = "./images/jquery.jpg" alt = "jQuery" />
         </div>
         <div class = "log"></div>
      </div>
   </body>
</html>

This will produce following result −

JQuery Effect Methods

You have seen basic concept of jQuery Effects. Following table lists down all the important methods to create different kind of effects −

Sr.No. Methods & Description
1 animate( params, [duration, easing, callback] )

A function for making custom animations.
2 fadeIn( speed, [callback] )

Fade in all matched elements by adjusting their opacity and firing an optional callback after completion.
3 fadeOut( speed, [callback] )

Fade out all matched elements by adjusting their opacity to 0, then setting display to "none" and firing an optional callback after completion.
4 fadeTo( speed, opacity, callback )

Fade the opacity of all matched elements to a specified opacity and firing an optional callback after completion.
5 hide( )

Hides each of the set of matched elements if they are shown.
6 hide( speed, [callback] )

Hide all matched elements using a graceful animation and firing an optional callback after completion.
7 show( )

Displays each of the set of matched elements if they are hidden.
8 show( speed, [callback] )

Show all matched elements using a graceful animation and firing an optional callback after completion.
9 slideDown( speed, [callback] )

Reveal all matched elements by adjusting their height and firing an optional callback after completion.
10 slideToggle( speed, [callback] )

Toggle the visibility of all matched elements by adjusting their height and firing an optional callback after completion.
11 slideUp( speed, [callback] )

Hide all matched elements by adjusting their height and firing an optional callback after completion.
12 stop( [clearQueue, gotoEnd ])

Stops all the currently running animations on all the specified elements.
13 toggle( )

Toggle displaying each of the set of matched elements.
14 toggle( speed, [callback] )

Toggle displaying each of the set of matched elements using a graceful animation and firing an optional callback after completion.
15 toggle( switch )

Toggle displaying each of the set of matched elements based upon the switch (true shows all elements, false hides all elements).
16 jQuery.fx.off

Globally disable all animations.

UI 라이브러리 기반 효과

이러한 효과를 사용하려면 최신 jQuery UI 라이브러리를 다운로드 할 수 있습니다. jquery-ui-1.11.4.custom.zipjQuery UI 라이브러리에서 가져 오거나 Google CDN을 사용 하여 jQuery 에서 사용한 것과 유사한 방식으로 사용합니다.

우리는 jQuery UI를 사용할 수 있도록 HTML 페이지에서 다음 코드 스 니펫을 사용하여 jQuery UI에 Google CDN을 사용했습니다.

<head>
   <script src = "https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.3/jquery-ui.min.js">
   </script>
</head>
Sr. 아니. 방법 및 설명
1 블라인드

요소를 멀리 숨기거나 눈을 멀게하여 표시합니다.
2 되튐

요소를 수직 또는 수평으로 n 번 바운스합니다.
삼 클립

요소를 세로 또는 가로로 켜거나 끕니다.
4 하락

요소를 떨어 뜨리거나 끌어서 표시합니다.
5 터지다

요소를 여러 조각으로 분해합니다.
6 겹

종이처럼 요소를 접습니다.
7 가장 밝은 부분

정의 된 색상으로 배경을 강조합니다.
8 퍼프

스케일 및 페이드 아웃 애니메이션은 퍼프 효과를 만듭니다.
9 뛰다

요소의 불투명도를 여러 번 펄싱합니다.
10 규모

백분율 요소로 요소를 축소하거나 늘립니다.
11 떨림

요소를 수직 또는 수평으로 n 번 흔 듭니다.
12 크기

지정된 너비와 높이로 요소의 크기를 조정합니다.
13 미끄러지 다

요소를 뷰포트 밖으로 밀어냅니다.
14 이전

요소의 윤곽을 다른 요소로 전송합니다.

상호 작용은 모든 요소에 기본 마우스 기반 동작을 추가 할 수 있습니다. 상호 작용과 함께 사용하면 정렬 가능한 목록, 크기 조정 가능한 요소, 끌어서 놓기 동작을 만들 수 있으며, 상호 작용은 더 복잡한 위젯 및 응용 프로그램을위한 훌륭한 구성 요소가됩니다.

Sr. 아니. 상호 작용 및 설명
1 드래그 가능

모든 DOM 요소에서 드래그 가능한 기능을 활성화합니다.
2 드롭 가능

모든 DOM 요소를 놓을 수 있도록합니다.
삼 크기 조정 가능

모든 DOM 요소의 크기를 조정할 수 있습니다.
4 선택 가능

DOM 요소 (또는 요소 그룹)를 선택할 수 있도록합니다.
5 정렬 가능

DOM 요소 그룹을 정렬 할 수 있도록합니다.

jQuery UI 위젯은 특화된 jQuery 플러그인으로, 플러그인을 사용하여 요소에 동작을 적용 할 수 있습니다. 그러나 플러그인에는 데이터를 요소와 연관시키고, 메소드를 노출하고, 옵션을 기본값과 병합하고, 플러그인의 수명을 제어하는 ​​방법과 같은 일부 내장 기능이 없습니다.

Sr. 아니. 위젯 및 설명
1 아코디언

논리적 섹션으로 분할 된 콘텐츠를 축소 할 수 있습니다.
2 자동 완성

필드에 입력하는 동안 제안을 제공하려면 활성화합니다.
삼 단추

버튼은 제출 유형과 앵커의 입력입니다.
4 날짜 선택기

작은 오버레이로 대화 형 달력을 여는 것입니다.
5 대화

대화 상자는 HTML 페이지에 정보를 표시하는 좋은 방법 중 하나입니다.
6 메뉴

메뉴는 항목 목록을 보여줍니다.
7 진행 표시 줄

진행 정보를 보여줍니다.
8 메뉴 선택

스타일이 가능한 요소 / 요소를 선택할 수 있습니다.
9 슬라이더

기본 슬라이더는 수평이며 마우스 또는 화살표 키를 사용하여 이동할 수있는 단일 핸들이 있습니다.
10 스피너

세트에서 하나의 값을 선택하는 빠른 방법을 제공합니다.
11 탭

논리적 섹션으로 분할 된 콘텐츠간에 교체하는 데 사용됩니다.
12 툴팁

사용자에게 팁을 제공합니다.

Jquery에는 A와 B라는 두 가지 스타일 테마가 있으며 각각 단추, 막대, 콘텐츠 블록 등에 대해 서로 다른 색상이 있습니다.

J 쿼리 테마의 구문은 아래와 같습니다.

<div data-role = "page" data-theme = "a|b">

아래와 같이 간단한 테마 예제-

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
			
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script 
         src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
      </script>
   </head>
	
   <body>
      <div data-role = "page" id = "pageone" data-theme = "a">
        <div data-role = "header">
            <h1>Tutorials Point</h1>
         </div>

         <div data-role = "main" class = "ui-content">
			
            <p>Text link</p>
            <a href = "#">A Standard Text Link</a>
            <a href = "#" class = "ui-btn">Link Button</a>
            <p>A List View:</p>
				
            <ul data-role = "listview" data-autodividers = "true" data-inset = "true">
               <li><a href = "#">Android </a></li>
               <li><a href = "#">IOS</a></li>
            </ul>
				
            <label for = "fullname">Input Field:</label>
            <input type = "text" name = "fullname" id = "fullname" 
               placeholder = "Name..">    
            <label for = "switch">Toggle Switch:</label>
				
            <select name = "switch" id = "switch" data-role = "slider">
               <option value = "on">On</option>
               <option value = "off" selected>Off</option>
            </select>
				
         </div>

         <div data-role = "footer">
            <h1>Tutorials point</h1>
         </div>
      </div>
   </body>
</html>

이것은 다음과 같은 결과를 생성해야합니다-

아래와 같이 간단한 B 테마 예제-

<!DOCTYPE html>
<html>
   <head>
      <meta name = "viewport" content = "width = device-width, initial-scale = 1">
      <link rel = "stylesheet" 
         href = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script src = "https://code.jquery.com/jquery-1.11.3.min.js">
      </script>
      <script 
         src = "https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js">
      </script>
   </head>
	
   <body>
      <div data-role = "page" id = "pageone" data-theme = "b">
        <div data-role = "header">
            <h1>Tutorials Point</h1>
         </div>

         <div data-role = "main" class = "ui-content">
            <p>Text link</p>
            <a href = "#">A Standard Text Link</a>
            <a href = "#" class = "ui-btn">Link Button</a>
            <p>A List View:</p>
				
            <ul data-role = "listview" data-autodividers = "true" data-inset = "true">
               <li><a href = "#">Android </a></li>
               <li><a href = "#">IOS</a></li>
            </ul>
				
            <label for = "fullname">Input Field:</label>
            <input type = "text" name = "fullname" id = "fullname" 
               placeholder = "Name..">    
            <label for = "switch">Toggle Switch:</label>
				
            <select name = "switch" id = "switch" data-role = "slider">
               <option value = "on">On</option>
               <option value = "off" selected>Off</option>
            </select>
				
         </div>

         <div data-role = "footer">
            <h1>Tutorials point</h1>
         </div>
      </div>
   </body>
</html>

이것은 다음과 같은 결과를 생성해야합니다-

Jquery는 $ (네임 스페이스) 형식으로 서버 유틸리티를 제공합니다. 이러한 방법은 프로그래밍 작업을 완료하는 데 도움이됩니다. 유틸리티 방법 중 일부는 다음과 같습니다.

$ .trim ()

$ .trim ()은 선행 및 후행 공백을 제거하는 데 사용됩니다.

$.trim( "    lots of extra whitespace    " );

$ .each ()

$ .each ()는 배열과 객체를 반복하는 데 사용됩니다.

$.each([ "foo", "bar", "baz" ], function( idx, val ) {
   console.log( "element " + idx + " is " + val );
});
 
$.each({ foo: "bar", baz: "bim" }, function( k, v ) {
   console.log( k + " : " + v );
});

.each ()는 선택 항목에 포함 된 요소를 반복하기 위해 선택 항목에서 호출 될 수 있습니다. $ .each ()가 아닌 .each ()는 선택 항목의 요소를 반복하는 데 사용해야합니다.

$ .inArray ()

$ .inArray ()는 배열에서 값의 인덱스를 반환하거나 값이 배열에 없으면 -1을 반환하는 데 사용됩니다.

var myArray = [ 1, 2, 3, 5 ];
 
if ( $.inArray( 4, myArray ) !== -1 ) {
   console.log( "found it!" );
}

$ .extend ()

$ .extend ()는 후속 개체의 속성을 사용하여 첫 번째 개체의 속성을 변경하는 데 사용됩니다.

var firstObject = { foo: "bar", a: "b" };
var secondObject = { foo: "baz" };
 
var newObject = $.extend( firstObject, secondObject );
 
console.log( firstObject.foo ); 
console.log( newObject.foo );

$ .proxy ()

$ .proxy ()는 제공된 범위에서 항상 실행되는 함수를 반환하는 데 사용됩니다. 즉, 전달 된 함수 내에서이 의미를 두 번째 인수로 설정합니다.

var myFunction = function() {
   console.log( this );
};

var myObject = {
   foo: "bar"
};
 
myFunction(); // window
 
var myProxyFunction = $.proxy( myFunction, myObject );
 
myProxyFunction();

$ .browser

$ .browser는 브라우저에 대한 정보를 제공하는 데 사용됩니다.

jQuery.each( jQuery.browser, function( i, val ) {
   $( "<div>" + i + " : <span>" + val + "</span>" )
   .appendTo( document.body );
});

$ .contains ()

$ .contains ()는 두 번째 인수가 제공하는 DOM 요소가 첫 번째 인수가 제공 한 DOM 요소의 하위 요소 인 경우 직계 자식이든 더 깊게 중첩 된 경우 true를 반환하는 데 사용됩니다.

$.contains( document.documentElement, document.body ); $.contains( document.body, document.documentElement );

$ .data ()

$ .data ()는 데이터에 대한 정보를 제공하는 데 사용됩니다.

<html lang = "en">
   <head>
      <title>jQuery.data demo</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      <div>
         The values stored were <span></span>
            and <span></span>
      </div>
 
      <script>
         var div = $( "div" )[ 0 ]; jQuery.data( div, "test", { first: 25, last: "tutorials" }); $( "span:first" ).text( jQuery.data( div, "test" ).first );
         $( "span:last" ).text( jQuery.data( div, "test" ).last );
      </script>
   </body>
</html>

출력은 다음과 같습니다. 

The values stored were 25 and tutorials

$ .fn.extend ()

$ .fn.extend ()는 jQuery 프로토 타입을 확장하는 데 사용됩니다.

<html lang = "en">
   <head>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      <label><input type = "checkbox" name = "android"> 
         Android</label>
      <label><input type = "checkbox" name = "ios"> IOS</label>
 
      <script>
         jQuery.fn.extend({
			
            check: function() {
               return this.each(function() {
                  this.checked = true;
               });
            },
            uncheck: function() {
               return this.each(function() {
                  this.checked = false;
               });
            }
         });
 
         // Use the newly created .check() method
         $( "input[type = 'checkbox']" ).check();
			
      </script>
   </body>
</html>

다음과 같이 출력을 제공합니다.

$ .isWindow ()

$ .isWindow ()는 창을 인식하는 데 사용됩니다.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.isWindow demo</title>
      <script src = "https://code.jquery.com/jquery-1.10.2.js">
      </script>
   </head>
	
   <body>
      Is 'window' a window? <b></b>
 
      <script>
         $( "b" ).append( "" + $.isWindow( window ) );
      </script>
   </body>
</html>

다음과 같이 출력을 제공합니다.

$ .now ()

현재 시간을 나타내는 숫자를 반환합니다.

(new Date).getTime()

$ .isXMLDoc ()

$ .isXMLDoc ()은 파일이 xml인지 여부를 확인합니다.

jQuery.isXMLDoc( document )
jQuery.isXMLDoc( document.body )

$ .globalEval ()

$ .globalEval ()은 javascript를 전역 적으로 실행하는 데 사용됩니다.

function test() {
   jQuery.globalEval( "var newVar = true;" )
}
test();

$ .dequeue ()

$ .dequeue ()는 큐에서 다음 함수를 실행하는 데 사용됩니다.

<!doctype html>
<html lang = "en">
   <head>
      <meta charset = "utf-8">
      <title>jQuery.dequeue demo</title>
		
      <style>
         div {
            margin: 3px;
            width: 50px;
            position: absolute;
            height: 50px;
            left: 10px;
            top: 30px;
            background-color: green;
            border-radius: 50px;
         }
         div.red {
            background-color: blue;
         }
      </style>
		
      <script src = "https://code.jquery.com/jquery-1.10.2.js"></script>
   </head>

   <body>
      <button>Start</button>
      <div></div>
 
      <script>
         $( "button" ).click(function() {
            $( "div" ) .animate({ left: '+ = 400px' }, 2000 ) .animate({ top: '0px' }, 600 ) .queue(function() { $( this ).toggleClass( "red" );
               $.dequeue( this );
            })
				
            .animate({ left:'10px', top:'30px' }, 700 );
         });
      </script>
   </body>
</html>

다음과 같이 출력을 제공합니다.

ja/tutorial
es/tutorial
de/tutorial
fr/tutorial
th/tutorial
pt/tutorial
ru/tutorial
vi/tutorial
it/tutorial
ko/tutorial
tr/tutorial
id/tutorial
pl/tutorial
hi/tutorial
japost
espost
depost
frpost
thpost
ptpost
rupost
vipost
itpost
kopost
trpost
idpost
plpost
hipost

© Copyright 2021 - 2024 | All Rights Reserved