********************** 基础 ***********************
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(function(){ 代码..........});
</script>
注:结尾要“;”
********************** 基础 **********************
.end() 返回前一组找到的元素
.find() 在之前找到的元素中寻找元素
********************** 控制元素和属性 **********************
each 操作获得的所有元素 $("div").each(function(){})
attr 获得元素的某个属性 $("#name").attr("src")
操作元素的某个属性 $("#name").attr("src","myimg.jpg")
$("#name").attr({value:"ABCDEFG"})
写函数也行 $("#name").attr({*************})
html() 返回标记的innerHTML $("#name").html("<a>内容写进去或输出</a>")
text() 返回标记的文本 $("#name").text("内容写进去或输出")
index() 获取的元素是第几个 $(this).index()
eq() 获取第几个元素 $(this).eq("0")
********************** css修改 **********************
addClass 添加css样式 $("div").addClass("redborder")
removeClass 删除css样式 $("div").removeClass("redborder")
hasClass 判断是否采用某个样式 $("div").hasClass("redborder")
css 改变样式属性的值 $("div").css("border","2px dashed #000000")
css(name) 获得样式属性值 $("div").css("border")
css(properties) 大量修改样式 $("div").css ({color:"#000000",background:"blue"})
height 修改高度 $("div").height("200px")
获得高度 $("div").height()
width 同上
********************** 触发事件 **********************
(on)blur 失去焦点时
(on)chang 元素内容改变时
(on)click 鼠标单击时
(on)dblclick 鼠标双击时
(on)error 元素出现内部错误时
(on)focus 元素被点击或获得焦点时
(on)keydown 键盘按下时
(on)keypress 按下并放开键盘时
(on)onkeyup 放开键盘时
(on)onload 页面载入完成后
(on)mousedown 鼠标按下时
(on)mousemove 鼠标移动时
(on)mouseout 鼠标离开某元素时
(on)mouseover 鼠标掠过某元素时
(on)mouseup 放开鼠标键时
(on)resize 对象调整大小时
(on)scroll iframe卷起时
(on)select 文本在文本字段内被选中时调用,而不时在组合框被被选中时调用
(on)submit 当表当提交时触发
(on)load/unload 对象在页面加载/重载时发生
hover(fn1,.fn2) fn1=mouseover(),fn2=mouseout()
toggle(fn1,fn2,fn3...) 每当触发click事件时,会轮流切换执行函数。
bind(eventType,fn) 为事物绑定处理程序
unbind(eventType) 清除所有的事件处理程序
trigger(eventType,[data]) 用户触发某类事件
triggerHandler() 用户触发某类事件,但不触发默认的事件处理逻辑
one(eventType,[data]) 只触发一次的事件
********************** 捕捉鼠标位置 **********************
$(function(){
$().mousemove(function(){
$('#name').html(e.pageX+','+e.pageY);
});
});
//捕捉鼠标相对于某个元素的位置
$(function(){
$("#btn").click(function(e){
var x=e.pageX-this.offsetLeft;
var y=e.pageY-this.offsetTop;
$('#name').html(x+','+y);
});
});
********************** 不缓存 **********************
hearder("Cache-Control:no-cache"); 使浏览器不生成Cache
********************** Ajax开发 **********************
load() 获取服务器数据 load("script.php")
post()
set()
$.ajax({
url:'document.xml', //制定目标URL为document.xml
type:'GET', //GET方式
dataType:'xml', //数据类型为XML
timeout:1000, //过期时间为1000ms
//当Ajax请求发生错误的时候定义了一个回调函数,显示一个提示框
error:function(){
alert('Error loading XML document')
},
//定义了成功接收响应时的行为
success:function(xml){
//do something with xml
}
});
********************** 动态效果 **********************
show() 动态显示隐藏的元素 show(speed,[callback])
hide() 隐藏对象
toogle() 一组元素中切换显示隐藏
slideDown() 通过调整高度来滑动显示被选元素
slideUp() 通过调整高度来滑动隐藏被选元素
slideToggle() 切换对象的展开收起效果
fadeIn() 实现淡入效果
fadeOut() 实现淡出效果
fadeTo() 将对象以一定速度跳帧到某个透明度 fadeTo(speed,opacity,callback)
fadeTo("fast",0.2)
注:speed(speed,Nember) 控制速度
callback(function) 在动画完成时执行的函数
animate(params,duration,easing,callback) 自定义动画
animate({opacity:1.0},3000) 控制时间内不透明
animate({left:'+=50px'},"slow");
stop() 停止正在运行的动画
<script type="text/javascript" src="jquery-1.5.2.min.js"></script>
<script type="text/javascript">
$(function(){ 代码..........});
</script>
注:结尾要“;”
********************** 基础 **********************
.end() 返回前一组找到的元素
.find() 在之前找到的元素中寻找元素
********************** 控制元素和属性 **********************
each 操作获得的所有元素 $("div").each(function(){})
attr 获得元素的某个属性 $("#name").attr("src")
操作元素的某个属性 $("#name").attr("src","myimg.jpg")
$("#name").attr({value:"ABCDEFG"})
写函数也行 $("#name").attr({*************})
html() 返回标记的innerHTML $("#name").html("<a>内容写进去或输出</a>")
text() 返回标记的文本 $("#name").text("内容写进去或输出")
index() 获取的元素是第几个 $(this).index()
eq() 获取第几个元素 $(this).eq("0")
********************** css修改 **********************
addClass 添加css样式 $("div").addClass("redborder")
removeClass 删除css样式 $("div").removeClass("redborder")
hasClass 判断是否采用某个样式 $("div").hasClass("redborder")
css 改变样式属性的值 $("div").css("border","2px dashed #000000")
css(name) 获得样式属性值 $("div").css("border")
css(properties) 大量修改样式 $("div").css ({color:"#000000",background:"blue"})
height 修改高度 $("div").height("200px")
获得高度 $("div").height()
width 同上
********************** 触发事件 **********************
(on)blur 失去焦点时
(on)chang 元素内容改变时
(on)click 鼠标单击时
(on)dblclick 鼠标双击时
(on)error 元素出现内部错误时
(on)focus 元素被点击或获得焦点时
(on)keydown 键盘按下时
(on)keypress 按下并放开键盘时
(on)onkeyup 放开键盘时
(on)onload 页面载入完成后
(on)mousedown 鼠标按下时
(on)mousemove 鼠标移动时
(on)mouseout 鼠标离开某元素时
(on)mouseover 鼠标掠过某元素时
(on)mouseup 放开鼠标键时
(on)resize 对象调整大小时
(on)scroll iframe卷起时
(on)select 文本在文本字段内被选中时调用,而不时在组合框被被选中时调用
(on)submit 当表当提交时触发
(on)load/unload 对象在页面加载/重载时发生
hover(fn1,.fn2) fn1=mouseover(),fn2=mouseout()
toggle(fn1,fn2,fn3...) 每当触发click事件时,会轮流切换执行函数。
bind(eventType,fn) 为事物绑定处理程序
unbind(eventType) 清除所有的事件处理程序
trigger(eventType,[data]) 用户触发某类事件
triggerHandler() 用户触发某类事件,但不触发默认的事件处理逻辑
one(eventType,[data]) 只触发一次的事件
********************** 捕捉鼠标位置 **********************
$(function(){
$().mousemove(function(){
$('#name').html(e.pageX+','+e.pageY);
});
});
//捕捉鼠标相对于某个元素的位置
$(function(){
$("#btn").click(function(e){
var x=e.pageX-this.offsetLeft;
var y=e.pageY-this.offsetTop;
$('#name').html(x+','+y);
});
});
********************** 不缓存 **********************
hearder("Cache-Control:no-cache"); 使浏览器不生成Cache
********************** Ajax开发 **********************
load() 获取服务器数据 load("script.php")
post()
set()
$.ajax({
url:'document.xml', //制定目标URL为document.xml
type:'GET', //GET方式
dataType:'xml', //数据类型为XML
timeout:1000, //过期时间为1000ms
//当Ajax请求发生错误的时候定义了一个回调函数,显示一个提示框
error:function(){
alert('Error loading XML document')
},
//定义了成功接收响应时的行为
success:function(xml){
//do something with xml
}
});
********************** 动态效果 **********************
show() 动态显示隐藏的元素 show(speed,[callback])
hide() 隐藏对象
toogle() 一组元素中切换显示隐藏
slideDown() 通过调整高度来滑动显示被选元素
slideUp() 通过调整高度来滑动隐藏被选元素
slideToggle() 切换对象的展开收起效果
fadeIn() 实现淡入效果
fadeOut() 实现淡出效果
fadeTo() 将对象以一定速度跳帧到某个透明度 fadeTo(speed,opacity,callback)
fadeTo("fast",0.2)
注:speed(speed,Nember) 控制速度
callback(function) 在动画完成时执行的函数
animate(params,duration,easing,callback) 自定义动画
animate({opacity:1.0},3000) 控制时间内不透明
animate({left:'+=50px'},"slow");
stop() 停止正在运行的动画