Home > Developer > JavaScript
1<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">234<title></title>5<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>6<script type= "Text/javascript" >7Window.onload =function(){//page all elements loaded complete8 varItems = document.getElementsByTagName ("P");//get all <p> elements in a page9 for(varI=0;i < items.length;i++) {//loops the <p> element (because it gets an array object)Ten Items[i].onclick = function () {//Add onclick event to each <p>//doing something ... Alert ("suc!"); -} - } the } -</script> - -<body> +<p> Test 1</p> -<p> Test 2</p> +</body> A
- To make a particular table interlaced
1<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">234<title></title>5<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>6<script type= "Text/javascript" >7Window.onload =function(){//page all elements loaded complete8 varItem = document.getElementById ("TB");//get an element with an ID of TB (table)9 varTbody = Item.getelementsbytagname ("tbody") [0];//gets the first TBODY element of a tableTen varTRS = Tbody.getelementsbytagname ("tr");//gets all the TR elements under the TBODY element One for(varI=0;i < trs.length;i++) {//Cyclic TR element A if(i%2==0) {//Take the mold. (Take the remainder. such as 0%2=0, 1%2=1, 2%2=0, 3%2=1) -Trs[i].style.backgroundcolor = "#888";//changes the background color of the TR element that matches the condition. - } the } - } -</script> - +<body> -<table id= "TB" > +<tbody> A<tr><td> first line </td><td> first row </td></tr> at<tr><td> second row </td><td> second row </td></tr> -<tr><td> third row </td><td> third row </td></tr> -<tr><td> Line Fourth </td><td> line fourth </td></tr> -<tr><td> Line Fifth </td><td> line fifth </td></tr> -<tr><td> Line Sixth </td><td> line sixth </td></tr> -</tbody> in</table> -</body> to
- For multi-box operation, output the number of selected multi-box.
1<! DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 transitional//en" "Http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">234<title></title>5<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>6<script type= "Text/javascript" >7Window.onload =function(){//page all elements loaded complete8 varBTN = document.getElementById ("btn");//get the element with ID btn (button)9Btn.onclick =function(){//to add an onclick event to an elementTen vararrays =NewArray ();//Create an Array object One varItems = Document.getelementsbyname ("check");//gets a set of elements named Check (checkbox) A for(i=0; i < items.length; i++) {//Loop This set of data - if(items[i].checked) {//decide whether to select -Arrays.push (Items[i].value);//add eligible additions to the array. push () is a method in a JavaScript array . the } - } -Alert ("Number of selected:" +arrays.length); - } + } -</script> + A<body> at<form method= "POST" action= "#" > -<input type= "checkbox" value= "1" name= "Check" checked= "Checked"/> -<input type= "checkbox" value= "2" name= "Check"/> -<input type= "checkbox" value= "3" name= "Check" checked= "Checked"/> -<input type= "button" value= "the number you selected" id= "btn"/> -</form> in</body> -Some of the above examples are performed using the traditional JavaScript method, in which the getElementById (), getElementsByTagName (), and Getelementsbyname methods are used, Then dynamically add behaviors or styles to the elements.
jquery Basic Learning 5--javascript method gets the elements in the page
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
