abstrak：jq事件函數(shù)<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"
jq事件函數(shù)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件函數(shù)</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
</head>
<body>
<input type="text" name="">
<!-- blur() 當(dāng)元素失去焦點 -->
<!-- focus 獲得焦點 -->
<!-- change() 元素的值發(fā)生改變的時候 -->
<!-- dblclick 雙擊事件 -->
<!-- mouseover() 當(dāng)鼠標(biāo)指針位于元素上方時會發(fā)生mouseover事件
mouseenter() 當(dāng)鼠標(biāo)指針穿過元素時會發(fā)生mouseenter事件
mousemove() 當(dāng)鼠標(biāo)指針在指定的元素中移動時，就會發(fā)生該事件
mouseleave() 當(dāng)鼠標(biāo)指針離開元素時
mouseout() 當(dāng)鼠標(biāo)指針從元素上移開時
mousedown() 當(dāng)鼠標(biāo)指針移動到元素上方并按下鼠標(biāo)按鍵時
mouseup() 當(dāng)在元素上松開鼠標(biāo)按鍵時
resize() 當(dāng)調(diào)整當(dāng)前瀏覽器窗口大小時
pageX() 屬性是鼠標(biāo)指針的位置，相對于文檔的左邊緣 event.pageX event：必需 參數(shù)來自事件綁定函數(shù)。
pageY() 屬性是鼠標(biāo)指針的位置，相對于文檔的上邊緣 event.pageY event：必需 參數(shù)來自事件綁定函數(shù)。 -->
<!-- <div style="width:100px;height:100px;background:red; margin-top:20px;"></div>
<button>點擊</button> -->
<div>
當(dāng)前鼠標(biāo)的位置: <span> </span>
</div>
<div>
頁面被調(diào)整大小的次數(shù): <b> </b>
</div>
<script>
$(function () {
/* $('input').focus(function(){
$('input').css('background','green');
})
$('input').blur(function(){
$('input').css('background','red');
})
*/
/* $('input').change(function(){
$('input').css('background','pink');
}) */
/* $('button').click(function(){
$('div').css('background','yellow');
}) */
/* $('div').dblclick(function(){
$(this).css('background','green');
}) */
/* $(document).mousemove(function(e){
$('span').text('x: '+ e.pageX+'y: '+ e.pageY);
})
*/
a=0;
$(window).resize(function(){
// alert('窗口被調(diào)整大小');
$('b').text(a++);
})
})
</script>
</body>
</html>
jq事件切換
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件切換</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
div,p{
width: 200px;
height: 200px;
border: 1px solid #ccc;
}
</style>
</head>
<!-- 事件切換hover(over,out) -->
<body>
<div>我是內(nèi)容</div>
<p></p>
<button>點擊</button>
<script>
$(function(){
/* $('div').hover(
function(){
$(this).css('background','red');
},
function(){
$(this).css('color','#fff');
}
) */
// toggle() 如果元素可見的 ，就切換為隱藏,否則相反
$('button').click(function(){
$('p').toggle();
})
})
</script>
</body>
</html>
jq操作屬性的方法
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>操作屬性的方法</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
/* .box{
color: red;
}
.main{
font-size: 40px;
font-weight: bold;
} */
.bb{
color: red;
}
</style>
</head>
<body>
<!-- <p title="content">php中文網(wǎng)</p>
<img src="images/bg.gif" alt="">
<button>點擊刪除圖片</button>
<div class="one">你好</div>
<button>點擊</button> -->
<span>大家好 我是哈哈哈</span><br>
<b>歡迎來到</b>
<p>php中文網(wǎng)</p>
<button>點擊切換</button>
<input type="text" value="我是元素的值">
<script>
$(function () {
// 添加類 addClass
// $('p').addClass('box main');
//removeClass
// $('p').removeClass('box main');
//attr() 設(shè)置或讀取屬性值
// alert($('p').attr('title'));
// $('p').attr('title','你好');
// alert($('p').attr('title'));
// 移除屬性
/* $('button').click(function(){
$('img').removeAttr('src');
}); */
//檢查被選中的元素是否包含指定class
/* $('button').click(function(){
alert($('div').hasClass('one1'));
}); */
// toggleClass 添加或刪除類的切換操作
/*
$('button').click(function(){
$('span,b,p').toggleClass('bb');
});
*/
// text 返回或設(shè)置被選中的元素的文本內(nèi)容
/* $('span').text();
$('span').text('我是xgh'); */
// html返回或設(shè)置被選中的元素的內(nèi)容(類似innerHTML)
// alert($('p').html());
// $('p').html('<h1>hello world</h1>');
// val 返回或設(shè)置被選中元素的值
// alert($('input').val());
$('input').val('我是Input框');
})
</script>
</body>
</html>
jq顯示和隱藏
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>顯示和隱藏</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<!--
// hide() 隱藏顯示的元素
// 書寫格式：hide([speed][sesing] [fn])
// show() 顯示隱藏的元素
// 書寫格式：show([speed][sesing] [fn])
// speed:顯示過程的速度 速度是毫秒值
// sesing:指定切換的效果
// fn:動畫完成時執(zhí)行的一個函數(shù)
-->
<style>
div{
width: 200px;
height: 200px;
background: pink;
margin: 10px 0;
}
</style>
</head>
<body>
<button id="bt1">點擊隱藏</button>
<button id="bt2">點擊顯示</button>
<!-- <div></div> -->
<p>大家好</p>
<p>歡迎大家來到蕪湖</p>
<script>
$(function(){
$('button').click(function(){
$('p').hide(1000);
})
$('button').click(function(){
$('p').show(1500);
})
})
</script>
</body>
</html>
jq淡入淡出
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>淡入淡出</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
.box1{
height: 200px;
width: 200px;
background: red;
}
button{
height: 40px;
width: 200px;
border: none;
}
</style>
</head>
<body>
<button class="btu1">淡入</button>
<div class="box1"></div>
<script>
$(function(){
/* $('.box1').hide();
$('.btu1').click(function(){
$('.box1').fadeIn(1500);
})
$('.btu1').click(function(){
$('.box1').fadeOut(2000);
}) */
$('.btu1').click(function(){
$('.box1').fadeToggle(2000);
})
})
</script>
</body>
</html>
jq滑動
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery 滑動</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
</head>
<body>
<button>點擊</button>
<p>jq的滑動是通過高度的變化</p>
<p>jq的滑動是通過高度的變化</p>
<p>jq的滑動是通過高度的變化</p>
<!-- slideDown
slideUp
-->
<script>
$(function(){
/* $('p').hide();
$('button').click(function(){
$('p').slideDown(2000);
}) */
/* $('button').click(function(){
$('p').slideUp(2000);
}) */
$('button').click(function(){
$('p').slideToggle(3000);
})
})
</script>
</body>
</html>
jq自定義動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>自定義動畫</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
div{
width: 200px;
height: 200px;
background: red;
position: absolute;
}
</style>
</head>
<body>
<button class="btn1">點擊字體放大</button>
<p>jquery中我們使用 animate()方法創(chuàng)建自定義的動畫</p>
<button class="btn2">點擊移動div</button>
<div></div>
<script>
$(function(){
$('.btn1').click(function(){
$('p').animate({
fontSize:'40px'
})
})
$('.btn2').click(function(){
$('div').animate({
left:'toggle'
// opacity:'0.3',
// height:'400px',
// width:'400px'
// height:'toggle'
},1500)
})
})
</script>
</body>
</html>
jq自定義動畫-停止動畫
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>停止動畫</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
div{width: 200px;height: 200px;background: blue;position: absolute;color: #fff;}
</style>
</head>
<body>
<script>
$(function(){
$('#right').click(function(){
$('.box1').animate({left:'+500px'},3000);
$('.box1').animate({fontSize:'30px'},500);
})
$('#stop').click(function(){
$('.box1').stop(true);
})
})
</script>
<button id="right">右移</button>
<button id="stop">停止</button>
<div class="box1">php中文網(wǎng)</div>
</body>
</html>
jq獲取/改變css操作
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>獲取/改變css</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
</head>
<body>
<p>php中文網(wǎng)</p>
<div style="width:200px;height:200px;background:blue;"></div>
<script>
$(function(){
//改變單個css屬性
// $('body').css('background','green');
//改變多個css屬性
/* $('p').css({
'color':'green',
'font-size':'80px',
'font-weight':'bold'
}) */
//獲取單個CSS的屬性值
alert ($('div').css('background'));
})
</script>
</body>
</html>
下劃線跟隨導(dǎo)航
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>下劃線跟隨導(dǎo)航</title>
<script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.js"></script>
<style>
* {
margin: 0;
padding: 0;
}
.menu {
width: 500px;
height: 40px;
margin: 20px auto;
background: #af3434;
box-shadow: 0 0 5px #000;
border-radius: 3px;
position: relative;
}
ul {
height: 100%;
display: flex;
justify-content: space-around;
align-items: center;
position: relative;
z-index: 20;
cursor: pointer;
}
li {
/* background:green; */
list-style: none;
color: #fff;
font-weight: bold;
font-size: 14px;
}
</style>
</head>
<body>
<div class="menu">
<ul>
<li name="0">首頁</li>
<li name="1">php中文網(wǎng)</li>
<li name="2">獨孤九劍</li>
<li name="3">西門大官人</li>
<li name="4">滅絕師太</li>
</ul>
<div class="block" style="width: 80px;height: 2px; background: #fff;position: absolute;top: 37px;z-index: 10;">
</div>
</div>
<script>
$(function () {
$('li').hover(
function () {
$x=parseInt($(this).attr('name'))*100;
$('.block').stop().animate({left:$x+'px'},300);
},
function () {
$('.block').stop().animate({left:0},300);
}
)
})
</script>
</body>
</html>
Guru membetulkan：查無此人Masa pembetulan：2019-05-10 14:00:40
Rumusan guru：完成的不錯，學(xué)習(xí)了很多方法，要靈活使用。繼續(xù)加油。