JavaScript学习笔记8-jQuery入门介绍、css选择器复习

来源：互联网发布：淘宝为什么打压外贸店编辑：程序博客网时间：2024/05/21 16:59

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head>  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content=""> </head> <body> <a>click me</a> <script type="text/javascript"> if(document.getElementById("hello")) {document.getElementById("hello").style.color = "red"; } </script>   </body></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head>  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <script type="text/javascript" src="jquery-1.4.4.js"></script> </head> <body>    <a id="hello" style="color:blue">click me</a>  <script type="text/javascript">  //alert($("#hello").css("color"));     读  //alert($("#hello").css("color", "red"));  写      //如果此时 删去a的id属性   //alert($("#hello"))那么返回object对象  //alert($("#hello")[0]); 返回空  alert($("#hello").get(0));  </script> </body></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head>  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <script type="text/javascript" src="jquery-1.4.4.js"></script>  <script type="text/javascript">/*  window.onload = function()  {var myTable = document.getElementById("table1");    var myTBody = myTable.getElementsByTagName("tbody")[0];    var myTrs = myTBody.getElementsByTagName("tr");for(var i = 0; i < myTrs.length; i++){if(i % 2 == 0){myTrs[i].style.backgroundColor = "red";}else{myTrs[i].style.backgroundColor = "blue";}}    }*/  $(function()  {$("#table1 tbody tr:even").css('background', 'red');$("#table1 tbody tr:odd").css('background', 'blue');  });  </script>   </head> <body>  <table id="table1" border="1" align="center" width="80%"><tbody>  <tr><td>hello</td><td>hello</td><td>hello</td><td>hello</td></tr>  <tr><td>world</td><td>world</td><td>world</td><td>world</td></tr>  <tr><td>welcome</td><td>welcome</td><td>welcome</td><td>welcome</td></tr>  <tr><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td></tr>  <tr><td>bbbbb</td><td>bbbbb</td><td>bbbbb</td><td>bbbbb</td></tr>  <tr><td>ccccc</td><td>ccccc</td><td>ccccc</td><td>ccccc</td></tr>  <tr><td>ddddd</td><td>ddddd</td><td>ddddd</td><td>ddddd</td></tr>  <tr><td>eeeee</td><td>eeeee</td><td>eeeee</td><td>eeeee</td></tr>  <tr><td>fffff</td><td>fffff</td><td>fffff</td><td>fffff</td></tr>  <tr><td>hello</td><td>hello</td><td>hello</td><td>hello</td></tr>  <tr><td>world</td><td>world</td><td>world</td><td>world</td></tr>  <tr><td>welcome</td><td>welcome</td><td>welcome</td><td>welcome</td></tr>  <tr><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td></tr>  <tr><td>bbbbb</td><td>bbbbb</td><td>bbbbb</td><td>bbbbb</td></tr>  <tr><td>ccccc</td><td>ccccc</td><td>ccccc</td><td>ccccc</td></tr>  <tr><td>ddddd</td><td>ddddd</td><td>ddddd</td><td>ddddd</td></tr>  <tr><td>eeeee</td><td>eeeee</td><td>eeeee</td><td>eeeee</td></tr>  <tr><td>fffff</td><td>fffff</td><td>fffff</td><td>fffff</td></tr>  <tr><td>hello</td><td>hello</td><td>hello</td><td>hello</td></tr>  <tr><td>world</td><td>world</td><td>world</td><td>world</td></tr>  <tr><td>welcome</td><td>welcome</td><td>welcome</td><td>welcome</td></tr>  <tr><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td><td>aaaaa</td></tr>  <tr><td>bbbbb</td><td>bbbbb</td><td>bbbbb</td><td>bbbbb</td></tr>  <tr><td>ccccc</td><td>ccccc</td><td>ccccc</td><td>ccccc</td></tr>  <tr><td>ddddd</td><td>ddddd</td><td>ddddd</td><td>ddddd</td></tr>  <tr><td>eeeee</td><td>eeeee</td><td>eeeee</td><td>eeeee</td></tr>  <tr><td>fffff</td><td>fffff</td><td>fffff</td><td>fffff</td></tr></tbody></table> </body></html>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><html> <head>  <title> New Document </title>  <meta name="Generator" content="EditPlus">  <meta name="Author" content="">  <meta name="Keywords" content="">  <meta name="Description" content="">  <script type="text/javascript" src="jquery-1.4.4.js"></script>  <script type="text/javascript">  /*  window.onload = function()  {var btn = document.getElementById("myButton");btn.onclick = function(){var count = 0;var checkboxs = document.getElementsByName("myCheck");for(var i = 0; i < checkboxs.length; i++){if(checkboxs[i].checked){count++;}}alert("number: " + count);}  }*/$(function(){$("#myButton").click(function(){alert("选中个数： " + $('input[name="myCheck"]:checked').length);});});  </script> </head> <body>   <input type="checkbox" name="myCheck" checked="checked"> <input type="checkbox" name="myCheck"> <input type="checkbox" name="myCheck" checked="checked"> <input type="checkbox" name="myCheck"> <input type="checkbox" name="myCheck"> <br><br> <input type="button" value="click me" id="myButton"> </body></html>

CSS 选择器（复习）

其中类选择器应用最多，如果“.”前面没有元素，则表示应用到当前页面里所有id为dream的元素。如果前面有元素，则表示应用到元素名为“div” id为“note”的元素上。

0 0