abstrak：第一章 jQuery獲取/操作css的方法改變單個css屬性:$("選擇器").css('屬性名','屬性值')改變多個css屬性:$("選擇器").css({'屬性名1':'屬性值1','屬性名2':'屬性值2'})獲取單個css屬性值:$("選擇器&
第一章 jQuery獲取/操作css的方法
改變單個css屬性:
$("選擇器").css('屬性名','屬性值')
改變多個css屬性:
$("選擇器").css({'屬性名1':'屬性值1','屬性名2':'屬性值2'})
獲取單個css屬性值:
$("選擇器").css('屬性名')
(可用alert彈窗的形式將此單個css屬性值彈出方便觀察)
完整代碼如下:
<!DOCTYPE html>
<html>
<head>
<title>jQuery獲取/改變CSS</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
//1.改變單個css屬性
// $("選擇器").css('屬性名','屬性值')
$('body').css('backgroundColor','#ccc')
//2.改變多個css屬性
// $("選擇器").css({'屬性名1':'屬性值1','屬性名2':'屬性值2'})
$('p').css({'color':'red','fontSize':'40px','fontWeight':'bold'})
//3.獲取單個css屬性值
//$("選擇器").css('屬性名')
// alert($("div").css('background'))
alert($('div').css('width'))
alert($('div').css('background'))
})
</script>
<p>老人頭撲克</p>
<div style="width: 200px;height: 100px;background: blue;"></div>
</body>
</html>第二章 jQuery操作屬性的方法
jQuery的操作屬性其原理還是對于DOM的操作，通過對象的關系，對節(jié)點樹中的元素的屬性進行操作。
常見的操作方法有以下:
①：addClass() 該方法向被選中的元素添加一個或者多個類
②：removeClass() 該方法從被選中的元素移除一個或者多個類
③：attr() 該方法設置或者返回被選中元素的屬性值
④：removeAttr() 該方法從被選中的元素中移除屬性
⑤：hasClass() 該方法檢查被選中的元素是否包含指定class
⑥：toggleClass()該方法對被選中元素進行添加/刪除類的切換操作
關于設置內(nèi)容的：
①：text() 該方法返回或者設置被選中的元素的文本內(nèi)容
②：html() 該方法返回或者設置被選中的元素的內(nèi)容（類似innerHTML 可以包括html標簽）
③：val() 該方法返回或者設置被選元素的值
完整代碼如下：
<!DOCTYPE html>
<html>
<head>
<title>jQuery操作屬性的方法(1)</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
/* .box{color:#583882;}
.main{font-size: 40px;font-weight: bold;}*/
.bb{color: red;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('p').addClass('box main')//多個類,用空格分開
$('p').removeClass('box')
alert($('p').attr('title'))
$('p').attr('title','James')
alert($('p').attr('title'))
$('button').click(function(){
$('img').removeAttr('src')
})
$('button').click(function(){
alert($('div').hasClass('one'))
})
$('button').click(function(){
$('span,b,p').toggleClass('bb')
})
//alert($('span').text('大家好,我是古天樂'))
//$('span').text('大家好,我是古天樂')
$('b').text('一起來玩')
//$('p').text('是兄弟就來砍我')
//alert($('p').html())
$('p').html('<h1>來到就是賺到</h1>')
alert($('input').val())
$('input').val('我是孫笑川')
})
</script>
<p title="content">洛杉磯湖人隊</p>
<img src="images/1.jpg">
<button>點擊刪除圖片</button>
<div class="one">你美死了</div>
<button>點擊</button>
<span>大家好,我是渣渣輝</span><br>
<b>歡迎來到</b>
<p>貪玩藍月</p><br>
<button>點擊切換</button>
<input type="text" name="" value="我是元素的值">
</body>
</html>第三章 jQuery事件方法
jQuery的事件處理與JavaScript的事件在類型和功能上差不多，在具體的寫法和表示上有所區(qū)別，相較于JavaScript更簡單方便些。
在jQuery中是以調(diào)用事件函數(shù)的形式來觸發(fā)事件的，簡單理解就是事件方法會觸發(fā)匹配元素的事件，或者將函數(shù)綁定到所有匹配元素的某個事件。
ready()：當DOM加載時，頁面已經(jīng)加載完
//語法：
// $(document).ready(function(){
// })
//*不能與<body onload="">一起使用blur() 當元素失去焦點
focus() 當元素獲得焦點
change() 當元素的值發(fā)生改變的時候
click() 點擊事件
dblclick() 雙擊事件
mouseover() 當鼠標指針位于元素上方時會發(fā)生mouseover事件
mouseenter() 當鼠標指針穿過元素時會發(fā)生mouseenter事件
mousemove() 當鼠標指針在指定的元素中移動時，就會發(fā)生該事件
mouseleave() 當鼠標指針離開元素時
mouseout() 當鼠標指針從元素上移開時
mousedown() 當鼠標指針移動到元素上方并按下鼠標按鍵時
mouseup() 當在元素上松開鼠標按鍵時
resize() 當調(diào)整當前瀏覽器窗口大小時
pageX() 屬性是鼠標指針的位置，相對于文檔的左邊緣 event.pageX event：必需 參數(shù)來自事件綁定函數(shù)。
pageY() 屬性是鼠標指針的位置，相對于文檔的上邊緣 event.pageY event：必需 參數(shù)來自事件綁定函數(shù)。
完整html代碼：
<!DOCTYPE html>
<html>
<head>
<title>jQuery事件方法</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
div{width: 100px;height: 100px;background: greenyellow; margin-top:20px;}
</style>
</head>
<body>
<script type="text/javascript">
$(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','orange')
// })
// $('div').dblclick(function(){
// $(this).css('background','pink')
// })
//
// $(document).mousemove(function(aa){
// $('span').text('x:'+aa.pageX+ ' y:'+aa.pageY)
// })
// a=0
// $(window).resize(function(){
// // alert('動啥呀')
// $('b').text(a++)
// })
// $('div').mouseover(function(){
// $('div').css('background','pink')
// })
// $('div').mouseenter(function(){
// $('div').css('color','#fff')
// })
$('div').mousemove(function(){
$('div').css('color','#bbb')
})
})
</script>
<!-- <input type="text" name="">
<div style="width: 100px;height: 100px;background: red; margin-top:20px;"></div>
<button>點擊</button> -->
<!-- <div>
當前鼠標的位置: <span> </span>
</div>
<div>
頁面被調(diào)整次數(shù): <b> </b>
</div> -->
<!-- <div>mouseover事件</div> -->
<!-- <div>mouseenter事件</div> -->
<div>mousemove事件</div>
<div>111</div>
</body>
</html>第四章 jQuery事件切換
hover（over，out）
over：鼠標移上元素上時要觸發(fā)的一個函數(shù)。
out：鼠標移出元素上時要觸發(fā)的一個函數(shù)。
（在使用jQuery函數(shù)時，在hover中插入函數(shù)中第一個設置的內(nèi)容是其屬性中的over觸發(fā)的函數(shù)，第二個是out觸發(fā)的函數(shù)。）
toggle（）如果元素是可見的，就切換隱藏，否則相反。
完整代碼：
<!DOCTYPE html>
<html>
<head>
<title>jQuery事件切換</title>
<meta charset="utf-8">
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
div,p{width: 200px;height: 200px;border: 1px solid #ccc;}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function(){
$('div').hover(
function(){
$(this).css('background','orange')
},
function(){
$(this).css('color','#fff')
}
)
$('button').click(function(){
$('p').toggle().css('background','yellowgreen')
})
})
</script>
<div>動情是容易的</div>
<p>因為不會太久</p>
<button>點擊</button>
</body>
</html>
Guru membetulkan：查無此人Masa pembetulan：2019-01-14 16:41:40
Rumusan guru：不錯呀，你這章課程學習了那么多，有沒有感覺自己很強大。繼續(xù)加油哦。