常用jQuery操作
来源：互联网 发布：学意大利语的软件 编辑：程序博客网 时间：2024/06/16 03:06
一，jQuery 中的事件
1. 事件绑定
1)bind(type [, data] , fn)事件绑定
eg : $demo.bind("click",function(){});
第一个参数是事件类型
blur, focus, focusin, focusout, load, resize, scroll,
unload, click, dblclick, mousedown, mouseup,
mousemove, mouseover, mouseout, mouseenter, mouseleave,
change, select, submit, keydown, keypress,
keyup, error。
第二个参数： 作为event.data 属性值传递给事件对象的额外数据对象
第三个参数： 是用来绑定的处理函数
例如: e对象就是当前的事件对象,这个参数可写也可以不写
$("#btn").bind("click","gogo",function(e){
console.log(e.data);//gogo
});
注意:如果连着给一个按钮绑定俩次click事件的话,那么俩个都是会起作用的,哪个先绑定就先调用哪个,解绑的时候俩个绑定的click事件会被同时解绑
上面的例子也可以简写为:
$("#btn").click(function(){
//....
});
多个事件
同一处理函数可以通过用空格隔开一次性绑定：
$("div").bind("click mouseover",function(){
//....
});
不同事件处理使用不同的函数
$("div").bind({
click:function(){
},
mouseover:function(){
}
});
或者:
$("div").bind({
"click":function(){
},
"mouseover":function(){
}
});
注意:bind函数绑定事件后,并不会对后来动态添加上来的元素起作用
例如:
html：
<body>
<div id="dd">
<button>测试</button>
</div>
</body>
jquery代码:
var $btn = $("<button>新增按钮</button>");
$("button").bind({
click:function(){
console.log("click...");
},
mouseover:function(){
console.log("mouseover...");
}
});
$("button").after($btn);
结果:动态添加上了的新按钮的上面是没有click和mouseover这个俩个事件的,虽然它也符合绑定事件的时候选择元素的条件:$("button")
unbind([teype][, data]),如果没有参数，删除所有绑定的事件，如果提供了事件类型，只删除该事件类型的绑定事件(专门针对bind绑定的事件)
$("div").unbind();
$("div").unbind("click");
2)live(type, [data], fn)
用法上基本和bind是一样的.但是也有些不同之处,live改进了bind函数的一些缺点:
例如:
html代码:
<body>
<div id="dd">
<button>测试</button>
</div>
</body>
jquery代码:
$("button").live({
click:function(){
console.log("click...");
},
mouseover:function(){
console.log("mouseover...");
}
});
$("button").after($("<button>新增按钮1</button>"));
$("body").after($("<button>新增按钮2</button>"));
$("div").after($("<button>新增按钮3</button>"));
结果:虽然使用live绑定事件后，动态添加进来的元素只要符合选择器条件也会自动有click和mouseover,但是发现只要页面任何地方添加一个符合条件的元素那么就会被绑定上事件.
die(type, [fn])如果没有参数，删除所有绑定的事件，如果提供了事件类型，只删除该事件类型的绑定事件(专门针对live绑定的事件)
$("div").die();
$("div").die("click");
3)delegate(selector,[type],[data],fn)
用法上基本和bind以及live是一样的.但是也有些不同之处,delegate改进了live函数的一些缺点:
例如:
html代码:
<body>
<div id="dd">
<button>测试</button>
</div>
</body>
jquery代码:
$("#dd").delegate("button",{
click:function(){
console.log("click...");
},
mouseover:function(){
console.log("mouseover...");
}
});
$("button").after($("<button>新增按钮1</button>"));
$("body").after($("<button>新增按钮2</button>"));
$("#dd").after($("<button>新增按钮3</button>"));
结果:使用delegate绑定事件后，动态添加进来的元素只要符合选择器条件并且也是在#dd这个div所属范围内,那么这个元素也会自动有click和mouseover,相对来讲比live绑定提升了效率
注:live的范围是在document里面的元素符合条件后动态添加进来就会绑定事件,delegate则可以让我们指定在哪个范围内动态添加元素的才会被绑定事件
undelegate([selector,[type],fn])如果没有参数，删除所有绑定的事件，如果提供了事件类型，只删除该事件类型的绑定事件(专门针对delegate绑定的事件)
$("div").undelegate();
$("div").undelegate("click");
4)on(events[, data ], handler(eventObject))
融合了bind、live、delegate三种函数的特殊,是1.7版本之后新增的一个绑定事件函数,提供了一种统一绑定事件的方法(之前是前三种方法都在用,使用比较混乱)
events:事件类型
data:当一个事件被触发时，要传递给事件处理函数的event.data。
handler(eventObject):事件被触发时，执行的函数。
在选定的元素上绑定一个或多个事件处理函数。
$("p").on("click", function(){
alert( $(this).text() );
});
例如:
html代码:
<body>
<div id="dd">
<button>测试</button>
</div>
</body>
jquery代码:
//注意这里的代码和delegate函数的参数顺序是不一样的
$("#dd").on({
click:function(){
console.log("click...");
},
mouseover:function(){
console.log("mouseover...");
}
},"button");
$("button").after($("<button>新增按钮1</button>"));
$("body").after($("<button>新增按钮2</button>"));
$("#dd").after($("<button>新增按钮3</button>"));
结果是和上面delegate的结果一样的。
注意:on函数只有在指定了绑定事件的范围后,动态添加进来的元素才能也有事件的处理,否则on的效果和bind差不多。
off( events )
如果没有参数，删除所有绑定的事件，如果提供了事件类型，只删除该事件类型的绑定事件.(专门针对on绑定的事件)
$("p").off();
$("p").off("click");
5)one( events [, data ], handler(eventObject) )
给对象绑定一次数据处理,触发处理完之后就失效
$( "#btn" ).one( "click", function( event ) {
alert("hello");
});
2. 事件冒泡，事件会按照DOM的层次结构像水泡一样不断向上直至顶端
举例说明:
html代码:
<div>
<span>test</span>
</div>
jQuery代码:
$("div").on("click",function(){
alert("hello");
});
$("span").on("click",function(event){
alert("world");
});
这个时候点击span的时候会触发span的onclick事件,同时也会触发div的onclick事件,因为span在div里面,这种现象就叫做事件冒泡
可以调用事件对象的特定方法来组织事件冒泡: stopPropagation()
$("element").bind("click",function(event){
//event:事件对象，当点击“element”元素时，事件对象就被创建了，这个事件对象只有事件处理函数才能访问到，事件处理函数执行完毕后，事件对象就被销毁
event.stopPropagation(); //停止事件冒泡
})
2.1 对象的默认行为
默认行为:单击超链接会跳转，单击提交会提交表单
例如:
html代码:
<a href="test.html">点击超链接</a>
jquery代码:
$("a").on("click",function(event){
alert("大家好");
});
点击超链接后会触发onclick事件,然后执行绑定的函数,函数执行完接着就会进行超链接的跳转,因为这是点击超链接的默认行为。
如果我们想处理完绑定事件,然后阻止这个对象的接下来的默认行为的话,那么需要调用事件对象的指定方法来实现:preventDefault()
jquery代码:
$("a").on("click",function(event){
alert("大家好");
event.preventDefault();
});
特别注意:如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false即可
jquery代码:
$("a").on("click",function(event){
alert("大家好");
return false;//同时阻止事件冒泡和默认行为
});
事件对象(event)属性 ：jQuery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装
event.type 获取到事件的类型
event.target 获取到触发事件的元素(事件源)
event.pageX event.pageY 获取光标相对于页面的X坐标，Y坐标。
event.which 在鼠标单击事件中获取鼠标的左，中，右键。在键盘事件中获取键盘的按键
event.originalEvent 指向原始的事件对象
//和键盘相关的
event.keyCode 对于keyup和keydown事件返回被按下的键. 不区分大小写, a和A都返回65.
注意:对于keypress事件请使用which属性, 因为which属性跨浏览时依然可靠
keypress只能检测到键盘上的字母数字和部分符合键,但是字母的大小写可以分别检测到
keyup keydown可以检测到键盘上的所有的按键,但是字母的大小写不区分
event.ctrlKey 检查按键盘上面的键的时候是不是已经按着了ctrl键
event.shiftKey 同上
event.altKey 同上
3. 事件模拟
trigger(events)
模拟操作： 用户无需自己触发，代码通过模拟用户操作，触发事件
1，触发自定义事件
$("btn").on("myClick",function(){
//myClick是自定义事件
})
//只能靠这种方式来模拟触发这个自定义事件
$("btn").trigger("myClick");
2，trigger()模拟触发正常事件(浏览器自带的事件)
例如:
html代码:
<input type="text" id="my_input" />
<input type="button" value="提交数据" id="btn" />
jquery代码:
$("#my_input").on("keyup",function(e){
if(e.keyCode == 13 && e.ctrlKey == true){
$("#btn").trigger("click");
}
});
在输入框中按下Ctrl+回车的时候就会触发btn按钮的点击事件 然后就可以提交数据了
3，执行默认操作，trigger()方法触发事件后【不会】执行对象的默认行为
例如:
html:
<a href="">超链接</a>
jquery:
$("a").click(function(){
console.log("hello");
});
$("a").mouseover(function(){
$(this).trigger("click");
});
4. 表单事件
blur( handler(eventObject) )
一个元素失去焦点将触发blur事件
为 "blur" 事件绑定一个处理函数,是.bind('blur', handler) 的快捷方式，
例如:
$("#name").blur(function(){
console.log("test1....");
});
focus( handler(eventObject) )
触发元素上的 "blur" 事件,是.trigger('blur') 的快捷方式
例如:
$("#name").focus(function(){
console.log("test2....");
});
change( handler(eventObject) )
为JavaScript 的 "change" 事件绑定一个处理函数，
例如:
$("#city").change(function(){
console.log("....");
});
select( handler(eventObject) )
当用户在一个元素中进行文本选择时，这个元素上的select事件就会被触发.(比如复制文字之前需要先用鼠标选择文字)
此事件只能用在<input type="text"> 和<textarea>。
submit( handler(eventObject) )
当用户试图提交表单时，就会在这个表单元素上触发submit事件。
它只能绑定在<form>元素上。
5. 键盘事件(在上面的例子中已经测试过了)
keydown()
keypress()
keyup()
6. 鼠标事件
click() 鼠标左键单击
dblclick() 鼠标左键双击,双击的时候算触发俩次单击
focusin() 当元素或其任意子元素获得焦点时
focusout() 当元素或其任意子元素失去获得焦点时
注意和focus、blur事件的区别:
例如:
css样式:
div{
border: 1px solid red;
width: 300px;
height: 100px;
}
html代码:
<div>
<input type="text" name="username">
</div>
Jquery代码1:
$("div").focusin(function(){
console.log("获得焦点");
});
效果:只要div里面的任何一个子元素获得焦点都会除法focusin的事件
Jquery代码2:
$("div").focus(function(){
console.log("获得焦点");
});
效果:只有div这个元素获得焦点的时候,才会除法这个focus事件,但是div是不能获得用户输入的焦点的。除法我们使用trigger方法来模拟这个事件的触发。
hover(fn1,fn2) :
用来模拟光标悬停事件，当光标移动到元素上时，会触发第一个函数fn1，光标移出这个元素时会触发第二个函数fn2
$("div").hover(function(){
console.log("移入");
},function(){
console.log("移出");
});
mousedown() 鼠标点击事件 左中右 1 2 3
mouseup() 类似于keyup
mousemove() 鼠标移动事件(可以时刻获得当前鼠标的坐标位置)
mouseenter()
mouseleave()
mouseover()
mouseout()
mouseenter和mouseover的区别:(mouseleave和mouseout的区别类同)
css代码:
#div1{
border: 1px solid red;
width: 100px;
height: 100px;
}
#div2{
border: 1px solid green;
width: 40px;
height: 40px;
position: absolute;
top:30px;
left:30px;
}
html代码:
<div id="div1">
<div id="div2"></div>
</div>
jquery代码:
//分别使用mouseenter和mouseover来测试效果即可看出其区别
$("#div1").mouseenter(function(){
console.log("移入");
});
二，jQuery中的动画
1，基础
1)hide()
隐藏匹配的元素。 style="display:none"
hide( [duration ] [, complete ] )
duration 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
complete 在动画完成时执行的函数。
2)show()
显示匹配的元素(和hide的参数作用一致)
3)toggle( [duration ] [, complete ] )
toggle()默认是切换元素的显示和隐藏效果
$("#my_input").click(function(){
$("#div2").toggle();
});
也可以自定义转换的俩个或者多个函数:
//点击#my_input按钮后#div2就会在c1和c2俩个提前定义好的样式间转换
$("#my_input").toggle(function(){
$("#div2").attr("class","c1");
},function(){
$("#div2").attr("class","c2");
});
2，渐变
1)fadeIn( [duration ] [, complete ] )
通过淡入的方式显示匹配隐藏元素。
("slow","normal", or "fast")
2)fadeOut( [duration ] [, complete ] )
通过淡出的方式隐藏匹配显示元素。
3)fadeTo( duration, opacity [, complete ] )
opacity:0和1之间的数字表示目标元素的不透明度。
4)fadeToggle( [duration ] [, complete ] )
切换渐变效果
通过匹配的元素的不透明度动画，来显示或隐藏它们。
当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。
3，滑动
1)slideDown( [duration ] [, complete ] )
将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式。
2)slideUp( [duration ] [, complete ] )
向上滑动
3)slideToggle( [duration ] [, complete ] )
切换滑动效果
1. 事件绑定
1)bind(type [, data] , fn)事件绑定
eg : $demo.bind("click",function(){});
第一个参数是事件类型
blur, focus, focusin, focusout, load, resize, scroll,
unload, click, dblclick, mousedown, mouseup,
mousemove, mouseover, mouseout, mouseenter, mouseleave,
change, select, submit, keydown, keypress,
keyup, error。
第二个参数： 作为event.data 属性值传递给事件对象的额外数据对象
第三个参数： 是用来绑定的处理函数
例如: e对象就是当前的事件对象,这个参数可写也可以不写
$("#btn").bind("click","gogo",function(e){
console.log(e.data);//gogo
});
注意:如果连着给一个按钮绑定俩次click事件的话,那么俩个都是会起作用的,哪个先绑定就先调用哪个,解绑的时候俩个绑定的click事件会被同时解绑
上面的例子也可以简写为:
$("#btn").click(function(){
//....
});
多个事件
同一处理函数可以通过用空格隔开一次性绑定：
$("div").bind("click mouseover",function(){
//....
});
不同事件处理使用不同的函数
$("div").bind({
click:function(){
},
mouseover:function(){
}
});
或者:
$("div").bind({
"click":function(){
},
"mouseover":function(){
}
});
注意:bind函数绑定事件后,并不会对后来动态添加上来的元素起作用
例如:
html：
<body>
<div id="dd">
<button>测试</button>
</div>
</body>
jquery代码:
var $btn = $("<button>新增按钮</button>");
$("button").bind({
click:function(){
console.log("click...");
},
mouseover:function(){
console.log("mouseover...");
}
});
$("button").after($btn);
结果:动态添加上了的新按钮的上面是没有click和mouseover这个俩个事件的,虽然它也符合绑定事件的时候选择元素的条件:$("button")
unbind([teype][, data]),如果没有参数，删除所有绑定的事件，如果提供了事件类型，只删除该事件类型的绑定事件(专门针对bind绑定的事件)
$("div").unbind();
$("div").unbind("click");
2)live(type, [data], fn)
用法上基本和bind是一样的.但是也有些不同之处,live改进了bind函数的一些缺点:
例如:
html代码:
<body>
<div id="dd">
<button>测试</button>
</div>
</body>
jquery代码:
$("button").live({
click:function(){
console.log("click...");
},
mouseover:function(){
console.log("mouseover...");
}
});
$("button").after($("<button>新增按钮1</button>"));
$("body").after($("<button>新增按钮2</button>"));
$("div").after($("<button>新增按钮3</button>"));
结果:虽然使用live绑定事件后，动态添加进来的元素只要符合选择器条件也会自动有click和mouseover,但是发现只要页面任何地方添加一个符合条件的元素那么就会被绑定上事件.
die(type, [fn])如果没有参数，删除所有绑定的事件，如果提供了事件类型，只删除该事件类型的绑定事件(专门针对live绑定的事件)
$("div").die();
$("div").die("click");
3)delegate(selector,[type],[data],fn)
用法上基本和bind以及live是一样的.但是也有些不同之处,delegate改进了live函数的一些缺点:
例如:
html代码:
<body>
<div id="dd">
<button>测试</button>
</div>
</body>
jquery代码:
$("#dd").delegate("button",{
click:function(){
console.log("click...");
},
mouseover:function(){
console.log("mouseover...");
}
});
$("button").after($("<button>新增按钮1</button>"));
$("body").after($("<button>新增按钮2</button>"));
$("#dd").after($("<button>新增按钮3</button>"));
结果:使用delegate绑定事件后，动态添加进来的元素只要符合选择器条件并且也是在#dd这个div所属范围内,那么这个元素也会自动有click和mouseover,相对来讲比live绑定提升了效率
注:live的范围是在document里面的元素符合条件后动态添加进来就会绑定事件,delegate则可以让我们指定在哪个范围内动态添加元素的才会被绑定事件
undelegate([selector,[type],fn])如果没有参数，删除所有绑定的事件，如果提供了事件类型，只删除该事件类型的绑定事件(专门针对delegate绑定的事件)
$("div").undelegate();
$("div").undelegate("click");
4)on(events[, data ], handler(eventObject))
融合了bind、live、delegate三种函数的特殊,是1.7版本之后新增的一个绑定事件函数,提供了一种统一绑定事件的方法(之前是前三种方法都在用,使用比较混乱)
events:事件类型
data:当一个事件被触发时，要传递给事件处理函数的event.data。
handler(eventObject):事件被触发时，执行的函数。
在选定的元素上绑定一个或多个事件处理函数。
$("p").on("click", function(){
alert( $(this).text() );
});
例如:
html代码:
<body>
<div id="dd">
<button>测试</button>
</div>
</body>
jquery代码:
//注意这里的代码和delegate函数的参数顺序是不一样的
$("#dd").on({
click:function(){
console.log("click...");
},
mouseover:function(){
console.log("mouseover...");
}
},"button");
$("button").after($("<button>新增按钮1</button>"));
$("body").after($("<button>新增按钮2</button>"));
$("#dd").after($("<button>新增按钮3</button>"));
结果是和上面delegate的结果一样的。
注意:on函数只有在指定了绑定事件的范围后,动态添加进来的元素才能也有事件的处理,否则on的效果和bind差不多。
off( events )
如果没有参数，删除所有绑定的事件，如果提供了事件类型，只删除该事件类型的绑定事件.(专门针对on绑定的事件)
$("p").off();
$("p").off("click");
5)one( events [, data ], handler(eventObject) )
给对象绑定一次数据处理,触发处理完之后就失效
$( "#btn" ).one( "click", function( event ) {
alert("hello");
});
2. 事件冒泡，事件会按照DOM的层次结构像水泡一样不断向上直至顶端
举例说明:
html代码:
<div>
<span>test</span>
</div>
jQuery代码:
$("div").on("click",function(){
alert("hello");
});
$("span").on("click",function(event){
alert("world");
});
这个时候点击span的时候会触发span的onclick事件,同时也会触发div的onclick事件,因为span在div里面,这种现象就叫做事件冒泡
可以调用事件对象的特定方法来组织事件冒泡: stopPropagation()
$("element").bind("click",function(event){
//event:事件对象，当点击“element”元素时，事件对象就被创建了，这个事件对象只有事件处理函数才能访问到，事件处理函数执行完毕后，事件对象就被销毁
event.stopPropagation(); //停止事件冒泡
})
2.1 对象的默认行为
默认行为:单击超链接会跳转，单击提交会提交表单
例如:
html代码:
<a href="test.html">点击超链接</a>
jquery代码:
$("a").on("click",function(event){
alert("大家好");
});
点击超链接后会触发onclick事件,然后执行绑定的函数,函数执行完接着就会进行超链接的跳转,因为这是点击超链接的默认行为。
如果我们想处理完绑定事件,然后阻止这个对象的接下来的默认行为的话,那么需要调用事件对象的指定方法来实现:preventDefault()
jquery代码:
$("a").on("click",function(event){
alert("大家好");
event.preventDefault();
});
特别注意:如果想同时对事件对象停止冒泡和默认行为，可以在事件处理函数中返回false即可
jquery代码:
$("a").on("click",function(event){
alert("大家好");
return false;//同时阻止事件冒泡和默认行为
});
事件对象(event)属性 ：jQuery在遵循W3C规范的情况下，对事件对象的常用属性进行了封装
event.type 获取到事件的类型
event.target 获取到触发事件的元素(事件源)
event.pageX event.pageY 获取光标相对于页面的X坐标，Y坐标。
event.which 在鼠标单击事件中获取鼠标的左，中，右键。在键盘事件中获取键盘的按键
event.originalEvent 指向原始的事件对象
//和键盘相关的
event.keyCode 对于keyup和keydown事件返回被按下的键. 不区分大小写, a和A都返回65.
注意:对于keypress事件请使用which属性, 因为which属性跨浏览时依然可靠
keypress只能检测到键盘上的字母数字和部分符合键,但是字母的大小写可以分别检测到
keyup keydown可以检测到键盘上的所有的按键,但是字母的大小写不区分
event.ctrlKey 检查按键盘上面的键的时候是不是已经按着了ctrl键
event.shiftKey 同上
event.altKey 同上
3. 事件模拟
trigger(events)
模拟操作： 用户无需自己触发，代码通过模拟用户操作，触发事件
1，触发自定义事件
$("btn").on("myClick",function(){
//myClick是自定义事件
})
//只能靠这种方式来模拟触发这个自定义事件
$("btn").trigger("myClick");
2，trigger()模拟触发正常事件(浏览器自带的事件)
例如:
html代码:
<input type="text" id="my_input" />
<input type="button" value="提交数据" id="btn" />
jquery代码:
$("#my_input").on("keyup",function(e){
if(e.keyCode == 13 && e.ctrlKey == true){
$("#btn").trigger("click");
}
});
在输入框中按下Ctrl+回车的时候就会触发btn按钮的点击事件 然后就可以提交数据了
3，执行默认操作，trigger()方法触发事件后【不会】执行对象的默认行为
例如:
html:
<a href="">超链接</a>
jquery:
$("a").click(function(){
console.log("hello");
});
$("a").mouseover(function(){
$(this).trigger("click");
});
4. 表单事件
blur( handler(eventObject) )
一个元素失去焦点将触发blur事件
为 "blur" 事件绑定一个处理函数,是.bind('blur', handler) 的快捷方式，
例如:
$("#name").blur(function(){
console.log("test1....");
});
focus( handler(eventObject) )
触发元素上的 "blur" 事件,是.trigger('blur') 的快捷方式
例如:
$("#name").focus(function(){
console.log("test2....");
});
change( handler(eventObject) )
为JavaScript 的 "change" 事件绑定一个处理函数，
例如:
$("#city").change(function(){
console.log("....");
});
select( handler(eventObject) )
当用户在一个元素中进行文本选择时，这个元素上的select事件就会被触发.(比如复制文字之前需要先用鼠标选择文字)
此事件只能用在<input type="text"> 和<textarea>。
submit( handler(eventObject) )
当用户试图提交表单时，就会在这个表单元素上触发submit事件。
它只能绑定在<form>元素上。
5. 键盘事件(在上面的例子中已经测试过了)
keydown()
keypress()
keyup()
6. 鼠标事件
click() 鼠标左键单击
dblclick() 鼠标左键双击,双击的时候算触发俩次单击
focusin() 当元素或其任意子元素获得焦点时
focusout() 当元素或其任意子元素失去获得焦点时
注意和focus、blur事件的区别:
例如:
css样式:
div{
border: 1px solid red;
width: 300px;
height: 100px;
}
html代码:
<div>
<input type="text" name="username">
</div>
Jquery代码1:
$("div").focusin(function(){
console.log("获得焦点");
});
效果:只要div里面的任何一个子元素获得焦点都会除法focusin的事件
Jquery代码2:
$("div").focus(function(){
console.log("获得焦点");
});
效果:只有div这个元素获得焦点的时候,才会除法这个focus事件,但是div是不能获得用户输入的焦点的。除法我们使用trigger方法来模拟这个事件的触发。
hover(fn1,fn2) :
用来模拟光标悬停事件，当光标移动到元素上时，会触发第一个函数fn1，光标移出这个元素时会触发第二个函数fn2
$("div").hover(function(){
console.log("移入");
},function(){
console.log("移出");
});
mousedown() 鼠标点击事件 左中右 1 2 3
mouseup() 类似于keyup
mousemove() 鼠标移动事件(可以时刻获得当前鼠标的坐标位置)
mouseenter()
mouseleave()
mouseover()
mouseout()
mouseenter和mouseover的区别:(mouseleave和mouseout的区别类同)
css代码:
#div1{
border: 1px solid red;
width: 100px;
height: 100px;
}
#div2{
border: 1px solid green;
width: 40px;
height: 40px;
position: absolute;
top:30px;
left:30px;
}
html代码:
<div id="div1">
<div id="div2"></div>
</div>
jquery代码:
//分别使用mouseenter和mouseover来测试效果即可看出其区别
$("#div1").mouseenter(function(){
console.log("移入");
});
二，jQuery中的动画
1，基础
1)hide()
隐藏匹配的元素。 style="display:none"
hide( [duration ] [, complete ] )
duration 三种预定速度之一的字符串("slow","normal", or "fast")或表示动画时长的毫秒数值(如：1000)
complete 在动画完成时执行的函数。
2)show()
显示匹配的元素(和hide的参数作用一致)
3)toggle( [duration ] [, complete ] )
toggle()默认是切换元素的显示和隐藏效果
$("#my_input").click(function(){
$("#div2").toggle();
});
也可以自定义转换的俩个或者多个函数:
//点击#my_input按钮后#div2就会在c1和c2俩个提前定义好的样式间转换
$("#my_input").toggle(function(){
$("#div2").attr("class","c1");
},function(){
$("#div2").attr("class","c2");
});
2，渐变
1)fadeIn( [duration ] [, complete ] )
通过淡入的方式显示匹配隐藏元素。
("slow","normal", or "fast")
2)fadeOut( [duration ] [, complete ] )
通过淡出的方式隐藏匹配显示元素。
3)fadeTo( duration, opacity [, complete ] )
opacity:0和1之间的数字表示目标元素的不透明度。
4)fadeToggle( [duration ] [, complete ] )
切换渐变效果
通过匹配的元素的不透明度动画，来显示或隐藏它们。
当被可见元素调用时，元素不透明度一旦达到0，display样式属性设置为none ，所以元素不再影响页面的布局。
3，滑动
1)slideDown( [duration ] [, complete ] )
将给匹配元素的高度的动画，这会导致页面的下面部分滑下去，弥补了显示的方式。
2)slideUp( [duration ] [, complete ] )
向上滑动
3)slideToggle( [duration ] [, complete ] )
切换滑动效果
0 0
- jquery常用操作
- jquery常用操作
- jQuery表单常用操作
- jQuery表单常用操作
- jQuery常用操作
- jquery常用操作
- jquery 常用操作
- jQuery表单常用操作
- jQuery常用操作
- Jquery 常用操作
- jQuery常用操作
- jQuery 常用操作技巧
- jquery常用操作记录
- jQuery---- 常用操作
- jquery 常用操作
- jquery操作常用input
- jquery常用操作
- Jquery常用操作
- JZOJ8.17（C组）位图GZ3076
- 面向对象三大特征解析
- 如何在PHP中防止SQL注入？
- 优秀程序员：分享、创新、交流、实践
- Flex 那些坑
- 常用jQuery操作
- [推荐] ecshop后台 listTable.js修改 搜索页面中的下一页 无效
- Codeforces 702B. Powers of Two
- c语言编译过程（转）
- Activiti源码分析
- poj 3020 --最小路径覆盖
- HSL to RGB
- Java基础学习总结（55）——java8新特性:stream
- ubuntu 更新系统后不能启动桌面
