Jquery简简单单入门

Jquery简简单单入门

 

一开始,我们需要一个jQuery的库,最新的下载可以到这里找到。在做所有事情之前,我们要让jQuery读取和处理文档的DOM,必须尽可能快地在DOM载入后开始执行事件, 所以,我们用一个ready事件作为处理HTML文档的开始.

$(document).ready(function() {

    // do stuff when DOM is ready

 });

放一个简单的alert事件在需要等DOM完成载入,所以我们把任务稍稍变复杂一点:在点击任何一个链接时显示一个alert (是不是非常的简单).

$(document).ready(function() {

    $("a").click(function() {

       alert("Hello world!");

    });

});

Html代码

<a href="#">Link</a>

这样在你点击页面的一个链接时都会触发这个"Hello world"的提示。

1.       $号是 jQuery “类”(jQuery "class")的一个别称。

2.       $()构造了一个新的jQuery 对象(jQuery object)。

3.       $("a") 是一个jQuery选择器(selector),在这里，它选择所有的a标签。

4.       函数 click() 是这个jQuery对象的一个方法，它绑定了一个单击事件到所有选中的标签(这里是所有的a标签),并在事件触发时执行了它所提供的alert方法.

 

jQuery提供两种方式来选择html的elements，第一种是用CSS和Xpath选择器联合起来形成一个字符串来传送到jQuery的构造器（如：$("div > ul a")）；第二种是用jQuery对象的几个methods(方法)。这两种方式还可以联合起来混合使用。

$(document).ready(function() {

    $("#orderedli").addClass("red");

});

Html代码

<ul id=”orderedli”><li>OrderedLi</li></ul>

在你刷新页面后，你将会看到ul背景色变成了红色

1.       通常的javascript写法是document.getElementById("orderedlist").(Jquery较简单)

2.       这里将一个CSS样式red附加到了orderedlist上。

现在，让我们添加一些新的样式到list的子节点

$(document).ready(function() {

    $("#orderedlist > li").addClass("blue");

});

Html代码

<ul id=”orderedli”><li>OrderedLi</li></ul>

这样，所有orderedlist中的li都附加了样式"blue"。