JQuery知识大全.docx

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

JQuery知识大全

1、jQuery简介

1.1、Query是一个JavaScript函数库，可以通过下面的标记把jQuery添加到网页中：

1.2、jQuery库包含以下特性：

∙HTML元素选取

∙HTML元素操作

∙CSS操作

∙HTML事件函数

∙JavaScript特效和动画

∙HTMLDOM遍历和修改

∙AJAX

∙Utilities

1.3、jQuery实例

jQuery的hide（）函数，隐藏HTML文档中所有的

元素。

$（document）.ready（function（）{

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

$（"p"）.hide（）;

}）;

}）;

Thisisaheading

Thisisaparagraph.

Thisisanotherparagraph.

Clickme

1.4、jQuery语法

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

基础语法是：

$（selector）.action（）

∙美元符号定义jQuery

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

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

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

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

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

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

1.5jQuery选择器

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"）.css（"background-color","red"）;

jQuery选择器

语法

描述

$（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选择器参考手册

  选择器

  实例

  选取

  *

  $（"*"）

  所有元素

  #id

  $（"#lastname"）

  id="lastname"的元素

  .class

  $（".intro"）

  所有class="intro"的元素

  element

  $（"p"）

  所有

  元素

  .class.class

  $（".intro.demo"）

  所有class="intro"且class="demo"的元素

  :

  first

  $（"p:

  first"）

  第一个

  元素

  :

  last

  $（"p:

  last"）

  最后一个

  元素

  :

  even

  $（"tr:

  even"）

  所有偶数元素

  :

  odd

  $（"tr:

  odd"）

  所有奇数元素

  :

  eq（index）

  $（"ulli:

  eq（3）"）

  列表中的第四个元素（index从0开始）

  :

  gt（no）

  $（"ulli:

  gt（3）"）

  列出index大于3的元素

  :

  lt（no）

  $（"ulli:

  lt（3）"）

  列出index小于3的元素

  :

  not（selector）

  $（"input:

  not（:

  empty）"）

  所有不为空的input元素

  :

  header

  $（":

  header"）

  所有标题元素

  -

  :

  animated

  所有动画元素

  :

  contains（text）

  $（":

  contains（'W3School'）"）

  包含指定字符串的所有元素

  :

  empty

  $（":

  empty"）

  无子（元素）节点的所有元素

  :

  hidden

  $（"p:

  hidden"）

  所有隐藏的

  元素

  :

  visible

  $（"table:

  visible"）

  所有可见的表格

  s1,s2,s3

  $（"th,td,.intro"）

  所有带有匹配选择的元素

  [attribute]

  $（"[href]"）

  所有带有href属性的元素

  [attribute=value]

  $（"[href='#']"）

  所有href属性的值等于"#"的元素

  [attribute!

  =value]

  $（"[href!

  ='#']"）

  所有href属性的值不等于"#"的元素

  [attribute$=value]

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

  所有href属性的值包含以".jpg"结尾的元素

  :

  input

  $（":

  input"）

  所有元素

  :

  text

  $（":

  text"）

  所有type="text"的元素

  :

  password

  $（":

  password"）

  所有type="password"的元素

  :

  radio

  $（":

  radio"）

  所有type="radio"的元素

  :

  checkbox

  $（":

  checkbox"）

  所有type="checkbox"的元素

  :

  submit

  $（":

  submit"）

  所有type="submit"的元素

  :

  reset

  $（":

  reset"）

  所有type="reset"的元素

  :

  button

  $（":

  button"）

  所有type="button"的元素

  :

  image

  $（":

  image"）

  所有type="image"的元素

  :

  file

  $（":

  file"）

  所有type="file"的元素

  :

  enabled

  $（":

  enabled"）

  所有激活的input元素

  :

  disabled

  $（":

  disabled"）

  所有禁用的input元素

  :

  selected

  $（":

  selected"）

  所有被选取的input元素

  :

  checked

  $（":

  checked"）

  所有被选中的input元素

  1.6、jQuery事件

  jQuery事件函数

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

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

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

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

  实例

  $（document）.ready（function（）{

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

  $（"p"）.hide（）;

  }）;

  }）;

  Thisisaheading

  Thisisaparagraph.

  Thisisanotherparagraph.

  Clickme

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

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

  该方法隐藏所有

  元素：

  $（"p"）.hide（）;

  jQuery中事件方法的一些例子：

  Event函数

  绑定函数至

  $（document）.ready（function）

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

  $（selector）.click（function）

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

  $（selector）.dblclick（function）

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

  $（selector）.focus（function）

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

  $（selector）.mouseover（function）

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

  jQuery参考手册-事件

  方法

  描述

  bind（）

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

  blur（）

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

  change（）

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

  click（）

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

  dblclick（）

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

  delegate（）

  向匹配元素的当前或未来的子元素附加一个或多个事件处理器

  die（）

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

  error（）

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

  event.isDefaultPrevented（）

  返回event对象上是否调用了event.preventDefault（）。

  event.pageX

  相对于文档左边缘的鼠标位置。

  event.pageY

  相对于文档上边缘的鼠标位置。

  event.preventDefault（）

  阻止事件的默认动作。

  event.result

  包含由被指定事件触发的事件处理器返回的最后一个值。

  event.target

  触发该事件的DOM元素。

  event.timeStamp

  该属性返回从1970年1月1日到事件发生时的毫秒数。

  event.type

  描述事件的类型。

  event.which

  指示按了哪个键或按钮。

  focus（）

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

  keydown（）

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

  keypress（）

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

  keyup（）

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

  live（）

  为当前或未来的匹配元素添加一个或多个事件处理器

  load（）

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

  mousedown（）

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

  mouseenter（）

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

  mouseleave（）

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

  mousemove（）

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

  mouseout（）

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

  mouseover（）

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

  mouseup（）

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

  one（）

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

  每个元素只能触发一次该处理器。

  ready（）

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

  resize（）

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

  scroll（）

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

  select（）

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

  submit（）

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

  toggle（）

  绑定两个或多个事件处理器函数，当发生轮流的click事件时执行。

  trigger（）

  所有匹配元素的指定事件

  triggerHandler（）

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

  unbind（）

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

  undelegate（）

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

  unload（）

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

  2、jQuery效果-隐藏和显示

  DOCTYPEhtml>

  $（document）.ready（function（）{

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

  $（"p"）.hide（）;

  }）;

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

  $（"p"）.show（）;

  }）;

  }）;

  如果点击“隐藏”按钮，我就会消失。

  隐藏

  显示

  2.1、语法：

  $（selector）.hide（speed,callback）;

  $（selector）.show（speed,callback）;

  可选的speed参数规定隐藏/显示的速度，可以取以下值：

  "slow"、"fast"或毫秒。

  可选的callback参数是隐藏或显示完成后所执行的函数名称。

  下面的例子演示了带有speed参数的hide（）方法：

  DOCTYPEhtml>

  $（document）.ready（function（）{

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

  $（"p"）.hide（1000）;

  }）;

  }）;

  隐藏

  这是一个段落。

  这是另一个段落。

   

  2.2jQuerytoggle（）

  通过jQuery，您可以使用toggle（）方法来切换hide（）和show（）方法。

  显示被隐藏的元素，并隐藏已显示的元素：

  DOCTYPEhtml>

  $（document）.ready（function（）{

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

  $（"p"）.toggle（）;

  }）;

  }）;

  切换

  这是一个段落。

  这是另一个段落。

  2.3、jQuery效果函数

  方法

  描述

  animate（）

  对被选元素应用“自定义”的动画

  clearQueue（）

  对被选元素移除所有排队的函数（仍未运行的）

  delay（）

  对被选元素的所有排队函数（仍未运行）设置延迟

  dequeue（）

  运行被选元素的下一个排队函数

  fadeIn（）

  逐渐改变被选元素的不透明度，从隐藏到可见

  fadeOut（）

  逐渐改变被选元素的不透明度，从可见到隐藏

  fadeTo（）

  把被选元素逐渐改变至给定的不透明度

  hide（）

  隐藏被选的元素

  queue（）

  显示被选元素的排队函数

  show（）

  显示被选的元素

  slideDown（）

  通过调整高度来滑动显示被选元素

  slideToggle（）

  对被选元素进行滑动隐藏和滑动显示的切换

  slideUp（）

  通过调整高度来滑动隐藏被选元素

  stop（）

  停止在被选元素上运行动画

  toggle（）

  对被选元素进行隐藏和显示的切换

  2.4、jQuery效果-淡入淡出

  jQueryFading方法

  通过jQuery，您可以实现元素的淡入淡出效果。

  jQuery拥有下面四种fade方法：

  ∙fadeIn（）jQueryfadeIn（）用于淡入已隐藏的元素。

  ∙fadeOut（）jQueryfadeOut（）方法用于淡出可见元素。

  ∙fadeToggle（）jQueryfadeToggle（）方法可以在fadeIn（）与fadeOut（）方法之间进行切换。

  如果元素已淡出，则fadeToggle（）会向元素添加淡入效果。

  如果元素已淡入，则fadeToggle（）会向元素添加淡出效果。

  ∙fadeTo（）jQueryfadeTo（）方法允许渐变为给定的不透明度（值介于0与1之间）。

  2.4.1、演示带有不同参数的fadeIn（）方法。

  DOCTYPEhtml>

  演示带有不同参数的fadeIn（）方法。

  点击这里，使三个矩形淡入

  
  
  

  80px;height:

  80px;display:

  none;background-color:

  red;">

  
  

  80px;height:

  80px;display:

  none;background-color:

  green;">