您的位置:首页 > Web前端 > JQuery

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

2015-09-11 10:45 756 查看
<!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”的元素上。
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: