JQuery super practical tips

JQuery is a JavaScript library, she greatly simplified our programming in JavaScript.

Today, we summarize some tips under normal used in the project, for reference purposes only.

1, replaced elements

// Replace element 
$ (Document) .ready ( function () {
    $("#id").replaceWith(' <p> I have been repaced </p>')
});

2, load delay

// delay loading function 
$ (the Document) .ready ( function () {
   window.setTimeut(function(){
       // do something
},1000);
});

3, Back to top button

// Top button 
$ ( 'a.top') .click ( function () {
    $(document.body).animate( {scrollTop: 0 } , 800 );
     return false;
})

 

4, pre-loaded images

// preload images 
$ .preloadImages = function () {
    for ( var I = 0; I <The arguments.length; I ++ ) {
       $(' <img>').attr('src', arguments[i]);
   }
}

 

5, check whether the image has finished loading

// Check if the picture has finished loading 
$ ( 'img'). The Load ( function () {
   console.log('image load successful');
} )

 

6, check whether there is an element

// length property is determined by 
$ (Document) .ready ( function () {
    IF ($ ( 'ID #' ) .length) {
      do something
    }
})

 

7, to verify whether the element is empty

// verify whether the element is empty 
$ (Document) .ready ( function () {
    IF ($ ( 'ID #' ) .html ()) {
       // do something 
   }
})

 

8, to dynamically add elements to create the DOM

$(document).ready(function(){
   var newDiv = $ ('<div> </div>')
   newDiv.attr('id', 'myNewDiv').appendTo('body');
})

 

9, the elements created dynamically added to the DOM

// resolve conflicts with another embodiment javascript libraries 
$ (Document) .ready ( function () {
    var $ JQ = jQuery.noConflict ();
   $jq('#id').show();
})

 

Available later to add.