事件冒泡等

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>事件冒泡</title>

<style type="text/css">

.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>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(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 class="grandfather">

<div class="father">

<div class="son"></div>

</div>

</div>

</body>

</html>



<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<style type="text/css">

</style>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(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>

<input type="button" value="按鈕" id="btn1">

<input type="button" value="按鈕2" id="btn2">

</body>

</html>



<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<style type="text/css">

</style>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(function(){

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

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

// /* Act on the event */

// });

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

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

alert('hello!');

//取消綁定事件

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

});

})

</script>

</head>

<body>

<input type="button" value="按鈕" id="btn">

</body>

</html>




<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<style type="text/css">

</style>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

// //JS原生寫法

// window.onload = function(){

// }

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

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

// })

// //ready的寫法

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

// })

// //ready的簡寫

// $(function(){

// })

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

$(window).resize(function() {

console.log('3');

});

</script>

</head>

<body>

<div id="div1"></div>

</body>

</html>



<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>input框事件</title>

<style type="text/css">

</style>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(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>

<input type="text" id="txt01">

</body>

</html>



<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>鼠標(biāo)移入移出</title>

<style type="text/css">

.box{

width: 200px;

height: 200px;

background-color: gold;

margin: 100px auto 0;

}

.son{

width: 100px;

height: 100px;

background-color: green;

}

</style>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(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 id="div1" class="box">

<div class="son"></div>

</div>

</body>

</html>



<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<style type="text/css">

.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>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(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 class="con">

<div class="box"></div>

<div class="box"></div>

<div class="box pos"></div>

<div class="box"></div>

</div>

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

</body>

</html>




<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<style type="text/css">

</style>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(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 class="list">

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

<li></li>

</ul>

</body>

</html>



<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>jQuery動畫</title>

<style type="text/css">

.box{

width: 100px;

height: 100px;

background-color: gold;

}

</style>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(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>

<div id="div1" class="box"></div>

</body>

</html>




<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

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

<style type="text/css">

.box{

width: 200px;

height: 200px;

background-color: gold;

display: none;

}

</style>

<script type="text/javascript" src="js/jquery-1.12.4.min.js"></script>

<script type="text/javascript">

$(function(){

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

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

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

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

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

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

})

})

</script>

</head>

<body>

<input type="button" name="" value="效果" id="btn">

<div class="box"></div>

</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
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼踊赠!你這毒婦竟也來了呵扛?” 一聲冷哼從身側(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
  • 正文 年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)容