"Basic jquery Tutorial" reading notes

Recently, in the book "Basic jquery Tutorial", I did some reading notes to review and update them on a regular basis. Chapter I the second chapter of the comparative basis, this is skipped ...

Chapter III Events

• jquery in $ (document). Ready () differs from JavaScript native window.onload ():

$ (document). Ready (): an event handler registered through this method is called when the DOM is fully ready and in use. While this means that all elements are accessible to the script, it does not mean that all associated files have been downloaded. After the HTML download is complete and parsed into the DOM tree, the code can begin to run. And you can use this method multiple times in a script, without worrying that the previously tagged method is overwritten, and that the native window.onload () has a covered problem

123456789

// window.onload()：当文档完全下载到浏览器中时，就会触发该事件。           $(document).read(function(){   //较长的形式能更清楚的表现代码在做什么               //方法实现          });          //上述调用在jQuery中可以简写为:          $(function(){              //方法实现          });

If there are other JavaScript libraries in the project that use the keyword, you can call the Jquery.noconflict () method in jquery to assign the right to use the $ symbol in the code with jquery instead of the $

Multiple elements respond to a Click event's policy Event capture: 1) During event capture, the event is first handed to the outermost element and then to the more specific element. 2) Event bubbling: When an event occurs, it is first sent to the most specific element, and after the element has a response opportunity, the event bubbles up to a more general element.

The final DOM standard specifies that both strategies should be used at the same time: first, the event is captured from the general element to the specific element, and then the event bubbles back to the top layer of the DOM tree. An event handler can register to any stage in the process.to provide cross-browser consistency, jquery always registers event handlers in the bubbling phase of the model. Therefore, we can always assume that the most specific element will first get the chance to respond to events. In order to solve the adverse effects of event bubbling, we have to access theEvent Object。 An event object is a DOM structure that is passed to the invoked event handler when the element obtains an opportunity to handle the event, which contains information about the event and some methods to influence the event's passing process in the DOM. Look at the following code:

123456

$(document).ready(function() {  vartoggleSwitcher = function(event) {    if(!$(event.target).is(‘button‘)) {      $(‘#switcher button‘).toggleClass(‘hidden‘);    }  };

By judging the value of the Event.taget attribute, the adverse effects of event bubbling are avoided. Of course, adding the Event.stoppropagation () method at the end of a concrete element binding method can also prevent event bubbling. by using. Toggle () to alternately expand and collapse page elements by using the. Hover () book to display the page element that is located under the mouse pointer through the. trigger () Raises the event handler that executes the binding.fourth chapter style and animation

• jquery and CSS

jquery provides the CSS () method, which combines getter and setter in one. The method can accept two parameters, one is to pass a separate style attribute and value for it, and the other is to pass a mapping that consists of a property-value pair, the JavaScript object literal.

• Creating a Custom Animation

The 
  jquery provides a powerful. Animate () method for creating a more granular control of custom animations. The animate () method has two forms, the first of which accepts the following 4 parameters. 1) A mapping that contains style attributes and values-similar to the mappings in the. css () method that was previously said. 2) Optional Speed parameter--can be either a preset string or a millisecond value. 3) optional ease (easing) type. 4) Optional callback function 

123456

.animate({     param1: value1,     param2: value2},     speed, function() {     /* stuff to do after animation is complete */});

The second form accepts two parameters, a property map, and an option map:. Animate ({properties}, {options}); The second parameter is to encapsulate the first form of the next three types in another mapping.

Fifth Chapter DOM tree Operations

• DOM element attributes and HTML attributes: In most cases, they work the same way. But there are some differences.

For example, in the DOM there is a property of classname, and the corresponding class attribute in HTML is a Boolean value for the Checked property in Class;dom, whereas in HTML checked the property value is a string.

• The $ () function works:

1) using the CSS selector to select element 2) The incoming parameter is an HTML string, which creates a DOM element.

• The method of moving the DOM element (and the relative inverse method). e.g. AppendTo ()--append ())

1). insertbefore () Add content 2 to the outside of existing elements. Prependto () Add content 3 before the existing element. AppendTo () adds content 4 after the existing element). InsertAfter (outside the existing element, Add content After

• Element replication:

You can use the jquery. Clone () method to create a copy of any matching element collection. The simple. Clone () method does not copy the events that are bound in the matching element and its descendant elements. If you want to replicate with the event, call the. Clone (True) method.

• The. Text () method can take the contents of a matching element or replace the content of a matching element with a new string.

The. Text () method always Gets or sets the plain text content, all HTML tags are ignored, and all HTML entities are converted to the corresponding characters.

• Summarize:

1) to create a new element in HTML, use the $ () function 2) to insert a new element into each matching element, using:. Append (). AppendTo (). prepend (). Prependto () 3) to insert a new element in the position adjacent to each matched element, Use:. After (). InsertAfter (). before (). InsertBefore () 4) to insert a new element outside each matching element, use:. Wrap (). Warpall (). Warpinner () 5) to replace each matching element with a new element or text using:. HTML (). Text (). ReplaceAll (). ReplaceWith () 6) to remove elements from each matching element, use. Empty () 7) to remove each matching element and its descendant elements from the document, but not actually delete them, using:. Remove (). Detach ()

The sixth chapter sends data via AJAX

• Techniques involved in AJAX solutions (the means to load data from a server/client without having to refresh the page)

1) Javascript, which interacts with the user or other browser-related event capture. 2) XMLHttpRequest object that allows you to send requests to the server without interrupting other browser tasks. 3) files on the server, saving text data in XML, HTML, or JSON format. 4) Other JavaScript that interprets the data from the server and renders it on the page.

• The $.each () function does not manipulate the jquery object, which takes an array or a map as the first parameter, and a callback function as the second argument. In addition, you need to use the current index and current item of the array or map in each loop as the two parameters of the callback function.

• The. Serialize () method converts a matching DOM element into a query string that can be passed with an AJAX request.
• Security restrictions: Although building dynamic Web applications is practical, XMLHttpRequest is often severely restricted. In order to prevent various cross-site scripting attacks, it is generally not possible to request documents from a site other than the server that provides the original page. However, it is sometimes necessary to load data from a third-party source. The following solutions are available:

1) The remote data is loaded through the server and then made available to the browser when the client requests it, because the server is able to preprocess the data. 2) Load the external JavaScript file according to the request injection <script> tag.

1	$(document.createElement(‘script‘)).attr(‘src‘, ‘http://example.com/example.js‘).appendTo(‘head‘);

3) Use <iframe> this HTML tag to load remote data, specifying any URL for that element as the source of its fetch data, including URLs that do not match the server providing the page, and scripts in the IFRAME that need to explicitly provide data to the objects in the parent document.

The seventh chapter uses the plug-in

• The plugin with jquery is simple. Just find the URL of the search, reference it in the HTML, and then use it in the script.
• The official jquery plugin library http://plugins.jquery.ocm/What plug-ins are needed to search and see documents and tutorials.

"Basic jquery Tutorial" reading notes