jQuery快速入门.docx

jQuery快速入门.docx

《jQuery快速入门.docx》由会员分享，可在线阅读，更多相关《jQuery快速入门.docx（59页珍藏版）》请在冰豆网上搜索。

jQuery快速入门

一.jQuery语法实例

$（this）.hide（）

演示jQueryhide（）函数，隐藏当前的HTML元素。

$（"#test"）.hide（）

演示jQueryhide（）函数，隐藏id="test"的元素。

$（"p"）.hide（）

演示jQueryhide（）函数，隐藏所有

元素。

$（".test"）.hide（）

演示jQueryhide（）函数，隐藏所有class="test"的元素。

jQuery语法

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

基础语法是：

$（selector）.action（）

∙美元符号定义jQuery

∙选择符（selector）“查询”和“查找”HTML元素

∙jQuery的action（）执行对元素的操作

示例

$（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"的元素

  三.jQuery事件函数

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

  事件处理程序指的是当HTML中发生某些事件时所调用的方法。

  术语由事件“触发”（或“激发”）经常会被使用。

  通常会把jQuery代码放到部分的事件处理方法中：

  实例

  $（document）.ready（function（）{

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

  $（"p"）.hide（）;

  }）;

  }）;

  Thisisaheading

  Thisisaparagraph.

  Thisisanotherparagraph.

  Clickme

  亲自试一试

  在上面的例子中，当按钮的点击事件被触发时会调用一个函数：

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

  该方法隐藏所有

  元素：

  $（"p"）.hide（）;

  单独文件中的函数

  如果您的网站包含许多页面，并且您希望您的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）

  将函数绑定到文档的就绪事件（当文档完成加载时）

  $（selector）.click（function）

  触发或将函数绑定到被选元素的点击事件

  $（selector）.dblclick（function）

  触发或将函数绑定到被选元素的双击事件

  $（selector）.focus（function）

  触发或将函数绑定到被选元素的获得焦点事件

  $（selector）.mouseover（function）

  触发或将函数绑定到被选元素的鼠标悬停事件

  四.jQuery实例

  jQueryhide（）

  演示简单的jQueryhide（）函数。

  $（document）.ready（function（）{

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

  $（this）.hide（）;

  }）;

  }）;

  Ifyouclickonme,Iwilldisappear.

  jQueryhide（）

  另一个hide（）演示。

  如何隐藏部分文本。

  $（document）.ready（function（）{

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

  $（this）.parents（".ex"）.hide（"slow"）;

  }）;

  }）;

  div.ex

  {

  background-color:

  #e5eecc;

  padding:

  7px;

  border:

  solid1px#c3c3c3;

  }

  IslandTrading

  Hideme

  Contact:

  HelenBennett
  

  GardenHouseCrowtherWay
  

  London

  ParisTrading

  Hideme

  Contact:

  MarieBertrand
  

  265,BoulevardCharonne
  

  Paris