20.jQuery 분석

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 탭의 대상 그룹을 얻은 다음 순환을 사용하여 원클릭 속성을 하나씩 증가시킵니다.

<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: 페이지의 체크박스 선택 항목을 계산합니다

<!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>

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

다양한 언어의 JSON

JSON은 Javascript 표기법을 사용하여 데이터 구조를 레이아웃하는 데이터 형식입니다. 그러나 Javascript가 코드에서 이러한 구조를 나타낼 수 있는 유일한 언어는 아닙니다. 저는 일반적으로 '객체'{}...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

20.jQuery 분석

좋은 웹페이지 즐겨찾기