id選擇器
基礎語法：$(selector).action()
美元符號:定義jQuery
選擇符（selector）查詢和查找HTML元素
action()執行對元素的操作
案例：點擊按鈕，改變div的寬高
<head>
<style type="text/css">
#div1{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(function(){
//給按鈕添加點擊事件
$('#btn').click(function(){
//更新div的寬高
$('#div1').width(200);
$('#div1').height(200);
});
});
</script>
</head>
<body>
<div id="div1"></div>
<button id="btn">點擊</button>
</body>
類選擇器
<head>
<style type="text/css">
.mydiv1{
width:100px;
height:100px;
background-color:red;
}
</style>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(function(){
//給按鈕添加點擊事件
$('.btn').click(function(){
//更新div的寬高
$('.mydiv1').width(200);
$('.mydiv1').height(200);
});
});
</script>
</head>
<body>
<div class="mydiv1"></div>
<button class="btn">點擊</button>
</body>
element元素選擇器
<head>
<style type="text/css">
#div1{
width:100px;
height:100px;
background-color:red;
}
#div2{
width:100px;
height:100px;
background-color:blue;
}
</style>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(function(){
//給按鈕添加點擊事件
$('#btn').click(function(){
//元素選擇器，同時更改兩個div的寬高
//更新div的寬高
$('div').width(200);
$('div').height(200);
});
});
</script>
</head>
<body>
<div id="div1"></div>
<div id="div2"></div>
<button id="btn">點擊</button>
</body>
jQuery的事件監聽函數
|函數|綁定函數至 |
|(document).click(function)|觸發或將函數綁定到被選元素的點擊事件中 |
|(document).focus(function) | 觸發或將函數綁定到被選元素的獲得焦點事件|
|$(document).mouseover(function)|觸發或將函數綁定到被選元素的鼠標懸停事件 |
組合選擇器
組合選擇器也就是將id，元素，類選擇器組合使用
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(function(){
/*元素選擇器+id選擇器*/
//查找所有span標籤中id爲s1的，將其背景設置爲紅色
$('span#s1').css('background-color','red');
/*元素選擇器+類選擇器*/
$('span.s2').css('background-color'.'yellow');
/*元素選擇器+元素選擇器*/
//找到所有div標籤下的p標籤，將其背景設置爲灰色
$('div p').css('background-color'.'gray');
/*元素選擇器+元素選擇器+類選擇器*/
//找到div標籤下的p標籤中class爲p2的，將其背景設置爲黑色
$('div p.p2').css('background-color'.'black');
});
</script>
屬性選擇器
jQuery使用XPath表達式來選擇帶有給定屬性的元素
$(’[src]’)選取所有帶有href屬性的元素
$(’[src="#"]’)選取所有帶有href值等於#的元素
=".jpg"]’)選取所有href值以.jpg結尾的元素
<head>
<script type="text/javascript" src="./js/jquery-3.3.1.js"><script>
<script type="text/javascript">
$(function(){
$('[src]').css("border-style","solid");//所有的元素中（不光只要圖片，例如div中設置圖片背景是用src指定圖片路徑）只要有屬性爲src的都添加實線邊框
$('[src="./image/002.jpg"]').css("border-style","solid");//給標籤src屬性符合字符串路徑的添加實線邊框
$('[src$=".png"]').css("border-style","solid");//給標籤中元素src路徑中以png結尾的添加實線邊框
});
<head>
<body>
<img alt="" src="./image/001.jpg" width="100" height="100"/>
<img alt="" src="./image/002.jpg" width="100" height="100"/>
<img alt="" src="./image/003.png" width="100" height="100"/>
</body>