Summary of front-end JS skills [continuous update]

7. How to change a label to a plain text color without clicking events or hover attributes.

In the first example, no event is bound.

If the above example is bound with a click event, it will still be triggered.
Let's look at the second example.
If an event is bound, Use pointer-events: none to disable the event.

 
6. When adding an event to an element, consider whether the element has the same event before. Generally, use addEventListener () to append the event. Of course, attachEvent () can be used in IE (), modify the two functions if they are compatible with different browsers.
 
5. When layers are nested, pay attention to event capture or bubbling. For example, if you place a div inside a div and add an onclick event to the inner div, pay attention to event bubbling events, w3c can use event. stopPropagation (), IE uses cancelBubble to set to true. You can also use event. preventDefault () to remove the original event.
 
4. Use of jquery hierarchical selector:
Level selector-obtains a specific element through the hierarchical relationship between elements. For example, child, adjacent, and peer elements.
$ ("A B") SelectAll descendantsElement B
$ ("A> B") Select child element B under Element a. Here isDirect descendant relationship 
$ ("A + B") Select Element B next to element (Peer Element), Which can be replaced by the next () method.
$ ("~ B ") Select AllPeer ElementB. It can be replaced by the nextAll () method.
3. Differences between jquery objects and DOM objects:
Each DOM (Document Object Model) can be expressed as a tree, and DOM objects can use javascript. A jquery object is an object generated by wrapping a DOM object using jquery. Jquery objects are unique to jquery. You cannot use any methods of DOM objects in jquery objects, nor can DOM objects use methods in jquery.
How to convert a jquery object to a DOM object:
Var $ cr = $ ("# cr"); var cr = $ cr [0]
Var $ cr = $ ("# cr"); var cr = $ cr. get (0 );
How to convert a DOM object to a jquery object: 
Var cr = document. getElementById ("cr ");
Var $ cr = $ (cr );
　　 
To resolve conflicts between jquery and other libraries, you can use the jQuery. noConflict () function. Specific visible: http://www.w3school.com.cn/jquery/core_noconflict.asp
Var j = jQuery. noConflict (); j ("div p "). hide (); // jQuery-based code $ ("content "). style. display = "none"; // $ () code based on other libraries

 
2. When there are many levels of use, sometimes you will encounter problems such as the preset event does not take effect. You can review the elements in firefox or chrome, determine whether any element is blocked on it. If any, you can set the lower z-index to be higher than the upper layer to escape the upper layer mask, another method is to use the new attribute pointer-events: none of css3. Apply this attribute to the upper layer, that is, this layer does not capture any click events (click to penetrate this layer)
 
1. flexible use of "hide ". Normally, the hidden elements include display: hide and visibility: hidden. Difference between the two visible: http://blog.csdn.net/love_5209/article/details/19916557
When an element is initially set to any of the above types, the events bound to this element will not take effect. If you want to move the mouse over the display: hide element, let it display, what should we do?
There are two solutions:
First, you can nest a div in the outer layer of the hidden element and set the mouse to go through the event to change the display of the hidden element to inline or block;
Second, do not use display: hide, use the transparency opacity of css3: 0, and then change opacity: 1 if you move the mouse over the event (Note: IE does not support this attribute)