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

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

<style type="text/css">

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

<div id="myDiv">

<div id="myDivInner">

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

</div>

<div id="myDivTemp">

</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)"代表什么意思了吧.

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

作者信息:万思杰

赞 (0)

相关推荐

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

    我知道大家的想法, 放心好了,有些东西是不需要太多的理论知道做为基础, 其实在我们已经掌握JavaScript时,就已经掌握了JQuery的理论知识. 还是入门篇所说的那样,其实JQuery很简单. : )在我们开始学习之前建议大家先去下载JQuery1.3中文参考. 下载地址http://www.jb51.net/books/17812.html 好了,进入正题. 再次申明JQuery很简单,take easy!     从那开始呢? 最好的切入地方就从 ready 函数开始! 定义 read

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

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

    本文的宗旨, 授人鱼不如授人渔. 我只会讲关键部分,不可能JQuery的每个函数我都讲,因为有很多函数贝壳自己在实际应用中都从未使用过. 但当我们已经会渔了还用担心鱼吗!? BTW:贝壳假设你已经掌了基本的JavaScript运用能力及基础的CSS知识. JQuery是什么        JQuery只是一个JS文件 人对新鲜事业总是报着好奇与排斥的情感,贝壳刚开始学的时候也一样. 想掌握又怕自己学不会. 其实JQuery很简单.       JQuery其实就是一个工具包,很多常用的功能已经被

  • 无废话JavaScript教程(全集)第1/4页

    <程序员>2008.09期有一篇名为<无废话ErLang>的文章,这让我想到了许多的诸如"无废话C"."无废话书评"这类的文章,也想到了JavaScript可没有一篇"无废话",所以决定开个篇来写这个.与这个决定相关的,还因为另一个缘故:许多读者认为我那本<JavaScript语言精髓与编程实践>读来辛苦,所以我一直想写个简单的读本.索性,这次就写个最简单的吧. 声明一下:如果只想看复杂的东西,不要读这篇文章了

  • jQuery Selectors(选择器)的使用(二、层次篇)

    本系列文章分为:基本篇.层次篇.简单篇.内容篇.可见性篇.属性篇.子元素篇.表单篇.表单对象属性篇共9篇文章. 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 由于是第一次写技术性系列文章,难免会出错或代码BUG,欢迎指出,在此谢过! 在线地址 http://demo.jb51.net/html/jquery/jQuery-Selectors-2-bynet.htm jQuery-Selectors-2-bynet .div { width:95%; margin-lef

  • jQuery Attributes(属性)的使用(二、类篇)

    jQuery Attributes(属性)的使用(二、类篇)

    本系列文章分为:属性篇.类篇.Html代码篇.文本篇.值篇共5篇文章. 本篇讲解:addClass(class),removeClass(class),toggleClass(class)的用法. 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 您可以到jQuery官网来学习更多的有关jQuery知识. . addClass(class)用法 定义:为每个匹配的元素添加指定的类名. 返回值:Object 参数:class (String) : 一个或多个要添加到元素中的C

  • 从零开始学习Node.js系列教程二：文本提交与显示方法

    从零开始学习Node.js系列教程二：文本提交与显示方法

    本文实例讲述了Node.js文本提交与显示方法.分享给大家供大家参考,具体如下: index.js var server = require("./server"); var router = require("./router"); var requestHandlers = require("./requestHandlers"); var handle = {} handle["/"] = requestHandlers

  • 整理8个很棒的 jQuery 倒计时插件和教程

    整理8个很棒的 jQuery 倒计时插件和教程

    jQuery 倒计时插件和教程. jQuery Countdown spriteTimer php ajax/jquery countdown Add a Countdown Timer on Your Website jQuery Flipclock Fancy Countdown Cool jQuery Countdown Joomla jQuery Countdown

  • 40款非常棒的jQuery 插件和制作教程（系列二）

    40款非常棒的jQuery 插件和制作教程（系列二）

    jQuery 以其插件众多.独特.轻量以及支持大规模的网站开发闻名.本文继续向大家分享实用的 jQuery 插件,可以根据您的项目需要来选择使用.<<前一篇:40款非常棒的 jQuery 插件和制作教程(系列一)>> Client Testimonials Powered by PHP, XML and jQuery ( 演示| 下载 ) 结合 jQuery 和  XML 制作的客户感言插件,吸引更多用户使用你的产品. Coding a Rotating Image Slidesh

  • 40款非常棒的jQuery 插件和制作教程（系列一）

    40款非常棒的jQuery 插件和制作教程（系列一）

    本文向大家分享40个实用的 jQuery 插件以及制作教程. Parallax Slider with jQuery ( 演示| 下载 ) 带立体效果的 jQuery 幻灯片插件,很酷! Merging Image Boxes with jQuery ( 演示| 下载 ) 非常酷的带消融效果的 jQuery 相册插件,太靓了! Sweet Thumbnails Preview Gallery ( 演示| 下载 ) 带缩略图预览效果的 jQuery 相册插件 Portfolio Zoom Slid

  • ABP(现代ASP.NET样板开发框架)系列之二、ABP入门教程详解

    ABP(现代ASP.NET样板开发框架)系列之二、ABP入门教程详解

    ABP是"ASP.NET Boilerplate Project (ASP.NET样板项目)"的简称. ASP.NET Boilerplate是一个用最佳实践和流行技术开发现代WEB应用程序的新起点,它旨在成为一个通用的WEB应用程序框架和项目模板. ABP的官方网站:http://www.aspnetboilerplate.com ABP在Github上的开源项目:https://github.com/aspnetboilerplate ABP 的由来 "DRY--避免重复

随机推荐