jquery skill accumulation

1. Judge whether the check box is selected

$('#checkBox').attr('checked');

2. Disable enable button

$("ාsomebutton").attr("disabled", true); / / disabled
 $("submit button"). Removeattr ("disabled"); / / enabled

Note:. attr('disabled ', false); it's wrong to write like this

3.is() method

Determines a selector, element, or jQuery object to detect a collection of matching elements, and returns true if at least one of these elements matches a given parameter

$("ul").click(function(event) {
  var $target = $(event.target);
  if ( $target.is("li") ) {
    $target.css("background-color", "red");
  }
});

// Is it a div
elem.is('div') && console.log("it's a div");

// Is there an element that contains (or can have other class names) the class name of the bigbox?
elem.is('.bigbox') && console.log("it has the bigbox class!");

// Is it hidden?
elem.is(':not(:visible)') && console.log("it is hidden!");

//Whether in animation
elem.animate({'width':200},1000);
elem.is(':animated') && console.log("it is animated!");

4. The end() method in jQuery can make the chain syntax write more efficiently and quickly

Definition: the end() method ends the most recent filtering operation in the current chain and restores the matching element set to its previous state.

<ul id="meals"> <li> <ul class="breakfast"> <li class="eggs">No</li> <li class="toast">No</li> <li class="juice">No</li> </ul> </li> </ul>
breakfast.find('.eggs').text('Yes').end() // back to breakfast
.find('.toast').text('Yes').end().find('.juice').toggleClass('juice coffee').text('Yes');

5. Right click the ContextMenu event

Maybe you want the web application to feel more native, so you can prevent the default event of contextmenu.

$(function(){
    $(document).on("contextmenu",function(e){
        e.preventDefault();
    });
});    

Of course, you can also customize the operation menu by right clicking this event, similar to

6. Sometimes we don't want a part of the web page to be selected, such as copying and pasting. We can do this:

$('p.descr').attr('unselectable', 'on').css('user-select', 'none').on('selectstart', false);

7.trigger simulation trigger event

trigger simulation triggers a click event

var press = $('#press');
press.on('click',function(e, how){
    how = how || '';
    alert('The buton was clicked ' + how + '!');
});

press.trigger('click');
press.trigger('click',['fast']);

Use the on() method to create your favorite event name, and trigger it through trigger

<button id="button1">Jump</button> <button id="button2">Punch</button> <button id="button3">Click</button> <button id="clear" style="float: right;">Clear</button> <div id="eventDiv"></div>
var button1 = $('#button1'),
    button2 = $('#button2'),
    button3 = $('#button3'),
    clear = $('#clear'),
    div = $('#eventDiv');

div.on({
    jump : function(){
        alert('Jumped!');
    },

    punch : function(e,data){
        alert('Punched '+data+'!');
    },

    click : function(){
        alert('Simulated click!');
    }

});

button1.click(function(){
    div.trigger('jump');
});

button2.click(function(){
    // Pass data along with the event
    div.trigger('punch',['hard']);
});

button3.click(function(){
    div.trigger('click');
});

clear.click(function(){
    //some clear code
});

8. Running multiple Ajax requests in parallel

$.when($.get('assets/misc/1.json'), $.get('assets/misc/2.json')).then(function(r1, r2){
    console.log(r1[0].message + " " + r2[0].message);
})

9. Use anonymous functions to generate a separate code block

(function($){
    var c = 1;
    $.fn.count = function(){
        log(c++);
        return this;
    };  
})(jQuery); 

$(document).count();
$('body').count().count();

Tags: JQuery JSON

Posted on Tue, 31 Mar 2020 08:29:46 -0700 by dave_2008