Home > Developer > JavaScript
① Relative positioning of jQuery elements.
In jQuery, you can not only use the selector to perform absolute positioning, but also perform relative positioning. As long as you specify the second parameter in $ (), the second parameter is the relative element. When the second parameter is passed to a jQuery object, the parameter is selected relative to the object as the benchmark.
Copy codeThe Code is as follows:
<Html>
<Head>
<Title> relative positioning and Selector of jQuery elements </title>
<Script type = "text/javascript" src = "jQuery-1.4.2.js"> </script>
<Script>
$ (Function (){
// Convert 1st ~ The background color of the three rows is set to red (absolute positioning ).
// Note that gt (0) starts from the sequence number in the new sequence generated by lt (4), instead of the original sequence. (Further filtering based on the original one)
$ ("# T tr: lt (4): gt (0)" background .css ("background", "red ");
$ ("# T tr"). click (function (){
// This --> $ (this) in jQuery in Dom)
// $ ("Td", $ (this) is the search for td under the tr of this row.
$ ("Td", symbol (this)).css ("background", "green ");
});
$ ("Tr [title = ttt]" ).css ("background", "yellow ");
});
</Script>
</Head>
<Body>
<Div id = "div1">
<Table id = "t">
<Tr> <td> 111 </td> <td> A </td> </tr>
<Tr> <td> 222 </td> <td> B </td> </tr>
<Tr> <td> 333 </td> <td> C </td> </tr>
<Tr> <td> 444 </td> <td> D </td> </tr>
<Tr title = "ttt"> <td> 555 </td> <td> E </td> </tr>
<Tr> <td> 666 </td> <td> F </td> </tr>
<Tr> <td> 777 </td> <td> G </td> </tr>
<Tr> <td> 888 </td> <td> H </td> </tr>
<Tr> <td> 999 </td> <td> I </td> </tr>
</Table>
<Br/>
</Div>
</Body>
</Html>
Run:
② $ ("Div [id]") Select the div with the id attribute
③ $ ("Div [Title = test] ") Select the div whose title attribute is" test.Note: An equal sign.
$ ("Div [title! =Test] ") Select a div whose title attribute is not" test"
④ $ ("Input: checked ")Note: There is no space between input and: checked.
⑤Difference between $ ("input") and $ (": input ")
$ ("Input") can only obtain the <input> label, but <textarea>, <select>, and so on cannot be obtained.
$ (": Input") not only can get the <input> label, but can get the form from the submit server such as <textarea> and <select>.
Similarly, you can use $ ("input [type = text]") to obtain all single-line text boxes. For example, $ (": passowrd"), $ (": radio"), $ (": checkbox"), $ (": submit"), and $ (": image "), $ (": reset "), $ (": button "), $ (": file "), $ (": hidden ")
⑥ Use the attr () method to read or set the attributes of an element, and use attr to operate encapsulation attributes not available in jQuery.
$ ("# A: first"). attr ("href", "http://baidu.com ");
7. Delete the removeAttr attribute, which is invisible to the source code. In this case, it is different from clearing the property.
⑧ Dynamically create Dom nodes
Use $ (html string) to dynamically create a Dom node, return a jQuery object, and call the append method to add the created node to the Dom.
Var link = $ ("<a href = 'HTTP: // www.baidu.com '> Baidu </a> ");
$ ("Div: first"). append (link );
The append method is used to append an element to the end of an element (add a child element to become the last child element)
The prepend method adds an element (add a child element to become the first child element) at the beginning of the element)
The after method adds an element after the element (add brother)
Before method adds an element before the element (add brother)
⑨ Delete a node
Remove () deletes the selected node. This method returns the deleted Node object and can continue to use the deleted node.
Var list = $ ("# ulLeft li. test"). remove ();
$ ("# UlRight"). append (list );
Prevent event bubblesE. stopPropagation ();
Block default behavior: E. preventDefault () and window. event. returnValue = false have the same effect.
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
