jQuery 기능 함수 설명

9431 단어
자바스크립트 프로그래밍에서 개발자는 특정한 기능을 실현하기 위해 많은 작은 프로그램을 작성해야 한다.예를 들어 브라우저 검사, 문자열 처리, 그룹 편집 등이다.jQuery는 이러한 자주 사용하는 프로그램을 총괄하여 많은 실용적인 함수를 제공하였다.
1. 브라우저를 테스트합니다.
jQuery 통과$.브라우저 대상이 브라우저 정보를 얻습니다.
속성 설명 msie가 i가true일 경우,false mozilla일 경우,mozilla와 관련된 브라우저가true일 경우,false safari일 경우,safari 브라우저가true일 경우,false poera가opera 브라우저가true일 경우,false version 브라우저의 버전 번호가 사용될 때 개발자는 직접 이 속성을 호출하여 브라우저 속성을 얻을 수 있습니다.다음과 같습니다.
 
  
        <br>             $(function() { <br>                 function detect() { <br>                     if ($.browser.msie) <br>                         return "IE"; <br>                     if ($.browser.mozilla) <br>                         return "Mozilla"; <br>                     if ($.browser.safari) <br>                         return "Safari"; <br>                     if ($.browser.opera) <br>                         return "Opera"; <br>                 } <br>                 var sBrowser = detect(); <br>                 document.write(" :" + sBrowser + "<br> :" + $.browser.version) <p></p> <p>            });<br>        

2. 상자 모형
jQuery에서 $을(를) 제공합니다.boxModel 대상은 현재 따르는 상자 모형을 검사합니다.이것은true일 때 w3c 표준 상자 모형을 따르고false일 경우 i의 상자 모형을 따르는 부울 값입니다
    var sBox = $.boxModel ? 표준 W3C: IE,                document.write ("당신의 페이지는 현재 지원:"+ sBox + "상자 모형");3. 자바스크립트 대상을 처리한다.
자바스크립트 프로그래밍에서 모든 변수는 대상이라고 할 수 있습니다. 예를 들어 문자열, 날짜, 수치 등입니다.
jQuery는 관련 대상을 처리하는 편집 방법을 제공합니다. 예를 들어 $.trim 함수
i. $each () 방법으로 옮겨다니기
앞에서 설명한 each () 방법은 선택기의 요소를 옮겨다니는 데 사용되며, 자바스크립트의 수조와 대상에 대해서도 $를 사용할 수 있습니다.each () 방법을 반복합니다.
$.each(object,fn); 그 중에서 object는 옮겨다니는 대상이고 fn은 object에서 모든 요소가 실행하는 함수이다. 그 중에서 함수 fn은 두 개의 매개 변수를 받아들일 수 있으며 첫 번째 매개 변수는 수조 요소의 번호나 대상의 속성이다.두 번째 매개변수는 요소 또는 속성의 값입니다.
예:$.each () 함수 배열과 대상
 
  
<br>             var aArray = ["one", "two", "three", "four", "five"]; <br>             $.each(aArray, function(iNum, value) { <br>                 // <br>                 document.write(" " + iNum + " " + value + "<br>"); <br>             }); <br>             var oObj = { <br>                 one: 1, <br>                 two: 2, <br>                 three: 3, <br>                 four: 4, <br>                 five: 5 <br>             }; <br>             $.each(oObj, function(pro, value) { <br>                 // <br>                 document.write(" " + pro + " " + value + "<br>") <br>             }); <br>        

위의 예에서 볼 수 있듯이, $.each () 는 알 수 없는 속성 $와 같은 그룹과 대상을 훑어보는 데 매우 편리합니다.browser, $. 사용each 스트리밍
$.each($.browser,function(iNum,value) {//대수 그룹document.write("속성"+ iNum + "가치"+ value + ");            }); 득치:
속성 크롬 값true 속성 버전 값 39.0.2171.99 속성 웹키 값true ii.데이터 필터링
수조의 데이터에 대해 개발자가 이를 선별해야 할 때가 많고 순수한javascript를 사용하면 for 순환을 통해 하나하나 검사해야 한다.jQuery에서 $.grep () 방법.수조를 간편하게 필터할 수 있는 데이터.
구문은 다음과 같습니다.
$.grep (Array, fn, [invert]) 에서,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) {
                return value >= 4;
            });        
            document.write(aResult.join());

먼저 그룹 aArray를 정의한 다음 $.grep () 방법은 값이 4보다 크면 새 그룹을 선택합니다
예2, 필터 그룹의 고급 방법.
 
  
    <br>             var aArray = [2, 3, 4, 7, 9, 8, 2, 2, 4, 2, 3, 6, 9, 0, 3, 4, 2, 5]; <br>             var aResult = $.grep(aArray, function(value, index) { <br>                 // value <br>                 return (value >= 4 && index > 3); <br>             }); <p></p> <p>            document.write(aResult.join());<br>        

iii 변환 그룹
많은 경우 개발자들은 어떤 수조의 원소가 통일적으로 전환되기를 희망한다. 예를 들어 모든 원소를 곱하기 2.자바스크립트에서 예를 들어 for 순환을 실현할 수 있지만, jQuery는 더 편리한 $를 제공합니다.map () 방법입니다.이 방법은 아래와 같다
.map(array, fn)에서 array는 전환할 수 있는 수조이고 fn은 전환 함수로 수조의 모든 항목을 집행한다. 이 함수는 두 개의 함수를 받아들일 수 있고 한 개의 파라미터는 원소의 값이다.2개의 매개변수는 요소의 시퀀스 번호이며 선택적 매개변수입니다.
 
  
<br>             $(function() { <br>                 var aArray = ["a", "b", "c", "d", "e", "f", "g", "h", "i"]; <br>                 $("p:eq(0)").text(aArray.join()); <br>                 aArray = $.map(aArray, function(value, index) { <br>                     // <br>                     return (value.toUpperCase() + index); <br>                 }); <br>                 $("p:eq(1)").text(aArray.join()); <p></p> <p>                cArray = $.map(aArray, function(value) {<br>                     return value + value;<br>                 });<br>                 $("p:eq(2)").text(cArray.join());<br>             });<br>        
       
       
       

실행 결과
a,b,c,d,e,f,g,h,i
A0,B1,C2,D3,E4,F5,G6,H7,I8
A0A0, B1B1, C2C2, D3D3, E4E4, F5F5, G6G6, H7H7, I8I8은 $를 사용합니다.map () 함수를 옮긴 후, 수조의 길이가 원래의 수조와 같지 않습니다.null을 설정해서 그룹의 요소를 삭제할 수 있습니다.
 
  
<br>             $(function() { <br>                 var aArray = [0, 1, 2, 3, 4, 5, 6, 7, 8]; <br>                 $("p:eq(0)").text(aArray.join()); <br>                 $("p:eq(1)").text("aArray :" + aArray.length + " :" + aArray.join()); <br>                 cArray =$.map(aArray,function(value){ <br>                     // 1 +1 , null <br>                     return value>1?value+1:null; <br>                 }); <br>                 $("p:eq(2)").text("cArray :" + cArray.length + " :" + cArray.join()); <br>             }); <br>        
       
       
       

요소 삭제 외에 $.map이 수조로 바뀔 때도 수조 원소를 추가할 수 있습니다.
 
  
    <br>             $(function() { <br>                 var aArray = ["one", "two", "three", "four", "five"]; <br>                 $("p:eq(0)").text(aArray.join()); <br>                 cArray =$.map(aArray,function(value){ <br>                     return value.split(""); <br>                 }); <br>                 $("p:eq(1)").text("cArray :" + cArray.length + " :" + cArray.join()); <br>             }); <br>        
       
       

실행 결과
one,two,three,four,five
cArray 길이: 19값: o,n,e,t,w,o,t,h,r,e,e,f,o,u,r,f,i,v,e 이상 코드는 $.map 전환 과정 중 split (") 방법은 요소를 하나의 자모로 분할합니다
iiii 검색 그룹 요소
문자열에 대해서는 indexOf () 를 통해 특정 문자가 있는 위치를 검색할 수 있으며, 그룹 요소에 대해서는 자바스크립트가 비슷한 방법을 제공하지 않습니다.jQ에서 $.inArray () 함수는 배열 요소의 검색 기능을 잘 할 수 있습니다.구문은 다음과 같습니다.
$. inArray (value,array) 중,value는 찾으려는 대상이고,array는 그룹 자체이며, 찾으면 첫 번째 일치하는 요소가 그룹의 위치를 되돌려줍니다.없으면 -1로 돌아갑니다.
 
  
    <br>             $(function() { <br>                 var aArray = ["one", "two", "three", "four", "five"]; <br>                 var cx1 = $.inArray("two", aArray); <br>                 var cx2 = $.inArray("www", aArray); <br>                 $("p:eq(0)").text(cx1); <br>                 $("p:eq(1)").text(cx2); <br>             }); <br>        
       
       

4. 외부 코드 가져오기
일부 비교적 큰 프로젝트에서 개발자는 서로 다른 js를 서로 다른 js 파일에 놓고 보조금의 수요에 따라 서로 다른 코드를 불러온다.jQuery에서 $.getScript()는 외부 코드를 로드합니다.사용 방법은 다음과 같습니다.
$.getScript (URL, [callback]) 에서 URL은 외부 자원의 주소로 상대적일 수도 있고 절대적인 주소일 수도 있습니다.콜백은 불러오는 데 성공한 리셋 함수입니다. 선택할 수 있습니다.
 
  
<br>             $(function() { <br>                 $("p:eq(0)").click(function() { <br>                     $.getScript("1.js"); <br>                 }); <br>                 $("p:eq(1)").click(function() { <br>                     textfun(); <br>                 }); <br>             }); <br>        
       

1


       

2



그중 1.js 코드는
 
  
alert(" ok!")
function textfun(){
    alert("testfun")
};

좋은 웹페이지 즐겨찾기