使用jq获取input中$(this).val()获取到on_九.JQ的方法

1.显示: show()

a.$(this).show()

b.$(this).show(time,function(){})

time:从隐藏到显示所需要的时间(单位为毫秒),默认为0

function(){}:回调方法

2.隐藏 :hide()

a.$(this).hide()

b.$(this).hide(time,function(){})

time:从显示到隐藏所需要的时间(单位为毫秒),默认为0

function(){}:回调方法

3.滑动效果隐藏/显示标签: slideToggle()

a.$(this).click(function(){$("div").slideToggle()})

4.隐藏/显示标签: toggle()

a.$(this).toggle(time,function(){})

b.$(this).toggle() // 不带参数时实现显示个隐藏之间切换

c.toggleClass(".class") // 添加和删除类之间的切换

time: 表示所需要的时间

function(){}: 回调方法

5.改变元素透明度: fadeOut()/fadeIn()/fadeToggle()

a.fadeOut() // 淡出

$(this).fadeOut()

$(this).fadeOut(tiem,function(){})

b.fadeIn() // 淡入

$(this).fadeIn()

$(this).fadeIn(tiem,function(){})

c.fadeToggle() // 淡入/淡出之间切换

$(this).fadeToggle()

$(this).fadeToggle(tiem,function(){})

d.$(this).fadeTo(time,opacity,function(){})

time: 表示所需要的时间

opacity: 表示透明度(0-1之间)

function(){}: 回调方法

6.动画形式展开和闭合元素: slideUp()/slideDown()

a.slideUp() // 展开

$(this).slideUp()

$(this).slideUp(time,function(){})

b.slideDown() // 闭合

$(this).slideDown()

$(this).slideDown(time,function(){})

time: 表示所需要的时间

function(){}: 回调方法

7.$(this).stop() // 停止动画

a.$(this).stop() // 不带参数时,停止当前正在执行的动画

b.$(this).stop(stopAll,goToEnd)

stopAll: 是否停止当前元素的所有动画(true,false),默认为false

goToEnd: 是否立即执行完当前动画(true,false),默认为false

8.$(this).one("click",function(){}) // 表示当前标签元素只执行一次"click"事件

9.自定义动画: animate({css},time,function(){})

css: 必选,定义动画形成后的css属性(每个属性用逗号分隔)

time: 可选,表示所需要的时间

function(){}: 回调方法

10.鼠标悬停

a.$(this).hover(function(){})

b.$(this).hover(function(){},function(){}) // 当hover有两个参数时,第一个参数为鼠标进入时触发,第二个参数为鼠标离开时触发

11.键盘事件

a.在input中按下:$("input").keydown(function(){})

b.在input中弹起:$("input").keyup(function(){})

c.在input中按下并弹起:$("input").keypress(function(){})

d.在input中按下指定键位操作

$("input").keydown(function(event){

alert(event.keyCode) // 弹出按下指定键的ASCII值

if(event.keyCode == 65){} // 判断是否按下大写字母A

})

e.在整个页面中所有键的按下/弹起/按下并弹起操作$(document).keydown/keyup/keypress(function(){})

12.改变窗口大小事件: $(window).resize(function(){})

13.在某个节点中添加内容: $(this).append("")

14.添加内容到某个节点中: $("").appendTo($(this))

15.添加绑定事件

a.$(this).bind("click",name = function(){}) // "click": 可以换成其他事件自定义事件 "name": 用来记录函数名

b.$(this).bind("click",data,name = function(event){alert(event.data)})

event: 为"Object"类

data: 第一个data表示为传入的数据,第二个data是event的属性

c.$(this).on()

"on()": 的语法大致和"bind()"一致,配合"off()"使用,由于"on()"简化了jQuery代码,所以"on()"为"bind()"新替代品

16.解除绑定事件

a.$(this).unbind("click",name) // "click": 可以换成其他事件自定义事件,name: 解除"click"绑定事件名为"name"

b.$(this).unbind("click dblclick") // 可以存放多个事件,用空格分隔

c.$(this).unbind() // 解除所有绑定事件

d.$(this).off()

"off()": 的语法大致和"unbind()"一致,配合"on()"使用,由于"off()"简化了jQuery代码,所以"off()"为"unbind()"新替代品

17.增加类：$(this).addClass("class") // 可以有多个,用空格分隔

18.删除类：$(this).removeClass("class") // 可以有多个,用空格分隔

19.鼠标点击事件：$(this).click(function(){})

20.鼠标双击事件：$(this).dblclick(function(){})

21.鼠标移过事件：$(this).mouseover(function(){})

22.鼠标移出事件：$(this).mouseout(function(){})

23.鼠标进入事件：$(this).mouseenter(function(){})

24.鼠标离开事件：$(this).mouseleave(function(){})

25.鼠标点击不放事件: $(this).mousedown(function(){})

26.鼠标点击释放事件: $(this).mouseup(function(){})

27.滚动条事件: $(window).scroll(function(){})

a.获取当前屏幕最高点至整个页面最高点的距离: $(window).scrollTop()

b.获取当前屏幕最左点至整个页面最左点的距离: $(window).scrollTop()

28.获取当前元素的大小

a.$(this).height() // 高度

$(this).height() // 不带参数时获取当前元素的高度

$(this).height(value) // 设置当前元素的高度为value大小

b.$(this).width() // 宽度

$(this).width() // 不带参数时获取当前元素的宽度

$(this).width(value) // 设置当前元素的宽度为value大小

29.获取当前标签在整个页面中的坐标

a.纵坐标: $(this).offset().top

b.横坐标: $(this).offset().left

30.获取鼠标当前的坐标

a.横坐标: event.pageX;

b.纵坐标: event.pageY;