同级选择器_基础选择器
??? JavaScript中,獲取元素用getElementById( ),getElementsByTagName( )等,這些方式都比較長和麻煩,但是在jQuery將會簡單和簡潔。
???可以用jQuery選擇器簡潔的獲取元素,jQuery選擇器分為“基礎選擇器”和“偽類選擇器”,這一節就介紹“基礎選擇器”。
“基礎選擇器”分為三種:
(1)基本選擇器
(2)層次選擇器
(3)屬性選擇器
基本選擇器
基本選擇器有四種分別是:
(1)元素選擇器
(2)id選擇器
(3)class選擇器
(4)群組選擇器?
元素選擇器用法:?
$("元素名")
舉例:?
DOCTYPE?html>
<html>
????<head>
????????<meta?charset="UTF-8"?/>
????????<title>基本選擇器——元素選擇器title>
????????<script?src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-3.5.1.min.js">script>
????????<script>
????????????$(function(){
????????????????$("div").css("color","red");
????????????})
????????script>
????head>
????<body>
????????<div>劉德華div>
????????<span>張學友span>
????????<div>郭富城div>
????????<span>黎明span>
????body>
html>
????在上面的例子中,$(function(){......})就是window.οnlοad=function(){...}。$("div")表示選中所有div元素,這可以看成對象,css是一個對象方法用來定義樣式。?
id選擇器用法:?
$("#id名")?
class選擇器用法:?
$(".類名")?
群組選擇器用法:?
$("選擇器1,選擇器2,...,選擇器n")
層次選擇器
????通過元素之間的層次關系來選擇元素。常用層次選擇器如下表。
| 選擇器 | 說明 |
| M N | 后代選擇器:M元素內部的所有后代N元素 |
| M>N | 子代選擇器:M元素內部的子代1級N元素 |
| M~N | 兄弟選擇器:M元素后面所有同級N元素 |
| M+N | 相鄰選擇器:M元素相鄰的同級N元素 |
屬性選擇器
常見屬性選擇器如下表:
| 選擇器 | 說明 |
| E[attr] | E元素必須有attr屬性 |
| E[attr = "value"] | E元素的attr屬性取值是"value" |
| E[attr?!= "value"] | E元素的attr屬性取值不是"value" |
| E[attr ^= "value"] | E元素的attr屬性取值是以"value"開頭的任何字符 |
| E[attr $= "value"] | E元素的attr屬性取值是以"value"結尾的任何字符 |
| E[attr *= "value"] | E元素的attr屬性取值是包含"value"的任何字符 |
| E[attr |= "value"] | E元素的attr屬性取值等于"value"或以"value"開頭 |
| E[attr ~= "value"] | E元素的attr屬性取值等于"value"或包含"value" |
??? E是元素,attr是屬性,value是屬性值。? ??
本節主要學習了基礎選擇器,最后對其總結。
基本選擇器
層次選擇器
屬性選擇器
總結
以上是生活随笔為你收集整理的同级选择器_基础选择器的全部內容,希望文章能夠幫你解決所遇到的問題。
- 上一篇: 打开多个界面_使用 Terminator
- 下一篇: 将矩阵转为一行_LeetCode1253