選擇器
- jQuery簡稱js庫,是為了簡化JavaScript的開發或是DOM的操作等.
- jQuery選擇器的作用是用於定位頁面元素
-
特點:
- 就是做得多,寫的少
- 相容各種瀏覽器
工廠函式
- jQuery的工廠函式是作為jQuery的一入口,通過該函式可以實現定位頁面元素,將DOM物件包裝成jQuery物件,以及建立頁面元素等功能.
-
jQuery的工廠函式有兩種寫法:
- $()
- jQuery()
- 說明: “$” 符號與 “jQuery” 單詞的含義是一致的
-
jQuery的約定:
- 在變數前加 $ 以表示jQuery操作
示例程式碼:
<!-- 引入jQuery檔案 -->
<script src="js/jquery.js"></script>
<body>
<button id="btn">按鈕</button>
<script>
// DOM操作 (返回DOM物件) - 獲取頁面中的按鈕元素
var btn = document.getElementById(`btn`);
console.log(btn);
/*
jQuery操作 - 獲取頁面中的按鈕元素
jQuery() - 稱為jQuery的工廠函式
* 作用 - 該函式是jQuery操作的一個入口
* 用於定位頁面中的元素
* 用法 - 另一種用法是"$()"
* 返回值 - jQuery物件
*/
var btn = jQuery(`#btn`);
var btn = $(`#btn`);
console.log(btn);
</script>
</body>DOM物件與jQuery物件
- 所謂DOM物件,就是指由DOM的官方規範提供的物件,或者是通過DOM提供的物件屬性或方法定位HTML頁面元素得到的物件.
- DOM物件轉換為jQuery物件
示例程式碼:
<script src="js/jquery.js"></script>
</head>
<body>
<button id="btn">克魯達</button>
<script>
// DOM操作(返回DOM物件
var btn = document.getElementById(`btn`);
// 1. 將DOM物件轉換為jQuery物件 - 就是工廠函式
var $btn = $(btn);
console.log($btn);
// 2. 將jQuery物件轉換為DOM物件:
// jQuery物件是一個類陣列物件 - 轉換方法就是: jQuery物件[索引值]
var btn1 = $btn[0];
console.log(btn1);
// jQuery物件提供了get(index)方法 - index表示索引值
var btn2 = $btn.get(0);
console.log(btn2);
</script>
</body>基本選擇器
- 注意 – 所有選擇器都是字串型別
- 注意 – 萬用字元選擇器是匹配所有的
- ID 選擇器: 就是通過HTML頁面的元素的id屬性值定位頁面元素
- 元素選擇器: 就是通過HTML頁面的元素名稱定位頁面元素
- 類選擇器: 就是通過HTML頁面元素的class屬性定位頁面元素
- 萬用字元選擇器: 就是匹配HTML頁面中所有的元素
- 組合選擇器: 就是將每個選擇器匹配的元素的集合
- 說明: 由於jQuery物件是類陣列物件,即使匹配的元素只有一個,返回的結果依舊是類陣列物件.
- 備註: 在jquery中使用選擇器的時候是沒有優先順序別的
示例程式碼:
<script src="js/jquery.js"></script>
</head>
<body>
<div id="d1">一花一世界</div>
<div id="d2" class="yy">一笑一人生</div>
<script>
// ID屬性選擇器 - 匹配指定ID屬性值的元素
console.log($(`#d1`));
// 類選擇器 - 匹配所有指定類名的元素
console.log($(`.yy`));
// 元素選擇器 - 匹配所有指定元素木那個的元素
console.log($(`div`));
// 萬用字元選擇器 - 匹配頁面中所有的元素
console.log($(`*`));
// 組合選擇器 - 多個選擇器之間使用逗號分隔(並集) - 並集就是符合一個就好使
console.log($(`#d1`,`.yy`));
// 組合選擇器 - 多個選擇器之間沒有任何分隔(交集) - 交集就是必須全部符合才好使
console.log($(`#d2.yy`));
</script>
</body>層級選擇器
- 後代選擇器 – 匹配指定祖先元素中的後代元素
- 子選擇器 – 匹配指定父元素中的子元素
- 相鄰兄弟選擇器 – 匹配指定元素的下一個兄弟元素
- 普通兄弟選擇器 – 匹配指定元素的下面所有兄弟元素
示例程式碼:
<title>層級選擇器</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="parent">
<div id="child">
<div id="d6"></div>
<div id="d1"></div>
<div id="d2"></div>
<div id="d4"></div>
<div id="d5"></div>
</div>
<div id="child2">
<div id="d3"></div>
</div>
</div>
<script>
// 查詢指定父元素所有的後代div
console.log($(`#parent div`));
// 查詢指定父元素的所有子級元素
console.log($(`#parent>div`));
// 查詢指定元素的下一個兄弟元素
console.log($(`#d1+div`));
// 查詢指定元素的後面所有兄弟元素(不包括前面的)
console.log($(`#d1~div`));
// siblings()方法 - 獲取指定元素所有的兄弟元素(包括前面的)
console.log($(`#d1`).siblings(`div`));
</script>
</body>基本過濾選擇器
- 就是把不要的過濾掉要的留下
- 在指定範圍匹配的元素當中進行篩選(本身自己沒有層級結構)
示例程式碼:
<title>基本過濾選擇器</title>
<script src="js/jquery.js"></script>
<style>
#animated{
width: 100px;
height: 200px;
background-color: cyan;
position: absolute;
left: 100px;
}
</style>
</head>
<body>
<h1>八百標兵奔北坡</h1>
<h2>炮兵並排北邊跑</h2>
<div>一花一世界</div>
<div id="d2">
<div id="child"></div>
</div>
<div></div>
<div></div>
<div>一笑一人生</div>
<div id="animated"></div>
<script>
// 在指定範圍內篩選出第一個元素
console.log($(`div:first`));
// 在指定範圍內篩選出最後一個元素
console.log($(`div:last`));
/*
注意 :
* 索引值為偶數時實際上是奇數
* 索引值為奇數時實際上是偶數
* 因為索引值是從 0 開始的
*/
// 在指定範圍內篩選出索引值為偶數的元素
console.log($(`div:even`));
// 在指定範圍內篩選出索引值為奇數的元素
console.log($(`div:odd`));
/*
:eq(index) - index表示索引值
*/
// 篩選出等於指定索引值的元素
console.log($(`div:eq(0)`));
// 篩選出大於指定索引值的元素
console.log($(`div:gt(3)`));
// 篩選出小於於指定索引值的元素
console.log($(`div:lt(2)`));
// :header - 表示匹配h1~h6的元素
console.log($(`:header`));
function animated() {
/*
slideToggle - 是jQuery提供的動畫效果
*/
$(`#animated`).slideToggle(animated);
}
animated();
// :animated - 表示只能匹配由jQuery實現的動畫
console.log($(`:animated`));
// 篩選出除屬性值為child以外的所有元素
console.log($(`div:not("#child")`));
</script>
</body>內容過濾選擇器
示例程式碼:
<title>內容過濾選擇器</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div>我是有內容的</div>
<div></div>
<div>
<div id="child"></div>
</div>
<script>
// 匹配到包含指定文字內容的元素
console.log($(`div:contains("內容")`));
// 匹配到沒有文字內容的元素和沒有後代元素的元素
console.log($(`div:empty`));
// 匹配到有文字內容的元素和有後代元素的元素
console.log($(`div:parent`));
/*
:has() - 表示包含匹配指定選擇器元素的父級
[0] - 表示陣列的提取
*/
console.log($(`div:has("#child")`)[0]);
</script>
</body>可見性過濾選擇器
:hidden選擇器
- 就是匹配到所有不可見的元素
- 不能匹配到CSS樣式屬性visibility設定為hidden的隱藏元素
- 還能匹配到HTML頁面中不做任何顯示效果的元素
-
注意 – 用的時候儘量確定元素型別或指定範圍
- 因為要是不指定範圍的話它會篩選出頁面中所有的隱藏元素(比如:<HTML>,<meta>以及<style>等等)
示例程式碼:
<title>可見性過濾選擇器</title>
<script src="js/jquery.js"></script>
<style>
#d1 {
display: none;
}
#d2 {
visibility: hidden;
}
</style>
</head>
<body>
<div id="d1">一花一世界...</div>
<div id="d2">一笑一人生...</div>
<input type="hidden" value="使用者名稱">
<input type="text" name="username">
<script>
console.log($(`hidden`));
</script>
</body>:visible選擇器
- 就是匹配到所有可見的元素
-
匹配CSS樣式屬性visibility設定為hidden的隱藏元素
- 當visibility設定為hidden時的元素,依舊佔有頁面空間
- 還能匹配HTML頁面中<html>和<body>元素
示例程式碼:
<title>可見性過濾選擇器</title>
<script src="js/jquery.js"></script>
<style>
#d1 {
display: none;
}
#d2 {
visibility: hidden;
}
</style>
</head>
<body>
<div id="d1">一花一世界...</div>
<div id="d2">一笑一人生...</div>
<input type="hidden" value="使用者名稱">
<input type="text" name="username">
<script>
console.log($(`:visible`));
</script>
</body>屬性過濾選擇器
- 就是通過元素的屬性過濾掉不要的元素
- 通過屬性以及屬性的值來篩選
示例程式碼:
<title>屬性過濾選擇器</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="username" name="d1" class="mydiv"></div>
<div id="password" name="d2" class="mycls"></div>
<div id="d3"></div>
<div class="myd"></div>
<script>
// 獲取到所有元素中所有帶有指定屬性的元素
console.log($(`div[name]`));
// 獲取到所有元素中帶有指定屬性和值的元素
console.log($(`div[class=mydiv]`));
// 獲取到所有不含有指定屬性或不等於特定屬性值的元素
console.log($(`div[class!=maydiv]`));
// 獲取到所有指定元素中以什麼什麼開頭的元素
console.log($(`div[class^=my]`));
// 屬性過濾選擇器組合用法 - 交集(交集就是必須全部符合才好使)
console.log($(`div[name=di][class^=my]`));
</script>
</body>子元素過濾選擇器
- 在指定的範圍內進行子級選擇器過濾
-
需要注意的是:
-
nth-child(index)
- 作用 – 匹配當前元素作為第幾個子元素
-
index是從 1 開始的,表示第幾個
- 和索引值不同的是索引值是從 0 開始的
-
示例程式碼:
<title>子元素過濾選擇器</title>
<script src="js/jquery.js"></script>
</head>
<body>
<div id="parent">
<div id="d1">我是第一個子元素...</div>
<div id="d2">我是中間的子元素...</div>
<div id="d3">我是最後一個子元素...
<div id="child">我是id為d3的唯一的子元素...</div>
</div>
</div>
<script>
// :first-child - 表示當前匹配到的是第一個子元素
console.log($(`div:first-child`));
// :last-child - 表示當前匹配到的是最後一個子元素
console.log($(`div:last-child`));
/*
nth-child(index)
* 作用 - 匹配當前元素作為第幾個子元素
* index - 表示第幾個
* 注意 - index是從 1 開始的,表示第幾個
* 和索引值不同的是索引值是從 0 開始的
*/
console.log($(`div:nth-child(2)`));
// only-child - 表示獲取到某個父級元素中唯一一個子元素的元素
console.log($(`div:only-child`));
</script>
</body>表單物件過濾選擇器
示例程式碼:
<title>表單物件過濾選擇器</title>
<script src="js/jquery.js"></script>
</head>
<body>
<form action="#">
<input type="text" disabled>
<input type="checkbox">亞古獸
<input type="checkbox" checked>加魯魯獸
<select>
<option>黑龍江</option>
<!-- selected - 表示被選中的 -->
<option selected>佳木斯</option>
<option>哈爾濱</option>
</select>
</form>
<script>
// :disabled - 表示匹配到不可用的元素
console.log($(`input:disabled`));
// :checked - 表示匹配到所有被選中的元素
console.log($(`input:checked`));
// :selected - 表示匹配到選中的<option>元素
console.log($(`option:selected`))
</script>
</body>