Home > Developer > JavaScript
Explore jQuery's features of selecting and manipulating Elements
JavaScript selection element First let's see how we process element selection without jQuery. when JavaScript selects an element, it can obtain the element based on the id. When the id does not exist, the result is null, And the console reports a script execution error. therefore, the general method is to use an if statement to determine whether the element exists. for example, <body> <a> click me </a> <script type = "text/javascript"> // document. getElementById ("someId "). style. color = "red"; // if id does not exist, report error in console. if (document. getElementById ("hello") {// ensure it's neither null nor undefined. document. getElementById (" Hello "). style. color = "red" ;}</script> </body> jQuery selects the element to be manipulated. jQuery uses the $ () operator to obtain elements. For example, to obtain an object with an id, use: $ ("# idValue "). A jQuery object is returned no matter whether the element of the id exists or not ). this is totally different from getting DOM objects directly using JavaScript. in general, $ () obtains all elements that meet the condition. The obtained jQuery object has an attribute length, indicating the number of elements, which may be 0, indicates that no element is obtained. for example, if the target id to be obtained does not exist, the value is 0. the id selector is a special selector that obtains only a single element that meets the specified id. if multiple IDs exist, only the first element is returned. if the id does not exist, you can obtain the jQuery object. However, if you convert the jQuery object to a DOM object ([0] Or get (0), an undifined object is obtained. after Any attribute operation on this DOM object will return an error because undefined does not have any attribute. // jQueryalert ($ ("# hello"); // object // method1: convert jQuery object to DOM objectalert ($ ("# hello") [0]); // undefined $ ("# hello") [0]. style. color = "red"; // report error here! Since it is not easy to convert to a DOM element, we will discard the conversion and directly manipulate the jQuery element. for example: $ ("# hello" ).css ("color", "red"); in this way, although the element of the corresponding id does not exist, the style modification does not take effect, but no error is reported on the page, because jQuery will ignore it. if the id exists, the style will take effect. most methods in jQuery objects support both read and write operations. next we add the id we want for the link. <body> <a id = "hello"> click me </a> <script type = "text/javascript"> // jQuery alert ($ ("# hello "). length); // show DOM elements count. $ ("# hello" ).css ("color", "red"); // write action alert ($ ("# hello" ).css ("color ")); // read action </script> </body> in this example, hello is an existing id. First, use the write operation of the css () method of the jQuery object to assign it a color value, later, the color value was read by the read operation and displayed in a pop-up window. most methods in jQuery use the same name and support the corresponding read and write operations. generally, a read operation is a parameter, and a write operation is two parameters. conclusion: The jQuery syntax is compiled for the selection of HTML elements. You can perform some operations on the elements. the basic syntax is: $ (selector ). action () $ symbol defines jQuery. selector: "query" and "Search" HTML elements. jQuery action () performs read and write operations on elements.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
