JQuery学习—封装，让这个世界变得更简单

浏览数：23 / 时间：2015年06月09日

1、编者寄语

小编认为，JQuery就是用JavaScript封装成的一些js方法，又将这些方法封装在一起，称为JQuery。除此之外，js还有两个库就是Prototype、MooTools，这里不再多做介绍。

在之前学过的js中知道，js中的函数和方法都是需要我们自己亲自编写的，但是有些方法是我们经常要用到的，由此就产生了JQuery库，就好比生产汽车，飞机，大炮等，之前我们得先用钢材造螺丝，铁板等，然后再去造我们需要的汽车，飞机等，而现在是直接用造好的螺丝，铁板等做我们想做的东西。

这种思想就是封装，说白了就是写的更少，做的更多（例子中理解为，花的时间更少，造出的质量更高）。正是有了这种思想，才让这个世界变得如此简单。

2、JQuery与JavaScript比较

主要的 jQuery 函数是 $() 函数（jQuery 函数）。如果您向该函数传递 DOM 对象，它会返回 jQuery 对象，带有向其添加的 jQuery 功能。
jQuery 允许您通过 CSS 选择器来选取元素。
在 JavaScript 中，您可以分配一个函数以处理窗口加载事件：

JavaScript 方式：

<span style="font-size:18px;">function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;</span>

jQuery 方式：

function myFunction()
{
$("#h01").html("Hello jQuery");
}
$(document).ready(myFunction);

上面代码的最后一行，HTML DOM 文档对象被传递到 jQuery ：$(document)。
当您向 jQuery 传递 DOM 对象时，jQuery 会返回以 HTML DOM 对象包装的 jQuery 对象。
jQuery 函数会返回新的 jQuery 对象，其中的 ready() 是一个方法。
由于在 JavaScript 中函数就是变量，因此可以把 myFunction 作为变量传递给 jQuery 的 ready 方法。
提示：jQuery 返回 jQuery 对象，与已传递的 DOM 对象不同。jQuery 对象拥有的属性和方法，与 DOM 对象的不同。您不能在 jQuery 对象上使用 HTML DOM 的属性和方法。

3、JQuery应用

(1)jQuery编程的基本步骤

      step1,引入jQuery.js文件
      step2, 使用选择器查找要操作的节点
      step3,调用jQuery对象的属性或者方法来操作相应的节点。

(2)jQuery对象与dom对象之间的转换

      1)dom对象 --- > jQuery对象
          var $obj = $(dom对象);
         eg:var $d = $(div);
      2)jQuery对象 ---- > dom对象
          第一种方式: var obj = $obj.get(0);
          第二种方式: var obj = $obj.get()[0];

(3)具体例子

<!DOCTYPE html>
<html>
<head>
<script src="/jquery/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
  $("button").click(function(){
    alert("Background color = " + $("p").css("background-color"));
  });
});
</script>
</head>

<body>
<h2>这是标题</h2>
<p style="background-color:#ff0000">这是一个段落。</p>
<p style="background-color:#00ff00">这是一个段落。</p>
<p style="background-color:#0000ff">这是一个段落。</p>
<button>返回 p 元素的背景色</button>
</body>
</html>

该例子将JQuery与HTML和css结合起来，利用单击事件，访问HTML中的p标签并返回其背景颜色。

ps:要想学好JQuery还需要我们去做更多的例子，只有在实战中不断的应用，我们才能将JQuery理解的更深入，应用的更灵活

郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。

JQuery学习—封装，让这个世界变得更简单