選取元素/ 選取id 、class、子元素/ 選取相鄰元素/屬性選擇器 /順序(index)屬性選擇器/ 表單元素選取
其實我還是喜歡JS- You don't Need jQuery.
- 選取元素
<div></div>
<div>hello</div> //既有的文字會被覆寫
<span></span>
<p></p>
<a href=""></a>_____
使用, 選取多個元素
.html寫文字內容（類似textContent）$(document).ready(function () {
$('div, span, p, a').html('hahaha') }) //五個元素都會變成'hahaha'_____
類似陣列計算長度$(document).ready(function () {
let result = $('div, span, p, a').length;
console.log(restult)}) // 5
_____
若選擇後看結果，會回返一陣列，類似querySelectorAll那樣
但後者回傳的不是陣列是DomList$(document).ready(function () {
let result = $('div, span, p, a');
console.log(result)})
- 選取id 、class、子元素
<div id=”main”></div>
<div class=”special”>hello</div>
<div class=”parent”>
<span>Hey I am span</span>
</div>
_____$(document).ready(function () {
$(‘#main’).html(‘this div with main Id’)
$(‘.special’).hide()
$(‘.parent span’).css(‘color’,’red’)})
- 選取相鄰元素
<div id=”main”>
<h1>Main Heading</h1>
<h2>Subheading</h2> 與H1相鄰，會變綠色
<p>I am a paragraph</p>
<p>I am a paragraph</p>
<p>I am a paragraph</p>
<h2>I am heading 2</h2> 與p相鄰，會變橘色
</div>
_____$(document).ready(function () {
$(‘#main h1+h2’).css(‘color’,’green’)
$('#main p+h2').css('color', 'orange')
})
＊Sibling Selector相鄰兄弟選擇器 (+)： 介於兩個選擇器之間，當第二個元素緊跟在第一個元素之後，並且兩個元素都是屬於同一個父元素的子元素，則第二個元素將被選中。
- 屬性選擇器
<p class=”color-1">I am a paragraph</p> //變綠
<p>I am a paragraph</p>
<p class=”color-2">I am a paragraph</p> //變綠
<p>I am a paragraph</p>_____$(document).ready(function () {
$(‘p[class]’).css(‘color’,’green’)}) 有使用class的p段落
<a href=”#” >#</a>
//font-size:24px<a href=”index.html” >index</a>
//bgc:greenyellow<a href=”http://www.google.com" >.com</a>
//bgc:greenyellow、color:orange、text-transform:uppercase<a href=”http://www.google.org" >.org</a>
//bgc:greenyellow、color:orange、text-decoration:none、text-transform:uppercase
_____$(document).ready(function () {
$(‘a[href=”#”]’).css(‘font-size’,’24px’)
$(‘a[href!=”#”]’).css(‘background-color’, ‘greenyellow’)
$(‘a[href^=http]’).css(‘color’, ‘orange’)
$(‘a[href$=org]’).css(‘text-decoration’, ‘none’)
$('a[href*=google]').css('text-transform', 'uppercase')})
!=不是、 ^=開頭、* =包含、$ =結尾
- 順序(index)屬性選擇器
:first - 選取第一個:last - 選取最後一個:even - 選取偶數個:odd - 選取奇數個:eq(n) - 選取第n個:lt(n) - 選取小於第n個（不含n）:gt(n) - 選取大於第n個（不含n）*n的算法與JS相同
- 表單元素選取
$('input') - 只選取綠底的inpt標籤元素
$(':input') - 紅框，form系列的全都選
_____:input SelectorSelects all input, textarea, select,button elements.
