Home > Developer > JavaScript
Copy codeThe Code is as follows:
<! DOCTYPE html PUBLIC "-// W3C // dtd xhtml 1.0 Transitional // EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<Html xmlns = "http://www.w3.org/1999/xhtml">
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = UTF-8"/>
<Title> untitled document </title>
<Script src = "js/jquery-1.3.2.js"> </script>
<Script type = "text/javascript"> <! --
$ (Function (){
$ ("# AFirst"). click (function (){
$ ("# Result" example .html ("");
$ ("# Result" example .html ($ ("ul: first" example .html ());
})
$ ("# ALast"). click (function (){
$ ("# Result" example .html ("");
$ ("# Result" example .html ($ ("ul: last" example .html ());
})
$ ("# ANot"). click (function (){
$ ("# Result" example .html ("");
$ ("# Result" example .html ($ ("input: not (: checked)"). attr ("id "));
})
$ ("# AEven"). click (function (){
$ ("# Result" example .html ("");
$ ("Ul: even"). each (function (){
$ ("# Result" ).html ($ ("# Result" ).html () + ((this).html ());
})
})
$ ("# AOdd"). click (function (){
$ ("# Result" example .html ("");
$ ("Ul: odd"). each (function (){
$ ("# Result" ).html ($ ("# Result" ).html () + ((this).html ());
})
})
$ ("# AEq"). click (function (){
$ ("# Result" example .html ("");
$ ("Ul: eq (3)"). each (function (){
$ ("# Result" ).html ($ ("# Result" ).html () + ((this).html ());
})
})
$ ("# AGt"). click (function (){
$ ("# Result" example .html ("");
$ ("Ul: gt (3)"). each (function (){
$ ("# Result" ).html ($ ("# Result" ).html () + ((this).html ());
})
})
$ ("# ALt"). click (function (){
$ ("# Result" example .html ("");
$ ("Ul: lt (3)"). each (function (){
$ ("# Result" ).html ($ ("# Result" ).html () + ((this).html ());
})
})
$ ("# AHeader"). click (function (){
$ ("# Result" example .html ("");
$ (": Header"). each (function (){
$ ("# Result" ).html ($ ("# Result" ).html () + ((this).html ());
})
})
})
// --> </Script>
</Head>
<Body>
<Div>
<H1> h1 <H2> h2 <Li> li1
<Ul> 1 </ul>
<Ul> 2 </ul>
<Ul> 3 </ul>
<Ul> 4 </ul>
</Li>
<Li> li2
<Ul> 5 </ul>
<Ul> 6 </ul>
</Li>
<Li> li3
</Li>
</Div>
<Input type = "checkbox" id = "checkbox1"/> checkbox1
<Input name = "flower" type = "checkbox" id = "checkbox2" checked = "checked"/> checkbox2
<Br/>
<A href = "#" id = "aFirst"> display the value of the first ul node </a>
<A href = "#" id = "aLast"> display the value of the last ul node </a>
<A href = "#" id = "aNot"> the ID of the unselected checkbox is displayed. </a>
<A href = "#" id = "aEven"> displays ul content with an even number of indexes. </a>
<A href = "#" id = "aOdd"> displays ul content with an odd number of indexes. </a>
<A href = "#" id = "aEq"> display ul content with index 3 </a>
<A href = "#" id = "aGt"> display ul content with an index greater than 3 </a>
<A href = "#" id = "aLt"> show ul content with index less than 3 </a>
<A href = "#" id = "aHeader"> display the page title content </a>
<Br/>
Result:
<Br/>
<Div id = "Result">
</Div>
</Body>
</Html>
This section does not seem to have any extra-curricular knowledge points.
1. $ ("TabName: first ")
Description: obtains the first node of a certain node. For example, if there are 6 ul nodes in the example, you can use $ ("ul: first") to obtain the first ul node.
Returned value: Element;
2. $ ("TabName: Last ")
Description: similar to the previous one. The difference is that this method is used to obtain the last node.
Returned value: Element;
3. $ ("TabName: not (: attribute )")
Description: This method implements some simple selector filtering. In this example, $ ("input: not (: checked)") selects an unselected checkbox element, this method is still in practice. It seems that you can only filter attributes with bool values. In this example, it is equivalent to selecting input with checked as false.
Returned value: Array (Element );
4. $ ("TabName: even ")
Description: used to obtain the set of even index nodes of a certain node. Here, we need to emphasize that, the index here starts from 0. In this example, the ul nodes 1st, 3, and 5 are obtained after the aEven is clicked.
Returned value: Array (Element );
5. $ ("TagName: odd ")
Description: similar to the previous method, the only difference is that it obtains the set of odd nodes.
Returned value: Array (Element );
6. $ ("TagName: eq (index )")
Description: The Node used to obtain the index position of a node set.
Returned value: Array (Element );
7. $ ("TagName: gt (index )")
Description: used to obtain a node set with an index greater than the index.
Returned value: Array (Element );
8. $ ("TagName: lt (index )")
Description: used to obtain a node set with an index less than the index in a node set.
Returned value: Array (Element );
9. $ (": header ")
Description: used to obtain a set of title nodes such as h1, h2, and h3 on the page.
Returned value: Array (Element );
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
