【html隐藏段落代码】零基础学习HTML的JQ篇施工事件鼠标触发动画执行要素

事件的施工事件

Click会针对每个相符的元素触发click事件。

//单击页面上的所有段落将其隐藏。

$ ('p ')。click (function () {$ (this))。hide()；})；

当Mouseover鼠标指针位于元素上时，将发生mouseover事件。

//当鼠标指针位于元素上时更改元素的背景色。

$('p ')。mouseover(function(){

$ ('p ')。CSS(“background-color”，“yellow”)；

})；

当Mouseout鼠标指针移离元素时，将发生mouseout事件。

//将鼠标移离元素时更改元素的背景色

$('p ')。mouseout(function(){

$ ('p ')。CSS ('background-color '' # e 9 e 9 e 4 ')；

})；

Bind()为每个匹配元素的特定事件绑定事件处理程序。

//单击每个段落时弹出相应的文本。

$ ('p ')。bind ('click 'function () {

Alert( $(this))。text()；

})；

事件的合成事件

Hover()是一种模拟鼠标在对象上移动和移动鼠标的鼠标悬停事件的方法。这是为经常使用的任务提供“保留”状态的自定义方法。

$('“class”)。hover(

Function () {

$(this)。add class(' hover ')；

}，

Function () {

$(this)。remove class(' hover ')；

}

)；

事件的模拟事件

trigger()；从每个匹配的元素触发特定类型的事件。

//模拟客户提交表格

$ ('form : first ')。trigger(' submit ')；

//客户点击模拟

$('cla ')。trigger(' click ')；

//模拟元素获得焦点

$('#text ')。trigger(' focus ')；

使用表单

Val()获取或设置匹配元素的当前值。

//获取输入框user的值

$(' input[名称='user']')。val()；

//修改输入框user的值

$(' input[名称=' user']')。val(2323)；

修改Prop()，获取表单属性值

//获取属性值

$(' input[名称=' user']')。prop(' value ')；

//已禁用

$(' input[名称=' user']')。prop(“disabled”，true)；

//选择

$(' input[名称=' love']')。prop ('checked 'true)；

Jquery动画

Show()会显示隐藏的相符项目

//显示选取的元素

$('p ')。show()；

//缓慢显示选定的元素(slow、normal、fast或毫秒)

$('p ')。show(' slow ')；

//回调函数，效果完成后运行

$ ('p ')。show(' fast 'function () {

$(this)。text('show time！'))；

})；

Hide()会隐藏显示的元素

//隐藏选定的图元

$('p ')。hide()；

//慢慢隐藏选定的元素(slow、normal、fast或毫秒)

$('p ')。hide(' slow ')；

//回调函数，效果完成后运行

$ ('p ')。hide(' fast 'function () {

Alert($(this))。text()；

})；

FadeIn()会变更不透明度，直到出现为止

FadeOut()会变更不透明度，直到「消失」为止

SlideUp()会变更高度，直到隐藏为止

SlideDown()会变更高度，直到完全显示高度为止

Animate()用户动画

您可以根据需要自定义动画。

//同时运行

$('one ')。animate({

Width: '800px '

海特：' 500px '

FontSize: '20px '

BorderWidth:'10px '

}，1000)；

//顺序执行

$('one ')。animate({

宽：' 800 px '

}，3000)。animate({

海特：' 500px '

}，2000)。animate({

FontSize :'30px '

}，2000)；

Stop()清空队列并防止动画循环

$('one ')。hover (function () {$ (this))。stop()。animate ({width 3360' 300px') }，function(){

$ (this)。stop()。animate ({width :' 200 px 'height 3360' 200 px'}，1000)；

})；

其他动画：

Toggle()slidToggle()

FadeTo()fadeToggle()

综合应用于Jquery标签、表单验证、照片旋转等。