前端技术：jQuery

一、概述

jQuery 是一个 JavaScript 库。

jQuery 极大地简化了 JavaScript 编程。

jQuery 是一个“写的更少，但做的更多”的轻量级 JavaScript 库。

jQuery用来操作HTML元素：选取 HTML 元素，以及对它们执行类似隐藏、移动以及操作其内容等任务

二、元素选取

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

基础语法是：$(selector).action()

    美元符号定义 jQuery

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

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

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

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

1、jQuery 元素选择器：

$("p") 选取 <p> 元素。

$("p.intro") 选取所有 class="intro" 的 <p> 元素。

$("p#demo") 选取所有 id="demo" 的 <p> 元素。

$(".intro") 选取所有 class="intro" 的元素。

$("#demo") 选取id="demo" 的元素。

#：根据元素ID选择

.：根据元素的类选择

2、jQuery 属性选择器：

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

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

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

$("[href!='#']") 选取所有带有 href 值不等于 "#" 的元素。

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

属性选择器用[ ]标识

3、jQuery CSS 选择器

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

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

$("p").css("background-color","red");

 

三、jQuery 事件

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

例子：

<script type="text/javascript">
$(document).ready(function(){ $("button").click(function()
{
$("p").hide();
}); });
 </script>

常用事件：

$(document).ready(function)     将函数绑定到文档的就绪事件（当文档完成加载时）

$(selector).click(function)     触发或将函数绑定到被选元素的点击事件

$(selector).dblclick(function)     触发或将函数绑定到被选元素的双击事件

$(selector).focus(function)     触发或将函数绑定到被选元素的获得焦点事件

$(selector).mouseover(function)     触发或将函数绑定到被选元素的鼠标悬停事件

注意：把所有 jQuery 代码置于事件处理函数中

            把所有事件处理函数置于文档就绪事件处理器中

四、操作

1、隐藏、显示

隐藏：$(selector).hide(); $(selector).hide(speed,callback);

显示：$(selector).show(speed,callbac);$(selector).show(speed,callback);

隐藏、显示切换：$(selector).toggle();$(selector).toggle(speed,callback);

可选的 speed 参数规定隐藏/显示的速度，可以取以下值："slow"、"fast" 或毫秒。

可选的 callback 参数是方法完成后所执行的函数名称
2、淡入淡出

jQuery fadeIn() 用于淡入已隐藏的元素：$(selector).fadeIn(speed,callback);

jQuery fadeOut() 方法用于淡出可见元素：$(selector).fadeOut(speed,callback);

jQuery fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换：$(selector).fadeToggle(speed,callback);

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

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

jQuery fadeTo() 方法

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