Home > Developer > Web Develop
<script type= "Text/javascript" src= "Jquery.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ (this). Hide (); This this represents itself. So clicking on the button hides itself.
});
});
</script>
<body>
<button type= "button" >click me</button>
</body>
<script type= "Text/javascript" src= "Jquery.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("#test"). Hide (); The element with ID test is hidden when the button is clicked
});
});
</script>
<body>
<p>this is a paragraph.</p>
<p id= "Test" >this is another paragraph.</p>
<button type= "button" >click me</button>
</body>
<script type= "Text/javascript" src= "/jquery/jquery.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function () {
$ ("button"). Click (function () {
$ ("P"). Hide (); The content labeled P is hidden when you click the button
});
});
</script>
<body>
<p>this is a paragraph.</p>
<p>this is another paragraph.</p>
<button type= "button" >click me</button>
</body>
<script type= "Text/javascript" src= "Jquery.js" ></script>
<script type= "Text/javascript" >
$ (document). Ready (function ()
{
$ ("button"). Click (Function ()
{
$ (". Test"). Hide (); The contents of class test will be hidden
});
});
</script>
<body>
<H2 class= "Test" >this is a heading<p class= "Test" >this is a paragraph.</p>
<p>this is another paragraph.</p>
<button type= "button" >click me</button>
</body>
JQuery uses CSS selectors to select HTML elements.
$ ("P") select the <p> element.
$ ("P.intro") selects all the <p> elements of the class= "Intro".
$ ("P#demo") selects all <p> elements of the id= "demo".
JQuery Property SelectorJQuery uses an XPath expression to select an element with a given property.
$ ("[href]") selects all elements with an href attribute.
$ ("[href= ' # ']") selects all elements with an HREF value equal to "#".
$ ("[href!= ' # ']") selects all elements with an HREF value that is not equal to "#".
$ ("[href$= '. jpg ']") selects all elements with an href value ending with ". jpg".
| $ (This) | Current HTML Element |
| $ ("P") | All <p> elements |
| $ ("P.intro") | All <p> elements of class= "Intro" |
| $ (". Intro") | All elements of class= "Intro" |
| $ ("#intro") | id= Elements of "Intro" |
| $ ("ul Li:first") | The first <li> element of each <ul> |
| $ ("[href$= '. jpg ']") | All href attributes with attribute values ending with ". jpg" |
| $ ("Div#intro. Head") | id= all class= "head" elements in the <div> element of "Intro" |
| Selector | SelectorExample | Select |
|---|---|---|
| * | $("*") | All elements |
| #ID | $ ("#lastname") | id= elements of "LastName" |
| . class | $ (". Intro") | All elements of class= "Intro" |
| Element | $ ("P") | All <p> elements |
| . class. class | $ (". Intro.demo") | All class= "Intro" and Class= "demo" Elements |
| : First | $ ("P:first") | First <p> Element |
| : Last | $ ("P:last") | Last <p> Element |
| : Even | $ ("Tr:even") | All even <tr> elements |
| : Odd | $ ("tr:odd") | All odd <tr> elements |
| : eq (index) | $ ("UL Li:eq (3)") | Fourth element in the list (index starting from 0) |
| : GT (no) | $ ("UL li:gt (3)") | List elements with index greater than 3 |
| : LT (no) | $ ("UL Li:lt (3)") | List elements with index less than 3 |
| : Not (selector) | $ ("Input:not (: Empty)") | All input elements that are not empty |
| : Header | $ (": Header") | All heading elements |
| : Animated | All animated elements | |
| : Contains (text) | $ (": Contains (' W3school ')") | All elements containing the specified string |
| : Empty | $ (": Empty") | All elements with No child (element) nodes |
| : Hidden | $ ("P:hidden") | All hidden <p> elements |
| : Visible | $ ("table:visible") | All the visible tables |
| S1,s2,s3 | $ ("Th,td,.intro") | All elements with a matching selection |
| [attribute] | $ ("[href]") | All elements with an HREF attribute |
| [attribute=value] | $ ("[href= ' # ']") | The value of all href attributes equals "#" elements |
| [attribute! =value] | $ ("[href!= ' # ']") | The value of all HREF attributes is not equal to the "#" element |
| [attribute$=value] | $ ("[href$= '. jpg ']") | The value of all HREF attributes contains elements ending with ". jpg" |
| : input | $ (": input") | All <input> elements |
| : Text | $ (": Text") | All <input> elements of type= "text" |
| :p Assword | $ (":p Assword") | All <input> elements of type= "password" |
| : Radio | $ (": Radio") | All <input> elements of type= "Radio" |
| : checkbox | $ (": checkbox") | All <input> elements of the type= "checkbox" |
| : Submit | $ (": Submit") | All <input> elements of type= "submit" |
| : RESET | $ (": Reset") | All <input> elements of type= "reset" |
| : button | $ (": Button") | All <input> elements of type= "button" |
| : Image | $ (": Image") | All <input> elements of type= "image" |
| : File | $ (": File") | All <input> elements of type= "file" |
| : Enabled | $ (": Enabled") | All the active input elements |
| :d isabled | $ (":d isabled") | All disabled input elements |
| : Selected | $ (": Selected") | All selected input elements |
| : Checked | $ (": Checked") | All selected input elements |
Selectors in the Jquery.js library
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
