JQuery库.docx

JQuery库.docx

《JQuery库.docx》由会员分享，可在线阅读，更多相关《JQuery库.docx（27页珍藏版）》请在冰豆网上搜索。

JQuery库

1.jQuery库-特性

jQuery是一个JavaScript函数库。

jQuery库包含以下特性：

HTML元素选取，HTML元素操作，CSS操作，HTML事件函数，JavaScript特效和动画，HTMLDOM遍历和修改，AJAX，Utilities

库的替代

Google和Microsoft对jQuery的支持都很好，如果您不愿意在自己的计算机上存放jQuery库，那么可以从GoogleorMicrosoft加载CDNjQuery核心文件。

使用Google的CDN

使用Microsoft的CDN

2.jQuery语法

jQuery语法是为HTML元素的选取编制，可以对元素执行某些操作。

基础语法是：

$（selector）.action（）

美元符号定义jQuery，选择符（selector）“查询”和“查找”HTML元素，jQueryaction（）执行对元素的操作

实例

$（this）.hide（）-隐藏当前元素

$（"p"）.hide（）-隐藏所有段落

$（"p.test"）.hide（）-隐藏所有class="test"的段落

$（"#test"）.hide（）-隐藏所有id="test"的元素

提示：

jQuery使用的语法是XPath与CSS选择器语法的组合。

在本教程接下来的章节，您将学习到更多有关选择器的语法。

文档就绪函数

您也许已经注意到在我们的实例中的所有jQuery函数位于一个documentready函数中：

$（document）.ready（function（）{

---jQueryfunctionsgohere----

}）;

这是为了防止文档在完全加载（就绪）之前运行jQuery代码。

下面是两种假如文档完全加载之前运行函数的话，操作失败的情况：

∙试图隐藏一个不存在的元素。

∙获得未完全加载的图像的大小。

jQuery选择器

在前面的章节中，我们展示了一些有关如何选取HTML元素的实例。

关键点是学习jQuery选择器是如何准确地选取您希望应用效果的元素。

jQuery元素选择器和属性选择器允许您通过标签名、属性名或内容对HTML元素进行选择。

选择器允许您对HTML元素组或单个元素进行操作。

在HTMLDOM术语中：

选择器允许您对DOM元素组或单个DOM节点进行操作。

jQuery元素选择器

jQuery使用CSS选择器来选取HTML元素。

$（"p"）选取

元素。

$（"p.intro"）选取所有class="intro"的

元素。

$（"p#demo"）选取id="demo"的第一个

元素。

jQuery属性选择器

jQuery使用XPath表达式来选择带有给定属性的元素。

$（"[href]"）选取所有带有href属性的元素。

$（"[href='#']"）选取所有带有href值等于"#"的元素。

$（"[href!

='#']"）选取所有带有href值不等于"#"的元素。

$（"[href$='.jpg']"）选取所有href值以".jpg"结尾的元素。

jQueryCSS选择器

jQueryCSS选择器可用于改变HTML元素的CSS属性。

下面的例子把所有p元素的背景颜色更改为红色：

实例

$（"p"）.css（"background-color","red"）;

更多的实例

语法

描述

$（this）

当前HTML元素

$（"p"）

所有

元素

$（"p.intro"）

所有class="intro"的

元素

$（".intro"）

所有class="intro"的元素

$（"#intro"）

id="intro"的第一个元素

$（"ulli:

first"）

每个

的第一个
• 元素

  $（"[href$='.jpg']"）

  所有带有以".jpg"结尾的href属性的属性

  $（"div#intro.head"）

  id="intro"的

  元素中的所有class="head"的元素

  3.jQuery事件

  jQuery是为事件处理特别设计的。

  jQuery事件函数

  jQuery事件处理函数是jQuery中的核心函数。

  事件处理函数是当HTML中发生事件时自动被调用的函数。

  由“事件”（event）“触发”（triggered）是经常被用到的术语。

  在您中

  由于jQuery是为事件处理特别设计的，通常是把jQuery代码置于网页部分的“事件处理”函数中：

  实例

  $（document）.ready（function（）{

  $（"button"）.click（function（）{

  $（"p"）.hide（）;

  }）;

  }）;

  Thisisaheading

  Thisisaparagraph.

  Thisisanotherparagraph.

  Clickme

  在上面的例子中，定义了一个处理HTML按钮的点击事件的click函数：

  $（"button"）.click（function（）{..somecode...}）

  click函数内部的代码隐藏所有

  元素：

  $（"p"）.hide（）;

  所有事件函数都在文档自身的“事件处理器”内部进行定义：

  $（document）.ready（function（）{..somecode...}）

  单独文件中的函数

  如果您的网站包含许多页面，并且您希望您的jQuery函数易于维护，那么请把您的jQuery函数放到独立的.js文件中。

  当我们在教程中演示jQuery时，会将函数直接添加到部分中。

  不过，把它们放到一个单独的文件中会更好，就像这样（通过src属性来引用文件）：

  实例

  jQuery名称冲突

  jQuery使用$符号作为jQuery的简介方式。

  某些其他JavaScript库中的函数（比如Prototype）同样使用$符号。

  jQuery使用名为noConflict（）的方法来解决该问题。

  varjq=jQuery.noConflict（），帮助您使用自己的名称（比如jq）来代替$符号。

  结论

  由于jQuery是为处理HTML事件而特别设计的，那么当您遵循以下原则时，您的代码会更恰当且更易维护：

  把所有jQuery代码置于事件处理函数中，把所有事件处理函数置于文档就绪事件处理器中，把jQuery代码置于单独的.js文件中，如果存在名称冲突，则重命名jQuery库

  jQuery事件

  下面是jQuery中事件函数的一些例子：

  Event函数

  绑定函数至

  $（document）.ready（function）

  文档的就绪事件（当HTML文档就绪可用）

  $（selector）.click（function）

  被选元素的点击事件

  $（selector）.dblclick（function）

  被选元素的双击事件

  $（selector）.focus（function）

  被选元素的获得焦点事件

  $（selector）.mouseover（function）

  被选元素的鼠标悬停事件

  jQuery事件方法

  事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

  触发实例：

  $（"button#demo"）.click（）

  上面的例子将触发id="demo"的button元素的click事件。

  绑定实例：

  $（"button#demo"）.click（function（）{$（"img"）.hide（）}）

  上面的例子会在点击id="demo"的按钮时隐藏所有图像。

  方法

  描述

  ready（）

  文档就绪事件（当HTML文档就绪可用时）

  blur（）

  触发、或将函数绑定到指定元素的blur事件

  change（）

  触发、或将函数绑定到指定元素的change事件

  click（）

  触发、或将函数绑定到指定元素的click事件

  dblclick（）

  触发、或将函数绑定到指定元素的doubleclick事件

  error（）

  触发、或将函数绑定到指定元素的error事件

  focus（）

  触发、或将函数绑定到指定元素的focus事件

  keydown（）

  触发、或将函数绑定到指定元素的keydown事件

  keypress（）

  触发、或将函数绑定到指定元素的keypress事件

  keyup（）

  触发、或将函数绑定到指定元素的keyup事件

  load（）

  触发、或将函数绑定到指定元素的load事件

  mousedown（）

  触发、或将函数绑定到指定元素的mousedown事件

  mouseenter（）

  触发、或将函数绑定到指定元素的mouseenter事件

  mouseleave（）

  触发、或将函数绑定到指定元素的mouseleave事件

  mousemove（）

  触发、或将函数绑定到指定元素的mousemove事件

  mouseout（）

  触发、或将函数绑定到指定元素的mouseout事件

  mouseover（）

  触发、或将函数绑定到指定元素的mouseover事件

  mouseup（）

  触发、或将函数绑定到指定元素的mouseup事件

  resize（）

  触发、或将函数绑定到指定元素的resize事件

  scroll（）

  触发、或将函数绑定到指定元素的scroll事件

  select（）

  触发、或将函数绑定到指定元素的select事件

  submit（）

  触发、或将函数绑定到指定元素的submit事件

  unload（）

  触发、或将函数绑定到指定元素的unload事件

  jQuery事件处理方法

  事件处理方法把事件处理器绑定至匹配元素。

  方法

  触发

  $（selector）.bind（event）

  向匹配元素添加一个或更多事件处理器

  $（selector）.delegate（selector,event）

  向匹配元素添加一个事件处理器，现在或将来

  $（selector）.die（）

  移除所有通过live（）函数添加的事件处理器

  $（selector）.live（event）

  向匹配元素添加一个事件处理器，现在或将来

  $（selector）.one（event）

  向匹配元素添加一个事件处理器。

  该处理器只能触发一次。

  $（selector）.unbind（event）

  从匹配元素移除一个被添加的事件处理器

  $（selector）.undelegate（event）

  从匹配元素移除一个被添加的事件处理器，现在或将来

  $（selector）.trigger（event）

  所有匹配元素的指定事件

  $（selector）.triggerHandler（event）

  第一个被匹配元素的指定事件

  4.JQuery效果

  jQuery隐藏和显示

  通过hide（）和show（）两个函数，jQuery支持对HTML元素的隐藏和显示：

  ---->

  $（document）.ready（function（）{

  $（"#hide"）.click（function（）{

  $（"p"）.hide（）;

  }）;

  $（"#show"）.click（function（）{

  $（"p"）.show（）;

  }）;

  }）;

  Ifyouclickonthe"Hide"button,Iwilldisappear.

  Hide

  Show

  ---->

  语法：

  $（selector）.hide（speed,callback）

  $（selector）.show（speed,callback）

  callback参数是在hide或show函数完成之后被执行的函数名称。

  您将在本教程下面的章节学习更多有关callback参数的知识。

  speed参数可以设置这些值：

  "slow","fast","normal"或milliseconds：

  jQuery切换

  jQuerytoggle（）函数使用show（）或hide（）函数来切换HTML元素的可见状态。

  隐藏显示的元素，显示隐藏的元素。

  ---->

  $（document）.ready（function（）{

  $（"button"）.click（function（）{

  $（"p"）.toggle（）;

  }）;

  }）;

  Toggle

  Thisisaparagraphwithlittlecontent.

  Thisisanothersmallparagraph.

  ---->

  语法：

  $（selector）.toggle（speed,callback）

  speed参数可以设置这些值：

  "slow","fast","normal"或毫秒。

  jQuery滑动函数-slideDown,slideUp,slideToggle

  jQuery拥有以下滑动函数：

  $（selector）.slideDown（speed,callback）

  $（selector）.slideUp（speed,callback）

  $（selector）.slideToggle（speed,callback）

  speed参数可以设置这些值：

  "slow","fast","normal"或毫秒。

  callback参数是在hide或show函数完成之后被执行的函数名称。

  您将在本教程下面的章节学习更多有关callback参数的知识。

  slideDown（）实例

  ---->

  $（document）.ready（function（）{

  $（".flip"）.click（function（）{

  $（".panel"）.slideDown（"slow"）;

  }）;

  }）;

  div.panel,p.flip

  {

  margin:

  0px;

  padding:

  5px;

  text-align:

  center;

  background:

  #e5eecc;

  border:

  solid1px#c3c3c3;

  }

  div.panel

  {

  height:

  120px;

  display:

  none;

  }

  Becausetimeisvaluable,wedeliverquickandeasylearning.

  AtW3CSchool,youcanstudyeverythingyouneedtolearn,inanaccessibleandhandyformat.

  ShowPanel

  ---->

  slideUp（）实例

  ---->

  $（document）.ready（function（）{

  $（".flip"）.click（function（）{

  $（".panel"）.slideUp（"slow"）;

  }）;

  }）;

  div.panel,p.flip

  {

  margin:

  0px;

  padding:

  5px;

  text-align:

  center;

  background:

  #e5eecc;

  border:

  solid1px#c3c3c3;

  }

  div.panel

  {

  height:

  120px;

  }

  Becausetimeisvaluable,wedeliverquickandeasylearning.

  AtW3CSchool,youcanstudyeverythingyouneedtolearn,inanaccessibleandhandyformat.