abstrakt：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() {
//改變單個(gè)CSS屬性
$('body').css('backgroundColor', '#ccc');
//$('選擇器').css({'屬性名1':'屬性值1','屬性名2':'屬性值2','屬性名3':'屬性值3'});
$('p').css({
'color': 'red',
'font-size': '40px',
'font-weight': 'bold'
});
//獲取單個(gè)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ù)的形式來(lái)觸發(fā)事件的，如js中的onclick事件，在jQuery則用click()來(lái)代替
簡(jiǎn)單的解釋：事件方法會(huì)觸發(fā)匹配元素的事件，或者將函數(shù)綁定到所有匹配元素的某個(gè)事件 -->
<!-- ready()當(dāng)我們的DOM已經(jīng)加載，頁(yè)面已經(jīng)加載完，觸發(fā)的事件==js的onload
語(yǔ)法：
$(document).ready(function(){
})
*不能與<body onload="">一起使用
blur()當(dāng)元素失去焦點(diǎn)==onblur
focus()當(dāng)元素獲得焦點(diǎn)
change（）當(dāng)元素的值發(fā)生改變的時(shí)候
click（）點(diǎn)擊事件
dblclick（）雙擊事件
mouseover()當(dāng)鼠標(biāo)指針位于元素上方時(shí)會(huì)發(fā)生mouseover事件
mouseenter()當(dāng)鼠標(biāo)指針穿過(guò)元素時(shí)會(huì)發(fā)生mouseenter事件
mousemove()當(dāng)鼠標(biāo)指針在指定的元素中移動(dòng)是，就會(huì)發(fā)生該事件
mouseleave()當(dāng)鼠標(biāo)指針離開(kāi)元素時(shí)
mouseout()當(dāng)鼠標(biāo)指針從元素上移開(kāi)時(shí)
mousedown()當(dāng)鼠標(biāo)指針移動(dòng)到元素上方并按下鼠標(biāo)按鍵時(shí)
mouseup()當(dāng)在元素上松開(kāi)鼠標(biāo)按鍵時(shí)
resize()當(dāng)調(diào)整當(dāng)前瀏覽器窗口大小時(shí)
pageX()屬性是鼠標(biāo)指針的位置，相對(duì)于文檔的左邊緣event.pageX event:必需 參數(shù)來(lái)自事件綁定函數(shù)
pageY()屬性是鼠標(biāo)指針的位置，相對(duì)于文檔的左邊緣event.pageY event:必需 參數(shù)來(lái)自事件綁定函數(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>點(diǎn)擊</button> -->
<div>
當(dāng)前鼠標(biāo)位置:
<span></span>
</div>
<div>
頁(yè)面被調(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') //多個(gè)類，用空格隔開(kāi)
$('p').removeClass('box') //多個(gè)類，用空格隔開(kāi)
// 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()該方法向北選中的元素添加一個(gè)活多個(gè)類
//removeClass()該方法從北選中的元素一個(gè)或多個(gè)類
//attr()該方法設(shè)置或者返回被選中元素的屬性值
//removeAttr()該方法從北選中的元素中移除屬性
//hasClass()該方法檢查北選中的元素是否包含指定class
//
-->
<img src="haha.jpeg" alt="">
<button>點(diǎn)擊刪除圖片</button>
<div>你好</div>
<button>點(diǎn)擊</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:鼠標(biāo)移動(dòng)元素上要觸發(fā)的一個(gè)函數(shù)
// out:鼠標(biāo)移出元素上要觸發(fā)的一個(gè)函數(shù)
$(document).ready(function() {
// $('div').hover(
// function() {
// $(this).css('background','red')
// },
//
// function() {
// $(this).css('color','#fff')
// }
//
//toggle()如果元素是可見(jiàn)的，就切換為隱藏
$('button').click(function() {
$('p').toggle().css('background','red')
})
})
</script>
</head>
<body>
<div>
我是內(nèi)容
</div>
<p style="display:none">
</p>
<button>
點(diǎn)擊
</button>
</body>
</html>