jQuery function_jquery에 대한 자세한 설명

JavaScript 프로그래밍에서 개발자는 일반적으로 일부 특정 기능을 구현하기 위해 여러 개의 작은 프로그램을 작성해야 합니다. 예를 들어 브라우저 감지, 문자열 처리, 배열 편집 등이 있습니다. jQuery는 이러한 일반적으로 사용되는 프로그램을 요약하고 많은 실용적인 기능을 제공합니다.

1. 브라우저를 감지합니다.

jQuery는 $.browser 개체를 통해 브라우저 정보를 얻습니다.

속성 설명
msie ie이면 참이고, 그렇지 않으면 거짓입니다
mozilla는 Mozilla 관련 브라우저이면 true이고, 그렇지 않으면 false입니다
safari 사파리 브라우저라면 true, 아니면 false입니다
포라 오페라 브라우저라면 true, 아니면 false입니다
버전 브라우저 버전 번호
이를 사용하면 개발자는 이러한 속성을 직접 호출하여 브라우저 속성을 얻을 수 있습니다. 다음과 같습니다:

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

         

2. 박스 모델

$.boxModel 개체는 현재 추종하는 상자 모델을 감지하기 위해 jQuery에서 제공됩니다. true인 경우 w3c 표준 상자 모델을 따른다는 의미입니다. false인 경우에는 ie 상자 모델입니다

.

var sBox = $.boxModel ? "표준 W3C" : "IE";

Document.write("귀하의 페이지는 현재 다음을 지원합니다:" sBox "Box Model");

3. 자바스크립트 객체를 처리합니다.

JavaScript 프로그래밍에서는 모든 변수가 문자열, 날짜, 값과 같은 객체라고 할 수 있습니다.

jQuery는 관련 객체를 처리하기 위한 몇 가지 편집 방법을 제공합니다. 예를 들어 $.trim() 함수(선행 및 후행 공백 제거) 함수는 그 중 하나입니다

i. $each() 메서드를 사용하여 순회합니다.

선택기의 요소를 순회하는 데 사용되는 Each() 메서드가 이전에 소개되었습니다. 마찬가지로 JavaScript 배열 및 개체의 경우 $.each() 메서드를 사용하여 순회할 수 있습니다.

$.each(객체,fn);

그 중 object는 순회해야 하는 객체이고, fn은 object의 각 요소에 의해 실행되는 함수입니다. fn 함수는 두 개의 매개변수를 받을 수 있습니다. 첫 번째 매개변수는 배열 요소의 일련번호 또는 객체의 속성입니다. . 두 번째 매개변수는 요소 또는 속성의 값입니다.

예: $.each() 함수를 사용하여 배열과 객체를 순회합니다

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

위의 예에서 볼 수 있듯이 $.each()는 배열과 객체를 순회하는 데 매우 편리합니다. 예를 들어 알 수 없는 $.browser 속성의 경우 $.each를 사용하여 순회합니다.

$.each($.browser, function(iNum, value) {

// 배열 쌍을 다시 복사합니다 >                       document.write("property" iNum "value" value "
");

            });
가치:

속성 크롬 값 true
속성 버전 값 39.0.2171.99

속성 웹킷 값 true

ii. 데이터 필터링

배열의 데이터에 대해 개발자는 이를 필터링해야 하는 경우가 많습니다. 순수 JavaScript를 사용하는 경우 하나씩 확인하려면 for 루프가 필요한 경우가 많습니다. jQuery는 $.grep() 메소드를 제공합니다. 배열 데이터를 쉽게 필터링할 수 있습니다.

구문은 다음과 같습니다.

$.grep(배열,fn,[반전])

그 중 array는 필터링이 필요한 배열 객체의 이름이고, fn은 필터 함수로, 배열의 각 객체에 대해 true를 반환하면 유지되고, 그렇지 않으면 제거됩니다. 선택적 invert는 부울 값입니다. true로 설정되면 fn 함수가 반전되고 조건을 충족하는 함수가 제거됩니다.

코드 복사 코드는 다음과 같습니다. var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5];

               var aResult = $.grep(aArray, function(value) {

                   반환 값 >= 4;
           });                                                               document.write(aResult.join());



먼저 aArray 배열을 정의한 후 $.grep() 메서드를 사용하여 4보다 크거나 같은 값을 선택하여 새 배열을 얻습니다

예 2, 배열 필터링의 고급 방법.

코드 복사

코드는 다음과 같습니다.

iii 변환 배열

개발자는 배열의 요소가 모든 요소에 2를 곱하는 것과 같이 균일하게 변환될 수 있기를 바랄 때가 많습니다. 이는 for 루프와 같은 자바스크립트에서 달성할 수 있지만 jQuery는 보다 편리한 $.map () 메서드를 제공합니다. . 그 방법은 다음과 같습니다

$.map(배열,fn)

그 중 array는 변환할 배열이고, fn은 배열의 각 항목에 대해 실행되는 변환 함수입니다. 이 함수도 두 가지 함수를 받을 수 있으며, 하나의 매개변수는 요소의 값입니다. 두 매개변수는 요소의 일련번호이며 선택적 매개변수입니다.

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

A0,B1,C2,D3,E4,F5,G6,H7,I8

A0A0,B1B1,C2C2,D3D3,E4E4,F5F5,G6G6,H7H7,I8I8

$.map() 함수를 사용하여 전송한 후 배열의 길이가 반드시 원래 배열과 같을 필요는 없습니다. null을 설정하여 배열 요소를 제거할 수 있습니다.

코드 복사

코드는 다음과 같습니다.

코드 복사

코드는 다음과 같습니다.                 $(function() {

            var aArray = ["1", "2", "3", "4", "5"];

                      $("p:eq(0)").text(aArray.join());
cArray =$.map(aArray,함수(값){
                        반환 값.split("");
                });
                $("p:eq(1)").text("cArray 길이: " cArray.length " 값: " cArray.join());
            });
> > >


실행결과

하나, 둘, 셋, 넷, 다섯

cArray 길이: 19개 값: o,n,e,t,w,o,t,h,r,e,e,f,o,u,r,f,i,v,e

위 코드의 $.map 변환 과정에서 Split("") 메소드는 요소를 문자 로 분할합니다.

iii 배열 요소 검색

문자열의 경우 indexOf()를 사용하여 특정 문자의 위치를 ​​검색할 수 있습니다. 배열 요소의 경우 JavaScript는 유사한 방법을 제공하지 않습니다. jQ에서 $.inArray() 함수는 배열 요소에 대한 좋은 검색 기능을 제공할 수 있습니다. 구문은 다음과 같습니다.

$.inArray(값,배열)
그 중 value는 찾으려는 객체이고, array는 배열 자체입니다. 찾으면 배열에서 처음으로 일치하는 요소의 위치를 ​​반환합니다. 그렇지 않은 경우 -1을 반환합니다.

코드 복사

코드는 다음과 같습니다.

일부 대규모 프로젝트에서는 개발자가 서로 다른 js 파일에 서로 다른 j를 배치하고 때로는 보조금 요구 사항에 따라 서로 다른 코드를 로드하기도 합니다. jQuery는 외부 코드 로딩을 ​​구현하기 위해 $.getScript()를 제공합니다. 사용방법:

$.getScript(url,[콜백])

그 중 url은 외부 리소스의 주소로 상대 주소 또는 절대 주소일 수 있습니다. callback은 성공적으로 로드된 후의 콜백 함수이며 선택 사항입니다.

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

                $(function() {

                       $("p:eq(0)").click(function() {
                          $.getScript("1.js");
                });
                    $("p:eq(1)").click(function() {
                       textfun();
                });
            });
> & Lt; p & gt; 1 & lt;/p & gt; & Lt; p & gt; 2 & lt;/p & gt;


1.js 코드는

코드 복사

코드는 다음과 같습니다. Alert("로드 중입니다!") 함수 textfun(){ 경고("testfun") };