Front-end jQuery interview questions

1, the advantages of jquery

• jQuery is a lightweight frame with a size of less than 30kb;
• It has a powerful selector, excellent DOM operation package, and reliable event handling mechanisms;
• Perfect ajax, excellent browser compatibility;
• And support chain operation, implicit iteration.
• The separation of behavioral and structural layers also supports rich plug-ins, and jquery's documentation is rich.

2. What types of selectors are there in jQuery?

• Basic selector: Returns matching DOM elements directly from id, CSS class names, and element names.
• Hierarchy Selector: Also known as a path selector, you can select the appropriate DOM element based on the path hierarchy. parent > child，prev + next ，prev ~ siblings
• Form selectors: input,:text, :p assword,:radio,:checkbox,:submit, etc.;
• Filter Selector: Filter the relevant conditions on the previous basis to get a matching DOM element. B asic filter selectors::first,:last,:not,:even,:odd,:eq,:gt,:lt content filter selector::contains,empty:empty,:has, :p arent visibility filter selector::hidden,:attribute,:attribute-property-filter selector," value, s attribute-value, attribute$-value, attribute-value-child filter selector::nth-child,:first-child,:last-child,:only-child form filter selector::enableed, :d isabled,:checked,:selected.)

3. What is the difference between $(this) and this keyword in jQuery?

• $this returns a jQuery object on which you can call multiple jQuery methods, such as getting text with text(), val() getting values, and so on.
• This represents the current element, which is one of the JavaScript keywords and represents the current DOM element in the context. You can't call the jQuery method on it until it's wrapped by a $() function, such as $this.

4. What's the difference between the $.ready() method and windows.onload?

• The window.onload method is that all elements of the page are loaded, including all elements such as pictures. Can only be executed once.
• The $(document.ready)) method is executed after the DOM structure has been drawn, without having to wait until it is loaded. T his means that when the DOM tree is loaded, it executes without having to wait until all the pictures or other external files on the page are loaded. And you can write more than one .ready.
• So $.ready takes longer to execute than window.onload

6. Is there a difference between the selectors in jquery and the selectors in css?

• The jQuery selector supports the selectors in CSS.
• The jQuery selector can be used to add styles and add appropriate behaviors
• Selectors in CSS can only add the appropriate styles

7, the common method of operating style

• addClass() adds a style
• removeClass() removes the style
• toggle() switch styles

8, jquery how to get or set properties?

• Element properties can be obtained and set in jQuery using the attr() method
• Use the removeAttr() method to remove element properties

9, jquery in the common method of traversing nodes

• children() gets child elements, considering only child elements and not descendant elements
• next() gets the next next next brother element
• prev() gets the previous adjacent sibling element
• siblings() gets all the sibling elements of the current element (except yourself)
• parents() gets all the ancestor elements of the current element.
• find() gets a collection of elements in matching elements, including children and descendants

10. What's the difference between over() and toggle() in jQuery?

• hover (fn1, fn2): A method that mimics a hover event (moving the mouse over and out of an object). W hen the mouse moves above a matching element, the specified first function is triggered. W hen the mouse moves out of this element, the specified second function is triggered.
  

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

• Toggle (evenFn, oddFn): Switch the functions to be called each time you click. I f you click on a matching element, the first function specified is triggered, and when the same element is clicked again, the specified second function is triggered. E ach subsequent click repeats the rotation calls to both functions.
  

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

Recommended lessons: jQuery micro-class, jQuery introductory combat