jquery Basic Learning 5--javascript method gets the elements in the page

Source: Internet
Author: User
Tags javascript array

    1. Add an onclick event to all <p> elements in a Web page

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

    1. 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

    1. 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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.