jQuery

jQuery API

 

dołączenie biblioteki:

aby zawsze używać aktualnej wersji biblioteki z rodziny 11 najlepiej skorzystać z CDN google z pominięciem numeru aktualizacji wersji, google w tym wypadku udostępnia najnowszą.

 

<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

<!-- The latest version of 1.11: -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11/jquery.min.js"></script>

jQuery- użycie na stronie:

<script>
$(document).ready(function(){
//code
}); // end of the function ready
</script>

<script>
$(function(){
//code
}); // end of the function ready
</script>

 

Sprawdzenie wersji jQuery z okna konsoli przeglądarki – jQuery.fn.jquery

 

Poprawne wywołanie – oplecenie kodu funkcją anonimową aby zmienne nie były globalne,
aby mieć pewność że $ kieruje na jQuery przekazujemy $ w deklaracji funkcji i wywołujemy ją na jQuery

 

(function($) {
  $(document).ready(function(){
    
  });
})(jQuery);

 

Wykorzystanie obiektu z funkcją init dla jednoczesnego wywołania wszystkich funkcji:

(function($) {

  var Project = {
    
    init: function() {
      $('html').removeClass('no-js');
      Project.languagesTabs();
      Project.contentHeight();
      Project.backgroundFrontImage();
    },
    
    languagesTabs: function() {
      //code
    },

    contentHeight: function() {
      //code
    },

    backgroundFrontImage: function() {
      //code
    }
  }
  
  $(document).ready(function(){
    Project.init();
  });

  $(window).resize(function() {
    Project.contentHeight();
		Project.backgroundFrontImage();
  });

})(jQuery);

 

Rozbicie pliku js na osobne pliki z rożnymi funkcjonalnościami, w pliku main.js:

//main file .js
(function($) {
    var $window = $(window);

    // document ready
    $(document).ready(function() {
        $('html').removeClass('no-js');

        // languages Tabs
        projectName.languagesTabs($);

        // content Height
        if ($('#contentHeight').length)
          projectName.contentHeight($);

        // background Front Image
        if ($('#backgroundFrontImage').length)
          projectName.backgroundFrontImage($);


        //do when page is resize
        $window.resize(function(){
          
          // background Front Image
          if ($('#backgroundFrontImage').length)
            projectName.backgroundFrontImage($);
            
        });

    }); //end document ready


})(jQuery);

w osobnym pliku dla danej funkcjonalności/taska:

;var projectName = projectName || {};

projectName.languagesTabs = function($) {
  //code
};

projectName.contentHeight = function($) {
  //code
};

projectName.backgroundFrontImage = function($) {
  //code
};

 

 

korzystanie z biblioteki jQuery:

• użycie funkcji $(alias obiektu jQuery) – funkcja zwraca obiekt jQuery
• użycie jako prefiksu $. (jQuery.) – korzystanie z metod narzędziowych nie operujących na obiekcie jQuery

 

Przekazanie selektora CSS funkcji $ – otrzymujemy tablicę referencji do obiektów dopasowanych elementów (tablica może być pusta). Na tablicy wykonuje się operacje dzięki metodą obiekty jQuery.

 

Metody z prefiksem $. (jQuery.) – jako metody samodzielne lub globalne.

Funkcja mapująca each:

jQuery.each([x,y,z], function(key, value) {
 document.write(key+"="+value+"<br/>");
});

//0=x 1=y 2=z

 

biblioteka jQuery zawiera zapis:

// Expose jQuery to the global object 
window.jQuery = window.$ = jQuery;

 

$(document).ready() – wbudowana funkcja jQuery – wykonuje kod po załadowaniu całej zawartości strony.