Today's study combined with yesterday's JavaScriptDOM content made me very clear about this. JQuery principle: "write less, do more." This sentence has fully demonstrated its ability to simplify programming using JavaScriptDOM!
Each teacher has his or her own teaching method, which may vary slightly depending on the content being taught. Lao Tong is a very experienced software teacher. He previously did training at a software company in Dalian. After years of summarizing, he has developed his own mature teaching method. I like this method very much! As for what method it is, you can experience it yourself! Haha~~
From learning JavaWEB, Struts1 to now JavaScript, I have found the core of WEB application development-MVC. Yes, it's MVC. In fact, MVC should be a model created based on the core of WEB, isn't it? This set of tools is to operate the view layer, control layer and data model layer respectively. It seems that I have found some feeling now, because when I learned servlet before, I knew that it can handle user requests, and I learned whatever the teacher said. But now I have ideas. No matter what you talk about, teacher, I know which layer it should be used on and what its purpose is. This improves my learning efficiency. This is a very good growth! It will be very helpful for future growth.
Then I will not have much knowledge about these spirit powders, and then I will start working on projects. Two words, fast and cool! Ok, let’s start organizing the learning content.
1. JQuery and JavaScript
1. JavaScript library
Anyone who has used JavaScriptDOM should know (such as yesterday’s exercise) that using JSDOM to operate pages is very troublesome. Such operations as obtaining, modifying, and adding child nodes. What if you operate a complex page? Ok, so the JavaScript library was born.
The more common JavaScript libraries currently include: 
2. Introduction to JQuery
JQuery is another excellent JavaScript library after Prototype.
JQuery concept: write less, do more.
JQuery advantages: lightweight, powerful selector, excellent DOM operation encapsulation, reliable event processing mechanism, perfect Ajax, excellent browser compatibility , chain operation mode….
2. JQuery object and DOM object
1. JQuery object
JQuery object uses "$("DOMObj")" to wrap the DOM object. Generally, "$" is added in front of the JQuery object to distinguish it from the DMO object. It is already a recognized naming convention. The JQuery object cannot call the properties and methods of the DOM object, and the DOM object cannot call the properties and methods of the JQuery object.
2. Convert JQuery object to DOM object
What if you want to use JQuery object to call the method of DOM object? The JQuery object should be converted into a DOM object. The JQuery object is an array object, which is very special. So just call JQueryObj[x] or JQueryObj.get(X); to convert to DOM object.
3. Convert DOM object into JQuery object
Just use "$("DOMObj")" to wrap the DOM object.
3. JQuery Selector
Selector is the foundation of JQuery. In JQuery, event processing, DOM traversal and Ajax operations all rely on selectors. This is also the focus of our study today.
1. Basic selector
The basic selector is the most commonly used selector in JQuery and the simplest selector. It finds DOM elements by element id, class and tag name. This is very important, and the following content is based on this and improved step by step.
1). "$("#id")", get the element specified by id. The id is globally unique, so it has only one member.
2). "$(".class")", get the element specified by class. Different elements can have the same class attribute, so it may have multiple members.
3). "$("element")", get the element specified by element (element name, such as div, table, etc.), which may have multiple members.
4). "$("*")", get all elements, equivalent to document.
5). "$("selector1,selector2,...,selectorN")", merge the elements matched by each selector and return them together. Returns the set matched by selector1, the set matched by selector2... the set matched by selectorN.
2. Level selector
What is level? Level is the node of father-son relationship and brother relationship. Therefore, the hierarchical selector is used to obtain the parent, child, and sibling nodes of a specified element.
1). "$("ancestor descendant")", get all elements below the ancestor element.
2). "$("parent > child")", get all child elements under the parent element (only the first layer of child elements are included).
3). "$("pre next")", get the next sibling element immediately following the pre element.
4). "$("pre ~ siblings")", get all sibling elements after the pre element.
3. Filter selector
Filter? Definitely need to add filter conditions. Add filter conditions through ":", such as "$("div:first")" to return the first div element in the div element collection, first is the filter condition.
According to different filtering rules, filter selectors can be divided into basic filtering, content filtering, visibility filtering, attribute filtering, sub-element filtering and form object attribute filtering selectors.
1). Basic filter selector
a) “:first”, select the first element, don’t forget that it is also placed in a collection! Because JQuery is a collection of DOM objects. For example, "$("tr:first")" returns the first tr element of all tr elements, which is still saved in the collection.
b) “:last”, select the last element. For example, "$("tr:last")" returns the last tr element of all tr elements, which is still saved in the collection.
c) ":not(selector)", removes all elements matching the given selector. For example, "$("input:not(:checked)")" returns all input elements, but removes the selected elements (radio button, multi-select box).
d) “:even”, selects even-numbered elements among all elements. Because the JQuery object is a collection, the even number here refers to the index of the collection, and the index starts from 0.
e) ":odd", selects odd-numbered elements among all elements, and the index starts from 0.
f) “:eq(index)”, selects the element at the specified index, and the index starts from 0.
g) ":gt(index)", selects elements whose index is greater than the specified index, and the index starts from 0.
h) ":lt(index)", selects elements whose index is less than the specified index, and the index starts from 0.
i) “:header”, select all header elements, such as hq, h2, etc.
j) “:animated”, selects all animated elements currently being executed.
2). Content filtering selector
It is an operation on elements and text content.
a) “:contains(text)”, selects elements containing text text content.
b) “:empty”, selects empty elements that do not contain child elements or text nodes.
c) “:has(selector)”, selects elements containing elements matched by the selector.
d) “:parent”, select elements containing child elements or text nodes. (It is a parent node)
3). Visibility filter selector
selects elements based on their visible or invisible status.
":hidden", select all invisible elements.
":visible", selects all visible elements.
Visible selector: hidden not only includes elements whose style attribute display is none, but also includes elements such as text hidden fields () and visible:hidden.
4). Attribute filter selector
Select the corresponding element through the attribute of the element.
a) "[attribute]", select elements with this attribute.
b) "[attribute=value]", select all elements with the specified attribute value value.
c) "[attribute !=value]", select all elements whose attribute value is not value.
d) "[attribute ^= value]", select all elements whose attribute value starts with value.
e) "[attribute $= value]", select all elements whose attribute value ends with value.
f) "[attribute *= value]", select all elements whose attribute value contains value.
g) "[selector1] [selector2]...[selectorN]", a composite selector, first selects through [selector1] and returns to set A, set A then selects through [selector2] and returns to set B, and set B then selects through [ selectorN] selects the returned result set.
5). Child element filter selector
As you can see from the name, it selects the child elements of a certain element.
a) ":nth-child(index/even/odd)", select the element with index, the element with even index, and the element with odd index.
l nth-child(even/odd): can select elements whose index value under each parent element is an even (odd) number.
l nth-child(2): Can select the element with index value 2 under each parent element.
l nth-child(3n): Can select elements whose index value under each parent element is a multiple of 3.
l nth-child(3n 1): Can select the element whose index value is 3n 1 under each parent element.
b) “:first-child”, select the first child element.
c) “:last-child”, select the last child element.
d) ":only-child", selects the only child element whose parent element has only this child element.
6). Form filter selector
Select the filter selector of the form element.
a) ":input", selects all ,
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
