关于我们

质量为本、客户为根、勇于拼搏、务实创新

< 返回新闻公共列表

jQuery 事件

发布时间:2020-03-24 00:00:00

   事件注册

  • 单个事件注册

语法: $('div').click(function () { 处理的事情 })

$('div').click(function () {
   $(this).css('backgroundColor', 'red') });

$('div').mouseenter(function () {
    $(this).css('backgroundColor', 'black')  })

事件处理on 绑定事件

因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等,其中最好用的是: on()

  • 可以绑定1个或者多个事件
$('div').on({
    click: function () {
      pass},

    mouseenter: function () {
      pass }
 })
  • 如果处理的事件是相同的
$('div').on("mouseenter mouseleave", function () {
    $(this).toggleClass('current') })
  • on 实现事件委托(委派)
$('ul').on('click', 'li', function () {alert('111') })
  • on 可以动态给未来创建的元素添加事件
$('ol').on('click', 'li', function () {alert(222)
})var li = $('lo的li')
$('ol').prepend(li)
<meta name="viewport" content="width=device-width, initial-scale=1.0">Document我们都是好孩子我们都是好孩子我们都是好孩子我们都是好孩子我们都是好孩子function () {// 1. 单个事件$('div').click(function () {
                $(this).css('backgroundColor', 'red')
            });
            $('div').mouseenter(function () {
                $(this).css('backgroundColor', 'black')
            })

            $('div').on({
                click: function () {
                    pass
                },
                mouseenter: function () {
                    pass
                }
            })// 2. 事件处理, 可以绑定1个或者多个$('div').on({
                click: function () {
                    $(this).css('backgroundColor', 'red')
                },
                mouseenter: function () {
                    $(this).css('backgroundColor', 'blue')
                },
                mouseleave: function () {
                    $(this).css('width', '300px')
                }
            })// 2.1 如果处理程序相同$('div').on("mouseenter mouseleave", function () {
                $(this).toggleClass('current')
            })// 2.2 on可以实现事件委托(委派)$('ul').on('click', 'li', function () {alert('111')
            })// 2.3 on 可以给为来动态创建的的元素绑定事件$('ol').on('click', 'li', function () {alert(222)
            })var li = $('lo的li')
            $('ol').prepend(li)

        })" _ue_custom_node_="true">
示例代码
float: right;
        }

        ul li a {float: right;
        }" _ue_custom_node_="true">function () {
            $('.btn').on('click', function () {var li = $('')
                li.html($('.txt').val() + " 删除")
                $("ul").prepend(li);
                li.slideDown(); // 下滑$('.txt').val('')
            })

            $('ul').on('click', 'a', function () {
                $(this).parent().slideUp(function () {  // 上滑$(this).remove();
                });
            })

        })" _ue_custom_node_="true"><div class="box" id="weibo">微博发布<textarea name="" class="txt" cols="30" rows="10"><button class="btn">发布

案例-微博off 事件解除

  • 全部解除
 $('div').off()
  • 解除某一项事件
$('div').off('click')
  • 解除事件委托
$('ul').off('click', 'li')
  • 只运行一次事件
$('p').one('click', function () {
    console.log('one');

})
<meta name="viewport" content="width=device-width, initial-scale=1.0">Documentfunction () {
            $('div').on({
                click: function () {
                    console.log('click');
                },
                mouseover: function () {
                    console.log('mouseover');
                }
            })

            $('ul').on('click', 'li', function () {
                console.log('li');

            })// 1. off div身上的全部程序解绑$('div').off()// 1.1 off 解除某一项事件$('div').off('click')// 1.3 off 解除事件委托$('ul').off('click', 'li')// 2. one() 但是它只能触发事件一次$('p').one('click', function () {
                console.log('one');

            })


        })" _ue_custom_node_="true">我们都是好孩子我们都是好孩子我们都是好孩子我是屁
示例代码

自动触发事件

jQuery 为我们提供了两个自动触发事件 trigger() 和 triggerHandler() ;

  • 元素.事件()
$('div').click()
  • 元素.trigger("事件")
$('div').trigger('click')
  • 元素.triggerHandler("事件") 就是不会触发元素的默认行为
$("input").triggerHandler("focus");
<meta name="viewport" content="width=device-width, initial-scale=1.0">Documentfunction () {
            $('div').on('click', function () {alert(111)
            })// 自动触发事件// 1. 元素.事件()$('div').click()// 2. 元素.trigger("事件")// $('div').trigger('click')// $('input').trigger('focus')// 3. 元素.triggerHandler("事件") 就是不会触发元素的默认行为// $('div').triggerHandler('click')// $("input").on("focus", function () {//     $(this).val("你好吗");// });$("input").triggerHandler("focus");


        })" _ue_custom_node_="true">
示例代码

事件对象

语法:

e 就是事件对象

$('div').on('click', function (e) {
    pass
 )}
  • e.stopPropagation() // 阻止事件冒泡
  • e.preventDefault() // 阻止默认行为
<meta name="viewport" content="width=device-width, initial-scale=1.0">Documentfunction () {
            $(document).on('click', function () {
                console.log('点击了document');

            })

            $('div').on('click', function (e) {
                console.log('点击了DIV');// console.log(e);e.stopPropagation() // 阻止事件冒泡e.preventDefault() // 阻止默认行为})



        })" _ue_custom_node_="true">
示例代码

对象拷贝

$.extend([deep], target, obj1, [objN])

  • deep: true为深拷贝, false为浅拷贝
  • target: 要拷贝的目标对象
  • obj1: 待拷贝的第一个对象的对象
  • objN:待拷贝的第N对象的对象
  • 浅拷贝:拷贝的是内存引用,修改目标对象会影响被拷贝对象
  • 深拷贝:是完全克隆,不会影响被拷贝对象
<meta name="viewport" content="width=device-width, initial-scale=1.0">Documentfunction () {// 1// var targetObj = {};// var obj = {//     id: 1,//     name: "andy"// };// $.extend(targetObj, obj);// console.log(targetObj);// 2// var targetObj = {//     id: 0// };// var obj = {//     id: 1,//     name: "andy"// };// $.extend(targetObj, obj);// // 会覆盖targetObj 里面原来的数据// console.log(targetObj);// 3var targetObj = {
                id: 0,
                msg: {
                    sex: '男'
                }
            };var obj = {
                id: 1,name: "andy",
                msg: {
                    age: 18
                }
            };// 浅拷贝$.extend(targetObj, obj);
            console.log(targetObj);  // 会覆盖targetObj 里面原来的数据, 包括 msg 里面的数据  msg: {age: 20}targetObj.msg.age = 20;  // 浅拷贝添加 msg.age = 20console.log(targetObj);  // msg: {age: 20}console.log(obj);  // 被拷贝对象也会改变 msg: {age: 20}// 深拷贝$.extend(true, targetObj, obj);
            console.log(targetObj);  // 完全复制一份给目标对象 如果里面有不冲突的属性,会合并到一起 targetObj.msg.age = 20;
            console.log(targetObj); // msg :{sex: "男", age: 20}console.log(obj); // {age: 18}  被拷贝对象不变})" _ue_custom_node_="true">
示例代码

插件

懒加载

懒加载只需引入html 和 js操作 即可,此插件不涉及css。

  • 引入js
function(i, e) {
     		console.log("onLoadBackEnd:" + i);
   		},
   		onLoadBackStart: function(i, e) {
     		console.log("onLoadBackStart:" + i);
   		}
 	});" _ue_custom_node_="true">
  • 引入html
 


相关资料: https://github.com/1515806183/html-code/tree/master/jQuery-03


/template/Home/Zkeys/PC/Static