jQuery 실용 함수 사용법 요약_jquery

본 글은 jQuery의 일반적인 실무 기능을 예시 형태로 요약한 것입니다. 참고할 수 있도록 모든 사람과 공유하세요. 구체적인 예시는 다음과 같습니다.

1. 문자열 자르기

$('#id').val($.trim($('#someid').val()))

2. 컬렉션 탐색

다음과 같이 쓸 수 있습니다:

var anArray = ['one','two'];
for(var n = 0; n < anArray.length; n++){
  
}

다음과 같이 쓸 수도 있습니다.

var anObject = {one: 1, two: 2};
for(var p in anObject){
  
}

그러나 $.each 함수를 사용하면 다음과 같이 작성할 수 있습니다.

var anArray = ['one','two'];
$.each(anArray, funtion(n, value){
  
})
var anObject = {one: 1, two: 2};
$.each(anObjct, function(name,value){
  
})

3. 필터 배열

배열을 필터링하려면 $.grep() 메서드를 사용하세요. 먼저 grep 메소드의 정의를 살펴보겠습니다.

grep: function(elems, callback, inv){
  var ret = [], retVal;
  inv = !!inv;
  for(var i = 0; length = elems.length; i < length; i++){
    retVal = !!callback(elems[i],i)
    if(inv !== retVal){
      ret.push(elems[i]);
    }
  }
  return ret;
}

위의 예에서:
① grep 메소드의 두 번째 매개변수는 콜백 함수입니다. 콜백 함수는 두 개의 매개변수를 받습니다. 하나는 배열의 요소이고 다른 하나는 배열의 인덱스입니다.
② grep 메소드의 세 번째 매개변수 inv는 기본적으로 정의되어 있지 않으므로 !!inv는 false, 즉 inv의 기본값은 false입니다

예제 1: int 유형 배열

var arr = [1, 2, 3, 4, 5, 6];
arr = $.grep(arr, function(val, index){
  return val > 3;
})
console.log(arr);//结果是：4 5 6

grep의 세 번째 매개변수가 명시적으로 true로 설정되면 결과는 어떻게 되나요?

var arr = [1, 2, 3, 4, 5, 6];
arr = $.grep(arr, function(val, index){
  return val > 3;
}, true)
console.log(arr);//结果是：1 2 3

grep 메소드의 세 번째 매개변수를 true로 설정하면 콜백 함수를 충족하지 않는 배열 요소가 필터링되는 것을 볼 수 있습니다.

예 2: 객체 유형 배열

var arr = [
  {
    first: "Jeffrey",
    last: 'Way'
  },{
    first: 'Allison',
    last: 'Way'
  },{
    first: 'John',
    last: 'Doe'
  },{
    first: 'Thomas',
    last: 'Way'
  };
  arr = $.grep(arr, function(obj, index){
    return obj.last === 'Way';
  });
  console.log(arr);
];

4. 배열 변환

$.map(arr, callback)을 사용하여 배열의 각 요소에 대해 콜백 함수를 호출하고 새 배열을 반환합니다

배열의 각 요소에 1을 추가합니다.

var oneBased = $.map([0, 1, 2, 3, 4], function(value){return value +1;})

문자열 배열을 정수 배열로 변환하고 배열 요소가 숫자인지 확인합니다.

var strings = ['1', '2', '3','4','S','6'];
var values = $.map(strings, function(value){
  var result = new Number(value);
  return isNaN(result) ? null : result;
})

변환된 배열을 원래 배열로 병합:

var chars = $.map(['this','that'], function(value){return value.split(' ')});

5. 배열 요소의 인덱스를 반환합니다

$.inArray(value, array)를 사용하여 전달된 값 중 처음 나타나는 첨자, 즉 인덱스를 반환합니다.

var index = $.inArray(2, [1, 2, 3]);

6. 객체를 배열로 변환

$.makeArray(object)는 전달된 배열형 객체를 Javascript 배열로 변환합니다.

<div>First</div>
<div>Second</div>
<div>Third</div>
<div>Fourth</div>
<script>
  var elems = document.getElementsByTagName("div");
  var arr = jQuery.makeArray(elems);
  arr.reverse();
  $(arr).appendTo(document.body);
</script>

7. 중복 요소가 없는 배열 가져오기

원본 배열의 고유한 요소로 구성된 배열을 반환하려면 $.unique(array)를 사용하세요.

<div>There are 6 divs in this document.</div>
<div></div>
<div class="dup"></div>
<div class="dup"></div>
<div class="dup"></div>
<div></div>
//把到所有div，get方法转换成javascript数组，总共6个div
var divs = $("div").get();
//再把3个class名为dup的div合并到前面的6个div
divs = divs.concat($(".dup").get());
alert(divs.length); //9个div
//过滤去掉重复
divs = jQuery.unqiue(divs);
alert(divs.length);//6个div

8. 2개의 배열 병합

$.merge(array1, array2)는 두 번째 배열을 첫 번째 배열에 병합하고 첫 번째 배열을 반환합니다.

var a1 = [1, 2];
var a2 = [2, 3];
$.merge(a1, a2);
console.log(a1);//[1, 2, 2, 3]

9. 개체를 쿼리 문자열로 직렬화합니다.

$.param(params)은 들어오는 jquery 객체 또는 javascript 객체를 문자열 형식으로 변환합니다.

$(document).ready(function(){
 personObj=new Object();
 personObj.firstname="John";
 personObj.lastname="Doe";
 personObj.age=50;
 personObj.eyecolor="blue"; 
 $("button").click(function(){
  $("div").text($.param(personObj));
 });
});

결과: 이름=John&성=Doe&나이=50&eyecolor=파란색

10. 일부 판단 기능

$.isArray(o) o가 자바스크립트 배열이면 true를 반환하고, 배열형 jquery 객체 배열이면 false를 반환합니다.
$.isEmptyObject(o) o가 속성을 포함하지 않는 자바스크립트 객체인 경우 true를 반환합니다
$.isFunction(o)는 o가 자바스크립트 함수인 경우 true를 반환합니다
$.isPlainObject(o) o가 {} 또는 new Object()를 통해 생성된 객체인 경우 true를 반환합니다
$.isXMLDoc(node) 노드가 XML 문서이거나 XML 문서의 노드인 경우 true를 반환합니다

11. 한 요소가 다른 요소에 포함되어 있는지 확인

$.contains(container, containee)의 두 번째 매개변수가 포함되어 있습니다

$.contains( document.documentElement, document.body ); // true
$.contains( document.body, document.documentElement ); // false

12. 요소에 값을 저장합니다

$.data(element, key, value) 첫 번째는 자바스크립트 객체이고, 두 번째와 세 번째는 키 값입니다.

//得到一个div的javascript对象
var div = $("div")[0];
//把键值存储到div上
jQuery.data(div, "test",{
  first: 16,
  last: 'pizza'
})
//根据键读出值
jQuery.data(div, "test").first
jQuey.data(div, "test").last

13. 요소에 저장된 값 제거

<div>value1 before creation: <span></span></div>
<div>value1 after creation: <span></span></div>
<div>value1 after removal: <span></span></div>
<div>value2 after removal: <span></span></div>
var div = $( "div" )[ 0 ];
//存储值
jQuery.data( div, "test1", "VALUE-1" );
//移除值
jQuery.removeData( div, "test1" );

14. 바운드 함수의 컨텍스트

jQuery.proxy(function, context)는 새로운 함수 function을 반환하며, context는 context입니다.

 $(document).ready(function(){
 var objPerson = {
  name: "John Doe",
  age: 32,
  test: function(){
   $("p").after("Name: " + this.name + "<br> Age: " + this.age);
  }
 };
 $("button").click($.proxy(objPerson,"test"));
});

위에서 버튼을 클릭하면 테스트 메서드가 실행되지만 테스트 메서드의 컨텍스트가 설정됩니다.

15. JSON 분석

jQuery.parseJSON(json) 첫 번째 매개변수 json의 유형은 문자열입니다.

var obj = jQuery.parseJSON( '{ "name": "John" }' );
alert( obj.name === "John" );

16. 표현평가

가끔 전역 컨텍스트에서 코드를 실행하려면 jQuery.globalEval(code)을 사용할 수 있습니다. 코드 유형은 문자열입니다.

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

17. 동적 로딩 스크립트

$(selector).getScript(url,success(response,status))는 js 파일을 동적으로 로드하는 데 사용됩니다. 두 번째 매개변수는 선택사항이며 성공적으로 가져오기 위한 콜백을 나타냅니다. .js 파일입니다.

$.getScript( "ajax/test.js", function( data, textStatus, jqxhr ) {
 console.log( data ); // Data returned
 console.log( textStatus ); // Success
 console.log( jqxhr.status ); // 200
 console.log( "Load was performed." );
});

저는 이 기사에 설명된 내용이 모든 사람의 jQuery 프로그래밍에 대한 특정 참조 가치를 가지고 있다고 믿습니다.