jQuery--第二节--事件
2017-05-03 本文已影响0人
LorenaLu
jQuery API 中文文档 ： http://jquery.cuishifeng.cn/
jQuery插件库 http://www.jq22.com/
1、事件
$(function () {
// 给按钮绑定事件
// 可以通过群组选择器选出多个元素，并且可以同时添加事件
// 可以同时给元素绑定多个事件，只需要在on()的第一个参数的位置添加事件类型，中间使用空格分隔，即可
// $('#btn1, #btn2').on('click mouseover mouseout', function (e) {
// // 使用on()方式绑定的事件的回调中，内部的this为触发该方法的原生DOM对象。
// // 如果需要使用，建议转为JQ元素，后续使用JQ方法
// var $this = $(this);
// // $this.html('button');
//
// // 每次函数被调用，都会产生一个事件对象，就是函数的参数e，并且JQ已经出了兼容的问题
// // 通过e.type就可以获取事件类型
// console.log(e.type);
// console.log(e);
// });
// 移除事件
// $('#btn1, #btn2').off('mouseover mouseout');
// 绑定一次事件
// $('#btn3').one('click', function () {
// console.log(this);
// });
// $('#btn1').on('click mouseover', function (e) {
// if (e.type == 'click') {
// console.log('click');
// } else if (e.type == 'mouseover') {
// console.log('mouseover');
// }
// });
// 如果给一个按钮绑定多个事情的时候，可以给on()方法传递一个对象，方法类型和对于的函数以键值对的方式传入
// $('#btn1').on({
// 'click': function () {
// console.log('click');
// },
// 'mouseover': function () {
// console.log('mouseover');
// }
// });
// 简化事件的绑定
$('#btn1').click(function () {
console.log('click');
});
$('#btn2').mouseout(function () {
console.log('dblclick');
});
$('select').change(function () {
console.log(this.value);
});
// 浏览器大小发生改变
$(window).resize(function () {
console.log('fads');
});
});
html:
<body>
<button id="btn1">按钮1</button>
<button id="btn2">按钮2</button>
<button id="btn3">按钮3</button>
<input type="text" name="" value="">
<select class="" name="">
<option value="iPhone">iPhone</option>
<option value="iPad">iPad</option>
</select>
</body>
<script src="../js/jquery-2.2.3.js" charset="utf-8"></script>
二、事件代理
// 获取所有li
// var lis = document.querySelectorAll('li');
//
// var click = function () {
// // 创建新li
// var newLi = document.createElement('li');
// newLi.innerHTML = this.innerHTML;
// newLi.onclick = click;
// // 拼接
// document.querySelector('ul').appendChild(newLi);
// };
//
// // 给所有li绑定事件
// for (var i = 0; i < lis.length; i++) {
// lis[i].onclick = click;
// }
// document.querySelector('ul').onclick = function (e) {
// if (e.target.tagName == 'LI') {
// var newLi = document.createElement('li');
// newLi.innerHTML = e.target.innerHTML;
// this.appendChild(newLi);
// }
// };
// 使用on()的方式可以快速的添加事件代理（委托）
// 把事件绑定到父元素上面，on()第一个参数为事件类型，第二个参数为实际触发的对象，第三个参数为回调函数
$('ul').on('click', 'li', function () {
// 先将this转为JQ元素，然后克隆，然后拼接到ul最后面
$(this).clone().appendTo('ul');
});
三、事件代理的使用场景
$(function () {
// 模拟网络请求，获取数据，并拼接到页面中
setTimeout(function () {
for (var i = 1; i <= 10; i++) {
$('<li>'+ i +'</li>').appendTo('#list');
}
}, 2000);
// 此时，由于数据可能还没有获取下拉，所以给aili绑不了事件
// $('li').on('click', function () {
// var text = $(this).html();
// alert(text);
// });
// 使用代理模式来解决数据暂时不存在的问题
$('#list').on('click', 'li', function (e) {
var text = $(this).html();
alert(text);
console.log(e);
});
$('a').on('click', function (e) {
e.preventDefault();
// e.stopPropagation();
console.log('a');
});
});
四、动画
hide();
show();
toggle();
slideUp()
slideDown()
slideToggle()
fadeOut()
fadeIn()
fadeTo()
fadeToggle()
// $('#btn').click(function () {
// 自定义动画
// $('.div1').animate({
// borderRadius: '0'
// }, 1000, function () {
//
// // 在animate()回调函数中去执行旋转的操作
// // 不能直接使用animate()方法了，因为这个不是支持所有的属性做动画
// // 可以使用css()方法去实现旋转等类似的效果，注意添加transition，才会有过渡效果
// $(this).css({
// 'transition': 'all 1s',
// 'transform': 'rotateZ(45deg)'
// });
// });
// 如果需要一些其它属性执行动画，而JQ没有提供，则可以使用animate()进行自行编写
// 第一个参数为对象，为CSS相关的一些设置
// 第二个参数为时间，单位毫秒
// 第三个参数是完成后的回调函数
// });
// $('.div1').animate({
// width: 1000,
// height: 100
// }, 3000, function () {
// console.log('done');
// }).delay(500).animate({
// borderRadius: '50%'
// }, 1000, function () {
// console.log('done2');
// });
$('.div1').animate({
borderRadius: '50%'
}, 1000).delay(1000).fadeOut();
$('#btn').click(function () {
// $('.div1').finish();
// $('.div1').stop();
});
// finish() 将动画快速完成
// stop() 将动画停止在当前位置
// delay() 动画添加延迟
});
五、ajax
$(function () {
// 使用JQ提供的ajax方法进行网络请求
// $.ajax({
// type: 'GET', // 声明请求类型 get
// url: 'http://h5.yztctech.net/api/axf/apihome.php', // 请求数据的地址
// data: { // 携带的参数
// a: 10,
// b: 20,
// c: 30
// },
// dataType: 'json', // 声明返回值类型
// success: function (data) { // 数据请求成功的回调
// console.log(data);
// },
// error: function (err) { // 失败的回调
// console.log(err);
// }
// });
// 如果是GET请求的数据，建议使用$.get(), 也是最常见的接口
// $.get('http://h5.yztctech.net/api/axf/apihome.php', function (data) {
// console.log(data);
// }, 'json');
// 如果是POST请求的数据，建议使用$.post()
// $.post('http://h5.yztctech.net/api/axf/apihome.php', function (data) {
// console.log(data);
// }, 'json');
// 如果是JSONP跨域数据，建议使用$.getJSON()
// $.getJSON('http://h5.yztctech.net/api/axf/apihome.php', function (data) {
// console.log(data);
// });
});
加载其它页面的结构到本页面的结构中
$(function () {
$('.footer').load('./footer.html');
});
六、插件
<body>
<h1>我是一级标题</h1>
<h2>我是二级标题</h2>
<h3>我是三级标题</h3>
<h4>我比他们小</h4>
</body>
<script src="../js/jquery-2.2.3.js" charset="utf-8"></script>
<script type="text/javascript">
$(function () {
// 给JQ元素添加一个方法,打印本身
$.fn.extend({
log: function () {
console.log(this);
return this;
},
addStyle: function () {
this.css({
color: 'yellow',
backgroundColor: '#333',
border: '3px solid blue'
});
return this;
}
});
$('h1').css({
color: 'yellow',
backgroundColor: '#333',
border: '3px solid blue'
});
$('h2').addStyle();
$('h4').addStyle();
// 使用 $.fn.extend() 可以给JQ元素添加方法啊，就是所谓的插件。
// 使用JQ选择器选出元素之后，可以直接调用log()方法，由于在log()方法内部返回了this，所以可以使用链式语法继续在后面编写代码
$('h3').log().css('backgroundColor', 'green');
$.extend({
sum: function (a, b) {
return a + b;
}
});
console.log($.sum(10, 20));
});
七、 使用插件机制添加slideLeft方法
$(function () {
$.fn.extend({
slideLeft: function (time, fn) {
var s = 0.5;
if (time) {
s = time / 1000;
}
this.css({
transition: 'all '+ s +'s linear',
width: 0
});
setTimeout(function () {
fn && fn()
}, time);
return this;
}
});
$('#btn').click(function () {
$('.div1').slideLeft(2222);
// $('.div1').slideUp(3000, function () {
// console.log('done');
// });
});
});
