Today's study combined with yesterday's javascriptdom content, let me be very clear about this. The jquery principle: "Write less, do more.", this sentence has fully explained its ability to simplify the use of JAVASCRIPTDOM programming!
Each teacher has his or her own way of teaching, which may vary slightly according to the teaching method of the professor's content. Old Tong is a very experienced software teacher, before he in Dalian software company to do training. After years of summing up, he has his own set of mature teaching methods. This way makes me very like! As to what is the way, you experience it! haha ~ ~
From learning Javaweb, Struts1 to the current JavaScript, I have found the core--MVC of Web application development. Yes, it's MVC. In fact, MVC should be based on the core of the Web created by the model, is not it! The complete set of tools is the actions of the view layer, the control layer, and the data model layer separately. It seems to have found some feeling now, because when you learn a servlet, you know it can handle the user's request, and the teacher learns what he says. But now there is thought, teacher you no matter what you say, I know it should be used in which layer, what use, so as to improve my learning efficiency. This is a very good growth! will be of great help to the future growth.
Then the knowledge of the scattered is not much, and then we start to do the project. Two words, quick, cool! Ok, start sorting out the learning content.
One, jquery and JavaScript
1.JavaScript Library
People who have used javascriptdom should know (like yesterday's practice) that using Jsdom to do the page is very troublesome. such as getting, modifying, and adding child nodes. What if you are working on a complex page? The Ok,javascript library was therefore born.
The more common JavaScript libraries are:
2.JQuery Introduction
jquery is another good JavaScript library after prototype.
jquery concept: Write less, do more.
jquery Benefits: Lightweight, powerful selector, encapsulation of excellent DOM operations, reliable event handling mechanism, perfect Ajax, excellent browser compatibility, chained operation ...
two, jquery object and Dom object
1.JQuery objects
The jquery object is to wrap the DOM object using "$ (" Domobj "). Generally, the jquery object is preceded by a "$" that distinguishes it from the DMO object, which is already a recognized naming convention. The jquery object cannot invoke the properties and methods of the DOM object, nor can the DOM object invoke the properties and methods of the jquery object.
2.JQuery objects into DOM objects
What if you want to invoke the DOM object's method using the jquery object? The jquery object should be converted to a DOM object, and the jquery object is an array object, which is very special. So just call jqueryobj[x] or jqueryobj.get (x), and you can convert to a DOM object.
3.DOM object converted to jquery object
Use the $ ("domobj") to wrap the DOM object.
three, the jquery selector
Selectors are the foundation of jquery, and in jquery, event handling, traversal DOM, and AJAX operations all depend on selectors. This is also the key content of our study today.
1. Basic Selector
The base selector is the most commonly used selector in jquery, and the simplest selector, which looks for DOM elements through the element ID, class, and tag name. This is very important, the following content is based on this, progressive improvement.
1). " $ ("#id"), gets the element specified by ID, and the ID is globally unique, so it has only one member.
2). " $ (". Class"), gets the element specified by class, and different elements can have the same class attribute, so it may have more than one member.
3). " $ ("element"), gets the element specified by element name, such as Div, table, and so on, and it may have more than one member.
4). " $ ("*"), get all elements, equivalent to document.
5). " $ ("Selector1,selector2,..., Selectorn"), the elements that match each selector are merged and returned together. Returns the set of matching +selector2 matching collections +...+selectorn matching sets of Selector1.
2. Hierarchy Selector
What is hierarchy? The hierarchy is the parent-child relationship, the sibling relationship node. Therefore, the hierarchy selector is used to get the parent-child node, sibling node, of the specified element.
1). " $ ("ancestor descendant"), gets all the elements below the ancestor element.
2). " $ ("Parent > Child") to get all the child elements below the parent element (containing only the first layer of children).
3). " $ ("Pre + Next") to get the last sibling element immediately following the pre element.
4). " $ ("Pre ~ siblings"), gets all sibling elements behind the pre element.
3. Filter Selector
Filter? Must be added to the filter condition. Add a filter condition, such as "$ (" Div:first "), to return the first DIV element of the DIV element collection, with a filter condition.
According to different filtration rules, filter selector can be divided into basic filter, content filter, visibility filter, attribute filter, child element filter and Form object attribute filter selector.
1). Basic Filter Selector
A) ": First", choose the element, and don't forget it is also put in a collection Oh! Because of jquery it 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 final element. For example, "$ (" Tr:last ") returns the last TR element of all TR elements, which is still saved in the collection.
c) ": Not (selector)" To remove all elements that match the given selector. For example, "$ (" Input:not (: Checked) ") returns all input elements, but removes selected elements (radio box, multiple marquee).
d) ": Even", select an even element in all elements. Because the jquery object is a collection, the even number here refers to the index of the collection, which starts at 0.
e) ": Odd", select the odd element in all elements, and the index starts at 0.
f) ": eq (Index)", select the element of the specified index, starting at 0.
g) ": GT (Index)", select the element with index greater than the specified index, and the index starts at 0.
h) ": LT (Index)", select an element that is less than the specified index, and the index starts at 0.
i) ": Header", select all the title elements, such as HQ, H2 and so on.
j) ": Animated", select all animation elements that are currently executing.
2). Content Filter Selector
It is an operation on elements and text content.
A) ": Contains (text)", select the element that contains the text content.
b) ": Empty", select an empty element that does not contain child elements or text nodes.
c) ": Has (selector)", select the element that contains the element that the selector matches.
d) ":p arent" to select elements that contain child elements or text nodes. (It is a parent node)
3). Visibility Filter Selector
Select elements based on the visible and invisible state of the element.
": Hidden", select all invisible elements.
": Visible", select all visible elements.
Visible selector: Hidden not only contains elements with a style property display of none, but also elements such as text-hidden fields (<input type= "hidden" >) and Visible:hidden.
4). Attribute Filter Selector
Select the element by attributes of the element.
a) "[attribute]", select the element that owns this property.
b) "[Attribute=value]", select all elements with value of the specified property.
c) "[Attribute!=value]", select all elements for which property values are not value.
d) "[attribute ^= value]", select all elements that the property value starts with value.
e) "[attribute $= value]", select all the elements that the property value ends with value.
f) "[attribute *= value]", select all elements that contain value for the property values.
g) "[Selector1] [Selector2] ... [Selectorn] ", the compound selector, first by [Selector1] Select return set a, set a again after [Selector2] Select return set B, set B again through [Selectorn] Select return the result set."
5). child element Filter Selector
A look at the name is that it is selected for the child elements of an element.
A) ": Nth-child (index/even/odd)", select the element indexed to index, an even-numbered element, an element with an odd index.
L Nth-child (even/odd): An element that can select an even (odd) number of index values under each parent element.
L Nth-child (2): can select element with index value of 2 under each parent element.
L Nth-child (3n): An element that can select a multiple of 3 for the index value under each parent element.
L Nth-child (3n + 1): The element that can select the index value under each parent element is 3n + 1.
b) ": First-child", select the first child element.
c) ": Last-child", select the last child element.
d) ": Only-child", select a unique child element whose parent element has only its child element.
6). Form Filter Selector
Select the filter selector for the form element.
A) ": Input", select all <input>, <textarea>, <select > and <button> elements.
b) ": Text", select all the text box elements.
c) ":p Assword", select all the cipher box elements.
d) ": Radio", select all the Radio box elements.
e) ": CheckBox" To select all the multiple-selection box elements.
f) ": Submit", select all the Submit button elements.
g) ": Image", select all the image button elements.
h) ": Reset", select all the reset button elements.
i) ": Button", select All button elements.
j) ": File", select all file upload domain elements.
k) ": Hidden", select all invisible elements.
7). Form object Property Filter Selector
Select the filter selector for the properties of the form element.
": Enabled" to select all available elements.
":d isabled", select all unavailable elements.
": Checked" selects all selected elements, such as a radio box, check box.
": Selected" selects all selected item elements, such as a drop-down list box, a list box.
Iv. DOM operations in jquery
A browser, platform, language-independent interface. This interface makes it easy to access all the standard components in a page.
Dom Core:dom Core is not specifically JavaScript, and can be used by any programming language that supports DOM. It is not intended to be used only for processing Web pages, but also for handling any document written in markup language, such as XML.
HTML DOM: When scripting HTML files with JavaScript and Dom, there are many attributes that are specifically html-dom.
Css-dom: For CSS operations, in JavaScript, Css-dom is primarily used to get and set various properties of a style object.
1. Find nodes
See the "basic selector" above.
2. Create a Node
Using JQuery's factory function, create a new node: var $newNode = $ ("<p> Hello </p>"), and then insert the new node at the specified element node.
3. Insert Node
Inserts the newly created node, or the acquired node, into the specified location.
$node. Append ($newNode) appends the end of each matching element to the end of the interior. such as, "$ (" P "). Append (" <b>Hello</b> ");" Add "<b>Hello</b>" to the end of "P" inside.
$newNode. Appendto ($node) appends the new element to the end of each matching element.
$node. Prepend ($newNode), appends the beginning to the end of each matching element. such as, "$ (" P "). Prepend (" <b>Hello</b> ");" Add "<b>Hello</b>" to the beginning of the inside of "P".
$newNode. Prependto ($node) appends the new element to the beginning of each matching element.
$node. After ($newNode), insert content after each matching element, is tied to the brothers. such as, "$ (" P "). After (" <b>Hello</b> "); Insert "<b>Hello</b>" behind "P". They are brothers.
$newNode. InsertAfter ($node), inserts the new element after each matching element.
$newNode. Before ($node) to insert content before each matching element. such as, "$ (" P "). Before (" <b>Hello</b> ");" Insert "<b>Hello</b>" in front of "P", which is a brotherly relationship.
$node. InsertBefore ($newNode) to insert the new elements before each matching element.
Note: If the inserted node is newly created, the insert becomes a move operation. Therefore, you should use the clone node before inserting such a node.
4. Delete node
Deletes all matching elements from the DOM. such as, "$ (" P "). Remove (". Hello "); Delete the P element whose class attribute value is Hello, and all the elements underneath it.
Clears all matching elements from the DOM. such as, "$ (" P "). empty (); Clears all P elements, as well as all the elements underneath it.
5. Replication node
Clones a matching DOM element. such as, "$ (" P "). Clone ();" Returns the cloned copy, but does not have any behavior. If you want to clone a DOM event together, you should use $ ("P"). Clone (True);
6. Replacement node
Replaces all matching elements with the specified HTML or DOM element. For example, $ ("P"). ReplaceWith ("<b>paragraph. </b> "); Replace all p elements with the <b>paragraph. </b> ".
With ReplaceWith: $ ("<b>paragraph." </b> "). ReplaceAll (" P ");.
7. Parcel Node
Wrap (): Wraps the specified node with another tag. This method is useful for inserting additional structured markup in a document, and does not break the semantics of the original document. such as, "$ (" P "). Wrap (" <div class= ' wrap ' ></div> ");". Each P element is wrapped into <div>.
Wrapall (): Wraps all matching elements in one element. The Wrap () method is to wrap all the elements separately. For example, "$ (" P "). Wrapall (" <div></div> ");", wrap all p elements into <div>.
Wrapinner (): Wraps the child contents of each matched element (including text nodes) with other structured tags. such as, "$ (" P "). Wrapinner (" <b></b> ");", <b> is wrapped by every P element.
8. Property settings
attr (): Gets properties and Settings properties.
When a parameter is passed for the method, the property is specified for the acquisition of an element. For example, "$ (" img "). attr (" src ");", gets the SRC attribute value of the IMG element.
When two arguments are passed for this method, the value of the specified property is set for an element. For example, "$ (" img "). attr (" src "," test.jpg ");", set the SRC attribute value of the IMG element to test.jsp.
Many of the methods in JQuery are a function implementation gets and sets. such as: attr (), HTML (), text (), Val (), Height (), Width (), CSS (), etc.
Removeattr (): Deletes the specified attribute of the specified element.
9. Style operation
You can set or get a CSS style by using attr ().
Append style: AddClass (). For example, "$ (" P "). AddClass (" selected ");, append the" selected "style to all p elements.
Remove style: removeclass ()---Remove all or the specified class from the matching element. For example, "$ (" P "). Removeclass (" selected ");, remove" selected "from all P elements.
Toggle Style: Toggleclass ()---Control the repeat switch on the style. If the class name exists, delete it, and add it if the class name does not exist. such as, "$ (" P "). Toggleclass (" selected ");", all of the P elements, if there is a "selected" style, delete the "selected" style, otherwise add the "selected" style.
Determines whether a style is included: Hasclass ()---Determine if the element contains a class, returns True, or false. such as, "$ (this). Hasclass (" protected "), determines whether the current node has a" protected "style.
10. Set or get HTML, text, and values
Reads and sets the HTML content in an element: HTML (), which can be used for XHTML, but not for XML documents.
Reads and sets the textual content in an element: text (), which can be used both for XHTML and for XML documents.
Reads and sets the value in an element: Val (), which resembles the Value property in JavaScript. For text boxes, Drop-down list boxes, radio boxes This method returns the value of the element (the multiple-selection box can only return the first value). If the multiple-selection drop-down list box is selected, returns an array that contains all the selected values.
11. Common methods of traversing nodes
Gets a collection of all the child elements of the matching element: children (). This method considers only the first layer of child elements without regard to any descendant elements.
Gets the collection of sibling elements immediately following the matching element (but only one element in the collection): Next ().
Gets the collection of sibling elements immediately preceding the matching element (but only one element in the collection): Prev ().
Gets all the sibling elements before and after the matching element: siblings ().
12.css-dom operation
Gets and sets the style properties of the element: CSS ().
Gets and sets the element transparency: opacity () property.
Gets and sets the height of the element, Width: height () and width (). When you set a value, if you pass only numbers, the default unit is PX. If you need to use a different unit, you pass a string, such as "$ (" P:first "). Height (" 2em ");
Gets the relative displacement of the element in the current window: offset (). It returns an object that contains two properties: Top,left. This method is valid only for visible elements.
v. Events in jquery
1. Load DOM
After the page is loaded, the browser adds events to the DOM element through JavaScript. In regular JavaScript code, the Window.onload method is usually used to use $ (document) in jquery. Ready () method. The simplified notation in jquery "$ ()". When registering an event in window.onload, you can only register in one window.onload body. But with jquery, you can register in multiple $ (document). Ready () or $ ().
2. Event Binding
Binds the specified event to a matching element. For example, yesterday we bound the event in the Window.onload method: "$ (" P "). OnClick (function () {Alert ($ (this). text ());
In jquery $ (document). Ready () can be so bound: "$ (" P "). Click (function () {Alert ($ (this). text ());
"Using bind (), you can bind: $ (" P "). Bind (" click ", Function () {Alert ($ (this). text ());
});
3. Synthetic Events
Hover (): simulates the cursor hover time. When the cursor is moved over the element, the first specified function is triggered, and the specified second function is triggered when the cursor moves out of the element. For example, hover effect: $ ("TD"). Hover (function () {$ (this). addclass (' hover ');}, function () {$ (this). Removeclass ("hover");});
Toggle (): Used to simulate a continuous mouse click event. The first time the element is clicked, the first specified function is triggered, and when the same element is clicked again, the specified second function is triggered, and if there are more functions, it is triggered in turn until the last one. For example, set the selection and the unchecked effect of the element:
$ ("TD"). Toggle (function () {$ (this). AddClass (' selected ');}, function () {$ (this). Removeclass ("selected");});
Using toggle () without passing parameters, the effect is the visible state of the toggle element.
4. Bubbling of events
Events are kept up to the top just like bubbles in the DOM hierarchy.
Workaround: Returns false in the event handler to stop bubbling the event. You can also stop the default behavior of an element.
This feature is supported for all current UI interactions or their events. Returning false on its own event handler will abort the continuation of the event down-pass. Returns True the event continues to pass down.
5. Properties of the Event object
Event object: When an event is triggered, the event object is created. Using events in your program requires only one argument to be added to the handler function. Use some of the arguments in the event handler function. For example, when getting an event occurs, relative to the position of the page: Event.pagex, Event.pagey,event is the parameter of the event handler function.
6. Removal of events
Removes all click events on a button: $ ("btn"). Unbind ("click")
Remove all events on a button: $ ("btn"). Unbind ();
One (): This method can handle functions for element binding. When the handler function is triggered once, the event is immediately deleted. That is, on each object, the event handler function is only executed once.
vi. Dom animations in jquery
You can animate a DOM object by setting the way it is displayed and hidden.
1. No animation effect of hiding and display
Hide (): In an HTML document, calling the Hide () method for an element changes the display style of the element to none. The code function is the same as CSS ("display", "none");
Show (): Changes the display style of an element to a previously displayed state.
Toggle (): Toggles the visible state of the element: toggle to Hidden if the element is visible, or to visible if the element is hidden.
2. By setting the transparency effect of hiding and display, to achieve the fade in the animation effect
FadeIn (), fadeout (): Only change the transparency of the element. Fadeout () reduces the opacity of the element for a specified period of time until the element disappears completely. FadeIn () is the opposite. For example, fade the paragraph in 600 milliseconds slowly: $ ("P"). FadeIn ("slow");
Fadeto (): Adjusts the opacity to the specified value (between 0–1) in an asymptotic manner. and optionally triggers a callback function after the animation completes. For example, with 200 milliseconds to quickly adjust the transparency of the paragraph to 0.25, after the animation, display a "Animation Done" message box: "$ (" P "). Fadeto (" Fast ", 0.25, function () {alert (" Animation Done. ");
3. By setting the height effect of the hidden and display, to achieve sliding down and the animation effect of the collection
Slidedown (), Slideup (): Only changes the height of the element. If the display property of an element is none, the element is extended from top to bottom when the Slidedown () method is invoked. The Slideup () method is just the opposite, and the elements are reduced from bottom to top. For example, slide the paragraph down with a slow 600 millisecond: $ ("P"). Slidedown ("slow");
Slidetoggle (): Toggles the visibility of the matching element by changing the height. For example, 200 milliseconds to slide the paragraph up or down quickly, and after the animation is over, a "Animation done" message box is displayed: "$ (" P "). Slidetoggle (" Fast ", function () {alert (" Animation done. ");});".
Using JavaScript, jquery can handle the dynamic update of the current page, combined with CSS styles to make a very beautiful UI, even more beautiful than the desktop software UI. JavaScript is cumbersome to write and debug, so some companies have produced simplified development specifically for JavaScript applications, such as the Google-produced GWT, which can be written as JavaScript 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, you can compile Java code into JavaScript code, CSS style files, and HTML.
