jQuery学习

什么是jQuery
jQuery语法

什么是jQuery

jQuery是一个JavaScript函数库。jQuery是一个轻量级的”写的少，做的多”的JavaScript库。jQuery库包含以下功能：

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

jQuery语法
jQuery 语法是通过选取 HTML 元素，并对选取的元素执行某些操作。
基础语法： $(selector).action()
美元符号定义 jQuery
选择符（selector）”查询”和”查找” HTML 元素
jQuery 的 action() 执行对元素的操作

入口函数
```
$(document).ready(function(){
 // 开始写 jQuery 代码...
});
//简洁写法
$(function(){ 
 // 开始写 jQuery 代码...
});
```
选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id、类、类型、属性、属性值等”查找”（或选择）HTML 元素。它基于已经存在的 CSS 选择器，除此之外，它还有一些自定义的选择器。
jQuery 中所有选择器都以美元符号开头：$()。

jQuery事件
页面对不同访问者的响应叫做事件。事件处理程序指的是当 HTML 中发生某些事件时所调用的方法。
实例：
在元素上移动鼠标。
选取单选按钮
点击元素

常用jQuery事件方法

$(document).ready()
$(document).ready() 方法允许我们在文档完全加载完后执行函数。该事件方法在 jQuery 语法章节中已经提到过

click()
click() 方法是当按钮点击事件被触发时会调用一个函数。该函数在用户点击 HTML 元素时执行。在下面的实例中，当点击事件在某个
元素上触发时，隐藏当前的
元素：
```
$('p').click(function(){
$(this).hide()
})
```
dblclick()
当双击元素时，会发生 dblclick 事件。dblclick() 方法触发 dblclick 事件，或规定当发生 dblclick 事件时运行的函数：
```
$('p').click(function(){
  $(this).hide()
})
```
mouseenter()
当鼠标指针穿过元素时，会发生 mouseenter 事件。mouseenter() 方法触发 mouseenter 事件，或规定当发生 mouseenter 事件时运行的函数：
```
$("#p1").mouseenter(function(){
  alert('您的鼠标移到了 id="p1" 的元素上!');
});
```
mouseleave()
当鼠标指针离开元素时，会发生 mouseleave 事件。mouseleave() 方法触发 mouseleave 事件，或规定当发生 mouseleave 事件时运行的函数：
```
$("#p1").mouseleave(function(){
  alert("再见，您的鼠标离开了该段落。");
});
```
mousedown()
当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。mousedown() 方法触发 mousedown 事件，或规定当发生 mousedown 事件时运行的函数：
```
$("#p1").mousedown(function(){
  alert("鼠标在该段落上按下！");
});
```
mouseup()
当在元素上松开鼠标按钮时，会发生 mouseup 事件。
mouseup() 方法触发 mouseup 事件，或规定当发生 mouseup 事件时运行的函数：
```
$("#p1").mouseup(function(){
  alert("鼠标在段落上松开。");
});
```
hover()
hover()方法用于模拟光标悬停事件。
当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
```
$("#p1").hover(
  function(){
      alert("你进入了 p1!");
  },
  function(){
      alert("拜拜! 现在你离开了 p1!");
  }
);
```
focus()
当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点。focus() 方法触发 focus 事件，或规定当发生 focus 事件时运行的函数：
```
$("input").focus(function(){
$(this).css("background-color","#cccccc");
});
```
blur()
当元素失去焦点时，发生 blur 事件。blur() 方法触发 blur 事件，或规定当发生 blur 事件时运行的函数：
```
$("input").blur(function(){
$(this).css("background-color","#ffffff");
});
```
jQuery 效果- 隐藏和显示

jQuery hide() 和 show()
语法
```
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
```
可选的 speed 参数规定隐藏/显示的速度，可以取以下值：”slow”、”fast” 或毫秒。可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
```
$(document).ready(function(){
$(".hidebtn").click(function(){
  $("div").hide(1000,"linear",function(){
    alert("Hide() 方法已完成!");
  });
});
});
```
jQuery toggle()
通过 jQuery，您可以使用 toggle() 方法来切换 hide() 和 show() 方法。
```
$(selector).toggle(speed,callback);
```
jQuery 效果 - 淡入淡出

jQuery fadeIn() 方法
jQuery fadeIn() 用于淡入已隐藏的元素。
```
$(selector).fadeIn(speed,callback);
```
jQuery fadeOut() 方法
jQuery fadeOut() 方法用于淡出可见元素。
```
$(selector).fadeOut(speed,callback);
```
jQuery fadeToggle() 方法
jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
如果元素已淡出，则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入，则 fadeToggle() 会向元素添加淡出效果。
```
$(selector).fadeToggle(speed,callback);
```
jQuery fadeTo() 方法
jQuery fadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）。
```
$(selector).fadeTo(speed,opacity,callback);
```
必需的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度（值介于 0 与 1 之间）。
可选的 callback 参数是该函数完成后所执行的函数名称。

jQuery 效果 - 滑动

jQuery slideDown() 方法
jQuery slideDown() 方法用于向下滑动元素。
```
$("#flip").click(function(){
$("#panel").slideDown();
});
```
jQuery slideUp() 方法
jQuery slideUp() 方法用于向上滑动元素。
```
$("#flip").click(function(){
$("#panel").slideUp();
});
```
jQuery slideToggle() 方法
jQuery slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换。
如果元素向下滑动，则 slideToggle() 可向上滑动它们。
如果元素向上滑动，则 slideToggle() 可向下滑动它们。
```
$("#flip").click(function(){
$("#panel").slideToggle();
});
```
jQuery 效果- 动画

jQuery 动画 - animate() 方法
```
$(selector).animate({params},speed,callback);
```
必需的 params 参数定义形成动画的 CSS 属性。
可选的 speed 参数规定效果的时长。它可以取以下值：”slow”、”fast” 或毫秒。
可选的 callback 参数是动画完成后所执行的函数名称。
下面的例子演示 animate() 方法的简单应用。它把
元素往右边移动了 250 像素：
```
$("button").click(function(){
$("div").animate({left:'250px'});
});
```
jQuery - 获取和设置内容和属性

获得内容 - text()、html() 以及 val()
三个简单实用的用于 DOM 操作的 jQuery 方法：
text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
```
$("#btn1").click(function(){
alert("Text: " + $("#test").text());
});
$("#btn2").click(function(){
alert("HTML: " + $("#test").html());
});
```
jQuery - 添加元素

添加新的 HTML 内容
我们将学习用于添加新内容的四个 jQuery 方法：
append() - 在被选元素的结尾插入内容
prepend() - 在被选元素的开头插入内容
after() - 在被选元素之后插入内容
before() - 在被选元素之前插入内容

jQuery - 删除元素

删除元素/内容
如需删除元素和内容，一般可使用以下两个 jQuery 方法：
remove() - 删除被选元素（及其子元素）
empty() - 从被选元素中删除子元素

jQuery - 获取并设置 CSS 类
jQuery 拥有若干进行 CSS 操作的方法。我们将学习下面这些：
addClass() - 向被选元素添加一个或多个类
removeClass() - 从被选元素删除一个或多个类
toggleClass() - 对被选元素进行添加/删除类的切换操作
css() - 设置或返回样式属性

jQuery 遍历

向上遍历 DOM 树
这些 jQuery 方法很有用，它们用于向上遍历 DOM 树：
parent()
parents()
parentsUntil()

向下遍历 DOM 树
下面是两个用于向下遍历 DOM 树的 jQuery 方法：
children()
find()

在 DOM 树中水平遍历
有许多有用的方法让我们在 DOM 树进行水平遍历：
siblings()
next()
nextAll()
nextUntil()
prev()
prevAll()
prevUntil()

什么是jQuery

jQuery语法

入口函数

选择器

jQuery事件

常用jQuery事件方法

$(document).ready()

click()

dblclick()

mouseenter()

mouseleave()

mousedown()

mouseup()

hover()

focus()

blur()

jQuery 效果- 隐藏和显示

jQuery hide() 和 show()

jQuery toggle()

jQuery 效果 - 淡入淡出

jQuery fadeIn() 方法

jQuery fadeOut() 方法

jQuery fadeToggle() 方法

jQuery fadeTo() 方法

jQuery 效果 - 滑动

jQuery slideDown() 方法

jQuery slideUp() 方法

jQuery slideToggle() 方法

jQuery 效果- 动画

jQuery 动画 - animate() 方法

jQuery - 获取和设置内容和属性

获得内容 - text()、html() 以及 val()

jQuery - 添加元素

添加新的 HTML 内容

jQuery - 删除元素

删除元素/内容

jQuery - 获取并设置 CSS 类

jQuery 遍历

向上遍历 DOM 树

向下遍历 DOM 树

在 DOM 树中水平遍历