jQuery高级

一、鼠标事件

鼠标事件请参考我的博客https://blog.csdn.net/weixin_40612082/article/details/80471491此处不多做解释

二,阻止表单提交行为

在现实开发中,遇到表单提交或者账号注册类开发时,为了防止一些人恶意向我们服务器提交无效数据,我们就需要提前检测出数据是否有效,如果属于无效数据,就得阻止表单的向数据库提交信息,这样就可以防止无效信息对我们数据库造成的危害。

     $(function () {
                $('.form').submit(function () {
                    return false;
                })
            })

还有另外一种写法:

                $('.form').submit(function (event) {
                   event.preventDefault();
                })
            })

三、事件冒泡

关于事件冒泡请参考我的博客https://blog.csdn.net/weixin_40612082/article/details/80472145此处不多做解释

四、事件委托

1.什么是事件委托

事件委托的另一个名字叫做事件代理,事件委托就是利用事件冒泡的原理,只指定一个事件处理程序,就可以管理一类所有的事件。举一个例子来说明事件委托的意义。

取快递

有三个同事预计会在周一收到快递。为签收快递,有两种办法:一是三个人在公司门口等快递;二是委托给前台MM代为签收。现实当中,我们大都采用委托的方案(公司也不会容忍那么多员工站在门口就为了等快递)。前台MM收到快递后,她会判断收件人是谁,然后按照收件人的要求签收,甚至代为付款。这种方案还有一个优势,那就是即使公司里来了新员工(不管多少),前台MM也会在收到寄给新员工的快递后核实并代为签收。

这个例子里面有两层意思:
1.现在委托前台的同事是可以签收的,即程序中的现有的dom节点是有事件的;
2.新员工也是可以被前台mm代为签收的,即程序中新添加的dom节点也是有事件的;
总结来说,事件委托就是委托父类来处理一个或者多个子元素的事件,而且父类能定位到是哪个子元素触发的事件,只会给触发事件的子元素进行事件操作,而其他子元素则不会执行操作。而且对于新加入的子元素,父类会自动给新加入的子元素绑定实现设置好的事件,这样就极大的提高了处理事务的效率。

2.事件委托语法

$(selector).delegate(childSelector,event,function) 
```<br>
**childSelector:**必需参数,规定要添加事件处理程序的一个或多个子元素。<br>
**event:**必需参数,规定添加到元素的一个或多个事件,由空格分隔多个事件值。必须是有效的事件。<br>
**function:**   必需参数。规定当事件发生时运行的函数。<br>
**注意:由于事件委托也是基于事件冒泡原理的,在进行事件委托设计过程中,还是要考虑到事件冒泡的影响,及时的阻止事件冒泡**





<div class="se-preview-section-delimiter"></div>

## 无、节点操作 ##
一句话,节点就是标签!




<div class="se-preview-section-delimiter"></div>
        //在box内部添加
        //在box里面的后面添加一个标签
          $box.append($div2);
          $div2.appendTo($box);

        //在box里面的前面添加一个标签
          $box.prepend($div2);
          $div2.prependTo($box);

        //外部添加
        // 在box的外部的前面添加一个标签
         $box.before($div2);
         $div2.insertBefore($box);

        在box的外部的后面添加一个标签
        $box.after($div2);
        $div2.insertAfter($box);

       //remove()删除节点 删除标签
        $div2.remove();
        $box.remove();
        document.body.remove();

“`

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值