jQuery_jquery와 함께 제공되는 몇 가지 일반적인 메서드 요약

메서드 자체($.each,$.map,$.contains,$ajax)

일반적인 도구 및 방법

(1)$.trim

$.trim 메소드는 문자열의 시작과 끝에서 불필요한 공백을 제거하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

$.trim(' Hello ') // 안녕하세요

(2)$.contains

$.contains 메소드는 DOM 요소(두 번째 매개변수)가 다른 DOM 요소(첫 번째 매개변수)의 하위 요소인지 여부를 나타내는 부울 값을 반환합니다.

코드 복사 코드는 다음과 같습니다.

$.contains(document.documentElement, document.body)
//참
$.contains(document.body, document.documentElement)
// 거짓

(3) $.each, $.map

$.each 메서드는 배열과 객체를 반복한 다음 원래 객체를 반환하는 데 사용됩니다. 데이터 수집과 콜백 함수라는 두 가지 매개변수를 허용합니다.

코드 복사 코드는 다음과 같습니다.

$.each([ 52, 97 ], 함수( 인덱스, 값 ) {
console.log( index ": " value );
});
//0:52
//1:97
var obj = {
p1: "안녕하세요",
p2: "세계"
};
$.each( obj, 함수( 키, 값 ) {
console.log( 키 ": " 값 );
});
// p1: 안녕하세요
// p2: 세계

jQuery 객체 인스턴스에도 각각의 메소드($.fn.each)가 있으며 두 메소드는 비슷한 기능을 가지고 있다는 점에 유의해야 합니다.

$.map 메소드는 배열과 객체를 탐색하는 데에도 사용되지만 새 객체를 반환합니다.

코드 복사 코드는 다음과 같습니다.

var a = ["a", "b", "c", "d", "e"];
a = $.map(a, 함수 (n, i){
return (n.toUpperCase() i);
});
// ["A0", "B1", "C2", "D3", "E4"]

(4)$.inArray

$.inArray 메소드는 배열에서 값의 위치를 ​​반환합니다(0부터 시작). 값이 배열에 없으면 -1이 반환됩니다.

코드 복사 코드는 다음과 같습니다.

var a = [1,2,3,4];
$.inArray(4,a) // 3

(5)$.extend

$.extend 메소드는 여러 개체를 첫 번째 개체로 병합하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

var o1 = {p1:'a',p2:'b'};
var o2 = {p1:'c'};
$.extend(o1,o2);
o1.p1 // "c"

$.extend의 ​​또 다른 용도는 원래 개체를 상속하는 새 개체를 생성하는 것입니다. 이때 첫 번째 매개변수는 빈 객체여야 합니다.

코드 복사 코드는 다음과 같습니다.

var o1 = {p1:'a',p2:'b'};
var o2 = {p1:'c'};
var o = $.extend({},o1,o2);
아
// 객체 {p1: "c", p2: "b"}

기본적으로 확장 메소드에 의해 생성된 객체는 "얕은 복사본"입니다. 즉, 속성이 객체 또는 배열인 경우 객체 또는 배열에 대한 포인터만 생성되고 값은 복사되지 않습니다. "전체 복사"를 원할 경우 확장 메소드의 첫 번째 매개변수에 부울 값 true를 전달할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

var o1 = {p1:['a','b']};
var o2 = $.extend({},o1);
var o3 = $.extend(true,{},o1);
o1.p1[0]='c';
o2.p1 // ["c", "b"]
o3.p1 // ["a", "b"]

위 코드에서 o2는 얕은 복사본이고 o3은 깊은 복사본입니다. 결과적으로 원래 배열의 속성이 변경되면 o2도 그에 따라 변경되지만 o3은 변경되지 않습니다.

(6)$.proxy

$.proxy 메소드는 ECMAScript 5의 바인딩 메소드와 유사합니다. 함수(즉, 이 객체)의 컨텍스트와 매개변수를 바인딩하고 새로운 함수를 반환할 수 있습니다.

jQuery.proxy()의 주요 용도는 컨텍스트 객체를 콜백 함수에 바인딩하는 것입니다.

코드 복사 코드는 다음과 같습니다.

var o = {
유형: "객체",
테스트: 함수(이벤트) {
         console.log(this.type);
}
};
$("#버튼")
.on("click", o.test) // 출력 없음
.on("click", $.proxy(o.test, o)) // 객체

위 코드에서 첫 번째 콜백 함수는 컨텍스트를 바인딩하지 않으므로 결과가 비어 있고 출력이 없습니다. 두 번째 콜백 함수는 컨텍스트를 객체 o에 바인딩하고 결과는 객체입니다.

이 예를 작성하는 또 다른 동등한 방법은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$("#button").on( "click", $.proxy(o, test))

위 코드에서 $.proxy(o, test)는 o의 테스트 메소드를 o에 바인딩한다는 의미입니다.

이 예에서는 프록시 메소드를 작성하는 두 가지 주요 방법이 있음을 보여줍니다.

코드 복사 코드는 다음과 같습니다.

jQuery.proxy(함수, 컨텍스트)
//또는
jQuery.proxy(컨텍스트, 이름)

첫 번째 작성 방법은 함수(function)에 대한 컨텍스트 개체(context)를 지정하는 것이고, 두 번째 작성 방법은 컨텍스트 개체(context)와 해당 메서드 이름 중 하나(name)를 지정하는 것입니다.

또 다른 예를 살펴보세요. 일반적인 상황에서 다음 코드의 this 개체는 클릭 이벤트가 발생하는 DOM 개체를 가리킵니다.

코드 복사 코드는 다음과 같습니다.

$('#myElement').click(function() {
$(this).addClass('aNewClass');
});

콜백 함수가 지연되어 실행되도록 하고 setTimeout 메서드를 사용하려는 경우 setTimeout으로 인해 콜백 함수가 전역 환경에서 실행되고 이것이 전역 개체를 가리키기 때문에 코드가 잘못됩니다.

코드 복사 코드는 다음과 같습니다.

$('#myElement').click(function() {
setTimeout(함수() {
          $(this).addClass('aNewClass');
}, 1000);
});

위 코드에서는 전역 개체 창을 가리키며 오류가 발생합니다.

이때 프록시 메소드를 사용하여 이 객체를 myElement 객체에 바인딩할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$('#myElement').click(function() {
setTimeout($.proxy(function() {
          $(this).addClass('aNewClass')
}, 이), 1000);
});

(7)$.data, $.removeData

$.data 메소드를 사용하여 DOM 노드에 데이터를 저장할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

//데이터 저장
$.data(document.body, "foo", 52 );
//데이터 읽기
$.data(document.body, "foo");
// 모든 데이터 읽기
$.data(document.body);

위 코드는 웹페이지 요소 본문에 키 이름이 "foo"이고 키 값이 52인 키-값 쌍을 저장합니다.

$.removeData 메소드는 $.data 메소드에 저장된 데이터를 제거하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

$.data(div, "test1", "VALUE-1");
$.removeData(div, "test1");

(8)$.parseHTML, $.parseJSON, $.parseXML

$.parseHTML 메소드는 문자열을 DOM 객체로 구문 분석하는 데 사용됩니다.

$.parseJSON 메서드는 기본 JSON.parse()와 유사하게 JSON 문자열을 JavaScript 개체로 구문 분석하는 데 사용됩니다. 그러나 jQuery는 JSON.stringify()와 유사한 메서드를 제공하지 않습니다. 즉, JavaScript 개체를 JSON 개체로 변환하는 메서드를 제공하지 않습니다.

$.parseXML 메소드는 문자열을 XML 객체로 구문 분석하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

var html = $.parseHTML("안녕하세요, 제 이름은 jQuery입니다.");
var obj = $.parseJSON('{"name": "John"}');
var xml = "";
var xmlDoc = $.parseXML(xml);

(9)$.makeArray

$.makeArray 메소드는 유사 배열 객체를 실제 배열로 변환합니다.

코드 복사 코드는 다음과 같습니다.

var a = $.makeArray(document.getElementsByTagName("div"));
(10)$.병합

$.merge 메소드는 하나의 배열(두 번째 매개변수)을 다른 배열(첫 번째 매개변수)에 병합하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

var a1 = [0,1,2];
var a2 = [2,3,4];
$.merge(a1, a2);
a1
// [0, 1, 2, 2, 3, 4]
(11)$.now

$.now 메소드는 1970년 1월 1일 00:00:00 UTC부터 현재 시간에 해당하는 밀리초 수를 반환합니다. 이는 (new Date).getTime()과 동일합니다.

코드 복사 코드는 다음과 같습니다.

$.now()
// 1388212221489

데이터 유형 결정 방법

jQuery는 JavaScript의 기본 typeof 연산자의 단점을 보완하기 위해 데이터 유형을 결정하는 일련의 도구 메서드를 제공합니다. 다음 메소드는 매개변수를 판단하고 부울 값을 반환합니다.

jQuery.isArray(): 배열인지 여부.
jQuery.isEmptyObject(): 빈 객체인지 여부(열거 가능한 속성을 포함하지 않음)
jQuery.isFunction(): 함수인지 여부.
jQuery.isNumeric(): 배열인지 여부.
jQuery.isPlainObject(): 브라우저에서 기본적으로 제공하는 개체 대신 "{}" 또는 "새 개체"를 사용하여 생성된 개체인지 여부.
jQuery.isWindow(): 윈도우 객체인지 여부.
jQuery.isXMLDoc(): DOM 노드가 XML 문서에 있는지 확인합니다.
다음은 몇 가지 예입니다.

코드 복사 코드는 다음과 같습니다.

$.isEmptyObject({}) // true
$.isPlainObject(document.location) // 거짓
$.isWindow(window) // 참
$.isXMLDoc(document.body) // 거짓

위의 메소드 외에도 변수의 데이터 유형을 반환할 수 있는 $.type 메소드도 있습니다. 그 핵심은 Object.prototype.toString 메소드를 사용하여 객체 내부의 [[Class]] 속성을 읽는 것입니다("표준 라이브러리"의 객체 섹션 참조).

코드 복사 코드는 다음과 같습니다.

$.type(/test/) // "정규식"

Ajax 운영

$.ajax

jQuery 객체는 Ajax 작업을 처리하기 위한 Ajax 메서드($.ajax())도 정의합니다. 이 메서드를 호출한 후 브라우저는 서버에 HTTP 요청을 보냅니다.

$.ajax()는 다양한 방법으로 사용될 수 있으며, 가장 일반적인 방법은 객체 매개변수를 제공하는 것입니다.

코드 복사 코드는 다음과 같습니다.

$.ajax({
비동기: 사실,
URL: '/url/to/json',
유형: 'GET',
데이터 : { id : 123 },
데이터 유형: 'json',
시간 초과: 30000,
성공: 성공콜백,
오류: errorCallback,
완료: 완료콜백
})
함수 성공Callback(json) {
$('

').text(json.title).appendTo('body');
}
함수 errorCallback(xhr, status){
console.log('뭔가 잘못되었습니다!');
}
함수 CompleteCallback(xhr, 상태){
console.log('Ajax 요청이 종료되었습니다.');
}

위 코드의 객체 매개변수에는 여러 속성이 있으며, 그 의미는 다음과 같습니다.

async: 이 항목의 기본값은 true입니다. false로 설정되면 동기 요청이 실행된다는 의미입니다.
캐시: 이 항목의 기본값은 true입니다. false로 설정하면 브라우저는 서버에서 반환한 데이터를 캐시하지 않습니다. 브라우저 자체는 POST 요청에 의해 반환된 데이터를 캐시하지 않으므로 false로 설정하더라도 HEAD 및 GET 요청에만 유효합니다.
url: 서버측 URL. 이는 유일한 필수 속성이며 다른 속성은 생략할 수 있습니다.
유형: 서버에 정보를 보내는 데 사용되는 HTTP 동사입니다. 기본값은 GET입니다. 다른 동사에는 POST, PUT 및 DELETE가 포함됩니다.
dataType: 서버에서 요청하는 데이터 유형으로 text, html, script, json, jsonp, xml로 설정할 수 있습니다.
data: 서버로 전송되는 데이터. GET 방식을 사용하는 경우 이 항목은 쿼리 문자열로 변환되어 URL 끝에 추가됩니다.
성공: 요청이 성공했을 때의 콜백 함수입니다. 함수 매개변수는 서버에서 반환한 데이터, 상태 정보, 요청을 발행한 원본 개체입니다.
timeout: 대기할 최대 시간(밀리초)입니다. 이 시간 이후에도 요청이 반환되지 않으면 요청 상태가 자동으로 실패로 변경됩니다.
오류: 요청이 실패할 때의 콜백 함수입니다. 함수 매개변수는 요청을 발행한 원래 객체와 반환된 상태 정보입니다.
완료(complete): 요청의 성공 여부에 관계없이 실행되는 콜백 함수입니다. 함수 매개변수는 요청을 발행한 원래 객체와 반환된 상태 정보입니다.
이들 매개변수 중 url은 독립적일 수 있으며 ajax 메소드의 첫 번째 매개변수로 사용될 수 있습니다. 즉, 위의 코드는 다음과 같이 작성할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

$.ajax('/url/to/json',{
유형: 'GET',
데이터 유형: 'json',
성공: 성공콜백,
오류: errorCallback
})

간단한 글쓰기 방법

Ajax 메서드를 작성하는 몇 가지 간단한 방법도 있습니다.

$.get(): GET 요청을 합니다.
$.getScript(): JavaScript 스크립트 파일을 읽고 실행합니다.
$.getJSON(): JSON 파일을 읽으려면 GET 요청을 발행합니다.
$.post(): POST 요청을 합니다.
$.fn.load(): html 파일을 읽고 현재 요소에 넣습니다.
일반적으로 이러한 편의 메서드는 url, data, 성공 시 콜백 함수의 세 가지 매개 변수를 순서대로 받아들입니다.

(1)$.get(), $.post()

이 두 메소드는 각각 HTTP의 GET 메소드와 POST 메소드에 해당합니다.

코드 복사 코드는 다음과 같습니다.

$.get('/data/people.html', 함수(html){
$('#target').html(html);
});
$.post('/data/save', {이름: '레베카'}, 함수(resp){
console.log(JSON.parse(resp));
});

get 메소드는 서버 측 URL과 요청 성공 후 콜백 함수라는 두 개의 매개변수를 허용합니다. post 메소드에는 이 두 매개변수 사이에 서버로 전송된 데이터를 나타내는 또 다른 매개변수가 있습니다.

위의 post 방식에 해당하는 ajax 작성 방식은 다음과 같습니다.

코드 복사 코드는 다음과 같습니다.

$.ajax({
유형: 'POST',
URL: '/데이터/저장',
데이터: {이름: 'Rebecca'},
데이터 유형: 'json',
성공: 함수(resp){
console.log(JSON.parse(resp));
}
});

(2)$.getJSON()

Ajax 메소드를 작성하는 또 다른 간단한 방법은 getJSON 메소드입니다. 서버가 JSON 형식으로 데이터를 반환하는 경우 $.ajax 메서드 대신 이 메서드를 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

$.getJSON('url/to/json', {'a': 1}, function(data){
console.log(데이터);
});

위 코드는 다음 작성과 동일합니다.

코드 복사 코드는 다음과 같습니다.

$.ajax({
데이터 유형: "json",
URL: '/url/to/data',
데이터: {'a': 1},
성공: 함수(데이터){
console.log(데이터);
}
});

(3)$.getScript()

$.getScript 메소드는 서버 측에서 스크립트 파일을 로드하는 데 사용됩니다.

코드 복사 코드는 다음과 같습니다.

$.getScript('/static/js/myScript.js', function() {
함수FromMyScript();
});

위 코드는 먼저 서버에서 myScript.js 스크립트를 로드한 후 콜백 함수에서 스크립트가 제공하는 함수를 실행합니다.

getScript의 콜백 함수는 스크립트 파일의 내용, HTTP 응답의 상태 정보 및 ajax 객체 인스턴스라는 세 가지 매개변수를 허용합니다.

코드 복사 코드는 다음과 같습니다.

$.getScript( "ajax/test.js", 함수(data, textStatus, jqxhr){
console.log( data ); // test.js 내용
console.log( textStatus ); // 성공
console.log( jqxhr.status ) // 200
});

getScript는 ajax 메소드를 작성하는 간단한 방법이므로 지연된 객체를 반환하고 지연된 인터페이스를 사용할 수 있습니다.

코드 복사 코드는 다음과 같습니다.

jQuery.getScript("/path/to/myscript.js")
.done(함수() {
               // ...
})
.fail(함수() {
               // ...
});

(4)$.fn.load()

$.fn.load는 jQuery의 도구 메소드가 아니라 jQuery 객체 인스턴스에 정의된 메소드로, 서버측 HTML 파일을 구해 현재 요소에 넣는 데 사용됩니다. 이 방법 역시 ajax 연산에 속하므로 여기서는 함께 논의하도록 한다.

코드 복사 코드는 다음과 같습니다.

$('#newContent').load('/foo.html');

$.fn.load 메소드는 선택기를 지정하고 선택기와 일치하는 원격 파일의 일부를 현재 요소에 배치하며 작업이 완료되면 콜백 함수를 지정할 수도 있습니다.

코드 복사 코드는 다음과 같습니다.

$('#newContent').load('/foo.html #myDiv h1:first',
함수(html) {
console.log('콘텐츠가 업데이트되었습니다!');
});

위 코드는 foo.html에서 "#myDiv h1:first"와 일치하는 부분만 로드합니다. 로드가 완료된 후 지정된 콜백 함수가 실행됩니다.

Ajax 이벤트

jQuery는 특정 AJAX 이벤트에 대한 콜백 함수를 지정하기 위해 다음과 같은 메서드를 제공합니다.

.ajaxComplete(): ajax 요청이 완료되었습니다.
.ajaxError(): Ajax 요청 오류입니다.
.ajaxSend(): ajax 요청이 발행되기 전.
.ajaxStart(): 첫 번째 ajax 요청이 발행되기 시작합니다. 즉, 아직 완료되지 않은 ajax 요청이 없습니다.
.ajaxStop(): 모든 Ajax 요청이 완료된 후.
.ajaxSuccess(): ajax 요청이 성공한 후입니다.
아래는 예시입니다.

코드 복사 코드는 다음과 같습니다.

$('#loading_indicator')
.ajaxStart(function (){$(this).show();})
.ajaxStop(function (){$(this).hide();});

반환값

ajax 메소드는 지연된 객체를 반환하며 then 메소드를 사용하여 객체에 대한 콜백 함수를 지정할 수 있습니다(자세한 설명은 "지연된 객체" 섹션 참조).

코드 복사 코드는 다음과 같습니다.

$.ajax({
URL: '/data/people.json',
데이터 유형: 'json'
}).then(함수 (resp){
console.log(resp.people);
})

JSONP

브라우저의 "동일 도메인 제한"으로 인해 ajax 메서드는 현재 웹페이지의 도메인 이름에 대해서만 HTTP 요청을 할 수 있습니다. 그러나 현재 웹 페이지에 스크립트 요소(

• Bootstrap 목록 그룹 구성 요소에 대한 심층 분석
• JavaScript 함수 커링에 대한 자세한 설명
• JS 비밀번호 생성 및 강도 감지의 전체 예(데모 소스 코드 다운로드 포함)
• Angularjs는 WeChat UI(weui)를 통합합니다.
• JavaScript를 사용하여 중국어 번체와 중국어 간체 간을 빠르게 전환하는 방법과 중국어 간체와 중국어 번체 간 전환을 지원하는 웹사이트의 요령_javascript 기술