JavaScript学习笔记8-jQuery简介、jQuery使用详解、DOM对象与jQuery对象的转换与区别-优快云博客

本文对比了jQuery中$(document).ready()与原生JavaScript中window.onload的区别，详细介绍了这两种方法在DOM加载完成后的触发时机及使用场景，并展示了如何用这两种方式为页面元素添加事件监听。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

jQuery的口号是：write less, do more

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

jquery $(document).ready() 与window.onload的区别

这两个方法的效果都是一样的，都是在dom文档树加载完之后执行一个函数（注意，这里面的文档树加载完不代表全部文件加载完）。

  <script type="text/javascript">

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

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

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

  </script>

  <script type="text/javascript">

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

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

而window.onload是在dom文档树加载完和所有文件加载完之后执行一个函数。也就是说$(document).ready要比window.onload先执行。

那么Jquery里面$(document).ready函数的内部是怎么实现的呢？下面我们就来看看：

我们来为document添加一个ready函数：

window.onload = function () {
            alert('onload');

        };

        document.ready(function () {
            alert('ready');

        });

执行这段代码之后，你会看到浏览器里面会先弹出“ready”,在弹出onload。

对界面里的所有链接，附加onclick函数，DOM 实现和 jquery实现：

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

  <script type="text/javascript">

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

DOM 对象和 jquery对象之间的相互转化

<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对象。去数组里的第一个元素来获取DOM 对象
	alert(t.innerHTML);

    // jQuery对象转换为DOM对象(第二种方式)。jQuery为每个对象提供了get方法

    var s = cm.get(0);

	alert(s.innerHTML); //s是DOM对象
 

  });
  </script>