//事件冒泡
? ? $(function () {
$('.grandfather').click(function () {
alert(3);
? ? ? ? })
$('.father').click(function () {//點擊son后事件會往上邊傳遞,如果父元素有點擊事件也會觸發(fā),一直往上傳
? ? ? ? ? ? alert(2);
? ? ? ? })
$('.son').click(function (event) {//
? ? ? ? ? ? alert(1);
? ? ? ? ? ? console.log(event);
? ? ? ? ? ? console.log('x軸坐標(biāo)'+event.clientX);
? ? ? ? ? ? //阻止冒泡
? ? ? ? ? ? event.stopPropagation();
? ? ? ? ? ? return false;//簡寫
? ? ? ? });
? ? ? ? //阻止右鍵菜單
? ? ? ? $(document).oncontextmenu(function (event) {
//阻止默認(rèn)行為
? ? ? ? ? ? event.preventDefault()
})
})
//阻止冒泡
? ? $(function () {
return false;
? ? })
//事件委托 對大量的子元素操作的時候用 一種代理模式
? ? $(function () {//只綁定一次事件通過冒泡的方式處理
? ? ? ? $('.list').delegate('li','click',function () {//第一個參數(shù)是選擇器,第二個是事件
? ? ? ? ? ? alert($(this).html());
? ? ? ? ? ? //取消委托
? ? ? ? ? ? $('.list').undelegate();
? ? ? ? })
})
//節(jié)點操作
? ? var $span = $('<span>元素</span>');
? ? $('#div1').append($span);//從后邊添加子元素
? ? $span.appendTo('#div1');//也是從后邊添加 同上
? ? $('#div1').prepend($span);//從前插入子元素
? ? $span.prependTo('#div1');
? ? $('#div1').before($span);//把span插入到div前邊
? ? $span.insertBefore('#div1')
after()//插入到后邊
? ? inserAfter()
remove()//刪除
</script>