jquery skill accumulation

1. Judge whether the check box is selected


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.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.


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 + '!');


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');

    jump : function(){

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

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



    // Pass data along with the event


    //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

    var c = 1;
    $.fn.count = function(){
        return this;


Tags: JQuery JSON

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