CSS + DIV + JQuery video summary

CSS + DIV + JQuery video summary

I have learned CSS and DIV in niujiao, CSS + JS encapsulation in JS, And I have reviewed it again here. It also serves as an example to check for missing content, it's a more systematic review.

The core content of css mainly includes four aspects: Standard stream, box model, floating and positioning. They also play a decisive role in the layout of B/S front-end pages. The box model is used to determine the specific size, border, and spacing of each element. The floating positioning and standard flow are used to determine the order and location of elements on the page, some basic CSS styles, such as background images and colors, can form various web pages.

DIV: a type of Positioning Technology in CSS that appears as a separate module. It is opposite to span. The positioning in CSS also includes position relative and absolute methods. They can be used in combination to make the page more complex.

JS: JavaScript technology can be used to enable the pages designed by CSS to present a dynamic effect and to solve the slow interaction between clients and servers of other languages, JQuery is a lightweight JS library that is compatible with multiple browsers. It makes it easier to design various dynamic effects on various elements on the page.

There is an inseparable relationship between the two: careful analysis shows that many seemingly complex effects are used in JS animation design, in fact, they are controlled by setting CSS styles for page elements. The Fade-in and fade-out of the video is controlled by the opacity style, and the animation effects such as scrolling and accelerating and slowing down are only achieved through some element positions, small and other simple CSS styles or DOM element attributes plus some simple methods such as setTimeout and setInterval. For convenience, JS also provides some methods to set or obtain CSS styles.

Css vulnerability detection, filter:

Ie: opacity: filter (alpha = 50); // w3c opacity: 0.5/* 2. blur fuzzy */. blur {filter: progid: DXImageTransform. microsoft. blur (pixelradius = 4, makeshadow = false);}/* 3 transparent color */. chroma {filter: chroma (color = FF6800);/* remove golden yellow */}/* 4, flip */. flip1 {filter: fliph;/* horizontal flip */}. flip2 {filter: flipv;/* vertical flip */}. flip3 {filter: flipv fliph;/* flip horizontally and vertically */}/* 5, mask */. mask {filter: mask (color = # 8888FF);/* mask */}/* 6, wave */span.wav e1 {filter: wave (add = 0, freq = 2, lightstrength = 70, phase = 75, strength = 4 );}

JS: Li Yanhui's video is quite comprehensive. For JQuery, the video mainly describes some methods that are frequently encountered in practical applications. Here we will summarize:

1. Implement concatenation: encapsulate $ () to return a JQuery object. The JQuery object understood here is actually the same as the core object of the Base library in the blog front-end example. By setting a constructor object, you can define many encapsulated methods for the prototype object of this object for external calls. At the same time, after each execution, the object itself is returned, so that you can continue to implement the concatenation call next time. This greatly facilitates programmers, which fully embodies the design philosophy of JQuery's write less and do more.

2. Common Methods:

1. Get and set attributes

Html (), css (), val (), scrollLeft/Top (), height ()/width (), outerWidth (true)/Height (true)

2. Hide

Hide () and show (), slideDown () and slideUp (), toggle () and slideToggle (), fadeOut ()/fadeIn () // note that slow, fast, normal, or a number is used for parameters.

3. animation effect

Animate (), dequeue ()

4. Others

Is () method, scroll (), appendTo (), plug-in usage, browser version and type judgment browser, JSON data format, and so on.

The above is a summary of some basic knowledge in the JQuery video. It also includes some basic AJAX encapsulation functions such as ajaxStart () and ajaxStop (), ajaxComplete (), $ (). get (), $ (). post (), etc.

Summary: The combination of CSS and JS forms the rich web pages of today's websites. Based on JQuery, It is a JS package library. When encapsulating, it targets browser differences, try to use capability control instead of Version Control for encapsulation. At the same time, we should try our best to understand the principle of encapsulation for the encapsulated JS library, so that we can build our own JS library in the future.