jquery 如何绑定事件?直接绑定和使用事件代理分别如何使用
```
使用 .on() 方法,这个方法能够直接绑定和代理事件。根据我们要实现的需求,我们需要使用代理事件来解决问题,也就是说我们把事件的绑定交给父级元素。
<div class="box" id="set" title="season">
<p class="set-c">春</p>
<p class="set-x">夏</p>
<p class="set-q">秋</p>
<p class="set-d">冬</p>
</div>
<div class="clone"> </div>
```
<!-- 绑定事件 -->
<script>
$('p').click(function(){
var str = $(this).text()
$('.clone').text(str)
})
</script>
<!-- 代理事件 -->
<script>
$('.box').on('click.hello', 'p', function(){
var str = $(this).text()
$('.clone').text(str)
})
</script>
```
//ps:两种方式内存消耗相差很多。明显第二种使用on的事件委托形式更优,如果项目中有类似的需求,还是择后者。并且后者还支持动态绑定。
实现如下效果
查看效果
要求
1. 点击创建时会创建3个产品
2. 点击编辑时,所有产品会展示遮罩,再次点击编辑遮罩会隐藏
3. 点击遮罩按钮时,会删除当前产品
注意的问题
1. [https://picsum.photos/200/200/?image=1](https://picsum.photos/200/200/?image=1 "null") 可以生成一个200x200的图片,如果想更改图片,设置参数 image 的值即可(<100)
2. 如果出现点击按钮页面刷新,需要对a 链接做绑定事件处理,比如`< a href="javascript:void(0)"></a>`或者使用阻止默认事件
http://jsbin.com/tupojarizu/edit?html,output
jQuery 如下函数如何使用?演示使用方式
* `.show()`
* `.hide()`
* `.slideUp`
* `.slideDown`
* `.slideToggle`
* `.fadeIn`
* `.fadeOut`
* `.animate`
<style>
.box {
position: relative;
}
.amt {
width: 50px;
height: 50px;
background-color: yellow;
position: absolute;
top: 0;
left: 0;
}
</style>
<div class="box">
<button class="btn">show</button>
<button class="btn">hide</button>
<button class="btn">slideUp</button>
<button class="btn">slideDown</button>
<button class="btn">slideToggle</button>
<button class="btn">fadeIn</button>
<button class="btn">fadeOut</button>
<button class="btn">animate</button>
<div class="amt"></div>
</div>
<script>
$('.btn').on('click', function(){
$('.amt').show();
// 用于显示元素,用法和hide类似
$('.amt').hide();
// 用于隐藏元素,没有参数的时候等同于直接设置display属性
$('.amt').slideUp('slow');
// 向上滑上去
$('.amt').slideDown('slow');
// 向下滑去
$('.amt').slideToggle('slow');
// 上下滑动切换
$('.amt').fadeIn('slow');
// 元素淡入
$('.amt').fadeOut('slow');
//元素淡出
$('.amt').animate({
opacity: 0.5,
left: '+=30',
height: 'toggle'
},1000,function(){
console.log("动画结束!")
})
})
//必须以定位为条件使用,是一个CSS属性和值的对象,动画将根据这组对象移动。
</script>
写篇博客,介绍动画队列(可选)
//www.greatytc.com/p/9df8cad415fb
ps:点击添加为什么,第2排会空2格
因为你苹果那个li图片加载完之后的高度要高一点,所以就有这样的现象了。
介绍一些函数的用法,给出范例
* $.ajax
* $.get
* $.getJSON
<script>
$.ajax({
url: 'http:://xx.com.php',
type: 'GET', //method: 'POST',1.9之前使用“type”
data: {
username: 'shanghang',
password: '123456',
},
dataType: 'json'
}).done(function(resule){
console.log(result);
}).fail(function(jqXHR,textStatus){
console.log(taxeStatus);
});
//jQuery.ajax( [settings ] )
$.get('http:api.jirengu.com/weather.php').done(function(ret){
console.log(ret)
})
//$.get直接获取
$.getJSON("data.php",$("#firstName.val()"),function(jsonData){
$("#getJSONResponse").html(jsonData.id);}
);
//无需设置,直接获取的数据类型为json,所以调用时需要使用jsonData.id方式
</script>