60分钟快速入门jQuery

jQuery简介

jQuery 是一个 JavaScript 库，使用jQuery 极大地简化了 JavaScript 编程。

jQuery 库包含以下特性：

HTML 元素选取

HTML 元素操作

CSS 操作

HTML 事件函数

JavaScript 特效和动画

HTML DOM 遍历和修改

AJAX

Utilities

jQuery安装及使用

1、有两个版本的 jQuery 可供下载：

Production version - 用于实际的网站中，已被精简和压缩。

Development version - 用于测试和开发（未压缩，是可读的代码）

这两个版本都可以从 jQuery.com 下载。

2、jQuery 库是一个 JavaScript 文件，您可以使用 HTML 的 <script> 标签引用它来使用：
<head>
<script src="jquery.js"></script>
</head>
jQuery基本语法
jQuery 语法是为 HTML 元素的选取编制的，可以对元素执行某些操作。
基础语法是： $(selector).action()

美元符号定义 jQuery

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

jQuery 的 action() 执行对元素的操作

jQuery选择器

jQuery的选择器允许您对 HTML 元素组或单个元素进行操作。主要的选择器有：元素选择器、属性选择器和CSS选择器。

1、元素选择器

jQuery 使用 CSS 选择器来选取 HTML 元素。
$("p") 选取 <p> 元素。
$("p.intro") 选取所有 class="intro" 的 <p> 元素。
$("p#demo") 选取所有 id="demo" 的 <p> 元素。

2、属性选择器

jQuery 使用 XPath 表达式来选择带有给定属性的元素。
$("[href]") 选取所有带有 href 属性的元素。
$("[href='#']") 选取所有带有 href 值等于 "#" 的元素。
$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。
$("[href$='.jpg']") 选取所有 href 值以 ".jpg" 结尾的元素

3、CSS选择器

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

下面的例子把所有 p 元素的背景颜色更改为红色：
$("p").css("background-color","red");
jQuery事件

常用事件方法及其描述

事件事件描述

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

实例说明：点击button触发click()事件，显示或隐藏<p>
<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $("button").click(function(){
    $("p").slideToggle();        
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button>切换</button>
</body>
</html>
查看demo

jQuery效果
1、jQuery显示/隐藏
jQuery hide() 和 show()

     语法：     $(selector).hide(speed,callback);
                      $(selector).show(speed,callback);

      可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
      可选的 callback 参数是隐藏或显示完成后所执行的函数名称。

实例说明：可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素
$("#hide").click(function(){
  $("p").hide();
});

$("#show").click(function(){
  $("p").show();
});
查看demo
jQuery toggle()方法

      语法：    $(selector).toggle(speed,callback);

      可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。
       可选的 callback 参数是 toggle() 方法完成后所执行的函数名称。

实例说明：可以使用 toggle() 方法来切换 hide() 和 show() 方法
$("button").click(function(){
  $("p").toggle();
});
查看demo

2、jQuery淡入淡出

jQuery fadeIn() 方法

----------------------------------------------- 待更新 ------------------------------------------------

事件	事件描述
click()	触发、或将函数绑定到指定元素的 click 事件
dblclick()	触发、或将函数绑定到指定元素的 double click 事件
load()	触发、或将函数绑定到指定元素的 load 事件
submit()	触发、或将函数绑定到指定元素的 submit 事件
toggle()	绑定两个或多个事件处理器函数，当发生轮流的 click 事件时执行。
change()	触发、或将函数绑定到指定元素的 change 事件
ready()	文档就绪事件（当 HTML 文档就绪可用时）
focus()	触发、或将函数绑定到指定元素的 focus 事件
mouseenter()	触发、或将函数绑定到指定元素的 mouse enter 事件
mouseout()	触发、或将函数绑定到指定元素的 mouse out 事件
mousedown()	触发、或将函数绑定到指定元素的 mouse down 事件
mouseup()	触发、或将函数绑定到指定元素的 mouse up 事件
keydown()	触发、或将函数绑定到指定元素的 key down 事件
keyup()	触发、或将函数绑定到指定元素的 key up 事件
keypress()	触发、或将函数绑定到指定元素的 key press 事件
resize()	触发、或将函数绑定到指定元素的 resize 事件
scroll()	触发、或将函数绑定到指定元素的 scroll 事件
bind()	向匹配元素附加一个或更多事件处理器
unload()	触发、或将函数绑定到指定元素的 unload 事件

60分钟快速入门jQuery

jQuery简介

jQuery安装及使用

jQuery基本语法

jQuery选择器

jQuery事件

jQuery效果

猜你喜欢