Research Asia Labs

主题

Getting Started ​

Including jQuery ​

javascript
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

Official CDN ​

javascript
<script src="https://code.jquery.com/jquery-3.5.1.min.js" crossorigin="anonymous"></script>

jQuery syntax ​

javascript

$(selector).methodOrFunction();

Example: ​

javascript
$('#menu').on('click', () =>{
  $(this).hide();  
});

$("body").css("background", "red");

jQuery document ready ​

javascript

$(document).ready(function() {
  // Runs after the DOM is loaded.
  alert('DOM fully loaded!');
});
javascript
$(function(){
  // Runs after the DOM is loaded.
  alert('DOM fully loaded!');
});

jQuery Selectors ​

Examples ​

javascript
$("button").click(() => {
    $(":button").css("color", "red");
});

Combining selectors ​

javascript
$("selector1, selector2 ...selectorn")

Basics ​

Basic Filters ​

Attribute ​

Child Filters ​

Forms ​

jQuery Attributes ​

Examples ​

javascript
$('h2').css({
  color: 'blue',
  backgroundColor: 'gray',
  fontSize: '24px'
});

jQuery addClass ​

javascript
$('.button').addClass('active');

jQuery removeClass ​

javascript
$('.button').on('mouseleave', evt => {
   let e = evt.currentTarget;
   $(e).removeClass('active');
});

jQuery .toggleClass ​

javascript
$('.choice').toggleClass('highlighted');

Attributes ​

Data ​

CSS ​

Dimensions ​

Offset ​

jQuery Manipulation ​

Examples ​

javascript
/*<span>Span.</span>*/
$('span').after('<p>Paragraph.</p>');
/*<span>Span.</span><p>Paragraph.</p>*/

/*<span>Span.</span>*/
$('<span>Span.</span>').replaceAll('p');
/*<p>Span.</p>*/

/*<span>This is span.</span>*/
$('span').wrap('<p></p>');
/*<p><span>This is span.</span></p>*/

Copying ​

DOM Insertion, Around ​

DOM Insertion, Inside ​

DOM Insertion, Outside ​

DOM Removal ​

DOM Replacement ​

jQuery Traversing ​

Filtering ​

Miscellaneous Traversing ​

Tree Traversal ​

jQuery Events ​

Examples ​

javascript
// A mouse event 'click'
$('#menu-button').on('click', () => {
  $('#menu').show();
});

// A keyboard event 'keyup'
$('#textbox').on('keyup', () => {
  $('#menu').show();
});

// A scroll event 'scroll'
$('#menu-button').on('scroll', () => {
  $('#menu').show();
});

Event object ​

javascript
$('#menu').on('click', event => {
  $(event.currentTarget).hide();
});

Method chaining ​

javascript
$('#menu-btn').on('mouseenter', () => {
  $('#menu').show();
}).on('mouseleave', () => {
  $('#menu').hide();
});

Prevents the event ​

javascript
$( "p" ).click(function( event ) {
  event.stopPropagation();
  // Do something
});

Browser Events ​

Event Object ​

Document Loading ​

Event Handler Attachment ​

Form Events ​

Keyboard Events ​

Mouse Events ​

jQuery Effects ​

Examples ​

javascript
$('#menu-button').on('click', () => {
  // $('#menu').fadeIn(400, 'swing')
  $('#menu').fadeIn();
});

fadeOut effect ​

javascript
$('#menu-button').on('click', () => {
  // $('#menu').fadeOut(400, 'swing')
  $('#menu').fadeOut();
});

Basics ​

Sliding ​

Custom ​

Fading ​

jQuery Ajax ​

Examples ​

javascript
$.ajax({
  url: this.action,
  type: this.method,
  data: $(this).serialize()
}).done(function(server_data){
  console.log("success" + server_data);
}).fail(function(jqXHR, status, err){
  console.log("fail" + err);
});

Global Ajax Event Handlers ​

Helper Functions ​

Low-Level Interface ​

Shorthand Methods ​

Miscellaneous ​

jQuery Object ​

Deferred Object ​

Utilities ​

DOM Element Methods ​

Internals ​

Callbacks Object ​