jquery 如何綁定事件？直接綁定和使用事件代理分別如何使用
使用.on( events [,selector ] [,data ], handler(eventObject) )，其中：
- events：一個(gè)或多個(gè)空格分隔的事件類型和可選的命名空間，或僅僅是命名空間，比如"click", "keydown.myPlugin", 或者 ".myPlugin"
- selector：一個(gè)選擇器字符串，用于過(guò)濾出被選中的元素中能觸發(fā)事件的后代元素。如果選擇器是 null 或者忽略了該選擇器，那么被選中的元素總是能觸發(fā)事件
- data：當(dāng)一個(gè)事件被觸發(fā)時(shí)，要傳遞給事件處理函數(shù)的event.data
- handler(eventObject)：事件被觸發(fā)時(shí)，執(zhí)行的函數(shù)。若該函數(shù)只是要執(zhí)行return false的話，那么該參數(shù)位置可以直接簡(jiǎn)寫(xiě)成 false
范例：
<!DOCTYPE html>
<html>
<head>
<script src="http://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)
})//對(duì)li標(biāo)簽綁定事件，當(dāng)點(diǎn)擊時(shí)在ID為wrap的對(duì)象內(nèi)返回被選元素的文本內(nèi)容
$('.box>ul>li').click(function(){
console.log(2)
var str = $(this).text()
$('#wrap').text(str)
})//對(duì)于click事件可直接寫(xiě)，等同于上一個(gè)寫(xiě)法
$('.box li').on('click.hello', function(){
console.log(3)
var str = $(this).text()
$('#wrap').text(str)
})//添加命名空間沒(méi)什么特別的作用，只不過(guò)在解綁事件時(shí)便于區(qū)分綁定的事件
$('#btn').on('click', function(){
var value = $('#ipt').val()
$('.box>ul').append('<li>'+value+'</li>')
})//用此方法新增的元素是沒(méi)綁定事件的
$('.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相同的作用
//綁定事件的時(shí)候我們也可以給事件附帶些數(shù)據(jù)，只不過(guò)這種用法很少見(jiàn)
$('.box').on('click', {name: 'hunger'}, function(e){
console.log(e.data)
})
</script>
</body>
</html>
實(shí)現(xiàn)如下效果
要求
- 點(diǎn)擊創(chuàng)建時(shí)會(huì)創(chuàng)建3個(gè)產(chǎn)品
- 點(diǎn)擊編輯時(shí)，所有產(chǎn)品會(huì)展示遮罩，再次點(diǎn)擊編輯遮罩會(huì)隱藏
- 點(diǎn)擊遮罩按鈕時(shí)，會(huì)刪除當(dāng)前產(chǎn)品
注意的問(wèn)題
- https://picsum.photos/200/200/?image=1 可以生成一個(gè)200x200的圖片，如果想更改圖片，設(shè)置參數(shù) image 的值即可(<100)
- 如果出現(xiàn)點(diǎn)擊按鈕頁(yè)面刷新，需要對(duì)a 鏈接做綁定事件處理，比如
< a href="javascript:void(0)"></a>或者使用阻止默認(rèn)事件
LINK; https://f0rl.github.io/webtask/projects/jQuery/event-jQuery
jQuery 如下函數(shù)如何使用？演示使用方式
http://js.jirengu.com/hofop/1/edit?css,js,output
介紹一些函數(shù)的用法，給出范例
$.ajax
$.ajax ({
url: 'http://xxx',//地址
type: 'GET', //發(fā)送方式
data: {
username: 'bob',
password: 'a123456'
},
dataType: 'json' //返回的數(shù)據(jù)類型
}).done(function(){
//數(shù)據(jù)請(qǐng)求成功后執(zhí)行的操作
}).fail(function(){
//數(shù)據(jù)請(qǐng)求失敗后執(zhí)行的操作
}).always(function(){
//無(wú)論成功與否所執(zhí)行的操作
})
這樣就發(fā)送了一個(gè)GET請(qǐng)求
還有一個(gè)更簡(jiǎn)單的發(fā)送GET請(qǐng)求的方式就是$.get
下面兩個(gè)方法專門(mén)用來(lái)處理get和post請(qǐng)求
$.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)
})
