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

最新推荐文章于 2024-05-24 14:23:31 发布

原创最新推荐文章于 2024-05-24 14:23:31 发布 · 110 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#jquery #ViewUI

Jquery 专栏收录该内容

2 篇文章

订阅专栏

本文深入探讨了JavaScript中jQuery库的使用，包括DOM操作、事件处理、Ajax调用及与原生JavaScript对象的交互。重点展示了如何利用jQuery简化DOM操作、实现事件监听和AJAX请求，以及如何在网页中实现交互式链接。

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