Jquery入门一
jQuery 语法是通过选取 HTML 元素,并对选取的元素执行某些操作。
基础语法: $(selector).action()
- $美元符号定义 jQuery
- 选择符(selector)"查询"和"查找" HTML 元素(选择器)
- jQuery 的 action() 执行对元素的操作 (事件)
所以jQuery 的学习主要就分两大块:选择器和事件
实例:
- $(this).hide() - 隐藏当前元素
- $("p").hide() - 隐藏所有 <p> 元素
- $("p.test").hide() - 隐藏所有 class="test" 的 <p> 元素
- $("#test").hide() - 隐藏 id="test" 的元素
jQuery 入口函数与 JavaScript 入口函数的区别:
$(document).ready(function(){ // 执行代码 });
或
$(function(){ // 执行代码 });
jQuery 的入口函数是在 html 所有标签(DOM)都加载之后,就会去执行。
JavaScript 的 window.onload 事件是等到所有内容,包括外部图片之类的文件加载完后,才会执行。window.onload = function () { // 执行代码 }
jQuery 选择器
jQuery 选择器允许您对 HTML 元素组或单个元素进行操作。
jQuery 选择器基于元素的 id#、类.、类型、属性、属性值等"查找"(或选择)HTML 元素。 它基于已经存在的 CSS 选择器
元素选择器
jQuery 元素选择器基于元素名选取元素:
在页面中选取所有 <p> 元素:$("p")
#id 选择器
#id 选择器通过 HTML 元素的 id 属性选取指定的元素:
通过 id 选取元素语法如下:$("#test")
页面中元素的 id 应该是唯一的,所以您要在页面中选取唯一的元素需要通过 #id 选择器。
.class 选择器
jQuery 类选择器可以通过指定的 class 查找元素。
语法如下:$(".test")
常见 DOM 事件:
鼠标事件 |
键盘事件 |
表单事件 |
文档/窗口事件 |
|
|||
|
|
|
jQuery 事件
页面中指定一个点击事件:
$("p").click();
下一步是定义什么时间触发事件。您可以通过一个事件函数实现:
$("p").click(function(){ // 动作触发后执行的代码!! });
隐藏/显示show()/hide() 、淡入/淡出 fadeIn()/fadeOut()、滑动slideDown()/slideUp()效果相似
最终状态 display:block;
- show()
- fadeIn()
- slideDown()
最终状态 display:none;
- hide()
- fadeOut()
- slideUp()
hide() 和 show()
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
toggle()
切换 hide() 和 show() 方法:显示被隐藏的元素,并隐藏已显示的元素:
$(selector).toggle(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
fadeIn() 和 fadeOut()
$(selector).fadeIn(speed,callback);用于淡入已隐藏的元素:
$(selector).fadeOut(speed,callback); 方法用于淡出可见元素。
fadeToggle()
在 fadeIn() 与 fadeOut() 方法之间进行切换:如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果;如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
fadeTo()
允许渐变为给定的不透明度(值介于 0 与 1 之间)。
$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
slideDown() 和slideUp()
$(selector).slideDown(speed,callback); 用于向下滑动元素
$(selector).slideUp(speed,callback); 用于向上滑动元素。
slideToggle()
在 slideDown() 与 slideUp() 方法之间进行切换:如果元素向下滑动,则 slideToggle() 可向上滑动它们;如果元素向上滑动,则 slideToggle() 可向下滑动它们。
$(selector).slideToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是滑动完成后所执行的函数名称。
Callback 函数在当前动画 100% 完成之后执行
上一篇: JQuery学习笔记(一)
下一篇: JQuery 三级联动