FrontEnd-Basis-10th
周五，晴，记录生活分享点滴
参考博客1：
参考博客2：
jQuery 2
页面载入
当页面载入成功后再运行的函数事件 使用后可以在开头位置写入jq代码
$(document).ready(function(){
do something...
});
// 简写
$(function($) {
do something...
});
事件操作指令
$("p").click(); //单击事件
$("p").dblclick(); //双击事件
$("input[type=text]").focus() //元素获得焦点时,触发 focus 事件
$("input[type=text]").blur() //元素失去焦点时,触发 blur事件
$("button").mousedown()//当按下鼠标时触发事件
$("button").mouseup() //元素上放松鼠标按钮时触发事件
$("p").mousemove() //当鼠标指针在指定的元素中移动时触发事件
$("p").mouseover() //当鼠标指针位于元素上方时触发事件
$("p").mouseout() //当鼠标指针从元素上移开时触发事件
$(window).keydown() //当键盘或按钮被按下时触发事件
$(window).keypress() //当键盘或按钮被按下时触发事件,每输入一个字符都触发一次
$("input").keyup() //当按钮被松开时触发事件
$(window).scroll() //当用户滚动时触发事件
$(window).resize() //当调整浏览器窗口的大小时触发事件
$("input[type='text']").change() //当元素的值发生改变时触发事件
$("input").select() //当input 元素中的文本被选择时触发事件
$("form").submit() //当提交表单时触发事件
$(window).unload() //用户离开页面时
event object 对象
所有的事件函数都可以传入event参数方便处理事件
$("p").click(function(event){
alert(event.type); //"click"
});
?
(evnet object)属性方法：
event.pageX //事件发生时，鼠标距离网页左上角的水平距离
event.pageY //事件发生时，鼠标距离网页左上角的垂直距离
event.type //事件的类型
event.which //按下了哪一个键
event.data //在事件对象上绑定数据，然后传入事件处理函数
event.target //事件针对的网页元素
event.preventDefault() //阻止事件的默认行为(比如点击链接，会自动打开新页面)
event.stopPropagation() //停止事件向上层元素冒泡
实例 拖动面板
动画效果
基本
在动画完成后,可选地触发一个回调函数
$("p").show() //显示隐藏的匹配元素
$("p").show("slow"); //参数表示速度,("slow","normal","fast"),也可为900毫秒
$("p").hide() //隐藏显示的元素
$("p").toggle(); //切换 显示/隐藏
$("p").stop() //停止所有在指定元素上正在运行的动画
实例 显示与隐藏
hello
实例 回调函数
hello
淡入淡出
$("p").fadeIn("900"); //用900毫秒时间将段落淡入
$("p").fadeOut("900"); //用900毫秒时间将段落淡出
$("p").fadeToggle("900"); //用900毫秒时间将段落淡入,淡出
$("p").fadeTo("slow", 0.6); //用900毫秒时间将段落的透明度调整到0.6
实例 淡入淡出
Title
?
?
?
滑动
$("p").slideDown("900"); //用900毫秒时间将段落滑下
$("p").slideUp("900"); //用900毫秒时间将段落滑上
$("p").slideToggle("900"); //用900毫秒时间将段落滑上，滑下
实例 滑动
Title
?
出现
隐藏
toggle
?
helloworld
?
实例 京东轮播图
<
>
// 方式一 jQuery 可以简写成 $
jQuery.fn.extend({
hello:function(){
return $(this).text();
}
});
?
var index = $('.title').hello()
alert(index);
?
?
1111
2222
方式二
// 方式二
$.extend({
hello1 :function(arg){
var index = $(arg).text();
return index;
}
})
?
var index = $.hello1('.title')
alert(index)
?
?
1111
2222
实例
更多请查询：jQuery API 中文在线手册