JQuery daily records

1 http-serveInstallation and use of

HTTP server is a simple zero configuration command line HTTP server based on nodejs. In a single HTML page tofile://...When the file address path is running, when the Ajax request interface has cross domain problems, you can use HTTP server to provide services to run, similar to angular.

• Installation: direct through npm i http-serve -g Global installation.
• Through the project pathhttp-serve -P http://10.110.25.140:8080 Set up the back-end service. (Note: the request address here is the back-end service)
• Access: directly through local addresshttp://10.110.25.168:8080perhapshttp://127.0.0.1:8080Visit a single page.

2、 JqueryajaxRequest interface

//Ajax get request demo
$.ajax({ 
    url: url_get,
    type: "get",
    headers: {
        'Content-Type': 'application/json;charset=UTF-8'
    },
    success: function (res) {
        console.log(res);
    },
    error:function(err){
        console.log(err)
    }
})

//Ajax post request demo
$.ajax({ 
    url: url_post,
    type: "POST",
    headers: {
        'content type':'application / JSON '// indicates: the format of the incoming parameter
    },
    Datatype: "JSON", // means: the returned format is JSON!
    data:  JSON.stringify ({// converts a JSON object into a JSON string according to the format defined by the incoming parameter!
        agent: "123456789"
    }),
    success: function (rs) {
        console.log(rs)
    },
    error:function(err){
        console.log(err)
    }
});

// JSON.parse () [convert a JSON string into a JSON object]  
// JSON.stringify () [convert a JSON object into a JSON string]

3、 Common requirements: add click style and logic to the click element

<div class="changeMode">
    < div class = "m-list-title" > stitching picture < / div >
</div>
<div class="changeMode">
    < div class = "m-list-title" > notary public
</div>

$('.changeMode').bind('click', function () {
    $(this).addClass('click-border');
    $(this. Siblings(). Removeclass ('click border '); // $("given element"). Siblings() filters out all sibling elements of a given element (except for itself)
    Const modeindex = $(this). Index(); // gets the index value of the current element
});

4、 Jquerysiblings()Usage and examples

(“given element”). Siblings (“. Selected”) filters the given sibling like elements (excluding the given element itself)

//Tab [click the current tab to add the selected style, display the content, and hide the content and style of other tabs]
<ul id="menu">
    < Li class = "tabfocus" > Home</li>
    <li>Electrical appliances</li>
    <li>Second hand</li>
</ul>
<ul id="content">
    < Li class = "focus" > I am the content of home</li>
    <li>Welcome to the electrical city</li>
    <li>Second hand market, rich and colorful products</li>
</ul>

$(function() {
    $("ා menu Li"). Each (function (index) {// traverse each tab with parameters
        $(this). Click (function() {// register the click event of each card selection
            $("#menu  li.tabFocus "). Removeclass (" tabfocus "); // removes the selected style
            $(this). Addclass ("tabfocus"); // adds the style of the currently selected item
            //Displays the content of the tab and hides the unselected content
            $("#content li:eq(" + index + ")").show().siblings().hide();
            //#There is no nested association between menu and ා content in HTML layer, but because their UL sequence is the same, index value can skillfully associate them.
        });
    });
})

5、 JQuery loop operates on array elements of objects

<div id="div1">
    <span>a</span>
    <span>b</span>
    <span>c</span>
</div>

Error mode: can’t get jQuery object array in [] mode! For DOM object array obtained by pure JS code, array elements can be obtained in the way of [].

 $(function() {
     var div_span = $("#div1 span");
     for( var i = 0; i < div_span.length; i++ ) {
         div_span.[i].html(i);
     }
 })

Correct way 1: jQuery’seq()method

 for( var i = 0; i < div_span.length; i++ ) {
     div_span.eq(i).html(i);
 }

Correct way 2: jQuery’seach()method

$(function() {
     var div_span = $("#div1 span");
     var i = 0;
     div_ span.each (function() {// each() traverses, $(this) gets the jQuery object, and directly uses this to get DOM elements.
         $(this).html(i);
         i++;
     });
 });

6forEach、for、$.each()A comparison of the differences between jumping out of the loop

For loop

1. continueEnd this cycle, continue to execute the loop body!
2. breakEnd all cycles!

forEach()

1. You cannot use continue and break, you can usereturnorreturn falseJump out of the current cycle!
2. Note: you cannot use break to end all loops at onceFor loopIt can also be used as an alternativeArray.everyorArray.some。

$.each()

1. return tureJump out of the current cycle!
2. return falseOut of the loop!

7、 Reference link

http://jquery.cuishifeng.cn