Review notes of web development technology

List of articles

• One 、Html
• • The properties of hyperlinks work
  • • href
    • target
    • id
  • Forms form Functions of attributes in
  • • Action
    • method
    • name
  • The appearance of common form elements
  • • text
    • password
    • radio
    • checkbox
    • file
    • submit
    • button
  • How to set the default selected status for radio and multi-choice buttons
  • Form elements readonly and disabled Application of attributes
  • • The same thing
    • readonly
    • disabled
• Two 、CSS
• • Css Common selectors
  • • Foundation selector
    • • 1. Type selector
      • 2. Class selectors
      • 3.ID Selectors
      • 4. Universal selector
    • Hierarchy selector
    • • 1. Descendant selector
      • 2. Child Selector
      • 3. Adjacent selector
      • 4. Brother selector
  • Font related css attribute
  • • font-size
    • font-weight
    • font-style
    • font-family
  • How to achieve horizontal centering by setting the outer margin in the box model
  • z-index Must cooperate position Locate to use
  • Hyperlink pseudo class hover Application
  • adopt inline-block Achieve horizontal layout
  • • 1. Align multiple elements horizontally in the middle
    • 2. Multiple elements are aligned horizontally
    • 3. Align multiple elements horizontally to the right
• 3、 ... and 、Javascript
• • Js Three bullet box commands in ：alert(),prompt(),confirm(), And their differences
  • • alert()
    • prompt()
    • confirm()
  • Math.radom() How to use
  • Array sort() Application of methods
  • Document There are four ways for objects to directly locate elements getElement[s]By[Id,Name,ClassName,TagName]
  • bom Object to refresh this page ：reload
• Four 、jQuery
• • jquery Three characteristics ：
  • onload Incident and ready The difference between events
  • Modify element content ：.html() or .text()
  • • .html()：
    • .text()：
  • Defocus event blur() The role of
  • Traverse the parent element ：
  • Traverse all ancestor elements ：
• 5、 ... and 、Ajax
• • ajax Common properties
  • ajax Common return types
  • json String format
• 6、 ... and 、 experiment
• • The order of Experiment 2 JS part
  • Experiment 4 Ajax Of JS A key part

One 、Html

The properties of hyperlinks work

href

Used to link to another web page , Use form ：href="https://www.baidu.com/"

target

You can make the link open in a new window

id

It is equivalent to a mark

Forms form Functions of attributes in

Action

Used to define the location of the form handler

method

Define the method for transferring form results from the browser to the server , Generally speaking, there are get and post

name

The name of the form

The appearance of common form elements

text

Visible text box

eg:<input type="text" >

password

Can be seen as an invisible text box , That is, the password box

eg:<input type="password">

radio

Radio buttons

eg:<input type="radio">

checkbox

Checkbox

eg:<input type="checkbox">

file

File selection box

eg:<input type="file">

submit

Submit button

eg:<input type="submit">

button

Button box

eg:<input type="button">

How to set the default selected status for radio and multi-choice buttons

It is similar to single choice and double choice , In the selected input Add to label checked Attribute is enough , Take a chestnut ：

<form action="" >
<input type="radio" name="sex" value="male" >Male<br>
<input type="radio" name="sex" value="female" checked>Female
</form>

In this example, we will Female Added checked attribute , So... Is selected by default Female, The same is true for multiple buttons , Add one to all the places you want to choose checked that will do

Form elements readonly and disabled Application of attributes

The same thing

Both make it impossible for users to change the contents of form fields

readonly

① Only aim at input(text / password) and textarea It works

② Form elements are in use readonly after , When we put the form with POST or GET The way to submit , The value of this element Will be passed on

③ After using this element The appearance will not change

disabled

① disabled Valid for all form elements

② Form elements are in use disabled after , When we put the form with POST or GET The way to submit , The value of this element Will not be passed on

③ After using this property , Will make form elements The appearance turns gray

Two 、CSS

Css Common selectors

Foundation selector

1. Type selector

The type selector allows you to select a type of html label , And use styles for it

give an example ：h1 { color:Red; font-size:30px; }

This is to select all h1 And let the color be Red、size by 30px

2. Class selectors

Through the class selector, you can select class same html label , And use styles for it

give an example ：.error-message { color:Red; line-height:2px;}

This allows you to select all class by "error-message" The elements of , And change its style

3.ID Selectors

ID The selector can select ID Is a specific element of a value , And use styles for it

give an example ：#title{color:red;}

We will attribute id by "title" The style of the element of .

4. Universal selector

The general selector can select all the elements on the page , And apply styles to them , use * To express .

give an example ：* { property1: value; property2: value; };

Hierarchy selector

1. Descendant selector

give an example ：$('div p'), All descendants of the ancestral element ( descendants ) in , Query the specified element

2. Child Selector

give an example ：$('div > p'), Find in all the first level child elements of the parent element

3. Adjacent selector

give an example ：$('.top + li'), Select the immediate sibling of the current element

4. Brother selector

give an example ：$('.top ~ li'), Select all sibling elements behind the current element

Font related css attribute

font-size

Specifies the font size of the text

Can pass Absolute size 、 Relative size 、 Length value 、 percentage There are four ways to change the font size

for example ：

Absolute size ：font-size: large;

Relative size ：font-size: larger;

Length value ：font-size: 12px;

percentage ：font-size: 70%;

font-weight

Specify the thickness of the font .

You can change the font weight by text or numbers

In terms of words ：

• normal: The default value is . Define standard characters .
• bold: Define bold characters .
• bolder: Define bolder characters .
• lighter: Define finer characters .

Numbers ：

100~900

Define characters from thin to thick .400 Equate to normal, and 700 Equate to bold.

The code for ：

p.normal {font-weight:normal;}
p.thick {font-weight:bold;}
p.thicker {font-weight:900;}

font-style

Specifies the font style of the text

There are four optional values ：

• normal: The default value is . The browser displays a standard font style .
• italic: The browser will display a font style in italics .
• oblique: The browser will display an oblique font style .
• inherit: Specifies that the font style should be inherited from the parent element .

Code example ：

p.normal {font-style:normal;}
p.italic {font-style:italic;}
p.oblique {font-style:oblique;}

font-family

Set the font family of the text , In other words, change the font style

p.serif{font-family:"Times New Roman",Times,serif;}

This is the setting class by serif The font is Times New Roman style

How to achieve horizontal centering by setting the outer margin in the box model

① Let the box have a certain width

② The left and right margins of the box are set to auto

The code for ：

div {
			width: 200px;
			height: 200px;
			margin: 30px auto;
            padding: 4px;
            border: 1px solid red;
        }

This sets up a box centered through the outer margin

z-index Must cooperate position Locate to use

z-index Property to set the overlapping order of elements , If it's a positive number , It's closer to the user , A negative number means farther away from the user , A bit like the concept of layers

• The elements in a web page all have two levels of stacking
  • The environment in which absolute positioning is not set ,z-index yes 0
  • Set the stacking environment for absolute positioning , At this time, the position of the layer is z-index The value of
• Change the stacking order of layers with and without absolute positioning , Just adjust the absolute positioning layer z-index value

Hyperlink pseudo class hover Application

effect ： Modify the hyperlink style when the mouse hovers over it .

grammar ： Tag name : Pseudo class name { Statement ;}

eg:

a:hover{
    color:#B46210;
    text-decoration:underline;
}

It's out hover There are also three types of hyperlink pseudo classes ：

Pseudo class name

meaning

Example

a:link

Hyperlink style when not clicked

a:link{color:#9ef5f9;}

a:visited

Click to access the hyperlink style

a:visited {color:#333;}

a:hover

The hyperlink style on which the mouse hovers

a:hover{color:#ff7300;}

a:active

Click the unreleased hyperlink style

a:active {color:#999;}

Set the order of pseudo classes ：a:link->a:visited->a:hover->a:active

adopt inline-block Achieve horizontal layout

• Like block level elements , Can set the width of the element , high , Vertical spacing . Width if not specified , Is the framing of the internal element .
• The outer elements are arranged in the same way as the inner elements , It is arranged horizontally .

1. Align multiple elements horizontally in the middle

<style type="text/css">
    .ly {
          display: table; 
          width: 100%;
          font-size: 0 !important;
          text-align: center;
    }
    .ly__item {
          display: inline-block;
          vertical-align: top;
          font-size: medium;
    }
</style>

2. Multiple elements are aligned horizontally

<style type="text/css">
       .ly {
            display: table; 
            width: 100%;
            font-size: 0 !important;
            text-align: justify;
        }
        .ly:after {
            content: '';
            width: 100%;
            display: inline-block;
        }
        .ly__item {
            display: inline-block;
            vertical-align: top;
            font-size: medium;
        }
</style>

Be careful ： If there are no spaces between elements , Enter or something , Alignment at both ends will fail .

3. Align multiple elements horizontally to the right

<style type="text/css">
    .ly {
          display: table; 
          width: 100%;
          font-size: 0 !important;
          text-align: right;
    }
    .ly__item {
          display: inline-block;
          vertical-align: top;
          font-size: medium;
    }
</style>

A complete example ：

<!DOCTYPE html>
<html>
 
<head lang="en">
    <meta charset="UTF-8" name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no">
    <title>display:inline-block</title>
 
    <style type="text/css">
       .ly {
            display: table; 
            width: 100%;
            font-size: 0 !important;
            text-align: justify;
        }
        .ly:after {
            content: '';
            width: 100%;
            display: inline-block;
        }
        .ly__item {
            display: inline-block;
            vertical-align: top;
            font-size: medium;
        }
    </style>
</head>
 
<body>
    <div class="ly">
        <div class="ly__item">xxx </div>
        &nbsp;
        <div class="ly__item">xxx </div>
        &nbsp;
        <div class="ly__item">xxx </div>
        &nbsp;
        <div class="ly__item">xxx </div>
        &nbsp;
      </div>
</body>
 
</html>

Reference blog ：https://www.jianshu.com/p/707d9aab1d87

3、 ... and 、Javascript

Js Three bullet box commands in ：alert(),prompt(),confirm(), And their differences

alert()

This pop-up window directly displays the text information in brackets in the dialog box

alert It's a warning box , There's only one button “ determine ” No return value , Warning boxes are often used to ensure that users can get some information . When the warning box appears , The user needs to click OK to continue .

eg:alert("Hello")

prompt()

The pop-up window can display information and allow us to fill in information , And return it to the caller

prompt It's a reminder box , Return the entered message , Or its default value prompt box is often used to prompt users to enter a value before entering the page . When the prompt box appears , The user needs to enter a value , Then click the confirm or cancel button to continue to operate . If the user clicks ok , So the return value is the input value . If the user clicks cancel , So the return value is zero null.

eg:name=prompt( " May I have your name, please? ?" );

confirm()

The pop-up window can display information and let us make a choice ： Confirm or cancel , And then return a bool Value to the caller

confirm It's a confirmation box , Two buttons , Confirm or cancel , return true or false. The confirmation box is used to enable the user to verify or accept certain information . When the confirmation box appears , The user needs to click OK or cancel to continue . If the user clicks ok , So the return value is zero true. If the user clicks cancel , So the return value is zero false.

eg：con=confirm( " Do you like roses ?" );

Math.radom() How to use

Math.random() Method returns greater than or equal to 0 Less than 1 A random number of , We can multiply it by a multiple to get the random value of the range we want

 value  = Math.floor(Math.random() *  The total number of possible values  +  The first possible value )

Array sort() Application of methods

Use it directly arr.sort() Words , The elements in the array will be sorted from small to large by default , So we need to write a custom sorting method , Take a chestnut ：

var arr = [9,7,2];

arr.sort(function(a,b){
    if(a>b) //  If  a  Greater than  b, Position exchange 
        return 1;
    else // otherwise , Position the same 
        return -1;
});
//  Sorting result : 2,7,9

We are function Is a sort function , Of course, we can also directly write the sorting function on the outside , Then directly adjust the function as a parameter

var arr = [9,7,2];
function mysort(a,b){
    if(a>b) //  If  a  Greater than  b, Position exchange 
        return -1;
    else // otherwise , Position the same 
        return 1;
}
arr.sort(mysort);
//  Sorting result : 9,7,2
alert(arr);

Document There are four ways for objects to directly locate elements getElement[s]By[Id,Name,ClassName,TagName]

• One 、document.getElementById(“id Value ”)： This method returns a single element , because html in id Can only be the only
• Two 、document.getElementsByName(“name Property value ”)： This method returns a collection of element objects
• 3、 ... and 、document.getElementsByClassName(“ClassName Tag name ”)： Returns the collection of elements with all specified class names in the document , As NodeList object .
• Four 、document.getElementsByTagName(“ Tag name ”)： This method returns a collection of element objects

bom Object to refresh this page ：reload

adopt location.reload(); To refresh the current page

Four 、jQuery

jquery Three characteristics ：

One 、$ Equate to jquery

Two 、 Chain operation

3、 ... and 、 Implicit iteration

onload Incident and ready The difference between events

onload Events are original js Function of ,ready Event is jQuery Function of

The main differences are ：

One ：

• Native js Will wait for the page dom Element loaded , And the page image will not be executed until it is loaded

• jquery Will wait dom All the elements are loaded , But it will not wait until the image is loaded

Two ：

• Through the native js Can be obtained dom The attribute value of the element

• adopt jquery You can't get dom The attribute value of the element

3、 ... and ：

• Native js If you write multiple entry functions , What you write later will overwrite what you write earlier
• jquery If you write multiple entry functions , The back doesn't cover the front

Modify element content ：.html() or .text()

.html()：

Used to read or set... In an element HTML Content

eg:$("p").html("hello world");

.text()：

It can be used to read or not set the text content in an element

eg:$("p").text("Hello world");

Defocus event blur() The role of

When an element loses focus (blur) Change its color .

Traverse the parent element ：

parent(): Get the parent of each element in the current set of matching elements , Using selectors for filtering is optional .
If given a representation DOM Elements of the collection jQuery object ,.parent() Methods allow us to DOM Search the tree for the parent elements of these elements , And use the matching elements to construct a new jQuery object .

Traverse all ancestor elements ：

parents() Get the ancestor elements of each element in the current matching element set , Using selectors for filtering is optional .

If given a representation DOM Elements of the collection jQuery object ,.parents() Methods allow us to DOM Search the tree for the ancestor elements of these elements , And construct a new one by using the matching elements arranged upward from the nearest parent element jQuery object . Elements are returned in an outward order from the nearest parent element .

5、 ... and 、Ajax

ajax Common properties

url,data,type,dataType,success,error

ajax Common return types

text,html,xml,json etc.

json String format

object {“ attribute 1”:” value 1”,” attribute 2”,” value 2”……” attribute n”:” value n”},

Array [ o b j 1 , o b j 2 , … … o b j n ] [obj_1,obj_2,……obj_n] [obj1,obj2,……objn]

6、 ... and 、 experiment

experiment 2 Sequencing and experimentation 4ajax

The order of Experiment 2 JS part

let flag = 1;
function init(){
    let parent = document.getElementById("pricesList");
    let domArr = [];
    for(let i = 0;i < parent.childNodes.length;++i) {
        let obj={};
        if(parent.childNodes[i].nodeType == 1) {
            obj.dom = parent.childNodes[i];
            obj.price = obj.dom.lastElementChild.innerHTML.trim().substring(3);
            domArr.push(obj);
        }
    }
    domArr.sort(function(a,b){
        return a.price - b.price;
    });
    return domArr;
}
let domArr;
window.onload = function(){
    domArr = init();
}

function sort() {
    let span = document.getElementsByTagName("span")[0];
    if(flag) {
        flag = 0;
        span.className = "up";
        for(let i = 0;i < domArr.length; ++i) {
            domArr[0].dom.parentNode.appendChild(domArr[i].dom);
        }
    }
    else {
        flag = 1;
        span.className = "down";
        for(let i = domArr.length - 1; i >= 0; --i) {
            domArr[0].dom.parentNode.appendChild(domArr[i].dom);
        }
    }
}

Experiment 4 Ajax Of JS A key part

$.ajax({
    url:"list.json",
    dataType:"json",
    success:function(list){
        let $item = $('<div><div class ="icon"><img/></div><div></div></div>');
        list.forEach(json => {
            $item.clone().find("img").attr("src",json.icon).
            end().children("div:last-child").html(json.nickname).end().appendTo($("aside"));
        });
    }
});