一、概述
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 之间)。