编程 Javascript

JQuery 无废话系列教程(二) jquery实战篇上

Posted in Javascript onJune 23, 2009

我知道大家的想法, 放心好了,有些东西是不需要太多的理论知道做为基础, 其实在我们已经掌握JavaScript时,就已经掌握了JQuery的理论知识. 还是入门篇所说的那样,其实JQuery很简单. : )
在我们开始学习之前建议大家先去下载JQuery1.3中文参考. 下载地址
https://3water.com/books/17812.html

好了,进入正题. 再次申明JQuery很简单,take easy!

从那开始呢? 最好的切入地方就从 ready 函数开始!

定义

ready(fn);

功能

这是事件模块中最重要的一个函数，因为它可以极大地提高web应用程序的响应速度。

简单地说，这个方法纯粹是对向window.load事件注册事件的替代方法。通过使用这个方法，可以在DOM载入就绪能够读取并操纵时立即调用你所绑定的函数，而99.99%的JavaScript函数都需要在那一刻执行。

有一个参数－－对jQuery函数的引用－－会传递到这个ready事件处理函数中。可以给这个参数任意起一个名字，并因此可以不再担心命名冲突而放心地使用$别名。

请确保在元素的onload事件中没有注册函数，否则不会触发$(document).ready()事件。

可以在同一个页面中无限次地使用$(document).ready()事件。其中注册的函数会按照（代码中的）先后顺序依次执行。

通过上面所述,我们可以把ready看做onLoad的替代方法. 这时有的朋友就会问了,有onLoad方法我们干什么还要用ready方法?

我个人的体会及看法是 onLoad缺点是以后维护起来麻烦,到处都是JavaScript代码,很容易出问题的哟! 在<<ppk谈JavaScript>>中,ppk针对这个问题的看法也是如此,尽量不要在标签中直接编写JavaScript 代码.

实例

两种编写方式

一

$(document).ready(function(){alert("Hello World!");});

二

var myFun = function(){alert("Hello World!");}

$(document).ready(myFun);

到这儿我想大家对ready的用法应该是明白了,但对前面的 $(document)应该很迷惑. 这是什么东东?别急... 现在只要记住这段代码的功能就是当整个文档载入完毕后再执行ready内的函数就够了.

看完下面的代码我们就明白了$()的用法.

index.html代码结构如下:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JQuery测试</title>

        .p1 {
            background: #ff0000;
        }

        .p2 {
            background: #00ff00;
        }

.p3{

background: #0000ff;

}

.myPCss{

font-size:36px;

        }
    </style>
    <script language="javascript" src="jquery-1.3.2.js">
    </script>
    <script language = "JavaScript" type="text/javascript">
        //<![CDATA[
        $(document).ready(function(){
            $("p").addClass("p1");
            $("p").removeClass("p1");

$("#myP").addClass("p2");

$(".myPCss").addClass("p3");

$("#myDiv p").addClass("p3");

$("#myDiv>p").addClass("p3");

$("div+p").addClass("p3");

$("div~p").addClass("p3");

var aP = document.getElementById("myP");

$(aP).addClass("p2");

        });
        //]]>
    </script>
</head>
<body>

<p>快购利众网1</p>

<p id="myP">快购利众网2</p>

<p class="myPCss">快购利众网3</p>

<p>快购利众网4</p>

</div>

</div>

<p>快购利众网5</p>

<p>快购利众网6</p>

</div>

<p>快购利众网7</p>
</body>
</thml>

代码解析:

$("p").addClass("p1");
$("p").removeClass("p1");

$("#myP").addClass("p2");

$(".myPCss").addClass("p3");

$("#myDiv p").addClass("p3");

$("#myDiv>p").addClass("p3");

$("div+p").addClass("p3");

$("div~p").addClass("p3");

var aP = document.getElementById("myP");

$(aP).addClass("p2");

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////

$("p").addClass("p1");

$("p").removeClass("p1");

选择文档里全部的<p>元素对象,不论<p>在文档中所处的层次结构如何, 最后选到了7个<p> 元素对象 "<p>快购利众网1</p><p id="myP">快购利众网2</p><p class="myPCss">快购利众网3</p><p>快购利众网4</p><p>快购利众网5</p><p>快购利众网6</p><p>快购利众网7</p>"

addClass("css name")函数很简单,就是为前面$()选择到的元素对象增加CSS样式.

removeClass("css name")函数也很简单,就是去掉前面$()选择到的元素对象的指定的样式.

在这儿,这两段代码功能抵消,相当什么也没做.

$("#myP").addClass("p2");

选择文档里id为"myP"的指定元素对象,并为该元素对象增加名称为"p2"的样式. 最后选到了1个<p>元素对象 "<p id="myP">快购利众网2</p>"

知识点: 如果要选择指定ID号的元素对象,记得前面用"#"

$(".myPCss").addClass("p3");

选择文档里样式名为"myPCss"的指定元素对象,并为该元素对象增加名称为"p3"的样式. 最后选到了1个<p>元素对象 "<p class="myPCss">快购利众网3</p>"

知识点: 如果要选择指定样式的元素对象,记得前面用"."

现在可以为大家正式介绍$(),在JQuery里,我们称她为"选择器函数",里面的内容称为"选择器".

现在大家自己试试,记住选择器选择出的对象有可能是多个哟.

上面的内容是不是挺简单的!! 嗯,革命才刚刚开始,下面的内容稍稍复杂些因为牵涉到层次的概念,但大家别急,只要记住"选择器"选择出的元素对象可能是多个这点就不用怕了.

$("#myDiv p").addClass("p3");

功能:在给定的祖先元素下匹配所有的后代元素

分成两部分来分析

一,$("#myDiv") 根据上面所学的知识,选择出1个<div>元素对象, "<div id="myDiv">"

二,$("#myDiv p") 在上面2个<div>元素对象中的任意层中选择<p>元素对象. 几个? 3个 "<p>快购利众网4</p><p>快购利众网5</p><p>快购利众网6</p>"

其中"<p>快购利众网4</p><p>快购利众网5</p><p>快购利众网6< /p>"都是在"<div id="myDiv"></div>"内部定义的

虽然"<p>快购利众网4</p>"是在id为"myDivInner的"div"内部定义的.但因为id 为"myDivInner的"div" 也是id为"myDiv的下层,所以"<p>快购利众网5</p>"也属于id为"myDiv的下层. 有些绕口,记住一点就行. A,B操作器中如果是用空格连接,那么表示B属于A的下层(可以为任意层)之中

最后为这3个<p>元素对象增加名为"p3"的样式

知识点: 对于这类有层次的选择表达式$("A B"),A选择器和B选择器可以是"标签名","#id",".css"三种中的任意一种,中间用空格分开,空格表示任意次.

右边的B选择器是在左边A选择器选择的结果上进行内部任意层中选择, 记住是在左边选择出的元素对象(可能是多个)的内部进行再次选择(可能是多个). <- 这个知识点一定要理解透!

$("#myDiv>p").addClass("p3");

功能:在给定的父元素下匹配所有的子元素

>代表#myDiv下的子元素对象(多个并只是下一层),最后选择出2个<p>元素对象,""<p>快购利众网5</p><p>快购利众网6</p>",并为该<p>对象增加名为"p3"的样式

$("div+p").addClass("p3");

功能:匹配所有紧接在 div 元素后的 第一个同辈p 元素

+代表紧接着div同层的第一个子元素对象.

id为"myDivInner"同层后面第一个因为是"<div>",所以后没有紧接着的"<p>"

id为"myDiv"同层后面正好是一个"<p>"

最后选择出1个<p>元素对象,""<p>快购利众网7</p>",并为该<p>对象增加名为"p3"的样式

知识点: 是紧接着,如果A与B之间有其它元素都无法匹配.

$("div~p").addClass("p3");

功能:匹配 #myDiv 元素之后的所有同辈p 元素

该功能与 + 类似,不同的有两处.

一, +为同辈并且紧跟, ~为同辈不需要一定紧跟

二, +为同辈并且第一个, ~为同辈多个.

var aP = document.getElementById("myP");

$(aP).addClass("p2");

$(aP).addClass("p2") 其实就是$("#myP").addClass("p2") 的另一种形式.

$()中处了可以用字符串的表达式选择器,还可以使用DOM对象

当你能看到这句话,我想对你说"辛苦了."

学习的过程本来就是艰辛难耐的,唯为坚持才能战胜一切.

到现在我们应该明白之前的"$(document)"代表什么意思了吧.

好了, 今天先讲到这儿. 要快速熟悉选择器的用法只有多加练习.更多的高级应用我相信大家都能自己学会,掌握.

作者信息:万思杰

JQuery 无废话系列教程(二) jquery实战篇上

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐

prototype class详解

Sep 07 Javascript

基于jquery的气泡提示效果

May 31 Javascript

深入分析js中的constructor和prototype

Apr 07 Javascript

JavaScript 函数replace深入了解

Mar 14 Javascript

js动态改变select选择变更option的index值示例

Jul 10 Javascript

Bootstrap每天必学之基础排版

Nov 20 Javascript

基于JavaScript实现文字超出部分隐藏

Feb 29 Javascript

非常漂亮的相册集使用jquery制作相册集

Apr 28 Javascript

JavaScript表单焦点自动切换代码

Jul 24 Javascript

JavaScript常用事件介绍

Jan 21 Javascript

原生js实现随机点名

Jul 05 Javascript

Vue实现点击导航栏当前标签后变色功能

Aug 19 Javascript

JQuery 无废话系列教程(一) jquery入门 [推荐]

Jun 23 #Javascript

IE JS编程需注意的内存释放问题

Jun 23 #Javascript

js form 验证函数当前比较流行的错误提示

Jun 23 #Javascript

javascript form 验证函数弹出对话框形式

Jun 23 #Javascript

WordPress 照片lightbox效果的运用几点

Jun 22 #Javascript

WordPress JQuery处理沙发头像

Jun 22 #Javascript

JQuery 前台切换网站的样式实现

Jun 22 #Javascript