abstract：1、jQuery獲取改變CSS<!DOCTYPE html><html><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0&q
1、jQuery獲取改變CSS
<!DOCTYPE html>
<html>
<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 type="text/javascript" src="jquery-3.3.1.js"></script>
<script type="text/javascript">
$(document).ready(function() {
//改變單個CSS屬性
$('body').css('backgroundColor', '#ccc');
//$('選擇器').css({'屬性名1':'屬性值1','屬性名2':'屬性值2','屬性名3':'屬性值3'});
$('p').css({
'color': 'red',
'font-size': '40px',
'font-weight': 'bold'
});
//獲取單個css的屬性值，$('選擇器').css('屬性名')
//alert($('div').css('background'))
alert($('div').css('width'))
})
</script>
<script>
</script>
</head>
<body>
<p>php中文網(wǎng)</p>
<div style="width:100px;height:100px;background:blue;">
</body>
</html>
2、jQuery事件方法
<!DOCTYPE html>
<html>
<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">
<script type="text/javascript" src='jquery-3.3.1.js'></script>
<title>jquery的事件函數(shù)</title>
</head>
<body>
<!-- 在jQuery中是以調(diào)用事件函數(shù)的形式來觸發(fā)事件的，如js中的onclick事件，在jQuery則用click()來代替
簡單的解釋：事件方法會觸發(fā)匹配元素的事件，或者將函數(shù)綁定到所有匹配元素的某個事件 -->
<!-- ready()當我們的DOM已經(jīng)加載，頁面已經(jīng)加載完，觸發(fā)的事件==js的onload
語法：
$(document).ready(function(){
})
*不能與<body onload="">一起使用
blur()當元素失去焦點==onblur
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ù)
-->
<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', 'blue')
// })
// $('div').dblclick(function() {
// $('div').css('background', 'pink')
// })
// $(document).mousemove(function(aa) { //event.pageY
// $('span').text('x:'+aa.pageX+'y:'+aa.pageY)
// })
// $(window).resize(function(){
// alert('窗口被調(diào)整大小')
// })
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>
當前鼠標位置:
<span></span>
</div>
<div>
頁面被調(diào)整大小的次數(shù):
<b></b>
</div>
</body>
</html>
3、jQuery操作屬性的方法
<!DOCTYPE html>
<html>
<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>Document</title>
<script type="text/javascript" src="jquery-3.3.1.js"></script>
<style type="text/css">
.box {
color: red;
}
.main {
font-size: 40px;
font-weight: bold;
}
</style>
</head>
<body>
<script type="text/javascript">
$(document).ready(function() {
$('p').addClass('box main') //多個類，用空格隔開
$('p').removeClass('box') //多個類，用空格隔開
// alert($('p').attr('title'))
// $('p').attr('title','你好')
//alert($('p').attr('title'))
// $('button').click(function() {
// $('img').removeAttr('src')
// })
$('button').click(function() {
alert($('div').hasClass('one'))
})
})
</script>
<p title="content">PHP中文網(wǎng)</p>
<!--
//addClass()該方法向北選中的元素添加一個活多個類
//removeClass()該方法從北選中的元素一個或多個類
//attr()該方法設(shè)置或者返回被選中元素的屬性值
//removeAttr()該方法從北選中的元素中移除屬性
//hasClass()該方法檢查北選中的元素是否包含指定class
//
-->
<img src="haha.jpeg" alt="">
<button>點擊刪除圖片</button>
<div>你好</div>
<button>點擊</button>
</body>
</html>4、jQuery事件切換
<!DOCTYPE html>
<html>
<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 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>
<script type="text/javascript">
// hover:(over,out)
// over:鼠標移動元素上要觸發(fā)的一個函數(shù)
// out:鼠標移出元素上要觸發(fā)的一個函數(shù)
$(document).ready(function() {
// $('div').hover(
// function() {
// $(this).css('background','red')
// },
//
// function() {
// $(this).css('color','#fff')
// }
//
//toggle()如果元素是可見的，就切換為隱藏
$('button').click(function() {
$('p').toggle().css('background','red')
})
})
</script>
</head>
<body>
<div>
我是內(nèi)容
</div>
<p style="display:none">
</p>
<button>
點擊
</button>
</body>
</html>
Correcting teacher：韋小寶Correction time：2019-01-22 16:32:19
Teacher's summary：寫的很不錯 jQuery對Dom操作是非常重要的 對dom操作可以實現(xiàn)很多種功能 課后記得要多研究研究哦