Introduction to JQuery selectors and filters_jquery

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 , , <select> and <button> elements. <br>b) “:text”, select all text box elements. <br>c) “:password”, selects all password box elements. <br>d) “:radio”, select all radio button elements. <br>e) “:checkbox”, selects all checkbox elements. <br>f) “:submit”, selects all submit button elements. <br>g) “:image”, selects all image button elements. <br>h) ":reset", selects all reset button elements. <br>i) “:button”, selects all button elements. <br>j) “:file”, selects all file upload domain elements. <br>k) ":hidden", selects all invisible elements. <br><br>7). Form object attribute filter selector <br>Select the filter selector of the form element attribute. <br>":enabled", selects all available elements. <br>":disabled", selects all disabled elements. <br>":checked", selects all selected elements, such as radio buttons and check boxes. <br>“:selected”, selects all selected elements, such as drop-down list boxes and list boxes. <br><br><strong>4. DOM operations in JQuery <br></strong>An interface independent of browser, platform and language. This interface provides easy access to all standard components in the page.<br>DOM Core: DOM Core is not exclusive to JavaScript, any programming language that supports DOM can use it. Its use is not limited to processing web pages, but can also be used to process any document written in a markup language, such as XML. <br>HTML DOM: When writing scripts for HTML files using JavaScript and DOM, there are many properties specific to HTML-DOM. <br>CSS-DOM: For CSS operations, in JavaScript, CSS-DOM is mainly used to get and set various attributes of the style object. <br><br>1. Find nodes <br>See "Basic Selector" above. <br><br>2. Create a node <br>Use JQuery’s factory function to create a new node: var $newNode = $(“<p>Hello</p>”); and then insert the new node into the specified element node. <br><br>3. Insert node <br>Insert the newly created node or acquired node into the specified position. <br>"$node.append($newNode)", appends the end to the end of each matching element. For example, "$("p").append("<b>Hello</b>");" adds "<b>Hello</b>" to the end of "p". <br> "$newNode.appendTo($node)", appends the new element to the end of each matching element. <br> "$node.prepend($newNode)", appends the beginning to the end of each matched element. For example, "$("p").prepend("<b>Hello</b>");" adds "<b>Hello</b>" to the beginning of "p". <br>"$newNode.prependTo($node)", appends the new element to the beginning inside each matching element. <br>"$node.after($newNode)", inserts content after each matching element, which is a parallel brother. For example, "$("p").after("<b>Hello</b>");" inserts "<b>Hello</b>" after "p". They are brothers. <br>"$newNode.insertAfter($node)", inserts the new element after each matching element. <br>"$newNode.before($node)", inserts content before each matching element. For example, "$("p").before("<b>Hello</b>");" inserts "<b>Hello</b>" in front of "p", they are brothers. <br> "$node.insertBefore($newNode)", inserts a new element before each matching element. <br>Note: If the inserted node is not newly created, the insertion will become a move operation. Therefore, cloned nodes should be used before inserting such nodes. <br><br>4. Delete Node <br>Remove all matching elements from the DOM. For example, "$("p").remove(".hello");" deletes the p element whose class attribute value is hello, as well as all elements below it. <br><br>Clear all matching elements from the DOM. For example, "$("p").empty();" clears all p elements and all elements below it. <br><br>5. Copy node <br>Clone the matching DOM element. For example, "$("p").clone();" returns the cloned copy, but does not have any behavior. If you want to clone DOM events together, you should use "$("p").clone(true);". <br><br>6. Replace node <br>Replace all matching elements with the specified HTML or DOM element. For example, $("p").replaceWith("<b>Paragraph. </b>"); replaces all p elements with "<b>Paragraph. </b>". <br><br> and replaceWith return: $("<b>Paragraph. </b>").replaceAll("p");. <br><br>7. Wrap node <br>wrap(): Wrap the specified node with other tags. This method is useful when additional structured markup needs to be inserted into the document without destroying the semantics of the original document. For example, "$("p").wrap("<div class="wrap"></div>");". Each p element is wrapped into <div>. <br>wrapAll(): Wrap all matching elements with one element. The wrap() method wraps all elements individually. For example, "$("p").wrapAll("<div></div>");" wraps all p elements into <div>. <br>wrapInner(): Wrap the sub-content (including text nodes) of each matching element with other structured tags. For example, "$("p").wrapInner("<b></b>");", <b> is wrapped by each p element. <br><br>8. Attribute setting <br>attr(): Get attributes and set attributes. <br>When a parameter is passed to this method, the specified attribute is obtained for an element. For example, "$("img").attr("src");" gets the src attribute value of the img element. <br>When two parameters are passed to this method, the value of the specified attribute is set for an element. For example, "$("img").attr("src","test.jpg");", set the src attribute value of the img element to test.jsp. <br>There are many methods in jQuery that are functions that implement getting and setting. Such as: attr(), html(), text(), val(), height(), width(), css(), etc. <br>removeAttr(): Remove the specified attribute of the specified element. <br><br>9. Style operation <br>You can set or get css style through "attr()". <br>Append styles: addClass(). For example, "$("p").addClass("selected");" adds the "selected" style to all P elements. <br>Remove style: removeClass() --- Remove all or specified classes from matched elements. For example, "$("p").removeClass("selected");" deletes "selected" in all P elements. <br>Toggle style: toggleClass() --- Control repeated switching on styles. Removes the class name if it exists, adds it if the class name does not exist. For example, "$("p").toggleClass("selected");", among all P elements, if the "selected" style exists, delete the "selected" style, otherwise add the "selected" style. <br> Determine whether it contains a certain style: hasClass() --- Determine whether the element contains a certain class, and return true; otherwise, return false. For example, "$(this).hasClass("protected")" determines whether the current node has the "protected" style. <br><br>10. Set or get HTML, text and value <br>Read and set the HTML content in an element: html(), this method can be used for XHTML, but not for XML documents. <br>Read and set the text content in an element: text(). This method can be used for both XHTML and XML documents. <br>Read and set the value in an element: val(), this method is similar to the value attribute in JavaScript. For text boxes, drop-down list boxes, and radio button boxes, this method can return the value of the element (multi-select boxes can only return the first value). If it is a multi-select drop-down list box, returns an array containing all selected values. <br><br>11. Commonly used methods for traversing nodes <br>Get the set of all child elements of the matching element: children(). This method only considers first-level child elements and not any descendant elements. <br>Get the set of sibling elements immediately following the matching element (but there is only one element in the set): next(). <br>Get the set of sibling elements immediately before the matched element (but there is only one element in the set): prev(). <br>Get all sibling elements before and after the matched element: siblings(). <br><br>12. CSS-DOM operation <br>Getting and setting the style attributes of the element: css(). <br>Getting and setting element transparency: opacity() attribute. <br>Get and set element height and width: height(), width(). When setting a value, if only numbers are passed, the default unit is px. If you need to use other units, you need to pass a string, such as "$("p:first").height("2em")"; <br>Get the relative displacement of the element in the current window: offset(). The object it returns contains two attributes: top and left. This method only works on visible elements. <br><br><br><strong>5. Events in JQuery </strong> <br><br>1. Load DOM <br>After the page is loaded, the browser will add events to the DOM elements through JavaScript . In regular JavaScript code, the window.onload method is usually used, and in JQuery the $(document).ready() method is used. The simplified writing method "$()" in JQuery.When registering an event in window.onload, it can only be registered in one window.onload body. But using JQuery, you can register in multiple $(document).ready() or $(). <br><br>2. Event binding <br>Bind the matching element to the specified event. For example, yesterday we bound the event in window.onload: "$("p").onclick(function(){ alert( $(this).text() ); <br>});" in JQuery The $(document).ready() can be bound like this: "$("p").click(function(){ alert( $(this).text() ); <br>});" Use bind (), can be bound like this: $("p").bind("click", function(){ alert( $(this).text() ); <br>}); <br><br>3 .Synthetic event<br>hover(): simulates the cursor hover time. When the cursor moves over the element, the specified first function will be triggered, and when the cursor moves out of the element, the specified second function will be triggered. For example, hover effect: $("td").hover( function () {$(this).addClass("hover");}, function () {$(this).removeClass("hover");} ); <br>toggle(): used to simulate continuous mouse click events. The first time you click an element, the first specified function is triggered. When the same element is clicked again, the specified second function is triggered. If there are more functions, they are triggered in sequence until the last one. For example, set the selection and unselected effects of an element: <br>$("td").toggle( function () {$(this).addClass("selected");}, function () {$(this). removeClass("selected");}); <br>Use toggle() without passing parameters. The effect is to switch the visible state of the element. <br><br>4. Bubbling of events <br>Events will continue to rise like bubbles according to the DOM hierarchy, only reaching the top. <br>Solution: Returning false in the event handling function will stop the event from bubbling. You can also stop the element's default behavior. <br>All current UI interactions or their events support this feature. Returning false in your own event handling function will abort the event from being passed down. Return true events and continue to pass downwards. <br><br>5. Properties of the event object <br>Event object: When an event is triggered, the event object is created. Using events in your program only requires adding a parameter to the handler function. Use some parameters in the event handler function. For example, to obtain the position relative to the page when an event occurs: event.pageX, event.pageY, event is a parameter of the event processing function. <br><br>6. Remove events <br>Remove all click events on a button: $(“btn”).unbind(“click”) <br>Remove all events on a button: $ ("btn").unbind(); <br>one(): This method can bind a processing function to the element. When the handler function is triggered once, the event is deleted immediately. That is, on each object, the event handler function will only be executed once. <br><br><br><strong>6. DOM animation in JQuery <br></strong>By setting the display and hiding methods of DOM objects, animation effects can be produced. <br><br>1. Hide and display without animation effect <br>hide(): In an HTML document, calling the hide() method for an element will change the display style of the element to none. The code function is the same as css("display", "none");. <br>show(): Change the display style of the element to the previous display state. <br>toggle(): Switch the visible state of the element: if the element is visible, switch to hidden; if the element is hidden, switch to visible. <br><br>2. By setting the hiding and display of the transparency effect, the fade-in and fade-out animation effect is achieved <br>fadeIn(), fadeOut(): only change the transparency of the element. fadeOut() reduces the opacity of an element over a specified period of time until the element disappears completely. fadeIn() does the opposite. For example, slowly fade the paragraph in for 600 milliseconds: $("p").fadeIn("slow");. <br>fadeTo(): ​​Adjust the opacity to the specified value (between 0 – 1) in a gradual manner. And optionally triggers a callback function after the animation is complete. For example, use 200 milliseconds to quickly adjust the transparency of the paragraph to 0.25. After the animation ends, an "Animation Done" message box is displayed: "$("p").fadeTo("fast", 0.25, function(){ alert(" Animation Done."); });". <br><br>3. By setting the hiding and display of the height effect, the animation effect of sliding down and folding can be achieved <br>slideDown(), slideUp(): only change the height of the element. If the display attribute of an element is none, when the slideDown() method is called, the element will be displayed extending from top to bottom. The slideUp() method is just the opposite. The element is shortened and hidden from bottom to top. For example, use 600 milliseconds to slowly slide the paragraph down: $("p").slideDown("slow");. <br>slideToggle(): Toggle the visibility of matching elements through height changes. For example, quickly slide a paragraph up or down in 200 milliseconds. After the animation ends, an "Animation Done" message box will be displayed: "$("p").slideToggle("fast",function(){ alert("Animation Done" ."); });". <br><br>Using JavaScript and JQuery to handle dynamic updates of the current page, combined with CSS styles, you can create a very beautiful UI, even more beautiful than the desktop software UI. Writing and debugging JavaScript is very troublesome, so some companies have produced simplified development specifically for JavaScript applications, such as GWT produced by Google, which can write JavaScript like using Java to write swing. It provides users with UI interfaces and events like swing and supports JAVA core libraries. Using GWT's own compiler, JAVA code can be compiled into JavaScript code, CSS style files and HTML.</b> </div> </div></button></select>