jQuery
1、简介:
jQuery是一个快速、简洁的JavaScript框架,是继Prototype之后又一个优秀的JavaScript代码库(或JavaScript框架)。
jQuery设计的宗旨是"write Less,Do More",即倡导写更少的代码,做更多的事情。
它封装JavaScript常用的功能代码,提供一种简便的JavaScript设计模式,
优化HTML文档操作、事件处理、动画设计和Ajax交互。
jQuery的核心特性可以总结为:
具有独特的链式语法和短小清晰的多功能接口;
具有高效灵活的css选择器,并且可对CSS选择器进行扩展;
拥有便捷的插件扩展机制和丰富的插件
jQuery兼容各种主流浏览器,如IE 6.0+、FF 1.5+、Safari 2.0+、Opera 9.0+等。
jQuery 语法是为 HTML 元素的选取编制的,可以对元素执行某些操作。
基础语法是:$(selector).action()
美元符号定义 jQuery
选择符(selector)“查询”和“查找” HTML 元素
jQuery 的 action() 执行对元素的操作
2、 dom和jquery对象
a) 名称
jQuery和$
用$找出来的对象叫jQuery对象用document找出来的对象叫Dom对象
b) dom和jquery对象转换
jQuery对象.get(0) --->dom对象
$(dom对象)--->jQuery对象
3、jQuery作用:
a. HTML元素获取
b. HTML元素操作
c. CSS操作
d. HTML事件函数
e. javascrip特效与动画
f. HTML DOM遍历和修改
g. AJAX
h. Utilities
4、小功能:
去首尾空格: $.trim(字符串)
.size() 找到多少个对象 $("div").size()
5、加载顺序,在文档加载完之后
$(document).ready(function(){
---代码-----
});
简单的例子:
$(document).ready(function(){
alert("哈哈");
});
这是为了防止文档在完全加载(就绪)之前运行 jQuery 代码。
如果在文档没有完全加载之前就运行函数,操作可能失败。
7、jQuery 事件 下面是 jQuery 中事件方法的一些例子:
键盘事件:
鼠标事件:
8、javascrip特效与动画
隐藏
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落 即标签选择器
$(".test").hide() - 隐藏所有 class="test" 的所有元素 即类选择器
$("#test").hide() - 隐藏所有 id="test" 的元素 即id选择器
a、隐藏、显示效果:
jQuery hide() 和 show()通过 jQuery,可以使用 hide() 和 show() 方法来隐藏和显示 HTML 元素:
$("#hide").click(function(){
$("p").hide();
});
$("#show").click(function(){
$("p").show();
});
隐藏、显示可以加上速度 :
$(selector).hide(speed,callback);
$(selector).show(speed,callback);
可选的 speed 参数规定隐藏/显示的速度,可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是隐藏或显示完成后所执行的函数名称。
b、切换效果:
jQuery toggle()
通过 jQuery,可以使用 toggle() 方法来切换 hide() 和 show() 方法。
初始是显示的 点一下隐藏 再点一下显示
显示被隐藏的元素,并隐藏已显示的元素:
实例:
$("button").click(function(){
$("p").toggle();
});
c、淡入淡出效果:
jQuery Fading 方法
jQuery 拥有下面四种 fade 方法:
1、fadeIn() 用于淡入已隐藏的元素。
语法:
$(selector).fadeIn(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
2、fadeOut() 用于淡出可见元素。
语法:
$(selector).fadeOut(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
3、fadeToggle() 可以在 fadeIn() 与 fadeOut() 方法之间进行切换。
语法:
$(selector).fadeToggle(speed,callback);
可选的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
可选的 callback 参数是 fading 完成后所执行的函数名称。
如果元素已淡出,则 fadeToggle() 会向元素添加淡入效果。
如果元素已淡入,则 fadeToggle() 会向元素添加淡出效果。
4、fadeTo() 允许渐变为给定的不透明度(值介于 0 与 1 之间)。
语法:$(selector).fadeTo(speed,opacity,callback);
必需的 speed 参数规定效果的时长。它可以取以下值:"slow"、"fast" 或毫秒。
fadeTo() 方法中必需的 opacity 参数将淡入淡出效果设置为给定的不透明度(值介于 0 与 1 之间)。
可选的 callback 参数是该函数完成后所执行的函数名称。
d、滑动效果
jQuery 滑动方法
slideDown() 用于向下滑动元素。
slideUp() 用于向上滑动元素
slideToggle() 用于切换向上、向下滑动元素
随手整理 后续会有补充。。
$(this).hide() - 隐藏当前元素
$("p").hide() - 隐藏所有段落 即标签选择器
$(".test").hide() - 隐藏所有 class="test" 的所有元素 即类选择器
$("#test").hide() - 隐藏所有 id="test" 的元素 即id选择器