摘要：jQuery 改變css：<!doctype html><html><head> <meta charset="UTF-8"> <title>改變css</title> <script src="http
jQuery 改變css：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>改變css</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$(document).ready(function() {
//改變單個css屬性
// $(選擇器).css('屬性名','屬性值')
$('body').css('backgroundColor','#25cc77');
//改變多個CSS屬性
// $('選擇器').css({'屬性名1':'屬性值1','屬性名2':'屬性值2','屬性名3':'屬性值3'})
$('p').css({'color': 'red', 'font-size': '40px', 'font-weight': 'bold'});
//獲取單個CSS的屬性值
// $('選擇器').css('屬性名')
alert($('div').css('width'));
})
</script>
</head>
<body>
<p>孤帆遠(yuǎn)影碧空盡</p>
<div style="width: 200px;height: 200px;background: #ee9e00;"></div>
</body>
</html>
演示地址 -> http://47.107.64.136/jQuery/4/1/
jquery的事件函數(shù)：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jquery的事件函數(shù)</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>
<body>
<script type="text/javascript">
// 在jQuery中是以調(diào)用事件函數(shù)的形式來觸發(fā)事件的，如js中的onclick事件，在jQuery則用click()來替代
// 簡單的理解：事件方法會觸發(fā)匹配元素的事件，或者將函數(shù)綁定到所有匹配元素的某個事件
//ready() 當(dāng)我們的DOM已經(jīng)加載，頁面已經(jīng)加載完，觸發(fā)的事件==js的onload
//語法：
// $(document).ready(function(){
// })
//*不能與<body onload="">一起使用
//blur()當(dāng)元素失去焦點==onblur
// focus()當(dāng)元素獲得焦點
// change()當(dāng)元素的值發(fā)生改變的時候
// click()點擊事件
//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ù)。
$(document).ready(function(){
$('input').blur(function(){
$('input').css('background','red');
});
$('input').focus(function(){
$('input').css('background','blue');
});
$('input').change(function(){
$('input').css('background','pink');
});
$('button').click(function(){
$('div').css('background','blue');
});
$('div').dblclick(function(){
$(this).css('background','pink');
});
$(document).mousemove(function(aa){
$('span').text('x: '+aa.pageX+'y: '+aa.pageY);
});
a=0;
$(window).resize(function(){
$('b').text(a++);
});
})
</script>
<input type="text" name="">
<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>
</body>
</html>
演示地址 -> http://47.107.64.136/jQuery/4/2
jQuery操作屬性：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery操作屬性</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style>
.box{color: red;}
.main{font-size: 40px;font-weight: bold;}
.aa{ list-style:none;background: pink;height: 30px;width: 400px; }*/
.bb{color: red;}
</style>
<script>
// jQuery的操作屬性其原理還是對于DOM的操作
// 通過對象的關(guān)系，對節(jié)點樹中的元素的屬性進(jìn)行操作的方法有以下：
// addClass() 該方法向被選中的元素添加一個或者多個類
// removeClass() 該方法從被選中的元素移除一個或者多個類
// attr() 該方法設(shè)置或者返回被選中元素的屬性值
// removeAttr() 該方法從被選中的元素中移除屬性
// hasClass() 該方法檢查被選中的元素是否包含指定class
// toggleClass()該方法對被選中元素進(jìn)行添加/刪除類的切換操作
// 設(shè)置內(nèi)容：
// text() 該方法返回或者設(shè)置被選中的元素的文本內(nèi)容
//html() 該方法返回或者設(shè)置被選中的元素的內(nèi)容（類似innerHTML 可以包括html標(biāo)簽）
// val() 該方法返回或者設(shè)置被選元素的值
$(document).ready(function(){
$('p').addClass('box main');//d多個類，用空格隔開
$('p').removeClass('box main');
$('p').attr('title','你好');
$('button').click(function(){
$('img').removeAttr('src');
});
$('button').click(function(){
$('span,b,p').toggleClass('bb');
});
$('span').text('林花謝了春紅，太匆匆。無奈朝來寒雨，晚來風(fēng)。');
$('b').text('世間無限丹青手，一片傷心畫不成。');
$('p').html('<h1>生當(dāng)復(fù)來歸，死當(dāng)長相思。</h1>');
$('.q').click(function () {
$('input').attr('value','自在飛花輕似夢，無邊絲雨細(xì)如愁。');
});
})
</script>
</head>
<body>
<p title="content">此情可待成追憶，只是當(dāng)時已惘然</p>
<img src="http://img.php.cn/upload/course/000/000/012/5b95d60c4d048426.png">
<button>點擊刪除圖片</button>
<div class="">日日思君不見君，共飲長江水。</div>
<button>點擊</button>
<span>人面不知何處去，桃花依舊笑春風(fēng)。</span><br>
<b>行到水窮處，坐看云起時。</b>
<p>夜月一簾幽夢，春風(fēng)十里柔情。</p>
<button>點擊切換</button>
<input type="text" name="" value="天涯地角有窮時，只有相思無盡處。">
</body>
</html>
演示地址 -> http://47.107.64.136/jQuery/4/2
jQuery事件切換：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery事件切換</title>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<style type="text/css">
div,p{width: 700px;height: 200px;border: 1px solid #ccc;}
</style>
</head>
<body>
<script type="text/javascript">
// hover(over,out)
// over:鼠標(biāo)移上元素上要觸發(fā)的一個函數(shù)
// out:鼠標(biāo)移出元素上要觸發(fā)的一個函數(shù)
$(document).ready(function(){
$('div').hover(
function(){
$(this).css('background','#ff5600');
},
function(){
$(this).css('color','#fff');
});
// toggle() 如果元素是可見的，就切換為隱藏，否則相反
$('button').click(function(){
$('p').toggle().css('background','#78ff50')
})
})
</script>
<div>時人不識凌云木，直待凌云始道高。</div>
<p style="display: none;"></p>
<button>點擊</button>
</body>
</html>
演示地址 -> http://47.107.64.136/jQuery/4/3
批改老師：韋小寶批改時間：2019-01-25 09:28:20
老師總結(jié)：寫的很棒 jQuery對dom的操作很靈活 jQuery事假總結(jié)的完整 課后一定要多練習(xí)哦