Jquery, write some knowledge.

For jquery casually write some feel pretty useful some things, also did not systematically to reason, just think of where to write, write not completely also please forgive me.

Does jquery and other JavaScript libraries generate a $ sign conflict?
The $ symbol is not unfamiliar to anyone with jquery, and $ represents the jquery function. However, the $ symbol is not a private jquery symbol, and other JavaScript libraries can use the $ symbol as their main function. So what do we do when the other libraries we use have a $ sign conflict with the jquery library?
We use code to verify the following:

  // true   jquery.noconflict ();   // false  var $jq = jquery.noconflict ();   // true

Take a look at the source code of the Jquery.noconflict method:

  function (deep) {      if (window.$ = = = JQuery          ) {= _$;      }       if (Deep && Window.jquery = = = JQuery          ) {= _jquery;      } return jQuery;  };

Look at the source section above, suppose we give jquery.noconflict () the parentheses incoming any value parameters (not undefined/null/nan/"" empty string, etc.), Then at this time to see Window.jquery, he will become undefined. So to jquery.noconflict () This function parameter refers to the need to deeply destroy the jquery function under window.

What is a jquery object? What is a DOM object? What's the difference between the two?
First, I must declare the following: To distinguish between jquery objects and DOM objects! To distinguish between jquery objects and DOM objects! To distinguish between jquery objects and DOM objects! The important thing to say three times, hope this has attracted attention.
A DOM object is an element object obtained through JavaScript's getElementById or getElementsByTagName, which defines a set of properties, methods, and events that access an HTML Document object. Such as:

  var // gets the DOM element  that needs to be manipulated // add content to this element: Hello  World // give this DOM element a style--the color is red

jquery objects are objects that are encapsulated with jquery for DOM objects. On this object, we can use the method in jquery. Like what:

  var // Select the object that you specified and encapsulate as a jquery object through the jquery selector  // This object executes the Hide method, hiding the selected DOM element

In our development, we'd better make a distinction between the two names, such as: $div is a jquery object, and a div is a DOM object. Now that you can encapsulate a DOM object as a jquery object, can you convert the jquery object to a DOM object? The answer is OK. Like what:

  var // I () is a jquery object  var // I am a DOM object  var // haha I've become a jquery object ~

As for why the first one is me? That's because the jquery selector returns a collection for the class, followed by an object with an index of 0, so this is a single, so it becomes "me".
Why do you distinguish between jquery objects and Dom objects? We distinguish between the two, we can use the corresponding method, if not distinguish, often appear: uncaught TypeError:someObject.fn is not a function error. By the way, the mistake is that you perform the FN function on something, but the FN method does not exist on the Someobject attribute, and it is one of the reasons why the JQuery object and the DOM object are the cause of this error. In some front-end development groups, the question of this error is not much, but not very small ... The beast also looked at the small partners posted code, or some people did not notice the difference between the direct call to the corresponding method and error.

Some do not often see the use of people, but it is very practical selection of methods and introduction
The usual use of those do not introduce more, presumably everyone is also playing very slip. Here are some of the more rare to use it (the return is generally a collection, the ID selection is more special, the return is a collection of individual elements, the first of this ID element is the main):
$("*")
Select all elements.
$ ("selector+")
Selects the first element after the element that specifies the selection criteria, if the selected element is already the last one, then returns the selected object to be wood-like ~
$ ("Firstselector:not (secondselector)")
Selects the specified element and returns it as a collection, and removes the element in the resulting collection that does not conform to the selection criteria in parentheses.
$ ("SELECTOR:GT (Index)") and $ ("Selector:lt (Index )")
Select an element with index greater than index/select index less than index.
$ ("selector:animated")
Select the element that is currently performing the animation, which is useful when the DOM operation is animated.
$ ("Selector:contains (text)")
Select the element that contains text that is within the literal content contains (text).
$ ("Selector:empty") and $ ("selector:parent")
Select elements that do not contain child elements or text/Select elements that contain child elements or text.
$ ("Selector:has (selector)")
Select the element that contains the element that the selector matches.
$ ("Selector:hidden") and $ ("selector:visible")
Selects all elements that are not visible/selects all visible elements.
$ ("[attribute]")
Select the element that owns this property.
$ ("[Attribute=value]") and $ ("[Attribute!=value]")
Select the element that owns this property and that the property value equals/is not equal to value.
$ ("[Attribute^=value]") and $ ("[Attribute$=value]") and $ ("[Attribute*=value] ")
Select the element that owns this property and the property value begins with value/ends with value/contains value.
$ ("selector:enabled") and $ ("selector:disabled") and $ ("selector:checked") and $ ("selector:selected")
Select all available/unavailable/Selected (Radio box/check box)/Selected option (drop-down list) element.
Code:

 <Divclass= "Container">Hello World</Div>  <Divclass= "Lowercase container">Hello World</Div>  <P>Hello World</P>  <Divclass= "List">      <ul>          <Li>1</Li>          <Li>2</Li>          <LiID= "Firstli">3</Li>      </ul>  </Div>  <DivID= "Hello"style= "Display:none">Hello World</Div>

  var$all = $ ("*");//The returned collection here includes the HTML tag to the LI tag and even the element object of the script tag.  var$next = $ ("#firstLi +");//This returns the element object immediately following the ID Firstli, which is the back of an Li  var$notLowerCase = $ (". Container:not (. Lowercase)");//This returns a collection of element objects containing the container class without the lowercase class, which is the first Div  var$contains = $ ("Div:contains (Hello)");//here the returned collection of 2 contains the element object, one is the class is container the first Div, the other is the ID is Hello div  var$hasLowerCase = $ ("Div:has (UL)");//This returns a collection of DIV elements containing the UL elements.  var$hideden = $ ("Div:hidden");//This returns a collection of hidden div elements .

Stop event bubbling.
What is event bubbling? Now suppose we have three div nested, we add the click event to the three Div, the most inner div Click Print 1, the middle layer div Click Print 2, the outermost div Click Print 1, then when we click on the inner Div, we will perform the most inner > middle layer > The Click event of the outermost div, so the 1>2>3 will be printed in turn. Sometimes we need to click on the inner layer and do not perform the same events on the middle and outermost layers, then we need to stop the event that bubbles up to the upper level in turn. In jquery, we can use: event.stoppropagation () to stop event bubbling, in javascript: Event.cancelbubble = True. Here at the same time, how to stop the default event: Event.preventdefault (), in JavaScript is: Event.returnvalue = False.

jquery Removal Events
$ ("#myDiv"). Cilck (function () {
$ ("#btn"). Unbind ("click"); This removes the click event on the element with the original ID BTN
});

jquery stops the current animation
$ (". mydiv:animated"). Stop (False,false); Stop the current animation, the first parameter is to decide whether to stop all the queue animation, the second parameter determines whether to complete the current animation immediately. Two defaults to False.

No sooner, write these first, follow up want to write again to tidy up some ... These are all common knowledge that can be used.

Jquery casually write some knowledge points