`

jquery 简介,DOM对象和Jquery对象的转换

阅读更多
<script type="text/javascript" src="jquery-1.6.3.js"></script>
<script type="text/javascript">
// ready方法的作用是当页面中的dom加载完毕后执行参数中的函数
$(document).ready(function(){
alert("hello world");
});
</script>

 

 <script type="text/javascript" src="jquery-1.4.4.js"></script>
  
  
  <script type="text/javascript">

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


  </script>

 Window.onload和ready的区别:

<script type="text/javascript" src="jquery-1.4.4.js"></script>
 
  <script type="text/javascript">

  function test1()
  {
	alert("hello");
  }

  function test2()
  {
	alert("world");
  }

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




  </script>

//执行结果只输出world,Window的onload属性只关联一个对象

 

<script type="text/javascript" src="jquery-1.4.4.js"></script>

  <script type="text/javascript">

  $(document).ready(function()
  {
	alert("hello");
  }
  );

  $(document).ready(function()
  {
	alert("world");
  });


  </script>

//先输出hello,再输出world
//$(document).ready()可以关联多个对象

 DOM对象和Jquery对象的相互转换:

<head>
<script type="text/javascript" src="jquery-1.4.4.js"></script>

  <script type="text/javascript">

  $(document).ready(function()
  {
	var pElement = document.getElementsByTagName("p")[0];//javascript对象

    //将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>

 

//用Jquery实现点击超链接时提示“hello world”

<head>
<script type="text/javascript" src="jquery-1.4.4.js"></script>


  <script type="text/javascript">

  $(document).ready(function()
  {
	$("a").click(function()
	{
		alert("Hello World");
	});
  });

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

 

//用javascript实现点击超链接时,输出“hello world”
<head>  
<script type="text/javascript">

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

	for(var i = 0; i < myLinks.length; i++)
	{
                                 //给每一个超链接对象附加onclick属性

		myLinks[i].onclick = function()
		{
			alert("Hello World"); 		}
	}
  }

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

 

分享到:
评论

相关推荐

Global site tag (gtag.js) - Google Analytics