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"); });