摘要：<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><title>jQuery事件切換</title><!-- 引入線上jquery文件 --><script src="https://code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery事件切換</title>
<!-- 引入線上jquery文件 -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type='text/css'>
.c2{
color:blue;
}
.c2_2{
background-color:burlywood;
}
.div2{
width:200px;
height:100px;
line-height:100px;
text-align:center;
background-color:coral;
color:darkblue;
}
</style>
<script type='text/javascript'>
//文檔完全加載完成后執(zhí)行
$(document).ready(function(){
//改變單個css屬性 font-size 也可以使用駝峰寫法 fontSize
$('.c1').css('fontSize','30px');
//改變多個css樣式 用 屬性名和屬性值用 ' : ' 分開 多個屬性用 ' , ' 分開，最后一個屬性不需要加 ' , '
$('.c1').css({'color':'#f00','backgroundColor':'#ff0'});
//獲取單個css屬性值 這里返回的是rgb(255, 0, 0);
console.log($('.c1').css('color'));
// addClass() 添加一個或多個類樣式 樣式不需要加 ' . ' 多個樣式用空格區(qū)分開
$('span').addClass('c2 c2_2');
// removeClass() 移除一個或多個類樣式 樣式不需要加 ' . ' 多個樣式用空格區(qū)分開
$('span').removeClass('c2 c2_2');
// attr() 返回指定屬性的屬性值 這里返回的是 title_test
console.log($('span').attr('title'));
// 修改指定屬性的屬性值 修改過后返回的是 test
$('span').attr('title','test');
console.log($('span').attr('title'));
// removeAttr() 移除指定屬性
$('#but1').click(function(){
$('img').removeAttr('src');
});
// hasClass() 樣式不需要加 ' . ' 檢測指定樣式是否存在(布爾值) 這里返回的是 false
console.log($('.div1').hasClass('c1'));
// toggleClass 添加或移除類的切換操作
$('#but2').click(function(){
$('.div1').toggleClass('c2');
});
// text() 返回或設(shè)置文本內(nèi)容 這里返回的是 php中文網(wǎng)
console.log($('.div1').text());
// 修改內(nèi)容 修改過后的內(nèi)容是 學(xué)習(xí)中
$('.div1').text('學(xué)習(xí)中');
console.log($('.div1').text());
// html() 返回或設(shè)置元素內(nèi)容 這里返回的是 php中文網(wǎng)
console.log($('span').html());
//修改添加標(biāo)簽內(nèi)容 這個可以解析標(biāo)簽 php變成斜體 中文網(wǎng)變成粗體
$('span').html('<i>php</i><strong>中文網(wǎng)</strong>')
// val() 返回或這只元素的值 一般為input 這里返回的是 username
console.log($('#ipt1').val());
// 修改val的值 修改過后的內(nèi)容是 name
$('#ipt1').val('name');
console.log($('#ipt1').val());
// blur() 失去焦點后觸發(fā)事件
$('#ipt2').blur(function(){
$(this).css('backgroundColor','#f00');
});
// focus() 獲得焦點后觸發(fā)事件
$('#ipt2').focus(function(){
$(this).css('backgroundColor','#ff0');
});
// change() 值發(fā)生改變后觸發(fā)事件
$('#ipt3').change(function(){
$(this).css('backgroundColor','#f0f');
});
// click() 點擊后觸發(fā)事件
$("#but3").click(function(){
$(this).css({'width':'100px','height':'40px'});
});
// dblclick() 雙擊后觸發(fā)事件
$("#but3").dblclick(function(){
$(this).css({'width':'150px','height':'40px'});
});
// mouseover() 位于元素上方的時候觸發(fā)事件
// 不論鼠標(biāo)指針穿過被選元素或其子元素，都會觸發(fā) mouseover 事件
$('.div2').mouseover(function(){
$(this).html('位于元素上方');
});
// mouseenter() 穿過元素的時候觸發(fā)事件
// 只有在鼠標(biāo)指針穿過被選元素時，才會觸發(fā) mouseenter 事件
$('.div2').mouseenter(function(){
$(this).css('fontSize','25px');
});
// mousemove() 移動到元素時觸發(fā)事件
$('.div2').mousemove(function(){
$(this).css({'color':'#ff0','backgroundColor':'#000'});
});
// mouseleave() 離開元素時觸發(fā)事件
// 只有在鼠標(biāo)指針離開被選元素時，才會觸發(fā) mouseleave 事件
$('.div2').mouseleave(function(){
$(this).css('color','darkblue');
});
// mouseout() 離開元素時觸發(fā)事件
// 不論鼠標(biāo)指針離開被選元素還是任何子元素，都會觸發(fā) mouseout 事件
$('.div2').mouseout(function(){
$(this).css('backgroundColor','coral');
});
// mousedown() 元素上方并按下鼠標(biāo)
$('.div2').mousedown(function(){
$(this).html('按下');
});
// mouseup() 元素上方并松開鼠標(biāo)
$('.div2').mouseup(function(){
$(this).html('松開');
});
// resize() 調(diào)整當(dāng)前瀏覽器窗口大小時觸發(fā)
var num = 0;
$(window).resize(function(){
num++;
$('.num').text('窗口調(diào)整的次數(shù)是： ' + num);
});
$(document).mousemove(function(event){
// event參數(shù)是必須要的
$('.x').text( '鼠標(biāo)指針位于文檔左邊緣的值是： ' + event.pageX);
$('.y').text( '鼠標(biāo)指針位于文檔上邊緣的值是： ' + event.pageY);
});
// hover(over,out) over 鼠標(biāo)移動到元素觸發(fā)的函數(shù) out 鼠標(biāo)移出元素后觸發(fā)的函數(shù)
$('.div3').hover(function(){
$(this).css({'backgroundColor':'#f00','color':'#fff'});
},function(){
$(this).css({'backgroundColor':'#fff','color':'#000'});
});
// toggle() 如果元素可見 則隱藏改元素 如果隱藏 則顯示
$('#but4').click(function(){
$('.div3').toggle();
if($('.div3').css('display') == 'none'){
$(this).text('顯示');
}else{
$(this).text('隱藏');
}
});
});
</script>
</head>
<body>
<p class='c1' >php中文網(wǎng)</p>
<span title='title_test'>php中文網(wǎng)</span><br>
<img src='http://ipnx.cn/static/images/logo.png' alt='php中文網(wǎng)'>
<p><button id='but1'>移除圖片</button></p>
<div class='div1'>php中文網(wǎng)</div>
<p><button id='but2'>添加刪除類樣式切換</button></p>
<form>
<p><input id='ipt1' type="text" value='username'></p>
<p><input id='ipt2' type="text"></p>
<p><input id='ipt3' type="text"></p>
</form>
<p><button id='but3'>點擊-雙擊</button></p>
<div class='div2'></div>
<p class='num'></p>
<p class='x'></p>
<p class='y'></p>
<div class='div3'>php中文網(wǎng)</div>
<p><button id='but4'>隱藏</button></p>
</body>
</html>
批改老師：韋小寶批改時間：2019-02-15 17:49:47
老師總結(jié)：寫的很棒 像jQuery中很多事件方法都是很簡單的 課后沒事多去練習(xí)練習(xí)就很快能掌握了 這樣以后寫起來就方便多了