jQuery 动画
2018-08-28 本文已影响0人
礼知白
jquery 如何绑定事件？直接绑定和使用事件代理分别如何使用
使用.on( events [,selector ] [,data ], handler(eventObject) )，其中：
- events：一个或多个空格分隔的事件类型和可选的命名空间，或仅仅是命名空间，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
- selector：一个选择器字符串，用于过滤出被选中的元素中能触发事件的后代元素。如果选择器是 null 或者忽略了该选择器，那么被选中的元素总是能触发事件
- data：当一个事件被触发时，要传递给事件处理函数的event.data
- handler(eventObject)：事件被触发时，执行的函数。若该函数只是要执行return false的话，那么该参数位置可以直接简写成 false
范例：
<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
<meta charset="utf-8">
<title>JS Bin</title>
</head>
<body>
<div class="box">
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
<li>4</li>
</ul>
</div>
<input id="ipt" type="text"> <button id="btn">添加</button>
<div id="wrap"></div>
<script>
$('.box li').on('click', function(){
console.log(1)
var str = $(this).text()
$('#wrap').text(str)
})//对li标签绑定事件，当点击时在ID为wrap的对象内返回被选元素的文本内容
$('.box>ul>li').click(function(){
console.log(2)
var str = $(this).text()
$('#wrap').text(str)
})//对于click事件可直接写，等同于上一个写法
$('.box li').on('click.hello', function(){
console.log(3)
var str = $(this).text()
$('#wrap').text(str)
})//添加命名空间没什么特别的作用，只不过在解绑事件时便于区分绑定的事件
$('#btn').on('click', function(){
var value = $('#ipt').val()
$('.box>ul').append('<li>'+value+'</li>')
})//用此方法新增的元素是没绑定事件的
$('.box ul').on('click', 'li', function(){
var str = $(this).text()
$('#wrap').text(str)
})//我们可以用事件代理，在父元素上绑定事件
document.querySelector('.box ul').addEventListener('click', function(e){
if(e.target.tagName.toLowerCase() === 'li'){
//do something
}
})//与原生js相同的作用
//绑定事件的时候我们也可以给事件附带些数据，只不过这种用法很少见
$('.box').on('click', {name: 'hunger'}, function(e){
console.log(e.data)
})
</script>
</body>
</html>
实现如下效果
要求
- 点击创建时会创建3个产品
- 点击编辑时，所有产品会展示遮罩，再次点击编辑遮罩会隐藏
- 点击遮罩按钮时，会删除当前产品
注意的问题
- https://picsum.photos/200/200/?image=1 可以生成一个200x200的图片，如果想更改图片，设置参数 image 的值即可(<100)
- 如果出现点击按钮页面刷新，需要对a 链接做绑定事件处理，比如
< a href="javascript:void(0)"></a>或者使用阻止默认事件
LINK; https://f0rl.github.io/webtask/projects/jQuery/event-jQuery
jQuery 如下函数如何使用？演示使用方式
http://js.jirengu.com/hofop/1/edit?css,js,output
介绍一些函数的用法，给出范例
$.ajax
$.ajax ({
url: 'http://xxx',//地址
type: 'GET', //发送方式
data: {
username: 'bob',
password: 'a123456'
},
dataType: 'json' //返回的数据类型
}).done(function(){
//数据请求成功后执行的操作
}).fail(function(){
//数据请求失败后执行的操作
}).always(function(){
//无论成功与否所执行的操作
})
这样就发送了一个GET请求
还有一个更简单的发送GET请求的方式就是$.get
下面两个方法专门用来处理get和post请求
$.ajax({
url: url,
data: data,
success: success,
dataType: dataType
});
$.ajax({
type: "POST",
url: url,
data: data,
success: success,
dataType: dataType
});
$.get
$.get('http://api.jirengu.com/weather.php').done(function(ret){
console.log(ret)
})
$.getJSON
$.getJSON('http://api.jirengu.com/weather.php',function(ret){
console.log(ret)
})
