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

来源：互联网发布：linkin 大数据编辑：程序博客网时间：2024/06/09 17:41

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>

0 0