jQuery网络教程.docx

上传人:b****4 文档编号:4902389 上传时间:2022-12-11 格式:DOCX 页数:70 大小:267.34KB
下载 相关 举报
jQuery网络教程.docx_第1页
第1页 / 共70页
jQuery网络教程.docx_第2页
第2页 / 共70页
jQuery网络教程.docx_第3页
第3页 / 共70页
jQuery网络教程.docx_第4页
第4页 / 共70页
jQuery网络教程.docx_第5页
第5页 / 共70页
点击查看更多>>
下载资源
资源描述

jQuery网络教程.docx

《jQuery网络教程.docx》由会员分享,可在线阅读,更多相关《jQuery网络教程.docx(70页珍藏版)》请在冰豆网上搜索。

jQuery网络教程.docx

jQuery网络教程

jQuery教程

 jQuery其实很简单,相信您看了CSS学习网精心编写的jQuery速成教程后,一定会被它的优雅、轻巧吸引住,而且如果您掌握了它,定能成为提升薪水的一个资本。

    本节并没有涉及到jQuery如何编写,只为大家解决几个常见问题,因为这也是面试中常常遇到的几个问题。

如果你掌握了jQuery可以成为提升工资的一个资本。

另外我写教程的时候需要一边发布一边写,因此如果当你看到某节教程的标题不是【蓝色加粗字体、标题后面无精品推荐】这些条件,那么劝大家不要看此教程,因为它还没发育好呢!

课程列表:

第一章:

基础篇-对象的获取

第一节:

jQuery速成-向jQuery进军!

第二节:

jQuery速成-核心!

第三节:

jQuery速成-核心方法的使用

第四节:

jQuery速成-基本对象获取

第五节:

jQuery速成-层级对象获取

第六节:

jQuery速成-简单对象获取

第七节:

jQuery速成-内容对象的获取和对象可见性!

第八节:

jQuery速成-对象获取进阶

第九节:

jQuery速成-子元素的获取

第十节:

jQuery速成-表单对象的获取

第十一节:

jQuery速成-元素属性的设置与移除

第二章:

进阶篇-对象的筛选

第十二节:

jQuery速成-过滤

第十三节:

jQuery速成-查找

第十四节:

jQuery速成-串联

第三章:

文本篇-对象文本处理

第十五节:

jQuery速成-内部插入

第十六节:

jQuery速成-外部插入

第十七节:

jQuery速成-包裹

第十八节:

jQuery速成-  替换,删除和复制

第十九节:

jQuery速成-元素的赋值

第四章:

样式篇-层叠样式表的处理

第二十节:

jQuery速成-样式的设置与定义

第五章:

提高篇-jQuery中的事件机制

第二十一节:

jQuery速成-页面的载入事件与事件处理

第二十二节:

jQuery速成-鼠标事件与交互

第二十三节:

jQuery速成-焦点事件

第二十四节:

jQuery速成-键盘事件

第二十五节:

jQuery速成-其他事件

第六章:

效果篇-jQuery中的动画效果

第二十六节:

jQuery速成-动画实现的基本方法

第二十七节:

jQuery速成-元素的渐隐渐显

第二十八节:

jQuery速成-元素的滑动

第二十九节:

jQuery速成-自定义动画

第七章:

工具篇-jQuery中的工具使用

第三十节:

jQuery速成-浏览器种类及其特性的检测

第三十一节:

jQuery速成-数组和对象的操作

第三十二节:

jQuery速成-工具杂项

第八章:

高级篇-Ajax异步请求及调用实战

第三十三节:

jQuery速成-Ajax请求(讲解篇)

第三十四节:

jQuery速成-Ajax请求(实战篇)

第一章:

基础篇-对象的获取

第一节:

jQuery速成-向jQuery进军!

jQuery速成-向jQuery进军!

jQuery其实很简单,相信您看了CSS学习网精心编写的jQuery速成教程后,一定会被它的优雅、轻巧吸引住,而且如果您掌握了它,定能成为提升薪水的一个资本。

    本节并没有涉及到jQuery如何编写,只为大家解决几个常见问题,因为这也是面试中常常遇到的几个问题。

如果你掌握了jQuery可以成为提升工资的一个资本。

    初学jQuery的朋友,基本上都会问同一个问题“什么是jQuery?

”等类似的问题,理解这个问题对于后面的学习会起到促进作用。

以下是我整理出的大家常问的几个问题:

1、什么是jQuery?

2、什么是类库?

3、jQuery与JavaScript有什么关系?

4、JavaScript与java又有什么关系?

5、JavaScript、jQuery、Ajax、Json等又是什么?

区别又是什么?

6、不会JS能不能学jQuery?

    我相信,很多人对这些技术有着似懂非懂的感觉,不是很了解,以上问题肯定是初学者都会产生的问题,如果你对它有兴趣或者想去驾驭它。

那么请跟KwooShung来,向jQuery进军!

let'sGO!

Q:

什么是jQuery?

A:

jQuery是JavaScript的类库,它由JohnResig(美国人)创建,至今已经吸引了来自世界各地的众多JavaScript高手加入该团队。

Q:

什么是类库?

A:

这是程序中的一个基本概念。

所谓类,可以理解为是一组语句的集合,用来描述一组具有共同属性和功能的对象。

字面理解也就是说类库就是类的集合。

Java和.net的类库意思类似。

但是在jQuery中,只是集合了许多的方法功能集合,使我们可以通过简单的代码就能实现复杂的效果。

Q:

jQuery与JavaScript有什么关系?

A:

jQuery是使用JavaScript编写的,也就是说JavaScript可以任意调用,其他程序并不能很轻易的调用。

就好比JavaScript是鸡,jQuery是鸡蛋,鸡只能生鸡蛋。

再说的明白些,jQuery是使用JavaScript编写的,就好比鸡蛋是鸡生的。

如果你还不明白再看看另一个例子:

  我们可以把JavaScript比喻成文字,假如使用文字写了两本菜谱《西餐菜谱大全》和《中餐菜谱大全》,前者是prototype(在jQuery之前也是一种类库)后者是jQuery。

菜谱里面都集合了很多做菜的方法也可以叫做菜的类库。

在程序里面呢就叫做类库,方法库,函数库等。

Q:

JavaScript与Java又有什么关系?

A:

乍眼一看,它们有关系或者是同一家公司的产品,其实它们俩既不是兄弟姐妹也不是同一家公司所开发的,前者是Netscape网景公司开发,后者是Sun公司开发,2009年04月20日,Oracle(甲骨文)宣布以74亿美元收购Sun。

(详细的资料可以到网上搜一下)

Q:

JavaScript、jQuery、Ajax、Json等又是什么?

区别又是什么?

A:

读到这里,我想不用再讲JS和jQuery了吧?

如果你还认为需要讲解,那你再读读前面的几个问题,肯定就明白了,直接切入正题。

Ajax:

全称为“AsynchronousJavaScriptandXML”(异步JavaScript和XML),它是由JavaScript+CSS+DOM+XMLHttpRequest的四种技术的结合,并且JS是Ajax的核心。

jQuery将Ajax的实现变得更加轻松容易。

Ajax就是咱们常说的局部刷新。

JSON(JavaScriptObjectNotation)是一种轻量级的数据交换格式。

易于人阅读和编写的同时也易于机器解析和生成。

它基于JavaScript的一个子集。

Json采用完全独立于语言的文本格式,可以简单的理解为数据存储的一种格式或交换方式。

Q:

不会JS能不能学jQuery?

A:

我不知道大家所指的不会JS是什么程度,但我认为如果你一点都不懂JS那是很难学懂的,因为jQuery是JS的类库。

另外如果你懂得其他语言,也可以很快的理解的。

如果什么都不会我可以给大家一个快速掌握JS基础的方法,先去看JS的数据类型、变量的定义、函数方法的定义、函数方法的调用以及循环和判断,只要知道上面这几种非常容易学会。

看着内容挺多其实很简单,最慢一天就能搞懂。

注:

下节课我们还是延续《跟KwooJan学习CSS》的风格,以实例为主的通俗易懂的教程,请大家做好准备!

目前大家只需要准备好记事本、类库和您的键盘鼠标就可以啦~不过还是建议大家用编辑器进行开发,便于提高开发效率以及正确率,这里KwooShung建议大家使用DreamweaverCS4,版本一定要是CS4,因为以后我们用到它的地方还很多。

【第二节】jQuery速成-核心!

jQuery的核心是大家必须要学习的内容,我写了一个简单的例子,大家先不要看我的源代码,看看使用js是否能够做得出。

【例子】

要求:

1)页面上一个按钮;

2)点击后弹出窗口,我被点击了;

如下图:

JavaScript代码如下:

1.

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.

//www.w3.org/1999/xhtml">

3.

4.

5.实例1

6.

12.

13.

14.

15.

16.

复制代码

然而jQuery与此类似,但是在HTML页中不必填写onclick="myClick();"事件调用myClick()方法,只需要引入jQuery类库以及自己编写的jQuery代码即可。

下面是我的jQuery代码实现的上图方法

看完上面的jQuery例子以后,可以发现其实我们什么都不用在HTML页面中写,只需引入相关的js文件即可,这样做的优点可以使我们的HTML页面更加简单,不需要穿插复杂的js代码,从而使页面与脚本完美分离,是不是很神奇?

注:

例题中的加入了charset="GB2312"是为了使其能够正确的显示中文,因为jQuery是utf-8编码。

同学们可能会问demo1.js中的“$”符号表示什么呢?

KwooShung建议大家不要小看了它哟~~~因为jQuery的核心功能都是通过这个函数实现的,以后编写的jQuery代码都是构建在这个函数上的,简单的说,就是都以某种方式在使用它。

不过它为什么是个函数呢,明明就一个符号而已啊?

在此案例中,我简写了代码,他们的关系如下,区分大小写:

$等同于jQuery

$(document).ready()等同于jQuery(document).ready()

他们在例题中的意思都等同于js中的

onload()方法

click()表示鼠标点击事件,此事件日后会在详细讲解

本节课,只需要你明白“$”符号是什么就OK了,在后面的学习中你会对他逐渐的熟悉~

怎么样,是不是很有意思?

【作业】

1、在页面中使用css定义一个长宽均为100pxDIV红色区域

2、鼠标点击此红色区域,弹出对话框,至于对话框什么内容随便。

【第三节】jQuery速成-核心方法的使用

jQuery对象访问:

each(callback)

根据我的理解,each是jQuery中的一种循环机制。

一般与this关键字配合使用。

学过程序的朋友都知道程序中的循环方式有以下几种do...while()、while()、for(expression1,expression2,expression3)以及C#和javaEE中JSTL标签中独有的forEach循环。

jQuery中的each循环与forEach循环类似。

具体使用方法在本节案例中讲述。

$("Element").length

表示某个对象在HTML页面中的数量,与size用法一致,此方法不带有()。

$("Element").size()

表示某个对象在HTML页面中的数量,与length用法一致。

$("Element").get()

表示获得某个元素在HTML页面中的集合,以数组方式构建。

$("Element").get(index)

作用同上,如果get方法里面带有数字则表示获得数组中的第几个元素,索引从0开始。

$("Element").get().reverse()

表示将获取到得dom元素集合构建成的数组进行反向。

比如默认排序是1,2,3使用了此方法则为3,2,1

$("Element").index($("Element"))

搜索index中所获得的元素在所匹配对象元素中的索引值(从0开始计数),若没有找到则返回-1。

比如有5个div,其中第4个标签的ID是#bar那么$("div").index($("#bar"))所返回的索引值就是3。

jQuery插件机制:

$.extend

({

    max:

function(num1,num2){returnnum1>num2?

num1:

num2;}

    min:

function(num1,num2){returnnum1

num1:

num2;}

})

$.extend等同于jQuery.extend在这里面的max和min是两个自定义的函数,并且都有2个参数,在方法体内进行比较。

方法体内使用的是条件表达式,与if条件判断差不多。

此条件表达式的意思是:

如果num1>num2相比较后如果num1大于num2那么返回“true”,那么此方法返回“?

”之后“:

”之前的内容也就是num1,反之是num2。

  调用的时候只要使用$.max(2,3)传入任意的两个参数,那么将返回num2也就是数字3;$.min(7,8)则返回num1因为num1比num2小。

$替换成jQuery完全没有问题。

$.fn.extend

({

      check:

function()

      {

            returnthis.each(function(){this.checked=true;});

      }

      uncheck:

function()

      {

            returnthis.each(function(){this.checked=false;});

      }

})

此方法也是一种插件的实现方法,其中this表示是调用者当前所指dom对象,比如$("#abc").click(function(){this})这里的this指的就是#abc这个dom对象。

each在上面已经讲解过了。

在此插件方法extend中定义了两个方法分别是check和uncheck。

比如:

$("input[@type=checkbox]").check()表示将input标签的type属性设置为选中,其中,中括号中的内容表示如果input的type属性是checkbox的话,再设置为选中。

$("input[@type=radio]").uncheck()表示将input标签的type属性设置为未选中,其中,中括号中的内容表示如果input的type属性是radio的话,再设置为未选中。

多库共存:

有的时候我们可能在同一个页面内调用多种js库,比如即使用jQuery类库又使用ProToType类库,按理说没有问题,但是他们都用到了“$”符号,因此为了避免与其他库产生冲突,可以使用以下两种方法将其区别开来。

jQuery.noConflict()

使用方法,varj=noConflict();表示j在jQuery中将代替"$"符号。

jQuery.noConflict(true)

使用方法,dom.query=jQuery.noConflict(true)则表示将$和jQuery的控制权都交还给原来的库。

比如你想要将jQuery嵌入一个高度冲突的环境。

注意:

调用此方法后极有可能导致插件失效。

因此用的时候一定要考虑清楚。

dom.query将代表"$"符号。

【第四节】jQuery速成-基本对象获取

 向jQuery进军中的战友们,通过前面两章的学习,大家肯定对jQuery中的“$”函数不明不白,没关系,只要大家挺得住,咱们定能得到最终胜利。

言归正传,通过下面几章的学习,一定能明白“$”函数,trustme!

    现在大家想一下在CSS中有哪几种选择器?

    

通用选择器:

*

id选择器:

#element

类选择器:

.element

标签选择器:

element

如果你对这几种选择器不太了解,建议您到这个页面继续学习

jQuery对象的获取也是如此,方法如下:

$("*")

表示获取所有的对象

$("#element")

等同于document.getElementById("element");

$(".abc")

表示获得HTML中所有使用了abc这个样式的元素

$("div")

表示获得HTML中所有的div元素

以下两种是层级对象的获取,属于下节课的内容,下节课不再着重讲解

$("#a,.b,p")

表示获得ID是a的元素和使用了类样式b的元素以及所有的p元素

$("#a.bp")

表示获得了ID是a的元素所包含的使用了类样式的b元素中的所有的p元素

【第五节】jQuery速成-层级对象获取

层级对象的获取

$("Element1Element2Element3Element...")

css定义层级元素方式一样,只需要不同的元素之间有空格表示,前者父级后者子级以此类推。

$("div>input")

表示获取div下所有的input。

  

  您如果记不清到底是用“>”符号还是“<”符号,可以这么理解。

如果你选择的元素有父子关系,那么是父亲辈儿长还是儿子辈儿长?

当然是父亲辈儿长喽,因此使用“>”,那么选择的时候就是:

$("父亲>儿子>..."),这下明白了吧?

^_^

$("div+p")

    表示匹配紧跟在div元素后的p一个元素

    

    这个可以这么记忆,既然紧跟着,当然就得使用“+”紧密的连在一起嘛。

$("div~p")

    表示匹配跟在div元素后的所有p元素

    

    这个也好记忆,你可以把“~”符号想象成一条林荫小道,既然是林荫小道当然是路漫漫兮修远,当然要使用“~”符号嘛,两边的树也是排排站,如果“~”符号是路,p是树的话,那么就表示选择div后面这条路上的所有的树。

本课案例:

第5课.rar

2009-12-2213:

14上传

下载(34.25KB)

跟KwooShung学习jQuery第四课

售价:

学习币1枚 [记录] [购买]

案例结构如下:

1.

DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML1.0Transitional//EN""http:

//www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

2.

//www.w3.org/1999/xhtml">

3.

4.

5.实例1

6.

7.

8.

9.

10.

11.

12.

13.

14.

1

15.

2

16.

3

17.

4

18.

19.

5

20.

6

21.

7

22.

8

23.

24.

复制代码

本课只需要大家记住这四种选择方式即可,同学们下课!

【第六节】jQuery速成-简单对象获取

本节课主要学习对对象的另外一种获取方法,没有什么好方法,属于死记的东西,因此大家要加油咯。

$("Element:

first")

获得在HTML页面中某种元素的第一个,比如$("div:

first")表示获得第一个div

$("Element:

last")

获得在HTML页面中某种元素的最后一个,比如$("div:

last")表示获得最后一个div

$("Element:

not(selector)")

去除所有与给定选择器匹配的元素,比如$("input:

not(:

checked)")表示选择所有没有选中的复选框

$("Element:

even")

获得偶数行,从0开始计数

$("Element:

odd")

获得奇数行,从0开始计数

$("Element:

eq(index)")

匹配一个给定索引值的元素,从0开始计数,比如$("div:

eq(3)")表示获得HTML中的第4个div

$("Element:

gt(index)")

匹配所有大于给定索引值的元素,从0开始计数,比如$("p:

gt(3)")表示获得比索引3也就是第4个p开始,之【后】所有的p

$("Element:

lt(index)")

匹配所有小于给定索引值的元素,从0开始计数,比如$("p:

lt(3)")表示获得比索引3也就是第2个p开始,之【前】所有的p

注:

如果上面两个方法的大于号小于号记不清,就想想HTML标记中的[>]和[<]

展开阅读全文
相关资源
猜你喜欢
相关搜索

当前位置:首页 > 求职职场 > 简历

copyright@ 2008-2022 冰豆网网站版权所有

经营许可证编号:鄂ICP备2022015515号-1