事件冒泡等

<!DOCTYPE html>

<head>

.grandfather{

width: 300px;

height: 300px;

background-color: green;

position: relative;

}

.father{

width: 200px;

height: 200px;

background-color: gold;

}

.son{

width: 100px;

height: 100px;

background-color: red;

position: absolute;

left: 0;

top: 400px;

}

</style>

$(function(){

$('body').click(function() {

alert(4);

});

$('.grandfather').click(function() {

alert(3);

});

$('.father').click(function() {

alert(2);

});

$('.son').click(function(event) {//event代表當(dāng)前事件

alert(1);

// console.log(event);//顯示很多屬性蔫骂，其中clientX方面、clientY就是點擊的坐標(biāo)

// alert("X軸坐標(biāo)：" + event.clientX);

// //阻止事件冒泡

// event.stopPropagation();

//合并阻止操作：把阻止冒泡和阻止默認(rèn)行為合并

return false;

});

//阻止右鍵菜單

$(document).contextmenu(function(event){

// //阻止默認(rèn)行為（原來右鍵能彈出菜單媒佣，阻止后無法彈出）

// event.preventDefault();

//合并阻止

return false;

})

</script>

</head>

<body>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>自定義事件</title>

</style>

$(function(){

//自定義事件只能用bind方式綁定，第一個參數(shù)是事件的名字管宵，第二個參數(shù)是事件發(fā)生時執(zhí)行的函數(shù)

$('#btn1').bind('hello', function(){

alert('hello');

})

$('#btn1').bind('click', function(){

alert('click');

})

$('#btn2').click(function() {

// trigger即可以觸發(fā)自定義事件，也可以觸發(fā)原始的事件

$('#btn1').trigger('hello');

$('#btn1').trigger('click');

});

//不一定點擊按鈕觸發(fā)，也可頁面加載時觸發(fā)，也可在滿足某種if條件時觸發(fā)

// $('#btn1').trigger('hello');

})

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>綁定事件bind</title>

</style>

$(function(){

// //只能綁定click事件巫糙，不能綁定其他的了

// $('#btn').click(function() {

// /* Act on the event */

// });

//bind方式可綁定多個事件

$('#btn').bind('click mouseover', function() {

alert('hello!');

//取消綁定事件

$(this).unbind('mouseover');

});

})

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>jQuery其他事件</title>

</style>

// //JS原生寫法

// window.onload = function(){

// }

// //jQuery寫法，等同于上面寫法

// $(window).load(function(){

// })

// //ready的寫法

// $(document).ready(function(){

// })

// //ready的簡寫

// $(function(){

// })

// 窗口改變尺寸的時候陨帆，會高頻觸發(fā)

$(window).resize(function() {

console.log('3');

});

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>input框事件</title>

</style>

$(function(){

// //一開始就獲取焦點曲秉，相當(dāng)于設(shè)置了autofocus自動獲取焦點了（HTML5 新增表單控件屬性）

// $('#txt01').focus();

// //文本框獲取焦點的時候（有光標(biāo)閃爍的時候）

// $('#txt01').focus(function() {

// alert('focus');

// });

// //失去焦點的時候（光標(biāo)離開的時候）

// $('#txt01').blur(function() {

// alert('blur');

// });

// //輸入框內(nèi)容發(fā)生變化的時候，失去焦點后觸發(fā)疲牵，可用于注冊時驗證用戶名是否已存在

// $('#txt01').change(function() {

// alert('change');

// });

//松開鍵盤按鍵就觸發(fā)

$('#txt01').keyup(function() {

alert('keyup');

});

})

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

.box{

width: 200px;

height: 200px;

background-color: gold;

margin: 100px auto 0;

}

.son{

width: 100px;

height: 100px;

background-color: green;

}

</style>

$(function(){

/*進入子元素也觸發(fā)*/

/*$('#div1').mouseover(function() {

$(this).animate({marginTop: 50});//.stop()

});

$('#div1').mouseout(function() {

$(this).animate({marginTop: 100});//.stop()

});*/

/*進入子元素不觸發(fā)*/

/*$('#div1').mouseenter(function() {

$(this).stop().animate({marginTop: 50});//

});

$('#div1').mouseleave(function() {

$(this).stop().animate({marginTop: 100});//

});*/

/*通過hover（mouseenter+mouseleave）實現(xiàn)簡寫*/

$('#div1').hover(function() {

$(this).stop().animate({marginTop: 50});

}, function() {

$(this).stop().animate({marginTop: 100});

});

})

</script>

</head>

<body>

</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>元素絕對位置</title>

.con{

width: 600px;

height: 600px;

margin: 50px auto 0;

}

.box{

width: 100px;

height: 100px;

background-color: gold;

margin-bottom: 10px;

}

.pos{

margin-left: 500px;

}

.pop{

width: 100px;

height: 100px;

background-color: red;

position: fixed;

left:0;

top: 0;

display: none;

}

</style>

$(function(){

var $pos = $('.pos');

//offset()是獲取相對于頁面左上角的絕對位置，即使外面再包一層con居中層榆鼠，也不影響效果

var pos = $pos.offset();

// console.log(pos);

// alert(pos.left + "," + pos.top);

var w = $pos.outerWidth();

var h = $pos.outerHeight();

// alert(w);

$('.pop').css({left:pos.left + w,top:pos.top});

$pos.mouseover(function() {

$('.pop').show();

});

$pos.mouseout(function() {

$('.pop').hide();

});

})

</script>

</head>

<body>

</div>

<div class="pop">提示信息纲爸！</div>

</body>

</html>

<!DOCTYPE html>

<head>

<title>jQuery循環(huán)</title>

</style>

$(function(){

// //給全部的li設(shè)置內(nèi)容和樣式

// $('.list li').html('111');

// $('.list li').css({background:'gold'});

//第一個參數(shù)index是索引值

$('.list li').each(function(index) {

// alert(index);//彈出索引值

//$(this)是每一個li

$(this).html(index);

});

})

</script>

</head>

<body>

</ul>

</body>

</html>

<!DOCTYPE html>

<head>

<title>jQuery動畫</title>

.box{

width: 100px;

height: 100px;

background-color: gold;

}

</style>

$(function(){

參數(shù)：

1、什么屬性做動畫妆够，屬性設(shè)置{param1: value1, param2: value2}

2识啦、動畫執(zhí)行的時間，單位毫秒

3神妹、動畫曲線：

swing（默認(rèn)值）開始和結(jié)束慢颓哮，中間快

linear勻速

可省略不寫

4、回調(diào)函數(shù)鸵荠，動畫完成之后要做的事情冕茅，可無限嵌套

注意：animate() 方法只有數(shù)字值可創(chuàng)建動畫（比如 "margin:30px"）。字符串值無法創(chuàng)建動畫（比如 "background-color:red"）

$('#div1').animate({

width: 200,

height: 200},

1000,

function(){

// alert('動畫完了蛹找！');

$(this).animate(

{marginLeft: 500},

1000,

function(){

$(this).animate(

{marginTop: 500},

1000

)

}

)

}

);

})

</script>

</head>

<body>

</body>

</html>

<!DOCTYPE html>

<head>

<title>jQuery特殊效果</title>

.box{

width: 200px;

height: 200px;

background-color: gold;

display: none;

}

</style>

$(function(){

$('#btn').click(function(){

// $('.box').fadeOut();//淡出

// $('.box').fadeIn();//淡入

// $('.box').fadeToggle();//切換淡入淡出

// $('.box').toggle();//切換顯示隱藏

$('.box').slideToggle();//切換上收和下展

})

</script>

</head>

<body>

</body>

</html>

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者

人面猴
序言：七十年代末姨伤，一起剝皮案震驚了整個濱河市，隨后出現(xiàn)的幾起案子庸疾，更是在濱河造成了極大的恐慌乍楚，老刑警劉巖，帶你破解...
沈念sama閱讀 222,627評論 6贊 517
死咒
序言：濱河連續(xù)發(fā)生了三起死亡事件届慈，死亡現(xiàn)場離奇詭異徒溪，居然都是意外死亡，警方通過查閱死者的電腦和手機金顿，發(fā)現(xiàn)死者居然都...
沈念sama閱讀 95,180評論 3贊 399
救了他兩次的神仙讓他今天三更去死
文/潘曉璐我一進店門臊泌，熙熙樓的掌柜王于貴愁眉苦臉地迎上來，“玉大人串绩，你說我怎么就攤上這事缺虐。” “怎么了礁凡？”我有些...
開封第一講書人閱讀 169,346評論 0贊 362
道士緝兇錄：失蹤的賣姜人
文/不壞的土叔我叫張陵高氮，是天一觀的道長慧妄。經(jīng)常有香客問我，道長剪芍，這世上最難降的妖魔是什么塞淹？我笑而不...
開封第一講書人閱讀 60,097評論 1贊 300
?港島之戀（遺憾婚禮）
正文為了忘掉前任，我火速辦了婚禮罪裹，結(jié)果婚禮上饱普，老公的妹妹穿的比我還像新娘。我一直安慰自己状共，他們只是感情好套耕，可當(dāng)我...
茶點故事閱讀 69,100評論 6贊 398
惡毒庶女頂嫁案：這布局不是一般人想出來的
文/花漫我一把揭開白布。她就那樣靜靜地躺著峡继，像睡著了一般冯袍。火紅的嫁衣襯著肌膚如雪。梳的紋絲不亂的頭發(fā)上碾牌，一...
開封第一講書人閱讀 52,696評論 1贊 312
城市分裂傳說
那天康愤，我揣著相機與錄音，去河邊找鬼舶吗。笑死征冷，一個胖子當(dāng)著我的面吹牛，可吹牛的內(nèi)容都是我干的誓琼。我是一名探鬼主播检激，決...
沈念sama閱讀 41,165評論 3贊 422
雙鴛鴦連環(huán)套：你想象不到人心有多黑
文/蒼蘭香墨我猛地睜開眼，長吁一口氣：“原來是場噩夢啊……” “哼踊赠！你這毒婦竟也來了呵扛？” 一聲冷哼從身側(cè)響起，我...
開封第一講書人閱讀 40,108評論 0贊 277
萬榮殺人案實錄
序言：老撾萬榮一對情侶失蹤筐带，失蹤者是張志新（化名）和其女友劉穎今穿，沒想到半個月后，有當(dāng)?shù)厝嗽跇淞掷锇l(fā)現(xiàn)了一具尸體伦籍，經(jīng)...
沈念sama閱讀 46,646評論 1贊 319
?護林員之死
正文獨居荒郊野嶺守林人離奇死亡蓝晒，尸身上長有42處帶血的膿包…… 初始之章·張勛以下內(nèi)容為張勛視角年9月15日...
茶點故事閱讀 38,709評論 3贊 342
?白月光啟示錄
正文我和宋清朗相戀三年，在試婚紗的時候發(fā)現(xiàn)自己被綠了帖鸦。大學(xué)時的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片芝薇。...
茶點故事閱讀 40,861評論 1贊 353
活死人
序言：一個原本活蹦亂跳的男人離奇死亡，死狀恐怖作儿，靈堂內(nèi)的尸體忽然破棺而出洛二，到底是詐尸還是另有隱情，我是刑警寧澤，帶...
沈念sama閱讀 36,527評論 5贊 351
?日本核電站爆炸內(nèi)幕
正文年R本政府宣布晾嘶，位于F島的核電站妓雾，受9級特大地震影響，放射性物質(zhì)發(fā)生泄漏垒迂。R本人自食惡果不足惜械姻，卻給世界環(huán)境...
茶點故事閱讀 42,196評論 3贊 336
男人毒藥：我在死后第九天來索命
文/蒙蒙一、第九天我趴在偏房一處隱蔽的房頂上張望机断。院中可真熱鬧楷拳，春花似錦、人聲如沸吏奸。這莊子的主人今日做“春日...
開封第一講書人閱讀 32,698評論 0贊 25
一樁弒父案，背后竟有這般陰謀
文/蒼蘭香墨我抬頭看了看天上的太陽苦丁。三九已至浸颓，卻和暖如春，著一層夾襖步出監(jiān)牢的瞬間旺拉，已是汗流浹背。一陣腳步聲響...
開封第一講書人閱讀 33,804評論 1贊 274
情欲美人皮
我被黑心中介騙來泰國打工棵磷，沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留蛾狗，地道東北人。一個月前我還...
沈念sama閱讀 49,287評論 3贊 379
代替公主和親
正文我出身青樓仪媒，卻偏偏與公主長得像沉桌，于是被迫代替她去往敵國和親。傳聞我的和親對象是個殘疾皇子算吩，可洞房花燭夜當(dāng)晚...
茶點故事閱讀 45,860評論 2贊 361

事件冒泡等

推薦閱讀更多精彩內(nèi)容