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

2016-02-19 15:58 5 1 收藏

今天给大家分享的是由图老师小编精心为您推荐的JQuery 无废话系列教程(二) jquery实战篇上,喜欢的朋友可以分享一下,也算是给小编一份支持,大家都不容易啊!

【 tulaoshi.com - Web开发 】

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

好了,进入正题. 再次申明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" /
titleJQuery测试/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");

$("#myDivp").addClass("p3");

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

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

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

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


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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

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");

$("#myDivp").addClass("p3");

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

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

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

(本文来源于图老师网站,更多请访问https://www.tulaoshi.com/webkaifa/)

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

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

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

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

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

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

其中"p快购利众网4/pp快购利众网5/pp快购利众网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选择器选择的结果上进行内部任意层中选择, 记住是在左边选择出的元素对象(可能是多个)的内部进行再次选择(可能是多个). - 这个知识点一定要理解透!

$("#myDivp").addClass("p3");

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

代表#myDiv下的子元素对象(多个并只是下一层),最后选择出2个p元素对象,""p快购利众网5/pp快购利众网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)"代表什么意思了吧.

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

作者信息:万思杰

来源:https://www.tulaoshi.com/n/20160219/1610810.html

延伸阅读
标签: Web开发
本系列文章分为:基本篇、层次篇、简单篇、内容篇、可见性篇、属性篇、子元素篇、表单篇、表单对象属性篇共9篇文章。 您对本系列文章有任何建议或意见请发送到邮箱:sjzlgt@qq.com 由于是第一次写技术性系列文章,难免会出错或代码BUG,欢迎指出,在此谢过! !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w...
标签: Web开发
不错的效果。好多文字广告可以这样控制。 script type="text/javascript" src="http://jqueryjs.googlecode.com/files/jquery-1.3.2.min.js"/script script type="text/javascript" function animate(dir, step) { var position; position = parseInt($("#content").css("margin-left")); var contentwidth; var sliderwidth; contentwidth = ...
标签: Web开发
!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head meta http-equiv="Content-Type" content="text/html; charset=gb2312" / titlejquery 弹出公告/title script type="text/javascript" src="http://ajax.googleapi...
标签: Web开发
打包下载 jQuery 是个宝库,而 jQuery 的插件体系是个取之不竭的宝库,众多开发者在 jQuery 框架下,设计了数不清的插件,jQuery 的特长是网页效果,因此,它的插件库也多与 UI 有关。 webdesignledger.com 网站推选了2009年度最佳 jQuery 插件,有些插件在本博客中已经有介绍,有些还没有,本文介绍的是:2009年度最佳 jQuery 插件—Anything...
标签: Web开发
代码如下: 代码如下: %@ Page Language="C#" AutoEventWireup="true" CodeFile="Default3.aspx.cs" Inherits="Default3" % !DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" html xmlns="http://www.w3.org/1999/xhtml" head runat="server" title无标题页/...

经验教程

184

收藏

95
微博分享 QQ分享 QQ空间 手机页面 收藏网站 回到头部