jQuery教程(一)

2018-11-26 本文已影响0人 fran_cis_

jQuery 选择器

元素选择器
#id 选择器
.class 选择器

jQuery 事件

click() 是当按钮点击事件被触发时会调用一个函数
dbclick() 当双击元素时, 会发生dbclick事件
mouseenter() 当鼠标指针穿过元素时, 会发生mouseenter事件
mouseleave() 当鼠标指针离开元素时, 会发生mouseleave事件
mousedown() 当鼠标指针移动到元素上方, 并按下鼠标按键时, 会发生mousedown事件
mouseup() 当在元素上松开鼠标按钮时, 会发生mouseup事件
hover() 用于模拟光标悬停事件, 当鼠标移动到元素上时，会触发指定的第一个函数(mouseenter);当鼠标移出这个元素时，会触发指定的第二个函数(mouseleave)

$("#p1").hover(
    function(){
        alert("你进入了 p1!");
    },
    function(){
        alert("拜拜! 现在你离开了 p1!");
    }
);

focus() 当元素获得焦点时, 发生focus事件, 当通过鼠标点击元素或通过tab键定位到元素时, 该元素会获得焦点
blur() 当元素失去焦点时, 发生blur事件
keydown() 在键盘上按下某键时发生, 一直按着则会不断触发（opera浏览器除外）, 它返回的是键盘代码
keypress() 在键盘上按下一个按键，并产生一个字符时发生, 返回ASCII码。注意: shift、alt、ctrl等键按下并不会产生字符，所以监听无效 ,换句话说, 只有按下能在屏幕上输出字符的按键时keypress事件才会触发。若一直按着某按键则会不断触发
keyup() 用户松开某一个按键时触发, 与keydown相对, 返回键盘代码

// 只允许按下的字母键生效, 65~90是所有小写字母的键盘代码范围.
var validKeys = { start: 65, end: 90  };
$("#keys").keydown( validKeys, function(event){
    var keys = event.data;  //拿到validKeys对象.
    return event.which >= keys.start && event.which <= keys.end;
} );

jQuery 效果 - 隐藏/显示

hide(speed,callback) / show(speed,callback) 可选的speed参数规定隐藏/显示的速度, 可以取以下值:"fast"、"fast"或毫秒, 可选的callback参数是隐藏或显示完成后执行的函数名称

//第二个参数是一个字符串，表示过渡使用哪种缓动函数。（jQuery自身提供"linear" 和 "swing"，其他可以使用相关的插件）。
$(document).ready(function(){
  $(".hidebtn").click(function(){
    $("div").hide(1000,"linear",function(){
      alert("Hide() 方法已完成!");
    });
  });
});

toggle(speed,callback) 可以使用 toggle() 方法来切换 hide() 和 show() 方法

jQuery 效果 - 淡入淡出

fadeIn(speed,callback) 用于淡入++已隐藏++的元素

<head>
    <script>
    $(document).ready(function(){
      $("button").click(function(){
        $("#div1").fadeIn();
        $("#div2").fadeIn("slow");
        $("#div3").fadeIn(3000);
      });
    });
    </script>
</head>

<body>
    <p>以下实例演示了 fadeIn() 使用了不同参数的效果。</p>
    <button>点击淡入 div 元素。</button>
    <br><br>
    <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><br>
    <div id="div2" style="width:80px;height:80px;display:none;background-color:green;"></div><br>
    <div id="div3" style="width:80px;height:80px;display:none;background-color:blue;"></div>
</body>

fadeOut(speed, callback) 用于淡出可见元素
fadeToggle() 可以在fadeIN()与fadeOut()方法之间进行切换
fadeTo() 允许渐变为给定的不透明度(值介于0与1之间)

jQuery 效果 - 滑动

slideDown(speed,callback) 方法用于向下滑动元素

<head>
<script> 
$(document).ready(function(){
  $("#flip").click(function(){
    $("#panel").slideDown("slow");
  });
});
</script>
 
<style type="text/css"> 
    #panel,#flip
    {
        padding:5px;
        text-align:center;
        background-color:#e5eecc;
        border:solid 1px #c3c3c3;
    }
    #panel
    {
        padding:50px;
        display:none;
    }
</style>
</head>
<body>
<div id="flip">点我滑下面板</div>
<div id="panel">Hello world!</div>
</body>

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

jQuery 效果 - 动画

animate({params},speed,callback) 方法用于创建自定义动画, 必须的params参数定义形成动画的css属性

<script> 
$(document).ready(function(){
  $("button").click(function(){
    $("div").animate({left:'250px'});
  });
});
</script> 
</head>
 
<body>
    <button>开始动画</button>
    <p>默认情况下，所有的 HTML 元素有一个静态的位置，且是不可移动的。 
    如果需要改变为，我们需要将元素的 position 属性设置为 relative, fixed, 或 absolute!</p>
    <div style="background:#98bf21;height:100px;width:100px;position:absolute;">
    </div>
</body>

注意: 默认情况下，所有 HTML 元素都有一个静态位置，且无法移动。
如需对位置进行操作，要记得首先把元素的 CSS position 属性设置为 relative、fixed 或 absolute！

animate() - 操作多个属性

$("button").click(function(){
  $("div").animate({
    left:'250px',
    opacity:'0.5',
    height:'150px',
    width:'150px'
  });
});

可以用 animate() 方法来操作所有 CSS 属性吗？
是的，几乎可以！不过，需要记住一件重要的事情：当使用 animate() 时，必须使用 Camel 标记法书写所有的属性名，比如，必须使用 paddingLeft 而不是 padding-left，使用 marginRight 而不是 margin-right，等等。
同时，色彩动画并不包含在核心 jQuery 库中。
如果需要生成颜色动画，您需要从 jquery.com 下载颜色动画插件。

animate() - 使用相对值, 该值相对于元素的当前值, 需要在值的前面加上 += 或 -=

$("button").click(function(){
  $("div").animate({
    left:'250px',
    height:'+=150px',
    width:'+=150px'
  });
});

animate() - 使用预定义的值

$("button").click(function(){
  $("div").animate({
    height:'toggle'
  });
});

animate() - 使用队列功能

$("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");
});

$("button").click(function(){
  var div=$("div");
  div.animate({left:'100px'},"slow");
  div.animate({fontSize:'3em'},"slow");
});

jQuery 停止动画

stop(stopAll,goToEnd)

可选的 stopAll 参数规定是否应该清除动画队列。默认是false，即仅停止活动的动画，允许任何排入队列的动画向后执行。
可选的 goToEnd 参数规定是否立即完成当前动画。默认是 false。
因此，默认地，stop() 会清除在被选元素上指定的当前动画。

<!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>

jQuery callback方法

Callback 函数在当前动画 100% 完成之后执行。

jQuery - 链(Chaining)

通过jQuery, 可以把动作/方法链接在一起
Chaining允许我们在一条语句中运行多个jQuery方法(在相同的元素上)

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

jQuery教程(一)

jQuery 选择器

jQuery 事件

jQuery 效果 - 隐藏/显示

jQuery 效果 - 淡入淡出

jQuery 效果 - 滑动

jQuery 效果 - 动画

jQuery 停止动画

jQuery callback方法

jQuery - 链(Chaining)

猜你喜欢

热点阅读