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

页面导航:首页 > 网络编程 > JavaScript > JQuery学习—封装,让这个世界变得更简单

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

来源: 作者: 时间:2016-02-04 09:15 【

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

1、编者寄语

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

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

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

2、JQuery与JavaScript比较

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

JavaScript 方式:

function myFunction()
{
var obj=document.getElementById("h01");
obj.innerHTML="Hello jQuery";
}
onload=myFunction;

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)具体例子




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



这是标题

这是一个段落。

这是一个段落。

这是一个段落。

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

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




Tags:

文章评论

最 近 更 新
热 点 排 行
Js与CSS工具
代码转换工具

<