This is the 15th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Today’s story is aboutDrag-and-drop implementation 和 regularRelevant) key!! Do do do

Can be used as a beginner’s learning route, can refer to, learning progress is not particularly catch up! Under continuous update

Combined with their own understanding, simple and comprehensive summary of JavaScript learning in the process of basic knowledge, convenient to deepen understanding!

Let’s get started! ‘Build on the foundation ‘! Come on! Take it seriously!

1, comb review yesterday’s knowledge

  • Event delegate: target | | srcElement

  • Event delegate (event agent) :

  • Json object: {}

  • Read operations json = {” SRC “:” 1. JPG “, “2. JPG]} json. The SRC json (” SRC”)

  • Drag: Implement onMousedown onMousemove onMouseup

  • Scroll bar operation

How to access the page rolls away from: the document. The documentElement. ScrollTop | | document. The body. The scrollTop

2. Cancel the text selection when dragging

window.getSelection?

window.getSelection().removeAllRanges():document.selection.empty();

3. Offset family attribute

OffsetWidth/clientWidth/style. Width

  • Both offsetWidth and clientWidth can get style values for non-row elements

  • OffsetWidth value = Content width + padding + border

  • ClientWidth value = Content width + PADDING

    • The resulting value is of numeric type
    • Read-only attributes cannot do this:obj.offsetWidth = 400

  • Style.width cannot get style values for non-inline elements inline style values = width of content

    • The resulting value is a string withpx
    • Can read but write

  • OffsetLeft: Gets the left offset of the closest element to the element that has a position set, the left offset of the corresponding body if none of the element’s parent elements has a position set

  • OffsetTop: same as above

4, the idea of magnifying glass

  • Required events:
    • Mouse in and out move onMouseover onMouseout onMousemove
    • Mouse over: Display mask layer mask and large image display area
    • Mouse over: Hide mask layer mask and large image display area
    • Mouse movement:
      • 1, mask left and top to make the mask move
      • 2. Use the left and top of bigImg to make the image move
      • 3. Mask movement direction and bigImg

5. Regular — Correct rules

Limits the validity of user input data

Benefits: Improve work efficiency

6. Regular expressions

Consisting of ordinary characters and special characters that have specific meanings

7. Regular definition

Var reg = / common character or special character/modifier; new RegExp

Modifier: I case insensitive g Global lookup

8. Special characters in re

8.1 Single Character:

  • ^: start
  • $End:
  • |Expressed or generally used with ()
  • *: is equivalent to {0,} indicating that the character immediately preceding it occurs at least 0 times
  • +: is equivalent to {1,}
  • ?: is equivalent to {0,1}
  • .: indicates any character
  • \: Escape characters Special characters that represent original meanings in the re must be escaped. —- original meanings.

8.2 Combined Characters:

  • \d: any number between 0 and 9
  • \D: non-numeric (any character)
  • \w: represents any word character (letter, number, or underscore)
  • \W: indicates non-word characters
  • \s: indicates any whitespace character
  • \S: indicates a non-whitespace character

8.3 the brackets:

  • {m,n}M < n m,n are all positive integers which means that the characters immediately preceding {} occur at least m times and at most n times
  • {m}The fact that m is a positive integer means that the character immediately preceding {} can occur only m times
  • {m,}M is a positive integer meaning that {} is preceded by at least m characters
  • [][12as] [0-9] = \d [a-z]
  • (^)[^a-z] Indicates a non-lowercase letter
  • [\u4e00-\u9fa5]

Preview: Come on, dreamers

[Preview] : Next, learn regular expressions and start to contact the implementation of some requirements in real work

Learning is a continuous process, stick to it, there will be harvest!

Accumulate over a long period of time, consolidate the foundation, early into dafang!

It is not easy to insist, adhere to down is not easy, you really good!

Calm Down & Carry On!

Read more:

The previous article is updated and reviewed

【 Re-learn JS】 Study every day to consolidate the foundation:

[day1] js initial

[day2] Various operators,

[day3] Data type,

【day4】 Loop structure & Conditional Statement,

【day5】 Function (key),

[DAY6] Scope & Event,

【day7】 Object & Array method summary,

[day8] String methods & Partial sort,

【day9】Math object & Wrap function,

[DAY10] BOM- Browser Object Model,

【 DAY11 】DOM- Document Object Model,

【day12】Event Object

【day13】Event object

[Day14] Event Delegate & Drag principle

More on the way… A long way to go ==-.. – = =