网页编程day-45：jQuery的事件和动画

作者: 开源oo柒 | 来源:发表于2019-09-28 22:46 被阅读0次

网页编程day-45：jQuery的事件和动画
jQuery知识整理
jquery实战
jQuery动画和事件
jQuery动画、循环、事件
前端笔记15
jQuery的动画和 jQuery的事件
jQuery的动画和 jQuery的事件
jQuery的动画和jQuery的事件
jQuery的动画和jQuery的事件

一、jQuery操作页面属性

append：向每个匹配的元素内部追加内容。
appendTo：把所有匹配的元素追加到另一个指定的元素元素集合中。

     //创建新的元素
    var p=$("<p><b>test6</b></p>")
    //增加子元素--->现有元素之后
    $("#div1").append(p);
    p.appendTo("#div1");

Prepend：向每个匹配的元素内部前置内容。
prependTo：把所有匹配的元素前置到另一个、指定的元素元素集合中。

 //创建新的元素
var p=$("<p><b>test6</b></p>")
//添加子元素--->现有元素之前
$("#div1").prepend(p);
p.prependTo("#div1");

Before: 在每个匹配的元素之前插入内容。
Afterd: 在每个匹配的元素之后插入内容。

 //创建新的元素
var p=$("<p><b>test6</b></p>")
//平 级的添加元素---现有元素之前
p.insertBefore("#div1");
$("#div1").before(p);
//平级添加元素--->现有元素之前
p.insertAfter("#div1");
$("#div1").after(p);

replaceAll(selector):用匹配的元素替换掉所有 selector匹配到的元素。
empty()：删除指定的子节点元素
remove([expr])：从DOM中删除所有匹配的元素。

 //创建新的元素
var p=$("<p><b>test6</b></p>")
//替换指定的节点元素
$("div p:nth-child(1)").replaceWith(p);
p.replaceAll("div p:nth-child(5)");
//删除指定的节点元素
$("#div1").remove();
$("div p:nth-child(3)").remove();
//清空内容
$("#div1").empty();//清空子元素
$("div p:nth-child(2)").empty();//清空文本内容

实例：jQuery操作元素节点的实例：实现添加和删除；

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            function insert(){
                
                var p=$('<p>'+
                '照片：<input type="file" name="" id="" value="" />'+
                '<input type="button" name="" id="" value="删除"  onclick="delete2(this)" />'+
                '</p>');
                $("#p2").before(p);
            }
            
            function delete2(obj){
                $(obj).parent().remove();
            }
        </script>
    </head>

    <body>
        <form action="" method="post">
            <p>
                用户名：
                <input type="text" name="" id="" value="" />
            </p>
            <p>
                照片：
                <input type="file" name="" id="" value="" />
                <input type="button" name="" id="" value="添加" onclick="insert()" />
            </p>
            <p id="p2">
                <input type="button" name="" id="" value="提交" />
                <input type="button" name="" id="" value="清空" />
            </p>

        </form>
    </body>

</html>

结果

二、jQuery中事件处理

ready(fn)：当DOM载入就绪可以查询及操纵时绑定一个要执行的函数。

$(document).ready(function(){
  // 在这里写你的代码...
});

click([[data],fn])：单击事件，触发每一个匹配元素的click事件。
dblclick([[data],fn])：双击事件，触发每一个匹配元素的dblclick事件。

                /****事件的基础绑定****/
                $("#inp1").click(function(){
                    {
                    alert("单机事件");
                }
                });
                $("#inp1").dblclick(function(){
                    alert("双击事件");
                });

blur([[data],fn])：失去焦点，触发每一个匹配元素的blur事件。
focus([[data],fn])：获取焦点，触发每一个匹配元素的focus事件。
change([[data],fn])：内容改变，触发每个匹配元素的change事件。

//失去焦点
$("p").blur( function () {
 alert("Hello World!");
 } );
//无法使用文本框
$("input[type=text]").focus(function(){
  this.blur();
});
$("input[type='text']").change( function() {
  // 这里可以写些验证代码
});

mousedown([[data],fn])：mousedown事件在鼠标在元素上点击后会触发。
mouseup([[data],fn])：mouseup事件会在鼠标点击对象释放时。
keyup([[data],fn])：keyup事件会在按键释放时触发。
keydown([[data],fn])：keydown事件会在键盘按下时触发。

//keyup事件会在按键释放时触发
$("input").keyup(function(){
  $("input").css("background-color","#D6D6FF");
});
//keydown事件会在键盘按下时触发。
$(window).keydown(function(event){
  switch(event.keyCode) {
    // 不同的按键可以做不同的事情
    // 不同的浏览器的keycode不同
  }
});

bind(type,[data],fn):为每个匹配元素的特定事件绑定事件处理函数。
one(type,[data],fn)：为每一个匹配元素的特定事件（像click）绑定一个一次性的事件处理函数。
trigger事件操作：在每一个匹配的元素上触发某类事件。
事件的解绑：

                /************bind事件绑定**********/
                $("#inp2").bind('click',function(){
                    alert("单机事件")
                })
                //支持json数据格式
                $("#inp2").bind({'click':function(){},'dbclick':function(){},'blur':function(){} });
                
                /*****one一次事件绑定******/
                $("#inp3").one('click',function(){
                    alert("一次事件绑定");
                })
                
                /********trigger事件操作**********/
                $("#inp4").click(function(){
                    $("#inp1").trigger('dblclick');
                    $("#inp3").trigger('click');
                })
                /********事件的解绑*******/
                $("#inp5").click(function(){
                    //事件的解绑
                    //解绑指定对象上的所有事件
                    $("#inp1").unbind();
                    //解绑指定的事件
                    $("#inp1").unbind("dblclick");
                })
                
                /*事件绑定*/
                $(".inp6").live('click',function(){
                    alert("单机事件绑定")
                })
                $("body").append('<input type="button" name="" id="" class="inp6" value="事件绑定2" />');

三、jQuery中的动画功能

show([speed,[easing],[fn]])：显示隐藏的匹配元素。
hide([speed,[easing],[fn]])：隐藏显示的元素。
toggle([speed],[easing],[fn])：如果元素是可见的，切换为隐藏的；如果元素是隐藏的，切换为可见的。
slideUp([speed,[easing],[fn]])：这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式隐藏起来。
slideDown([speed],[easing],[fn])：这个动画效果只调整元素的高度，可以使匹配的元素以“滑动”的方式显示出来。
fadeIn([speed],[easing],[fn])：通过不透明度的变化来实现所有匹配元素的淡入效果，并在动画完成后可选地触发一个回调函数。
fadeOut([speed],[easing],[fn])：通过不透明度的变化来实现所有匹配元素的淡出效果。

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <style type="text/css">
            #div1{
                height: 300px;
                background-color: red;
            }
            #div2{
                height: 300px;
                background-color: green;
                display: none;
            }
        </style>
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(function(){
                $("#but").click(function(){
                    //获取div对象
                    var div1=$("#div1");
                    var div2=$("#div2");
                    //隐藏动画
                    div1.hide(3000);
                    //显示动画
                    div1.show(3000);
                    //隐藏的显示----显示的隐藏
                    $("div").toggle(3000);
                    //向上滑动
                    div1.slideUp(3000);
                    //向下滑动
                    div1.slideDown(3000);
                    //滑动上--->滑动下   滑动下--->滑动上
                    $("div").slideToggle(3000);
                    //淡出
                    div1.fadeOut(3000);
                    //淡入
                    div2.fadeIn(3000);
                })
            })
        </script>
    </head>
    <body>
    <input type="button" name="but" id="but" value="动画按钮" />
    <hr />
        <div id="div1">
        </div>
        <div id="div2"> 
        </div>
    </body>
</html>

四、jQuery的封装原理

1.jQuery封装的原理：

1.js的全局代码区只有一个，这样就会造成同名变量的值会被覆盖；
2.使用对象封装，将代码封装到对象中，但是如果对象被覆盖，则全部失效，风险极高;
3.使用工厂模式，将代码进行封装，但是并没有解决问题;
4.将封装的函数名去除，避免覆盖，但是函数没有办法被调用;
5.匿名自调用，可以在页面加载的时候调用一次，但是不能重复调用，并且数据没有办法获取;
6.使用闭包，将数据一次性挂载到window对象下。

2.匿名函数的自调用：

            //无参数的匿名函数的执行
            (function(){
                alert("我是匿名函数");
            })();
            //有参数匿名函数的执行
            (function(aa,bb,cc){
                alert("有参匿名函数"+aa+"==="+bb+"---"+cc);
            })(1,2,3);
            
            (function(){
                var a=100;
                window.vv=a;//在运行的时候吧a 的值挂载到window对象上
                alert(a);
            })();
            function testB(){
                alert(window.vv);
                alert(vv);
            }

HTML代码：

<body>
        <h1>jQuery中的封装原理</h1>
        <h3>匿名函数的自调用</h3>
        <h4>闭包原理</h4>
        <input type="button" name="" id="" value="测试" onclick="testB()" />
    </body>

3.闭包的优点：

        function testA(){
                var a=10;
                function testC(){
                    var c=100;
                return c;
                }
                var z=testB();
                alert(z);
        }

1）可以减少全局变量的对象，防止全局变量过去庞大，导致难以维护；
2）防止可修改变量，因为内部的变量外部是无法访问的，并且也不可修改的；安全。
3）读取函数内部的变量，另一个就是让这些变量的值始终保持在内存中。

4.jQuery插件：
链接：jQuery插件库

五、jQuery的案例操作

1.HTML代码：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <title></title>
//              导入jQuery
        <script src="js/jquery-1.9.1.js" type="text/javascript" charset="utf-8"></script>
        <script src="js/books.js" type="text/javascript" charset="utf-8"></script>
    </head>

    <body>
        <h3>jQuery操作表格</h3>
        <hr />
        <input type="button" name="fx" id="fx" value="反选" />
        <input type="button" name="" id="addRow" value="新增一行" />
        <input type="button" name="" id="delRow" value="删除行" />
        <input type="button" name="" id="copyRow" value="复制行" />
        <table border="1px" cellspacing="3px" cellpadding="0" id="ta">
            <tr>
                <td width="50px">
                    <input type="checkbox" name="chks" id="chks" value="1" />
                </td>
                <td width="200px">书名</td>
                <td width="200px">作者</td>
                <td width="200px">数量</td>
                <td width="200px">操作</td>
            </tr>
            <tr id="">
                <td>
                    <input type="checkbox" name="chk" id="chk" value="2" />
                </td>
                <td>《java编程之道》</td>
                <td>wollo</td>
                <td>10</td>
                <td>
                    <input type="button" name="aa" id="aa" value="修改数量" onclick="change(this)" />
                    <input type="button" name="" id="" value="删除" onclick="del(this)" />
                </td>
            </tr>
            <tr id="">
                <td>
                    <input type="checkbox" name="chk" id="chk" value="3" />
                </td>
                <td>《python和我的故事》</td>
                <td>赵老师</td>
                <td>10</td>
                <td>
                    <input type="button" name="" id="" value="修改数量" onclick="change(this)" />
                    <input type="button" name="" id="" value="删除" onclick="del(this)" />
                </td>
            </tr>
            <tr id="">
                <td>
                    <input type="checkbox" name="chk" id="chk" value="4" />
                </td>
                <td>《web开发详解》</td>
                <td>张老师</td>
                <td>20</td>
                <td>
                    <input type="button" name="" id="" value="修改数量" onclick="change(this)" />
                    <input type="button" name="" id="" value="删除" onclick="del(this)" />
                </td>
            </tr>
        </table>
    </body>

</html>

html效果图

2.jQuery代码：实现新增行、反选、删除行、复制行

$(function() {
        //确定全选和全部选的操作
        $("#chks").click(function() {
                var flag = $(this).prop("checked");
                $("input[name=chk]").prop("checked", flag);
            })
            //判断是否全选
        $("input[name=chk]").click(function() {

                var flag = true;
                var chk = $("input[name=chk]");

                chk.each(function() {
                    if (!$(this).prop("checked")) {
                        flag = false;
                        return;
                    }
                })

                $("#chks").prop("checked", flag);
            })
            //反选操作
        $("#fx").click(function() {
                var chx = $("input[type=checkbox]");
                chx.each(function() {
                    //获得多选框的初始的状态
                    var flag = $(this).prop("checked");

                    $(this).prop("checked", !flag);
                })
            })
            //新添加一行
        $("#addRow").click(function() {
                //获得table对象
                var tab = $("#ta")
                tab.append('<tr id="">' +
                    '<td> <input type="checkbox" name="chk" id="chk" value="2" /></td>' +
                    '<td>《java编程之道》</td>' +
                    '<td>wollo</td>' +
                    '<td>10</td>' +
                    '<td>' +
                    '<input type="button" name="aa" id="aa" value="修改数量" onclick="change(this)" />&nbsp' +
                    '<input type="button" name="" id="" value="删除" onclick="del(this)" />' +
                    '</td>' +
                    '</tr>')
            })
            //删除多行的操作
        $("#delRow").click(function() {
                var del = $("input[name=chk]:checked")
                if (del.length == 0) {
                    alert("至少选择一行");
                } else {
                    //执行删除的操作
                    del.parent().parent().remove();
                }
            })
            //复制行
        $("#copyRow").click(function() {
            var copy = $("input[name=chk]:checked");
            if (copy.length == 0) {
                alert("至少选择一行")
            } else {
                //执行copy
                //复制
                var tr = copy.parent().parent().clone();
                //粘贴
                $("#ta").append(tr);
            }
        })

    })

3.实现修改数量、删除

//修改数量
function change(th) {
    //获得tr节点
    var par = $(th).parent().parent();
    par.children().eq(3).html("<input type='text' size='4px' onblur='bul(this)' />")
}
//失去焦点输入数据
function bul(th) {
    //获得tr节点
    var par = $(th).parent().parent();
    par.children().eq(3).html(th.value);
}
//删除操作
function del(th) {
    //获得tr节点
    var dt = $(th).parent().parent();
    dt.remove();
}

最终效果

网页编程day-45：jQuery的事件和动画
一、jQuery操作页面属性 append：向每个匹配的元素内部追加内容。 appendTo：把所有匹配的元素追加...
jQuery知识整理
jQuery jQuery和DOM关系 jquery框架对象分析加载事件事件绑定动画效果 jquery封装的...
jquery实战
jQuery属性操作 jQuery特殊效果 jQuery动画 jQuery循环 jQuery其他事件自定义事件
jQuery动画和事件
动画动画曲线：swing（默认值）开始和结束慢，中间快linear匀速可省略不写回调函数，动画完成之后要做的事...
jQuery动画、循环、事件
jQuery动画 jQuery循环元素绝对位置鼠标移入移出 jQuery事件自定义事件事件冒泡弹框-阻止冒泡
前端笔记15
jQuery特殊效果 jQuery动画 jQuery循环元素的绝对位置鼠标的移入和移出 input框事件 jQ...
jQuery的动画和 jQuery的事件
1. jquery链式调用 jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法...
jQuery的动画和 jQuery的事件
jquery链式调用 jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以连...
jQuery的动画和jQuery的事件
1.jquery链式调用jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可以...
jQuery的动画和jQuery的事件
1.jquery链式调用 jquery对象的方法会在执行完后返回这个jquery对象，所有jquery对象的方法可...

网页编程day-45：jQuery的事件和动画

一、jQuery操作页面属性

二、jQuery中事件处理

三、jQuery中的动画功能

四、jQuery的封装原理

五、jQuery的案例操作

相关文章

网页编程day-45：jQuery的事件和动画

jQuery知识整理

jquery实战

jQuery动画和事件

jQuery动画、循环、事件

前端笔记15

jQuery的动画和 jQuery的事件

jQuery的动画和 jQuery的事件

jQuery的动画和jQuery的事件

jQuery的动画和jQuery的事件

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读