Notes and suggestions for using jquery

Notes and suggestions for using jquery
Jquery is a very good js framework. I believe most people have used it and are very familiar with its applications. It is also very simple to use and basic operations are not required. The jquery APIs are not listed here. To sum up the points worth attention, they are usually prone to mistakes. To share them, I think they are more valuable. The specific content is as follows: 1. ajax-related: copy code $. ajax ({type: "post", url: "XXX. action ", // data: 'name = John & location = China' data: {name: John, location: china}, dataType:" json ", async: false, success: function (data) {}}); copy Code 1. differences in the usage of data parameters ① When the parameter value is special (the value itself contains the character '&'): for example, name = John & John2, data is changed to 'name = John & John2 & location = China'. Then, data may be delivered to the background for unpredictable results. ② Under normal circumstances, that is, the parameter value does not contain special characters '&', and sometimes "the parameter cannot be received or is incomplete" may occur. I am also clear about the specific reasons, I have personally experienced this, and there is no problem with the Code. When it comes to the background, there is a parameter that cannot be passed, so the conclusion is that the second method is better: data: {name: John, location: china}, which has never been lost in parameters and is highly fault tolerant. 2. async synchronization mode: true or false? ① If you need to wait for the ajax execution result, use false. Otherwise, the correct result will never be obtained. The reason is very simple. Without false, the code will be executed directly. At this time, the ajax value has not been returned, and the program is not executed in the desired order, so the result can be imagined. ② It is best to use true if you do not need to wait for ajax execution results, because the page will be in the "false" state when the "synchronous mode" (async = false) is used, the user seems to be "stuck", especially when there are too many false dead times, poor experience (ajax should not be abused, work that can be done in the background, especially some initialization work ). 3. dataType: Generally, our return value type is "json", which must be written correctly (even if the HTTP package MIME type is specified in the background, when the returned value is incorrectly written as "html", the result is always unable to get the desired value. Finally, the returned value is printed. It is found that a lot of information including HTTP information is like a page HTML code, in this case, ajax is an HTTP request ). 4. To sum up, make good habits. No matter how simple your ajax is, these five most basic parameters are included and the parameter values are correctly written according to your own situation. Ii. tips: 1. the returned result of the jquery selector is always an array. Because of this, no error is reported if the element selected by id does not exist. However, you cannot write the code at will because no error is reported, if you are not sure whether the element exists, it is best to make a "non-empty" judgment when obtaining the element. Example: if ($ ("# btn1 "). length> 0) {// subject code} 2. if there are multiple elements with the same id or name on the page? It is generally obtained through the "relative path", because if you want to set a value, it is always triggered by some "events". If you click a button, take this button as the starting point to go up or down. Common Function: parent: Take the parent node element child: Take the child node element prev: Take the sibling node (same level) previous next: Take the sibling node (same level) the previous example: the shopping cart display page, a table contains many groups of goods, each group can be separately settled, that is, there is a settlement "button", and a hidden element exists in a certain position of the product in this group. Their names are the same, and the value can be: $ (this ). parents ("tr "). prev (). find ("td "). find ("input [name = 'activecode']"). val (); indicates finding the value of an element named activecode from a column in the first row of the settlement button, if you can determine the "td" here, you can add eq (index value ). 3. element without id (sometimes some elements do not have id and are usually list elements. If you do not want to add id or do not want to add id, or you cannot add id) I have encountered such A situation where there is A li set on the page. Their values all come from the defined set A, and some data A1 also comes from, the data in A1 can also appear in the page li or not. The requirement is the value in A1, and some style adjustments also appear in the li set. No element in li has an id, and only the ul outside has an id. In this "extreme condition", the final method is to cycle li and judge by equal values. (That is to say, as long as there is a loop in the value, the code is very bloated, but there is no way, it can only be like this) $ (li set ). each (function () {// subject code });