CSS DIV JQuery practical video summary_html/css_WEB-ITnose

I have learned CSS and DIV in Beef Brisket, and I have learned CSS and JS encapsulation in JS. I reviewed it again here, and it is also a more systematic review to check for omissions and fill in the gaps.

The core content of css mainly includes four aspects: standard flow, box model, floating and positioning, and they also play a decisive role in the layout of the B/S front page. The box model is used to determine the specific size, border and spacing of each element. Floating positioning is combined with standard flow to determine the order and position layout of elements on the page, plus some basic CSS styles such as background images and colors. You can then form web pages in various formats.

DIV: A type of positioning technology in CSS, appearing as a separate module. Opposite of span. Positioning in CSS also includes relative and absolute methods such as position, which can be used in combination to make the page appear more complex positioning effects.

JS: In order to make the page designed by CSS present a dynamic effect, and to solve the problem of slow interaction between the client and the server in other languages, JavaScript technology can be used, and JQuery is an encapsulated lightweight JS library that is compatible with multiple browsers. Using it, you can more conveniently design various dynamic effects on various elements in the page.

And there is an inseparable relationship between the two: careful analysis found that when designing animation effects with JS, many seemingly complex effects are actually controlled by setting the CSS style of page elements. . For example, the fade-in and fade-out of images is controlled through opacity styles, while animation effects such as scrolling, acceleration and deceleration are only achieved through some simple CSS styles such as element position and size or DOM element attributes plus some simple methods such as setTimeout and setInterval. It is encapsulated by simple functions. For convenience, JS also provides some methods to set or get CSS styles.

css leak checking and filling, filter:

Ie: opacity:filter(alpha=50);//w3c opacity:0.5/*2、blur模糊*/.blur{    filter:progid:DXImageTransform.Microsoft.blur(pixelradius=4,makeshadow=false);}/*3透明色*/ .chroma{        filter:chroma(color=FF6800);        /* 去掉金黄色 */ }/*4、flip翻转*/   .flip1{     filter:fliph;   /* 水平翻转 */  }   .flip2{     filter:flipv;   /* 竖直翻转 */  }   .flip3{     filter:flipv fliph; /* 水平、竖直同时翻转 */ }/*5、遮罩*/   .mask{      filter:mask(color=#8888FF); /* 遮罩 */    }/*6、波浪*/   span.wave1{         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 talks about some methods that are often encountered in practical applications. Here is a summary:

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 base library in the blog front-end example. By defining a constructor object, many encapsulated methods are defined for the prototype object of this object for external calls. At the same time, after each execution is completed, the object itself is returned so that the continuous call can be continued next time. This greatly facilitates programmers and fully embodies JQuery's write less, do more design concept.

2. Commonly used methods:

1. Get and set properties

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

2. Show and hide

hide() and show(), slideDown() and slideUp(), toggle() and slideToggle(), fadeOut()/fadeIn()//Here you should pay attention to the use of parameters slow, fast, normal or directly as numbers

3. Animation effect

animate(), dequeue( )

4. Others

Is() method, scroll(), appendTo(), use of plug-ins, browser version and type judgment, JSON data format, etc.

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

Summary: The combination of CSS and JS together constitutes the rich and colorful web pages in today’s websites. JQuery is an encapsulation library of JS. When encapsulating, in view of browser differences, capability control should be used as much as possible. And try to abandon version control for encapsulation. At the same time, for the encapsulated JS library, we should also try our best to understand the principle of encapsulation, so as to know what it is and why it is so that we can build our own JS library in the future.