Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

This article also participated in the “Digitalstar Project” to win a creative gift package and creative incentive money

preface

We’ve collected 24 essential front-end tips that we hope will help you reduce development time and increase your time. I will post more tips in the future

1. Prevent input from displaying history

If you don’t want the browser to keep a history of form input, simply add the autoComplete =”off “attribute to the input tag:

<input type="text"  autocomplete="off" / >
Copy the code

2. A div that shows circles when numbers are low and ellipses when numbers are high

HTML:

<span class="box">1<span>
Copy the code

CSS:

The box {text - align: center; The line - height: 18 px; The font - size: 12 px; Background: skyblue; color: white; // Important style padding:2px; Display: inline-block; display: inline-block; Border - the radius: 20 px; Min-width: 18px; // Width: 18px; // here is the line height}Copy the code

3. Set a 1-pixel border for the table

CSS:

table{border-collapse:collapse;
}
table tr td.table tr th{border:1px solid black;
}
Copy the code

4. Debug the REAL MUI and view object properties

If you can’t see the object property value, just [object,object], you can use json.stringify (object) to output it.

5. Stop the timer of another function

How to stop the timer of another function:

  1. In the timer function return the timer var time= setInterval () and return time.

  2. In addition, after calling the timer function, set a variable to get the return value of the timer function, and then clearInterval

6. Regular expressions – remove all Spaces

str.replace(/\s/g."")      // Remove all Spaces from the STR string
Copy the code

7. Regular expressions — Chinese only

/^[\u4e00-\u9fa5]+$/     // Matches only Chinese regular expressions
Copy the code

8. Android or ios dialing function

<a href="tel:888,023"></a>888 r: 023Copy the code
<a href="tel:11211211212"></a>: Dial 11211211212 directlyCopy the code

9. Click blank mask to disappear

The mask disappears when clicked on anything other than the obj object: the click object is the mask, and obj is the content child inside the mask

1 dom.click(function(){
2 　　　　var obj=$("Objects with content");
3 　　　　if(! obj.is(e.target) && obj.has(e.target).length ===0) {4 　　　　　　// Hide the mask
5}6 })
Copy the code

Parent set to “disappear” and child set to stop bubbling JS (e.topPropagation ())

10. The IMG border of IE

Set img{border: None} to img{border: none}

11. The padding: 0

Using *{padding: 0} invalidates cellPADDING in the table:

Solution: Set td padding to achieve the same effect

12. Display: Inline-block interval resolved

Using display: inline – block; There will be gaps, the solution is:

Font :0 font-size:0

But Google Chrome has a default minimum font limit, so add -webkit-text-size-adjust: None for compatibility

13. Small program to quickly create 4 files

Wechat quickly creates 4 files namely:.wxml js json WXSS includes directories together:

Add pages/addr/addr to the app.json page.

The addr directory is then automatically created in the Pages directory, and there are also the standard four files

14.vertical-align

The vertical-align attribute works only when the element is inline or inline-block, such as a div block element.

That’s why sometimes setting div to display:table-cell, vertical-align works. Table -cell can be understood as inline-block.

15. Small programs hidden or displayed

Use wx:if=”{{statement}}” to hide or show an element in a wechat applet. If you want to determine the current index value, you can use index. For example, wx:if=”{{index > 3}}” determines the element whose index is greater than three

When using wx:for=”{{}}” list, add wx:key=”” to eliminate the warning

16. Border color gradient

If you want the border color to have a gradient, use the css3border-image attribute. For example, border-image: Linear-gradient (Red 10%, blue 60%) 30 30; Of course, when setting this, the border should have a width and a browser prefix for compatibility.

17. Div nested, margin-top no effect

HTML structure:

<div class="Out">
 //content
 <div class="In"></div>
</div>
Copy the code

If you set margin-top to the in div, the in div will not have the effect of margin-top, but the out div will have the effect of margin-top.

This problem does not occur if out contains content.

If you want a margin-top effect without content, you can set out to div: overflow: hidden or display: inline-block/table-cell

18. The A TAB in the bottom navigation bar of the MUI cannot jump:

mui('body').on('tap'.'a'.function(){
 document.location.href=this.href;
});
Copy the code

Add this code to it

19. Fixed the element relative to the parent rather than the entire page

The fixed element is set relative to the browser window by default, so how do you position it relative to the specified parent fixed?

Set fixed to absolute. Set fixed to absolute. Set fixed to transform. Translate (0,0), fixed does not change, because the transform affects the containing block of fixed

20. Wechat mini program needs to use the cover view label when content needs to be covered on the video

 

21. If the display:inline-block command in Safari causes a gap and the child elements allocated evenly cannot be displayed in a row, replace the display:inline-block command with the display:table-cell command. The perfect solution

22. If you want to align both ends, you can use the following method:

box{
    text-align: justify; 
}
box:after{
    display: inline-block;
    width: 100%;
    content: ' ';
}
Copy the code

Or you can add a tag inside the box that looks like after. And it’s very compatible

23. The difference between :before/:after and ::before/::after is that the previous compatibility is better than the latter compatibility, both are false elements

 

24. : Before The pseudo-element must have a content, which has an attr () function that retrieves the element’s data-xx attribute.

Ex. :