jQuery事件和效果

、一、jQuery css() 方法

(1)、jQuery方法是什么

css() 方法设置或返回被选元素的一个或多个样式属性。

(2)、返回 CSS 属性

语法:css("propertyname")

(3)、设置CSS属性

语法:css("propertyname","value")

(4)、设置多个CSS属性(JSON对象)

语法:css({"propertyname":"value","propertyname":"value",...})

二、、jQuery css类

(1)、addClass()   向被选元素添加一个或多个类

 

(2)、removeClass()   从被选元素删除一个或多个类

(3)、toggleClaaa()  对被选元素进行添加/删除类的切换操作

(4)、eq()   返回带有被选元素的指定索引号的元素,索引号从 0 开头,所以第一个元素的索引号是 0(不是 1)

(5)、index()返回指定元素相对于其他指定元素的 index 位置

(6)、not()  返回指定元素之外的元素

三、jQuery动画

speed参数规定时长,可取以下值:"slow","fast"或毫秒

callback参数是效果执行完成后的函数,回调函数

opacity参数是将淡入淡出效果设置为给定的透明度(0~1之间)

params参数是定义行成动画的css属性

(1)    、jQuery隐藏显示  {hide()、show()、toggle()}

可以使用 hide() 隐藏和 show() 方法显示 HTML 元素。

可以使用 toggle() 方法来切换 hide() 和 show() 方法。

语法:  $(selector).hide(speed,callback)

    $(selector).show(speed,callback)

    $(selector).toggle(speed,callback)

(2)    、jQuery淡入淡出{fadeIn()、fadeOut()、fadeToggleI()、fadeTo()}

fadeIn() 用于淡入已隐藏的元素, fadeOut() 方法用于淡出可见元素。

fadeTo()方法允许渐变为给定不同的透明度

fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换

语法:$(selector).fadeIn(speed,callback)

    $(selector).fadeOut(speed,callback)

    $(selector).fadeToggle(speed,callback)

    $(selector).fadeTo(speed,opacity,callback)

(3)    、jQuery滑动{slideDown()、slideUp()、slideToggle()}

 slideDown() 方法用于向下滑动元素, slideUp() 方法用于向上滑动元素

 slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换

语法:  $(selector).slideDown(speed,callback)

    $(selector).slideUp(speed,callback)

    $(selector).slideToggle(speed,callback)

(4)    、jQuery自定义动画{animate()}

animate()用于创建自定义动画

语法:$(selector).animate({params},speed,callback)

(5)    、stop方法

语法:$(selector).stop(stopAll,goToEnd)

四、事件机制

(1)    、注册事件{on()、bind()}

bind() 、on() 方法向被选元素添加一个或多个事件处理程序,以及当事件发生时运行的函数。

语法:$(selector).on(event,childSelector,data,function)

$(selector).bind(event,data,function)

(2)    、委托事件{delegate}

delegate() 方法为指定的元素(属于被选元素的子元素)添加一个或多个事件处理程序,并规定当这些事件发生时运行的函数

语法:$(selector).on(childSelector,event,data,function)

(3)    、事件对象event

event对象有以下属性

type:事件类型,比如click。

which:触发该事件的鼠标按钮或键盘的键。

target:事件发生的初始对象。

data:传入事件对象的数据。

pageX:事件发生时,鼠标位置的水平坐标(相对于页面左上角)。

pageY:事件发生时,鼠标位置的垂直坐标(相对于页面左上角

(4)    、each()方法

each() 方法为每个匹配元素规定要运行的函数。

语法:$(selector).each(function(index,element))

jQuery事件和效果

上一篇:Error: Cannot find module 'Y:\@vue\cli-service\bin\vue-cli-service.js'


下一篇:css一些常用属性统计(行高、背景、轮廓、vertical、鼠标样式、防文本拖拽)