The front face questions jquery personal summary

1, jquery advantages

• jQuery is a lightweight frame, the size of less than 30kb;
• It has a strong selector, DOM excellent packaging operation, a reliable event handling mechanism;
• Perfect ajax, excellent compatibility of the browser;
• And support chaining, implicit iteration.
• Separation behavior of layers and layers of the structure, but also supports a rich plugin, jquery documentation is also very rich.

2, jQuery in which there are several types of selectors?

• Basic selector: Match returns directly from the DOM element id, CSS class name, the name of the element.

• Selector level: also called path selector may be selected according to the respective path element DOM hierarchy.

  parent > child，prev + next ，prev ~ siblings

• Form Selector:: input,: text,: password,: radio,: checkbox,: submit the like;

• Selector filter: the filter in front of the relevant conditions based on the obtained matching DOM elements.

  基本过滤器选择器：:first，:last ，:not ，:even ，:odd ，:eq ，:gt ，:lt
  内容过滤器选择器： :contains ，:empty ，:has ，:parent
  可见性过滤器选择器：:hidden ，:visible
  属性过滤器选择器：[attribute] ，[attribute=value] ，[attribute!=value] ，[attribute^=value] ，[attribute$=value] ，[attribute*=value]
  子元素过滤器选择器：:nth-child ，:first-child ，:last-child ，:only-child
  表单过滤器选择器：:enabled ，:disabled ，:checked ，:selected

3, jQuery in $ (this) and this Keywords What's the difference?

• $ (This) returns a jQuery object, you can call it multiple jQuery methods, such as access to text using text (), get value val () and so on.
• this represents the current element, which is a JavaScript keyword representing the current DOM element context. You can not call it jQuery method until it is $ () function package, such as $ (this).

4, $ (document) .ready () method and window.onload What is the difference?

• window.onload method is the page finished loading all elements, including images and all other elements. Only once.
• $ (Document) .ready () method is executed after the DOM structure drawing is completed, without waiting to load. It means that the DOM tree loaded, executed, without waiting for a page pictures or other external files are loaded. And you can write multiple .ready.
• So $ (document) .ready execution time earlier than window.onload

6, jquery and css selectors in the selectors there a difference?

• jQuery selector supports the CSS selectors,
• jQuery selectors can be used to add the corresponding behavior pattern and add
• The CSS selectors can only add the appropriate style

7, the operation pattern of the common methods

• addClass () to add style
• removeClass () to delete the style
• Toggle () switching pattern

8, or how to get and set properties in jquery?

• It can be used jQuery attr () methods to get and set properties of the element
• With removeAttr () method to remove the element properties

9, in the conventional method jquery traversal nodes

• children () to retrieve the children, considering only child elements do not consider descendant elements
• next () to get a close next sibling element
• prev () Gets the previous close of sibling
• siblings () Gets the current element of all siblings (except their own)
• parents () Gets all the ancestors of the current element.
• find () to obtain a set of matched elements, including elements of the offspring and descendants

10, jQuery in hover () and toggle () What is the difference?

• hover (fn1, fn2): mimic a hover event (the mouse is moved to and out of an object above the object) method. When the mouse moves to a matching element of the above, it will trigger the first function specified. When the mouse out of this element, it will trigger the second specified function.

  //当鼠标放在表格的某行上时将class置为over，离开时置为out。
  $("tr").hover(function(){
      $(this).addClass("over");
  },
                function(){
      $(this).addClass("out"); 
  });

• toggle (evenFn, oddFn): each time you switch the function to be called when clicked. If you click on the elements of a match, then trigger the first function specified when you click on the same element again, triggering the second specified function. Subsequent clicks continue to take turns calling these two functions.

  //每次点击时轮换添加和删除名为selected的class。
  $("p").toggle(function(){
     $(this).addClass("selected");   
  },function(){
     $(this).removeClass("selected"); 
  });