事件注册
语法: $('div').click(function () { 处理的事情 })
$('div').click(function () { $(this).css('backgroundColor', 'red') }); $('div').mouseenter(function () { $(this).css('backgroundColor', 'black') })
事件处理on 绑定事件
因为普通注册事件方法的不足,jQuery又创建了多个新的事件绑定方法bind() / live() / delegate() / on()等,其中最好用的是: on()
$('div').on({ click: function () { pass}, mouseenter: function () { pass } })
$('div').on("mouseenter mouseleave", function () { $(this).toggleClass('current') })
$('ul').on('click', 'li', function () {alert('111') })
$('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()
$('div').trigger('click')
$("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 )}
<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])
<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。
function(i, e) { console.log("onLoadBackEnd:" + i); }, onLoadBackStart: function(i, e) { console.log("onLoadBackStart:" + i); } });" _ue_custom_node_="true">
相关资料: https://github.com/1515806183/html-code/tree/master/jQuery-03
Copyright © 2004-2024 Ynicp.com 版权所有 法律顾问:建纬(昆明)律师事务所 昆明市网翼通科技有限公司 滇ICP备08002592号-4