jQuery

最新推荐文章于 2023-07-07 14:28:52 发布

街头老大爷

最新推荐文章于 2023-07-07 14:28:52 发布

阅读量153

点赞数

本文链接：https://blog.csdn.net/weixin_39249630/article/details/79081411

版权

jQuery选择器

$(this) 选取当前元素
元素选择器：$("p").hide() - 隐藏所有段落
.class选择器： $("p .test").hide() - 隐藏所有 class="test" 的段落
id选择器： $("#test").hide() - 隐藏所有 id="test" 的元素

jQuery事件

$(document).ready()允许我们在文档完全加载完后执行函数。
click()是当按钮点击事件被触发时会调用一个函数。
dblclick()当双击元素时，会发生 dblclick 事件。
mouseenter()当鼠标指针穿过元素时，会发生 mouseenter 事件。
mouseleave()当鼠标指针离开元素时，会发生 mouseleave 事件。
mousedown() 当鼠标指针移动到元素上方，并按下鼠标按键时，会发生 mousedown 事件。
mouseup() 当在元素上松开鼠标按钮时，会发生 mouseup 事件。
hover()方法用于模拟光标悬停事件。当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)。
focus() 当元素获得焦点时，发生 focus 事件。当通过鼠标点击选中元素或通过 tab 键定位到元素时，该元素就会获得焦点
blur() 当元素失去焦点时，发生 blur 事件。

比较keypress、keydown与keyup ：

keydown：在键盘上按下某键时发生，一直按着则会不断触发（opera浏览器除外），它返回的是键盘代码。

keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效，换句话说，只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。

keyup：用户松开某一个按键时触发，与keydown相对，返回键盘代码。

jQuery效果

隐藏与显示：

hide()方法来隐藏 HTML 元素
show()方法来显示 HTML 元素
toggle() 方法来切换 hide() 和 show() 方法

淡入淡出：

fadeIn() 用于淡入已隐藏的元素，参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒。
fadeOut() 方法用于淡出可见元素
fadeToggle() 方法可以在 fadeIn() 与 fadeOut() 方法之间进行切换
jfadeTo() 方法允许渐变为给定的不透明度（值介于 0 与 1 之间）fadeTo(speed,opacity,callback)

上下滑动：

slideDown() 方法用于向下滑动元素
slideUp() 方法用于向上滑动元素
slideToggle() 方法可以在 slideDown() 与 slideUp() 方法之间进行切换

动画：

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

$(selector).animate({params},speed,callback);

- 必需的 params 参数定义形成动画的 CSS 属性
- 可选的 speed 参数规定效果的时长。它可以取以下值："slow"、"fast" 或毫秒
- 可选的 callback 参数是动画完成后所执行的函数名称

生成动画的过程中可同时使用多个属性

$("div").animate({

    left:'250px',

    opacity:'0.5',

    height:'150px',

    width:'150px'

});

也可以定义相对值（该值相对于元素的当前值）。需要在值的前面加上 += 或 -=

编写多个 animate() 调用，jQuery 会创建包含这些方法调用的"内部"队列。然后逐一运行这些 animate 调用。

动画停止：

stop() 方法用于停止动画或效果，在它们完成之前

stop() 方法适用于所有 jQuery 效果函数，包括滑动、淡入淡出和自定义动画

jQuery获取、设置、及回调函数

text() - 设置或返回所选元素的文本内容
html() - 设置或返回所选元素的内容（包括 HTML 标记）
val() - 设置或返回表单字段的值
attr() - 方法用于获取属性值也可以设置属性值，例：$("a").attr("href")。$("a").attr("href","//www.w3cschool.cn/jquery")

例：回调函数（origText为原来的文本内容）

$("#btn1").click(function(){

$("#test1").text(function(i,origText){

return "Old text: " + origText + " New text: Hello world!

(index: " + i + ")";

});

});