jQuery使用之（二）

最新推荐文章于 2024-02-21 23:35:16 发布

猫爷001

最新推荐文章于 2024-02-21 23:35:16 发布

阅读量193

点赞数

分类专栏： jQuery 文章标签： jQuery

本文链接：https://blog.csdn.net/maoye198602102339/article/details/83411043

版权

jQuery 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

jQuery事件

一，页面加载完成执行事件

语法1：$(document).ready(function(){ ..... });

语法2：$(function(){ ... });

与window.onload的区别：

（1）window.onload在页面中只能出现一个

（2）window.onload在页面全部加载完成时执行的，jQuery的加载完成事件是在dom数加载完毕时，就开始执行了

同时引用两个库的时候：

用以下办法声明是jQuery在执行$的工厂函数

jQuery(document).ready(function($){//表示的是jQuery的工厂函数})

二，事件绑定

语法：

$(" ").bind(" 事件名称 ",function(){ ... });

简写：

$(" ").事件名称(function(){ ... });

例如：

三，事件解绑

语法：

$(" ").unbind(" 事件名称 "); 解绑事件对应的所有函数

$(" ").unbind(" 事件名称 "，fn1); 解绑事件对应的fn1函数，其他函数还是可以执行

四，事件对象

事件的参数对象，可以用来获取鼠标点击的位置、键盘按下的键、事件源等

语法：

$(" ").bind(" 事件名称 ",function(event){ ... });

例如：

event.target 获取事件源，this也是事件源

event.pageX

event.pageY

注意：获取的事件源是DOM对象

事件冒泡的阻止 event.stopPropagation()

五，动画

基本显示

hide（speed，fn）隐藏函数，speed事件完成的事件毫秒，fn事件完成后的回调函数

show（speed，fn）显示函数，speed事件完成的事件毫秒，fn事件完成后的回调函数

slideUp（）

slideDown（）

fadeOut（）

fadeIn（）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        #div{
            width:200px;
            height:500px;
            background:red;
        }
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function () {
            $("#ipt2").hide();
            $("#ipt1").bind("click",function () {
               $("#div").hide(3000,function () {
                   $("#ipt1").hide();
                   $("#ipt2").show();
               });
            });
            $("#ipt2").bind("click",function () {
               $("#div").show(3000,function () {
                   $("#ipt2").hide();
                   $("#ipt1").show();
               });
            });
        });
    </script>

</head>
<body>
    <div id="div"></div>
    <input id="ipt1" value="hide" type="button">
    <input id="ipt2" value="show" type="button">
</body>

自定义动画

$(" ").animate（{}，speed，fn） {}需要的动作集合。speed完成时间。fn动画完成的回调函数

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        #div{width: 100px;height: 200px;background: red;position:absolute;left: 0;top: 80px;}
    </style>
    <script src="js/jquery.min.js"></script>
    <script>
        $(function () {
           $("input").bind("click",function () {
               $("#div").animate({width:"400px",height:"600px",left:"200px",top:"200px"},3000,function () {
                   alert("change big")
               }).animate({width:"200px",height:"300px",left:"160px",top:"50px"},3000,function () {
                   alert("change small")
               });
           });
        });
    </script>
</head>
<body>
    <div id="div"></div>
    <input type="button" value="click Me">
</body>
</html>

猫爷001

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
jQuery使用之（二）

jQuery事件一，页面加载完成执行事件语法1：$(document).ready(function(){ ..... });语法2：$(function(){ ... }); 与window.onload的区别：（1）window.onload在页面中只能出现一个（2）window.onload在页面全部加载完成时执行的，jQuery的加载完...
复制链接

扫一扫

专栏目录