前端学习：JQuery（第二天）

mac2022-06-30 19

1、JQuery选择器

jQuery 中所有选择器都以美元符号开头： $ ()。第一天已经涉及了jQuery的基础语法：$ (selector).action()，其中$ (selector)就是选择器。它允许对HTML元素进行各种操作。主要包括：元素选择器、#id选择器和.class选择器。

以元素选择器为例

以下是菜鸟教程中列举的一些其他例子（均有实例）：【图片摘自菜鸟教程】

2、jQuery事件

$ (selector).action() 中action即为事件，包括【图片摘自菜鸟教程】

鼠标事件： click 单击 dbclick 双击 mouseenter 鼠标移到元素上方 mouseleave 鼠标离开元素 hover 等于mouseenter+mouseleave 即：$( selector ).hover( handlerIn, handlerOut )=$( selector ).mouseover( handlerIn ).mouseout( handlerOut ); 键盘事件： keypress：键被按下 keydown：键按下的过程 keyup：键被松开

keypress,keydown,keyup的区别:

1.keydown：在键盘上按下某键时发生,一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码; 2.keypress：在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发。 3.keyup：用户松开某一个按键时触发, 与keydown相对, 返回键盘代码.

3、jQuery效果

1）隐藏和显示：hide()，show()，toggle() hide+show 2）淡入淡出：fadeIn()， fadeOut()，fadeToggle()， fadeTo() 改变透明度 3）滑动：slideDown()，slideUp()， slideToggle() 4）动画：jQuery animate() 方法用于创建自定义动画。

动画功能比较灵活，支持队列

例如：

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("button").click(function(){ var div=$("div"); div.animate({height:'300px',opacity:'0.4'},"slow"); div.animate({width:'300px',opacity:'0.8'},"slow"); div.animate({height:'100px',opacity:'0.4'},"slow"); div.animate({width:'100px',opacity:'0.8'},"slow"); }); }); </script> </head> <body> <button>开始动画</button> <p></p> <div style="background:#98bf21;height:100px;width:100px;position:absolute;"> </div> </body> </html>

5）停止动画

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script> <script> $(document).ready(function(){ $("#start").click(function(){ $("div").animate({left:'100px'},5000); $("div").animate({fontSize:'3em'},5000); }); $("#stop").click(function(){ $("div").stop(); }); $("#stop2").click(function(){ $("div").stop(true); }); $("#stop3").click(function(){ $("div").stop(true,true); }); }); </script> </head> <body> <button id="start">开始</button> <button id="stop">停止</button> <button id="stop2">停止所有</button> <button id="stop3">停止动画，但完成动作</button> <p>点击 "开始" 按钮开始动画。</p> <p>点击 "停止" 按钮停止当前激活的动画，但之后我们能再动画队列中再次激活。</p> <p>点击 "停止所有" 按钮停止当前动画，并清除动画队列，所以元素的所有动画都会停止。</p> <p>点击 "停止动画，但完成动作" 快速完成动作，并停止它。</p> <div style="background:#98bf21;height:100px;width:200px;position:absolute;">HELLO</div> </body> </html>

6）链 jQuery允许将几个action通过.链接在一起，例如：

$("#p1").css("color","red").slideUp(2000).slideDown(2000);

【剩下jQuery对于HTML的一些操作将留在明天整理】

最新回复(0)