JQuery self-study notes-8 common operations

JQuery has a powerful way to operate HTML elements and attributes. A very important part of jQuery DOM operations is the ability to operate the DOM. JQuery provides a series of DOM-related methods, which makes it easy to access and manipulate elements and attributes. Tip: DOM = Document Object Model (Document Object Model) DOM defines the standard for accessing HTML and XML documents: "W3C Document Object Model is independent of platform and language interfaces, allow programs and scripts to dynamically access and update the content, structure, and style of a document." Get three simple and practical jQuery methods for DOM operations: text (), text (), html (), and val () -set or return the text content of the selected element html ()-set or return the content of the selected element (including the HTML Tag) val () -setting or returning the value of a form field the following example shows how to obtain the content through the jQuery text () and html () Methods: instance $ ("# btn1 "). click (function () {alert ("Text:" + $ ("# test "). text () ;}); $ ("# btn2 "). click (function () {alert ("HTML:" + $ ("# test" example .html () ;}); give the following example to demonstrate how to use jQuery val () method to obtain the value of the input field: instance $ ("# btn1 "). click (function () {alert ("Valu E: "+ $ (" # test "). val ();}); try to get the attribute-attr () jQuery attr () method to get the attribute value. The following example shows how to obtain the value of the href attribute in the link: instance $ ("button "). click (function () {alert ($ ("# w3s "). attr ("href "));}); try it in person ======================================================== ========================================================== ========================================================== ================= set content-text (), html () and val () We will use three identical methods in the previous chapter to set the content: text ()-set or return the text content of the selected element html () -set or return the content of the selected element (including HTML tags) val ()-set or return the value of a form field. The following example shows how to use text (), html () and the val () method. Rong: instance $ ("# btn1"). click (function () {$ ("# test1"). text ("Hello world! ") ;}); $ (" # Btn2 "). click (function () {$ (" # test2 ").html (" <B> Hello world! </B> ") ;}); $ (" # btn3 "). click (function () {$ ("# test3 "). val ("Dolly Duck") ;}; try the following jQuery methods in the text (), html (), and val () callback functions: text (), html () and val () also have callback functions. The callback function consists of two parameters: the subscript of the current element in the list of selected elements and the original (old) value. Then return the string you want to use with the new value of the function. The following example demonstrates text () and html () with callback functions: instance $ ("# btn1 "). click (function () {$ ("# test1 "). text (function (I, origText) {return "Old text:" + origText + "New text: Hello world! (Index: "+ I +") ";}) ;}$ (" # btn2 "). click (function () {$ ("# test2" functions .html (function (I, origText) {return "Old html:" + origText + "New html: Hello <B> world! </B> (index: "+ I +") ";}); try setting attributes in person-attr () jQuery attr () the method is also used to set/change the attribute value. The following example shows how to change (SET) the value of the href attribute in the link: instance $ ("button "). click (function () {$ ("# w3s "). attr ("href", "http://www.w3school.com.cn/jquery") ;}); try the attr () method in person and allow you to set multiple attributes at the same time. The following example shows how to set the href and title attributes simultaneously: instance $ ("button "). click (function () {$ ("# w3s "). attr ({"href": "http://www.w3school.com.cn/jquery", "title": "W3School jQuery Tutorial"}) ;}); try attr (). The callback function consists of two parameters: the subscript of the current element in the list of selected elements and the original (old) value. Then return the string you want to use with the new value of the function. The following example demonstrates the attr () method with a callback function: instance $ ("button "). click (function () {$ ("# w3s "). attr ("href", function (I, origValue) {return origValue + "/jquery ";});}); try it in person ======================================================== ========================================================== ========================================================== ================ add new HTML content. We will learn the four jQuery methods used to add new content: append ()-insert content prepend () at the end of the selected element-insert content after () at the beginning of the selected element-insert content before () after the selected Element () -The selected Element The jQuery append () method is used to insert content at the end of the selected element. Instance $ ("p"). append ("Some appended text."); try jQuery prepend () method jQuery prepend () to insert content at the beginning of the selected element. Instance $ ("p "). prepend ("Some prepended text. "); try adding several new elements using the append () and prepend () methods. In the above example, we only insert text/HTML at the beginning/end of the selected element. However, the append () and prepend () methods can receive an infinite number of new elements through parameters. You can use jQuery to generate text/HTML (as in the preceding example), or use JavaScript code and DOM elements. In the following example, we create several new elements. These elements can be created using text/HTML, jQuery, or JavaScript/DOM. Then We append these new elements to the Text using the append () method (which is equally valid for prepend (): instance function appendText () {var txt1 = "<p> Text. </p> "; // create a new element var txt2 in HTML = $ (" <p> </p> "). text ("Text. "); // create a new element var txt3 = document with jQuery. createElement ("p"); // create a new element named txt3.innerHTML = "Text. "; $ (" p "). append (txt1, txt2, txt3); // append a new element.} Try jQuery after () and before () methods. The jQuery after () method inserts content after the selected element. The jQuery before () method inserts content before the selected element. Instance $ ("img "). after ("Some text after"); $ ("img "). before ("Some text before"); try adding several new elements after () and before () through the after () and before () methods () the method can receive an infinite number of new elements through parameters. You can use text/HTML, jQuery, or JavaScript/DOM to create new elements. In the following example, we create several new elements. These elements can be created using text/HTML, jQuery, or JavaScript/DOM. Then we use the after () method to insert these new elements into the text (which is equally valid for before (): instance function afterText () {var txt1 = "<B> I </B>"; // create a new element named var txt2 in HTML = $ ("<I> </I> "). text ("love"); // create a new element var txt3 = document through jQuery. createElement ("big"); // create a new element named txt3.innerHTML = "jQuery! "; $ (" Img "). after (txt1, txt2, txt3 ); // Insert a new element after img} try it myself ============================ ========================================================== ========================================================== ================================== Delete elements/content if you want to delete elements and content, you can use the following jQuery Methods: remove ()-delete selected elements (and their child elements) empty ()-delete child elements from selected elements jQuery remove () the jQuery remove () method deletes the selected element and its child element. Instance $ ("# div1"). remove (); try jQuery empty () method to delete the child element of the selected element. Instance $ ("# div1"). empty (); try filtering the deleted element jQuery remove (). You can also use a parameter to filter the deleted element. This parameter can be the syntax of any jQuery selector. The following example deletes all <p> elements of class = "italic": instance $ ("p "). remove (". italic "); try it in person ======================================================== ========================================================== ========================================================== ================ jQuery operations CSSjQuery has several methods to perform CSS operations. We will learn the following: addClass ()-add one or more classes to the selected element removeClass ()-delete one or more classes from the selected element toggleClass () -The switch operation css () for adding/deleting classes to or from the selected elements-setting or returning the style sheet under the style sheet of the style attribute instance will be used for all examples on this page :. important {font-weight: bold; font-size: xx-large ;}. blue {color: blue;} jQuery addClass () method the following example shows how to add class attributes to different elements. You can also select multiple elements when adding a class: instance $ ("button "). click (function () {$ ("h1, h2, p "). addClass ("blue"); $ ("div "). addClass ("important") ;}; try it yourself. You can also specify multiple classes in the addClass () method: instance $ ("button "). click (function () {$ ("# div1 "). addClass ("important blue") ;}; try jQuery removeClass () in person. The following example shows how to delete a specified class attribute from different elements: instance $ ("button "). click (function () {$ ("h1, h2, p "). removeClass ("blue") ;}; try jQuery toggleClass () in person. The following example shows how to use jQuery ToggleClass () method. This method adds or deletes the selected elements by switching to an instance $ ("button "). click (function () {$ ("h1, h2, p "). toggleClass ("blue ");}); try it in person ======================================================== ========================================================== ========================================================== ================= jQuery css () the css () method sets or returns one or more style attributes of the selected element. If you want to return the value of the specified CSS attribute, use the following syntax: CSS ("propertyname"). The following example returns the background-color value of the First Matching Element: instance $ ("p" ).css ("background-color"); try setting CSS attributes. To set the specified CSS attributes, use the following syntax: css ("propertyname ", "value"); the following example sets the background-color value for all matching elements: instance $ ("p" ).css ("background-color", "yellow "); try setting multiple CSS attributes. To set multiple CSS attributes, use the following syntax: css ({"propertyname": "value", "propertyname ": "value ",...}); the following example sets background-color and Font-size: instance $ ("p" ).css ({"background-color": "yellow", "font-size": "200% "}); try it in person ======================================================== ========================================================== ========================================================== ================= jQuery size method jQuery provides an important way to process multiple sizes: width () height () innerWidth () innerHeight () outerWidth () outerHeight () jQuery width () and height () Methods width () method to set or return the width of an element (excluding the padding, border, or margin ). The height () method sets or returns the height of an element (excluding the padding, border, or margin ). The following example returns the width and height of the specified <div> element: instance $ ("button "). click (function () {var txt = ""; txt + = "Width:" + $ ("# div1 "). width () + "</br>"; txt + = "Height:" + $ ("# div1 "). height (); $ ("# div1" ).html (txt) ;}); try jQuery innerWidth () and innerHeight () Methods innerWidth () returns the width (including the padding) of the element ). The innerHeight () method returns the height of the element (including the padding ). The following example returns the inner-width/height of the specified <div> element: instance $ ("button "). click (function () {var txt = ""; txt + = "Inner width:" + $ ("# div1 "). innerWidth () + "</br>"; txt + = "Inner height:" + $ ("# div1 "). innerHeight (); $ ("# div1" ).html (txt) ;}); try jQuery outerWidth () and outerHeight () Methods outerWidth () returns the width of the element (including the padding and border ). The outerHeight () method returns the height of an element, including the padding and border ). The following example returns the outer-width/height of the specified <div> element: instance $ ("button "). click (function () {var txt = ""; txt + = "Outer width:" + $ ("# div1 "). outerWidth () + "</br>"; txt + = "Outer height:" + $ ("# div1 "). outerHeight (); $ ("# div1" ).html (txt) ;}); try outerWidth (true) in person) returns the width of the element (including the padding, border, and margin ). The outerHeight (true) method returns the height of an element, including the padding, border, and margin ). Instance $ ("button "). click (function () {var txt = ""; txt + = "Outer width (+ margin):" + $ ("# div1 "). outerWidth (true) + "</br>"; txt + = "Outer height (+ margin):" + $ ("# div1 "). outerHeight (true); $ ("# div1" ).html (txt) ;}); try jQuery in person-more width () and height () the following example returns the width and height of the document (HTML document) and window (Browser viewport): instance $ ("button "). click (function () {var txt = ""; txt + = "Document width/height:" + $ (document ). width (); txt + = "x" + $ (document ). height () + "\ n"; txt + = "Window width/height:" + $ (window ). width (); txt + = "x" + $ (window ). height (); alert (txt) ;}); try the following example to set the width and height of the specified <div> element: instance $ ("button "). click (function () {$ ("# div1 "). width (500 ). height (500 );});