Common problems and solutions (front-end)

一、jquery  validate

Default Validation Rule
No. Rule Description
1 required=true Field that must be entered.
2 remote= "check.php" Use the ajax method to call check.php to validate the input value.
3 email=true Email must be entered in the correct format.
4 url=true URL must be entered in the correct format.
5 date=true Date must be entered in the correct format. Date verification ie6 error, use with caution.
6 dateISO=true Date must be entered in correct format (ISO), eg: 2009-06-23, 1998/01/22. Only the format is verified, not the validity.
7 number=true A valid number (negative, decimal) must be entered.
8 digits="true" Integer must be entered.
9 creditcard="" A valid credit card number must be entered.
10 equalTo:"#field" The input value must be the same as #field.
11 accept= Enter a string with a valid suffix (the suffix of the uploaded file).
12 maxlength=5 Enter a character string with a maximum length of 5 (Chinese characters are counted as one character).
13 minlength=10 Enter a character string with a minimum length of 10 (Chinese characters are counted as one character).
14 rangelength:[5,10] Enter a string whose length must be between 5 and 10 (Chinese characters are counted as one character).
15 range:[5, 10] The entered value must be between 5 and 10.
16 max=5 The input value cannot be greater than 5.
17 min=10 The input value cannot be less than 10.

Attach the original path: http://www.runoob.com/jquery/jquery-plugin-validate.html

2. Jquery selector

Jquery selector
1. Basic selector a.
ID selector (#ID name)
b. Style selector (. style name)
c. Tag selector (tag name)
2. Conformity selector
a. Intersection selector (and) 
Multiple selectors (li.class)
b. Union selector (or)
adding between multiple selectors (h2, h1)
c. Descendant selector (descendant selector) (ul span)
d. Subband selector , select only direct descendant nodes, second-level nodes
e. attribute selector $("li[name='age']")
3. filter selector 
a. filter selector by subscript (eq lt gt)
b. attribute filter

Attach the original path: http://jquery3.2.1.com

Three, js callback function understanding:

The callback function is placed in the parameter list of another function (such as parent), passed to the parent as a parameter, and then executed at a certain position in the parent function body. Speaking of abstraction, see an example:

 1 // To illustrate the concept of callback
 2 var doit = function(callback)
 3 {
 4 var a = 1,
 5 b = 2,
 6 c = 3;
 7 var t = callback(a,b,c);
 8 return t + 10;
 9 };
10 var d = doit(function(x,y,z){
11 return (x+y+z);
12 });
13 console.log(d);

First define the doit function with a parameter callback. This callback is the callback function, and the name can be arbitrarily chosen. Looking at the function body, first define three variables a, b, and c. Then call the callback function. Finally returns a value.
The doit function is called below. It should be noted that when the doit was just defined, the callback was not defined, so I didn't know what the callback was used for just now. This is actually very easy to understand. When we usually define a function, the parameters are only given a name, such as a, and a is used in the function body, but the whole process does not know what a is, only when the function is called. The specific value of a is only specified at the time, such as 2. Looking back, when calling doit, we need to specify what the callback is. As you can see, this function completes a sum function.
The execution process of the above code is:
call the doit function, the parameter is an anonymous function; enter the function body of doit, first define a, b, c, and then execute the anonymous function just now, the parameters are a, b, c, and return a t, and finally return a t+10 to d.

Fourth, js obtains the width, height and relative position of the html element

Precise positioning: scrollLeft, scrollWidth, clientWidth, offsetWidth

scrollHeight: Get the scroll height of the object.

scrollLeft: Sets or gets the distance between the left edge of the object and the leftmost edge of the currently visible content in the window

scrollTop: Sets or gets the distance between the top of the object and the top of the visible content in the window

scrollWidth: Get the scroll width of the object

offsetHeight: Get the height of the object relative to the layout or the parent coordinate specified by the parent coordinate offsetParent property

offsetLeft: Gets the calculated left position of the object relative to the layout or parent coordinates specified by the offsetParent property

offsetTop: Gets the calculated top position of the object relative to the layout or parent coordinates specified by the offsetTop property

event.clientX is the horizontal coordinate relative to the document

event.clientY vertical coordinate relative to the document

event.offsetX is the horizontal coordinate relative to the container

event.offsetY vertical coordinate relative to the container

document.documentElement.scrollTop vertical scroll value

event.clientX+document.documentElement.scrollTop relative to the horizontal coordinates of the document + the amount of scrolling in the vertical direction

Five, js ternary operator

The ternary operator as its name implies requires three operands.

The syntax is conditional? result1 : result2;. Here you write the condition in front of a question mark (?) followed by result1 and result2 separated by a colon (:). The result is 1 if the condition is met, otherwise the result is 2.

1 <script type="text/javascript">
2     var b=5;
3     (b == 5) ? a="true" : a="false";
4     document.write(" --------------------------- "+a);
5 </script>

Result: ----------------------------- true

1 <script type="text/javascript">
2     var b=true;
3     (b == false) ? a="true" : a="false";
4     document.write(" --------------------------- "+a);
5 </script>

Result: ----------------------------- false

Six, js attributes and methods

Math.round(x)  rounds to the nearest integer, the argument x must be a number.

The setTimeout() method is used to call a function or evaluate an expression after a specified number of milliseconds.

Syntax
setTimeout(code, millisec)
parameter description
code Required. A string of JavaScript code to execute after the function to be called.
millisec Required. The number of milliseconds to wait before executing code.

JavaScript methods can be divided into three categories:

a class method

b object method

c prototype method

The z-index property sets the stacking order of elements. Elements with higher stacking order are always in front of elements with lower stacking order.
Note: Elements can have negative z-index property values.
Note: Z-index only works on positioned elements (eg position:absolute;)!
illustrate

This property sets the position of a positioned element along the z-axis, which is defined as the axis extending vertically to the display area. A positive number means closer to the user, a negative number means further away from the user.

Default: auto
Inheritance: no
Version: CSS2
JavaScript Syntax: object.style.zIndex="1"

Guess you like

Origin http://43.154.161.224:23101/article/api/json?id=324702425&siteId=291194637