2012-05-23 1 views
4

버전 1/jQuery를

function add(){ 
var a = 2; 
... 
... 
... 
} 

버전 2

$(function(){ 
var ... 
.. 
.. 
}); 

여기서 두 버전의 주요 차이점은? 버전 2에는 함수 이름이 없습니다. 단순히 함수에서 코드를 실행하는 경우 $function(){..};을 제거하지 않는 것이 좋습니다. 요즘 많은 스크립트가 버전 2의 스타일로 작성 되었기 때문에 실제로 혼란 스럽습니다. 제 혼란을 명확히하는 데 도움이됩니다.

+0

ref : http://api.jquery.com/jQuery/ – Yoshi

답변

9

예제 1은 add이라는 함수를 정의하는 반면 예제 2는 익명의 함수를 jQuery 함수에 전달하는 것입니다.

$(function() {...});$(document).ready(function() {...});의 줄임말로, 함수를 인수로 사용하고 DOM이 준비 될 때 해당 함수를 실행합니다. 코드를 실행하기 전에 Javascript에서 작업하려는 요소가 실제로 있는지 확인하는 데 사용됩니다.

.click()의 jQuery 함수는 두 개의 용도가 있습니다

편집 아래의 코멘트를 해결하기. 함수를 전달하면 이벤트가 트리거 될 때 해당 함수를 실행하는 추가 클릭 이벤트 핸들러가 생성됩니다. 함수를 전달하지 않으면 jQuery 객체의 요소에 연결된 모든 클릭 이벤트 핸들러가 트리거됩니다. 예, 함수없이 .click()으로 전화 할 수는 있지만 똑같은 것은 아닙니다.

는 다음을 수행 할 수 없습니다

$(document).ready(var foo = 2;...); 

을하는 당신에게 구문 오류를 줄 것이다 때문이다. 당신은, 그러나, 일반적인 방식으로 함수를 정의 할 수 있습니다, 다음 $(document).ready()에 호출에 을 통과 :

function foo() { 
    var foo = 2; 
    ... 
} 

$(document).ready(foo); 
+0

실제로 "클릭"할 준비가 된 것으로 바꾸면 왜 내부에 기능이 있어야할까요? function()없이 코드를 간단하게 실행할 수 있습니까? – red23jordan

+0

@ red23jordan 그 문제를 해결하기위한 답을 업데이트했습니다. –

1

$(function(){}) 실제로 $(document).ready() 내부의 기능을 포장한다; 이 방법은 코드가 DOM이로드 될 때까지 실행되지 않습니다.

1

$(function()은 jQuery에서 문서로드의 약식이라고 생각합니다.

당신이 "jQuery를"기능을 확인하려면 당신이해야 할 것 :

그래서 짧은
jQuery.fn.yourfunctionname = function() { 
    //code in here 
} 

는, 첫 번째 기능은 실제로 add라는 함수를 정의하고 다음 기능이 속기이다 :

2
function add(){ 
var a = 2; 
... 
... 
... 
} 

$(document).ready(function(){

간단한 JS 함수이다.

$(function(){ 
var ... 
.. 
.. 
}); 

은 jQuery 문서의 바로 가기입니다.준비 : - 그래서 당신은 달러를 사용할 수있는 $ 기호를 통해 폐쇄를 제공

(function($){ 
var ... 
.. 
.. 
})(jQuery); 

:

$(document).ready() {}; 

당신은 또한에 대해 물어보고 싶은게 있습니다. (다른 라이브러리가로드되었을 수 있음).

1

첫 번째 버전은 함수를 창 네임 스페이스에 추가하는 반면 두 번째 스코프는 $(function(){... 범위에만 있기 때문에 괄호 밖의 코드에서 액세스 할 수 없습니다.

3

예제 1과 2는 완전히 다릅니다. jQuery는 자바 스크립트이므로 함수 정의는 동일합니다.

$(function(){...$(document).ready(function(){...의 약식이며 예제 1은 실제로 add이라는 새로운 기능을 생성합니다.

당신은이 같은 ready 함수 내에서 추가 기능을 생산할 수 :

$(function(){ 

     function add(){ 
      var foo = 1;    
     } 

}); 

jQuery를 서로 다른 정의와 자바 스크립트에 비해 구문으로 seporate 새로운 언어가 아닙니다, 자바 스크립트로 작성된 자사의 툴킷은 자바 스크립트의 구문과 정의를 사용하여 .

jQuery 자체를 단지 큰 함수로 생각하면 $ ...로 정의 된 함수이므로 function add(){} 대신 $ function $(){}이라는 함수 일 수 있습니다. 또한 일반적인 자바 스크립트 함수와 동일한 구문으로 jQuery 인수를 전달합니다.

 function add(arg){ 
      //do something with arg 
     } 
     add('#elem'); 

     function $(arg){ 
      //do something with arg 
     } 
     $('#elem'); 

표시 되나요? jQuery는 많은 유형의 인수를 전달할 수있는 많은 복잡한 도구 일뿐 아니라 많은 유용한 도구를 제공합니다. 그러나 문법과 정의는 전통적인 자바 스크립트와 다르지 않습니다.

 function add(arg){ 
      var added = arg + 12; 
      return this.alertAdded = function(){ 
       alert(added); 
      } 
     } 

     add(30).alertAdded(); // will alert 42 
     //vs 
     $('#elem').fadeOut(); // same syntax but referring to very different functionality. 

여기서 jQueryish 구문의 예는 일반 평범한 구식 JS입니다.