Front-end tips sorted out (continuously updated)

Find method definition location

There are many times when a function is not defined in that file

// Print on console
varPrototype. constructor;console.log(f);
Copy the code

Click on the red box in the image above to jump to the corresponding file location on the console

Filter element

nextAll()           /* All elements after */
prevAll()           /* All preceding elements */
children()          /* Child element */
parent()            /* Parent element (up one level) */
parents()           /* Parent elements (all parent elements) */
siblings()          /* Sibling element */
.replace(/<\/s>/g,"")	        /* Regular expression deletion is to specify the character ,\ for the escaped character */
ul>li:nth-child(n)             /*n can be a number, even, odd, formula (2n-1), etc. */
input[type="checkbox"]        /* Tag [attribute name =' attribute value ']*/
input[type="radio"]:checked	 /* Select */
input:disabled		        /*input Disables, () */Option: Selected /* Selected option*/ in the drop-down listCopy the code

Input Whether the check box is selected

/* JQ */
$("input").is(":checked")        Return true/false / * * /
$("input").prop('checked')      Return true/false / * * /
$("input").attr('checked')     /* return xx/undefined attribute judgment, add the checked attribute */
/ * native * /
var myInput = document.getElementById('myInput')
myInput.checked  Return true/false / * * /
Copy the code

CSS styles

border: 1px dashed #F00/* Spacing is dashed */ letter-spacing /* border-spacing */ border-spacing:0;			    /* Remove the table margins */
resize:none ;    		        /* lower right corner hidden */
outline:none;  				    /* The input box is hidden */ when clicked
background: url() no-repeat /* [left] px [left] px; * /text-decoration:none;		    /* Remove the underline */
cursor: pointer;			    /* Mouse becomes hand */
calc(100% - 500px)		       /* CSS width and height calculation */
/* CSS properties set the vertical alignment of elements */
vertical-align: middle/text - bottom/text - top/bottom... /*:hover +*/ :hover+*/hover(:hover)		
Copy the code

Set the aspect ratio

width:100%;
height:0;
overflow:hidden;
padding-bottom:31.25%;
Copy the code

Or (there may be compatibility)

width:100%;
height:31.25 vw;
Copy the code

Vertical center

Method 1 (Flex layout, parent element width is variable, recommended) :

.father{  /* On the parent element, the child element will be centered */
    display: -webkit-flex; 
    display: flex;	            		/* Position (written in the parent element) */
    justify-content:center;     	  /* Horizontal center */
    align-items:center;	        	/* Vertical center */
}
Copy the code

Method 2 (absolute positioning, parent element width is uncertain, recommended) :

.father{
    position: relative;
}
.child{
    position: absolute;
    left:50%;   /* Control the horizontal position */
    top:50%;  /* Control the vertical position */
    transform: translate(-50%, -50%);  /* The first argument is horizontal, the second is vertical */
}
Copy the code

Method 3 (absolute positioning, variable width and height of parent element, recommended) :

.father{
    position: relative;
}
.child{
    position:absolute;
    / * * / vertical
    top: 0;
    bottom: 0;
    / * * / level
    left:0;
    right: 0;
    margin: auto;
}
Copy the code

Mode 4 (table-cell, parent element width is variable) :

.father{  /* On the parent element, the child element will be centered */
    display: table-cell;
    vertical-align: middle;
}
Copy the code

Others (parent element width and height known) :

• Absolute location, by settingmarginControls the position of child elements within parent elements.
• Absolute location, by settingleft,topControls the position of child elements within parent elements.

Text overflow

Single-line text overflow displays ellipsis

overflow: hidden;              /* Hide the extra content */
white-space: nowrap;          /* Sets the content to non-newline */
text-overflow: ellipsis;     /* Sets the exceeded content to ellipsis */
Copy the code

Multi-line text overflow displays ellipsis

overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
-webkit-line-clamp: 3;     /* Sets the number of lines */
-webkit-box-orient: vertical;
Copy the code

Text out of line feed

word-break:break-all;     /* write a */
word-wrap: break - word;Copy the code

Child elements divide parent elements equally

Method 1 (Flexible layout, recommended) :

.father{
    display: flex;  
    display: -webkit-flex;
}
.child{
    flex: 1;
}
Copy the code

Method 2:

.father{
        display: table;
        table-layout: fixed; /*Optional*/
}
.child{
        display: table-cell;
}
Copy the code

Ul width out of line feed

Ul width is determined by li and does not wrap (other attributes are custom)

ul{
      white-space: nowrap;
}
li{
     display: inline-block;  /* Replace the float attribute */ with inline-block
     *display:linlne;    /* Compatible with earlier VERSIONS of IE */
     zoom: 1;   /* Compatible with earlier VERSIONS of IE */
}
Copy the code

Symbol <=> code

&lt; // < < < >; > < span style = "box-sizing: border-box! Important; "// (single and)"; // (double quotes, English) "&reg; // (registered trademark, China) ® &copy; // (Copyright) © & Trade; // (registered trademark, international general) ™ &nbsp; // small blank &ensp; // emsp; / / big gapCopy the code

Triangulation method (using the width of the border to achieve)

border-top: 50px solid transparent;
border-bottom: 50px solid transparent;
border-right: 50px solid red;/* Arrow background color so that the color is consistent with the overall color */
border-left: 50px solid transparent;  
Copy the code

Transparent — > transparent color when drawing triangles, omit the opposite side (draw the left triangle, do not write the right side); The width of the side is the width of the triangle. Do not set the height of the outer div (set to 0, or equal width). The width should be set to 0

Checkbox Checks the style modification

input[type="checkbox"]{
    width:15px;
    height:15px;
    border-radius: 5px;
    display: inline-block;
    text-align: center;
    vertical-align: middle; 
    line-height: 18px;
    position: relative;
}
input[type="checkbox"]::before{
    content: "";
    position: absolute;
    top: -2px;
    left: 0;
    background: #fff;
    width: 100%;
    height: 100%;
    border: 1px solid #ddd;
}
input[type="checkbox"]:checked::before{
    content: "\ 2713";
    background-color: #3498DB;
    position: absolute;
    top: -2px;
    left: 0;width:100%;
    border: 1px solid #3498DB;
    color:#fff;
    font-size: 14px;
    font-weight: bold;
}
Copy the code

other

accept="image/*"					 //input Can only upload images
accept="image/gif, image/jpeg"      // Restrict the image type
placeholder="Type in what you want to say."         // Prompt textString. The split ("Character [string]")			  // Cut the string into an array
$(window).resize(function() {});// Window size changes
$('#content_box').load('/mana/weekly/write_admin.html');	// Import HTML pages
<input type="datetime-local">	 //input-->Data Compatibility replacementwindow.location.reload();		// Refresh the page
blur						   // Lose focus events
Copy the code

Press enter to perform

$(document).keyup(function(event){
    if(event.keyCode ==13){
        $("#login").trigger("click"); }});Copy the code

Different outputs of the same content in the console

It’s kind of confusing to read the headline, but it’s pretty common, right

As shown in the figure above, the first object is a value in the array added by push, while the second object is defined directly and has the same content but different output on the console.

When a method is called, the first object is passed in as a variable and cannot participate in execution. What do you do if you want it to participate in execution? As follows:

let log = JSON.parse(JSON.stringify(obj));  // Focus on this line
console.log(log);  // So the two are the same
Copy the code

Get URL parameters

Method 1:

// Method encapsulation
function GetRequest() { 
    // Get the "?" in the url The string following the character
	var url = location.search; 
	var theRequest = new Object(a);if (url.indexOf("?") != -1) { 
	      var str = url.substr(1); 
	      strs = str.split("&"); 
	      for(var i = 0; i < strs.length; i ++) { 
		theRequest[strs[i].split("=") [0]] =decodeURI(strs[i].split("=") [1]); }}return theRequest; 
} 
// method call
var Request = new Object(a); Request = GetRequest();var urlCan = Request['Parameter name'];   
Copy the code

Method 2:

function getUrlParam(key) {
    // Get parameters
    var url = window.location.search;
    // Regex filters the address bar
    var reg = new RegExp("(^ | &)" + key + "= (/ ^ & *) (& | $)");
    // Match the target parameters
    var result = url.substr(1).match(reg);
    // Returns the parameter value
    return result ? decodeURIComponent(result[2) :null;
}
/ / call
getUrlParam("Parameter name");
Copy the code

Double ul expansion

function liLa_title(e){
    if($(e).find("ul").css("display") = ="none"){
        $(e).find("ul").slideUp("slow");
        $(e).find("ul").slideDown("slow");
    }else{
        $(e).find("ul").slideUp("slow");
        $(e).find("ul").find("ul").slideUp("slow"); }}Copy the code

Text color gradient

p{
    /* Gradient background */
    background-image: -webkit-linear-gradient(
        left, 
        #3498db.#f47920 10%.#d71345 20%.#f7acbc 30%.#ffd400 40%.#3498db 50%.#f47920 60%.#d71345 70%.#f7acbc 80%.#ffd400 90%.#3498db
    );
    /* Text fill color is transparent */
    color: transparent; 
    -webkit-text-fill-color: transparent;
     /* Clipping the background to text to display only text as background */
    -webkit-background-clip: text;         
    /* Double the size of the background-position */
    background-size: 200% 100%;            
    /* Animation calls */
    animation: masked-animation 4s infinite linear;
}
/ * * / animation
@keyframes masked-animation {
    0% {
        /* Background-position sets the starting position of the background image. * /
        background-position: 0 0;   
    }
    100% {
        background-position: -100% 0; }}Copy the code

Click position (scroll bar scroll)

function scrollToLocation() {
    var mainContainer = $('#thisMainPanel'),
    // Scroll to the last div with class name son-panel in 
      

    scrollToContainer = mainContainer.find('.son-panel:last');
    // Scroll to 
      

        where the class name is son-panel
      
    scrollToContainer = mainContainer.find('.son-panel:eq(5)');
    // Non-animated effect
    mainContainer.scrollTop(
     scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
    );
    // Animation effect
    mainContainer.animate({
        scrollTop: scrollToContainer.offset().top - mainContainer.offset().top + mainContainer.scrollTop()
    }, 2000);//2 seconds to slide to the specified position
}
Copy the code

JQ event binding

// Get all a tags, bind all events, and automatically resolve browser compatibility issues
$("a").on("click", removerItem);
// Unbind event
$("a").off()
// Get the button label
$("#id").on("click", addItem)
/ / case
$("#cut_right").on("click".function (){})
Copy the code

Note: when jqery binds the event, $(this) represents the current tag. With $(this), you can bind the same event to multiple tags to operate the current click tag. If you don’t use jQuery, native JS needs to use this.getarrribute (‘ga’) to get the value of the ga property of the currently clicked label

JQ animation

$("div").animate({left:'250px'});
Copy the code

Input date modification

::-webkit-datetime-edit // Controls the edit area ::-webkit-datetime-edit-fields-wrapper // Controls the year month date this area ::-webkit-datetime-edit-text // This controls the slash or dash between year, month and day ::-webkit-datetime-edit-month-field // Controls the month ::-webkit-datetime-edit-day-field // controls the specific day ::-webkit-datetime-edit-year-field // Controls the year text, such as2017The four-letter space ::-webkit-inner-spin-button // This controls the up and down arrow ::-webkit-calendar-picker-indicator // This controls the down arrow ::-webkit-clear-button // This controls the clear buttonCopy the code

Compatibility writing

-webkit-		 /* Safari and Chrome */
-moz-		/* Firefox */
-o-		/* Opera */
Copy the code

Ps: Front-end tips continue to update, interested partners can click to pay attention to yo, we learn front-end ~