码迷,mamicode.com
首页 > Web开发 > 详细

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

时间:2014-12-31 08:43:18      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:jquery      js   web   语言   

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学习—封装,让这个世界变得更简单

标签:jquery      js   web   语言   

原文地址:http://blog.csdn.net/u010168160/article/details/42271023

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!