20、jQuery剖析-CSDN博客

本文链接：https://blog.csdn.net/kaoa000/article/details/8859968

1、$(document)将dom对象转换为jQuery对象。jQuery口号：write less，do more

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
 <head>
  <title> New Document </title>
  <meta name="Generator" co2013/04/28ntent="EditPlus">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
 <script type="text/javascript" src="jquery-1.9.1.js"> </script>

 <script type="text/javascript" >

//ready方法的作用是当页面中的dom加载完毕后执行参数中的函数
$(document).ready(function()
{
	alert("hello");
});
 </script>
 </head>

 <body>
  
 </body>
</html>

jQuery的ready方法很象window对象的onload属性

onload举例：

<head>
  <title> New Document </title>
 
 <script type="text/javascript" src="jquery-1.9.1.js"> </script>

 <script type="text/javascript" >
function test1()
{
	alert("hello");
}

function test2()
{
	alert("world");
}
window.onload = test1;
window.onload = test2;
 </script>
 </head>

jQuery的ready的举例：

<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.9.1.js"> </script>

 <script type="text/javascript" >
$(document).ready(function()
{
	alert("hello");
}
);

$(document).ready(function()
{
	alert("world");
}
);
 </script>

对于onload，

window.onload = test1;
window.onload = test2;

这两个语句只会执行最后一个，而对于jQuery的ready，有几个执行几个

2、使用dom对超链接增加onclick属性和使用jQuery为超链接增加onclick属性的区别

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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.9.1.js"> </script>

 <script type="text/javascript" >

window.onload = function()
{
	var myLinks = document.getElementsByTagName("a");

	for(var i = 0; i < myLinks.length; i++)
	{
		myLinks[i].onclick = function()
		{
			alert("hello world");//给每一个超链接对象附加onclick属性
		}
	}
}
 </script>
 </head>

 <body>
  <a href="#">test1</a><br>
  <a href="#">test2</a><br>
  <a href="#">test3</a><br>
  <a href="#">test4</a><br>
  <a href="#">test5</a><br>
  <a href="#">test6</a><br>
 </body>
</html>

先获得所有a标签的对象数组，然后使用了循环，逐一增加onclick属性。

<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.9.1.js"> </script>

 <script type="text/javascript" >

$(document).ready(function()
{
	$("a").click(function()
	{
		alert("hello");
	});
});
 </script>
 </head>

 <body>
   <a href="#">test1</a><br>
  <a href="#">test2</a><br>
  <a href="#">test3</a><br>
  <a href="#">test4</a><br>
  <a href="#">test5</a><br>
  <a href="#">test6</a><br>
 </body>
</html>

使用jQuery不需要循环，jQuery底层实现循环。$("a")是将dom对象转换为jQuery对象,

jQuery将很多dom属性转换为方法

3、dom对象与jQuery对象获取与转换

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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.9.1.js"> </script>

 <script type="text/javascript" >
$(document).ready(function()
{
	var pElement = document.getElementsByTagName("p")[0];

	//将dom对象装换为jQuery对象

	var pElementjQuery = $(pElement);

	alert("dom:" + pElement.innerHTML);
	alert("jQuery:" + pElementjQuery.html());

	var cm = $("#clickMe"); //获得的jQuery对象，是个数组

	//jQuery对象转换为dom对象，（第一种方式）
	var t = cm[0]; //t是dom对象
	alert(t.innerHTML);

	//jQuery对象装换为dom对象（第二种方式）

	var s = cm.get(0);
	alert(s.innerHTML); //s是dom对象

});
 </script>
 </head>

 <body>
  <p id="clickMe">点击我</p>
 </body>
</html>

4、jQuery的对象都有一个length属性，表示有多少对象。

5、使用dom对页面进行操作举例：

例子1：使表格的行按奇数和偶数的不同显示不同的yanse

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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.9.1.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";
		}
	}
}
</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>hello</td><td>hello</td><td>hello</td></tr>
	<tr><td>welcome</td><td>hello</td><td>hello</td><td>hello</td></tr>
	<tr><td>aaaa</td><td>hello</td><td>hello</td><td>hello</td></tr>
	<tr><td>bbbb</td><td>hello</td><td>hello</td><td>hello</td></tr>		<tr><td>cccc</td><td>hello</td><td>hello</td><td>hello</td></tr>
	<tr><td>dddd</td><td>hello</td><td>hello</td><td>hello</td></tr>
	<tr><td>eeee</td><td>hello</td><td>hello</td><td>hello</td></tr>
	<tr><td>ffff</td><td>hello</td><td>hello</td><td>hello</td></tr>
  </tbody>
 </body>
</html>

例子2：对页面上的checkbox选中项进行计数

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<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.9.1.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("num:"+count);
		}
	}
  </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>