jQuery book sharing

Advantages: With its concise syntax and cross-platform compatibility, jQuery greatly simplifies JS developers to traverse HTML documents, manipulate the DOM, handle events, perform animations, and develop ajax operations. jQuery has unique selectors, chained operations, event handling mechanisms, and well-packaged ajax.

 

Advantages: ① Lightweight, currently compressed with UglifyJS, the size remains around 30KB

②Powerful selectors ( basic selectors, hierarchical selectors, filter selectors )

③ DOM operation encapsulation (DOM operation in jQuery)

④Reliable event processing mechanism (event processing)

⑤ Ajax perfect processing

⑥Chain operation mode

 

Notation: jQuery==$ unless otherwise specified, so $("#foo")==jQuery("#foo")

$ is the simple form of jQuery's writing

<script type="text/javascript">// <![CDATA[ $(doucment).ready(function(){//Wait for the DOM element to load alert("hello world"); //A box pops up}) ; can be shortened to: $(function{ //... }); // ]]></script>

 

Code style:

①Chain operation style

②Powerful selector

For the same object, no more than three operations can be directly written in one line. For example: 

.next().show() //Show the next element

For multiple operations on the same object, one per line is recommended. For example: 

.parent() //parent element
.siblings() // of sibling elements (siblings means siblings)
 .children("a") //child element
.removeClass("current") //Remove the current style (current means current)

 

jQuery instance: (implemented function: when the mouse clicks on the a element, add a class named current to it, then display the next element, and remove all the child elements inside the sibling element of its parent. a class named current, and hides the elements immediately after them)

$(".level1>a").ready.(function(){ //Wait for the element to load
    $(this).addClass("current") //Add current style to the current element
          .next().show() //Show the next element
          .parent().siblings() //The sibling element of the parent element                                              
          .children("a").removeClass("current") //The child element removes the current style attribute
          .next().hide(); //The next element is hidden
          return false;
 })

 

 

 ②jQuery has a powerful selector, and sometimes necessary comments are required when coding

 

DOM objects and jQuery objects

①DOM (Document object Model) document object model, DOM element nodes can be obtained through getElementsByTagName and getElementsById in JS. The resulting DOM element is the DOM object

②The jQuery object is the object generated after jQuery wraps the DOM object. For example:

$("#foo").html() //Get the html code inside the element whose id is foo, html() is the method in jQuery

  Equivalent to

document.getElementById("foo").innerHTML

 

jQuery and css selector analogy:

<p class = "demo">jQuery demo</p>

 css: .demo{.......//class adds style to the demo style}

jQuery: $(".demo").click.(function(){.........//Add behavior to the element whose class is demo})