整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
1）CSS3 中提供的新選擇器 —— 屬性選擇器：
屬性選擇器就是通過正則的方式去匹配指定屬性的元素，為其設(shè)置樣式。
在 CSS3 中新增了三種屬性選擇器，如下所示：
選擇器 | 描述 |
E[attr^=“xx”] | 選擇元素 E，其中 E 元素的 attr 屬性是以 xx 開頭的任何字符。 |
E[attr$=“xx”] | 選擇元素 E，其中 E 元素的 attr 屬性是以 xx 結(jié)尾的任何字符。 |
E[attr*=“xx”] | 選擇元素 E，其中 E 元素的 attr 屬性是包含 xx 的任何字符。 |
例子，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
a[href^="#"] {
color: rgb(179, 255, 0);
}
a[href$="org"] {
color: rgb(195, 0, 255);
}
a[href*="le"] {
background-color: rgb(0, 255, 149);
color: white;
}
</style>
</head>
<body>
<ul>
<li><a href="#">本地鏈接</a></li>
<li><a href="https://www.wangyelang.cn">王耶浪</a></li>
<li><a href="https://developer.mozilla.org">Web開發(fā)</a></li>
<li><a href="https://learningnotes.com">學(xué)習(xí)筆記</a></li>
</ul>
</body>
</html>顯示為，
（2）子元素偽類選擇器就是選擇某元素的子元素的一種選擇器。
在 CSS3 中，有以下幾種子元素偽類選擇器：
選擇器 | 描述 |
E:first-child | 選擇元素 E 的第一個(gè)子元素。 |
E:last-child | 選擇元素 E 的最后一個(gè)子元素。 |
E:nth-child(n) | 選擇元素 E 的第 n 個(gè)子元素，n 有三種取值，數(shù)字、odd 和 even。注意第一個(gè)子元素的下標(biāo)是 1。 |
E:only-child | 選擇元素 E 下唯一的子元素。 |
E:first-of-type | 選擇父元素下第一個(gè) E 類型的子元素。 |
E:last-of-type | 選擇父元素下最后一個(gè) E 類型的子元素。 |
E:nth-of-type(n) | 選擇父元素下第 n 個(gè) E 類型的子元素，n 有三種取值，數(shù)字、odd 和 even。 |
E:only-of-type | 選擇父元素唯一的 E 類型的子元素。 |
E:nth-last-child(n) | 選擇所有 E 元素倒數(shù)的第 n 個(gè)子元素。 |
E:nth-last-of-type(n) | 選擇所有 E 元素倒數(shù)的第 n 個(gè)為 E 的子元素。 |
例子,
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
div {
width: 100px;
height: 100px;
margin-top: 10px;
background-color: rgb(0, 255, 242);
}
div:nth-child(2) {
background-color: rgb(0, 255, 128);
}
div:nth-of-type(4) {
background-color: rgb(111, 0, 255);
}
</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
</body>
</html>
顯示效果，
（3）UI 偽類選擇器是通過元素的狀態(tài)來選擇的一種選擇器。
在 CSS3 中有以下幾種 UI 偽類選擇器。
選擇器 | 描述 |
:focus | 給獲取焦點(diǎn)的元素設(shè)置樣式。 |
::selection | 給頁(yè)面中被選中的文本內(nèi)容設(shè)置樣式。 |
:checked | 給被選中的單選框或者復(fù)選框設(shè)置樣式。 |
:enabled | 給可用的表單設(shè)置樣式。 |
:disabled | 給不可用的表單設(shè)置樣式。 |
:read-only | 給只讀表單設(shè)置樣式。 |
:read-write | 給可讀寫的表單元素設(shè)置樣式。 |
:valid | 驗(yàn)證有效。 |
:invalid | 驗(yàn)證無(wú)效。 |
練習(xí)一：屬性有效性驗(yàn)證
頁(yè)面上有一個(gè)郵箱輸入框，當(dāng)你的輸入滿足郵箱格式時(shí)，輸入框的背景顏色為綠色；當(dāng)你的輸入不滿足要求，背景顏色為紅色。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
/*格式錯(cuò)誤*/
input:invalid {
background-color: red;
}
/*格式正確*/
input:valid {
background-color: green;
}
</style>
</head>
<body>
電子郵箱：<input type="email" />
</body>
</html>練習(xí)二：獲得焦點(diǎn)驗(yàn)證
頁(yè)面上有一個(gè)姓名輸入框和一個(gè)密碼輸入框，當(dāng)聚焦輸入框時(shí)，輸入框的背景顏色會(huì)發(fā)生改變，
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
input:focus {
background-color: rgb(255, 153, 0);
}
</style>
</head>
<body>
姓名：<input type="text" /><br />
密碼：<input type="password" />
</body>
</html>練習(xí)：
在前面的內(nèi)容中，我們已經(jīng)學(xué)習(xí)了 CSS3 的選擇器應(yīng)用。我們?cè)谥暗恼鹿?jié)中也做過橫向?qū)Ш剑@里我們結(jié)合所學(xué)的 CSS3 選擇器來實(shí)現(xiàn)一個(gè)升級(jí)版的導(dǎo)航。
按以上要求用 HTML 完成以下效果：
解題：
當(dāng)用戶進(jìn)行鼠標(biāo)框選選擇了頁(yè)面上的內(nèi)容時(shí)，把選擇的內(nèi)容進(jìn)行上報(bào)。
雖然這需求就一句話的事，但是很顯然，沒那么簡(jiǎn)單...
因?yàn)槭髽?biāo)框選說起來簡(jiǎn)單，就是選擇的內(nèi)容，但是這包含很多中情況，比如：只選擇文案、選擇圖片、選擇輸入框、輸入框中的內(nèi)容選擇、iframe、等。
簡(jiǎn)單總結(jié)，分為以下幾點(diǎn)：
鼠標(biāo)框選包含以下幾點(diǎn)：
老生常談的技術(shù)點(diǎn)了，這里不能用節(jié)流，因?yàn)榭隙ú荒苣闶髽?biāo)選擇的時(shí)候，隔一段時(shí)間返回一段內(nèi)容，肯定是選擇之后一起返回。
這里用 debounce 主要也是用在事件監(jiān)聽和事件處理上。
事件監(jiān)聽，因?yàn)槭髽?biāo)選擇，不僅僅是鼠標(biāo)按下到鼠標(biāo)抬起，還包括雙擊、右鍵、全選。
需要使用事件監(jiān)聽對(duì)事件作處理。
Range 接口表示一個(gè)包含節(jié)點(diǎn)與文本節(jié)點(diǎn)的一部分的文檔片段。
Range 是瀏覽器原生的對(duì)象。
<body>
<ul>
<li>Vite</li>
<li>Vue</li>
<li>React</li>
<li>VitePress</li>
<li>NaiveUI</li>
</ul>
</body>
<script>
// 創(chuàng)建 Range 對(duì)象
const range=new Range()
const liDoms=document.querySelectorAll("li");
// Range 起始位置在 li 2
range.setStartBefore(liDoms[1]);
// Range 結(jié)束位置在 li 3
range.setEndAfter(liDoms[2]);
// 獲取 selection 對(duì)象
const selection=window.getSelection();
// 添加光標(biāo)選擇的范圍
selection.addRange(range);
</script>可以看到，選擇內(nèi)容為第二行和第三行
只選擇 li 中的 itePres
可以看出 range 屬性對(duì)應(yīng)的值
const range=document.createRange();const range=window.getSelection().getRangeAt(0)if (document.caretRangeFromPoint) {
range=document.caretRangeFromPoint(e.clientX, e.clientY);
}const range=new Range()Selection 對(duì)象表示用戶選擇的文本范圍或插入符號(hào)的當(dāng)前位置。它代表頁(yè)面中的文本選區(qū)，可能橫跨多個(gè)元素。
window.getSelection()錨指的是一個(gè)選區(qū)的起始點(diǎn)（不同于 HTML 中的錨點(diǎn)鏈接）。當(dāng)我們使用鼠標(biāo)框選一個(gè)區(qū)域的時(shí)候，錨點(diǎn)就是我們鼠標(biāo)按下瞬間的那個(gè)點(diǎn)。在用戶拖動(dòng)鼠標(biāo)時(shí)，錨點(diǎn)是不會(huì)變的。
選區(qū)的焦點(diǎn)是該選區(qū)的終點(diǎn)，當(dāng)你用鼠標(biāo)框選一個(gè)選區(qū)的時(shí)候，焦點(diǎn)是你的鼠標(biāo)松開瞬間所記錄的那個(gè)點(diǎn)。隨著用戶拖動(dòng)鼠標(biāo)，焦點(diǎn)的位置會(huì)隨著改變。
范圍指的是文檔中連續(xù)的一部分。一個(gè)范圍包括整個(gè)節(jié)點(diǎn)，也可以包含節(jié)點(diǎn)的一部分，例如文本節(jié)點(diǎn)的一部分。用戶通常下只能選擇一個(gè)范圍，但是有的時(shí)候用戶也有可能選擇多個(gè)范圍。
一個(gè)用戶可編輯的元素（例如一個(gè)使用 contenteditable 的 HTML 元素，或是在啟用了 designMode 的 Document 的子元素）。
首先要清楚，選擇的起點(diǎn)稱為錨點(diǎn)(anchor)，終點(diǎn)稱為焦點(diǎn)(focus)。
function debounce (fn, time=500) {
let timeout=null; // 創(chuàng)建一個(gè)標(biāo)記用來存放定時(shí)器的返回值
return function () {
clearTimeout(timeout) // 每當(dāng)觸發(fā)時(shí)，把前一個(gè) 定時(shí)器 clear 掉
timeout=setTimeout(()=> { // 創(chuàng)建一個(gè)新的 定時(shí)器，并賦值給 timeout
fn.apply(this, arguments)
}, time)
}
}/**
* debounce 函數(shù)類型
*/
type DebouncedFunction<F extends (...args: any[])=> any>=(...args: Parameters<F>)=> void
/**
* debounce 防抖函數(shù)
* @param {Function} func 函數(shù)
* @param {number} wait 等待時(shí)間
* @param {false} immediate 是否立即執(zhí)行
* @returns {DebouncedFunction}
*/
function debounce<F extends (...args: any[])=> any>(
func: F,
wait=500,
immediate=false
): DebouncedFunction<F> {
let timeout: ReturnType<typeof setTimeout> | null
return function (this: ThisParameterType<F>, ...args: Parameters<F>) {
// eslint-disable-next-line @typescript-eslint/no-this-alias
const context=this
const later=function () {
timeout=null
if (!immediate) {
func.apply(context, args)
}
}
const callNow=immediate && !timeout
if (timeout) {
clearTimeout(timeout)
}
timeout=setTimeout(later, wait)
if (callNow) {
func.apply(context, args)
}
}
}nterface IGetSelectContentProps {
type: 'html' | 'text'
content: string
}
/**
* 獲取選擇的內(nèi)容
* @returns {null | IGetSelectContentProps} 返回選擇的內(nèi)容
*/
const getSelectContent=(): null | IGetSelectContentProps=> {
const selection=window.getSelection()
if (selection) {
// 1. 是焦點(diǎn)在 input 輸入框
// 2. 沒有選中
// 3. 選擇的是輸入框
if (selection.isCollapsed) {
return selection.toString().trim().length
? {
type: 'text',
content: selection.toString().trim()
}
: null
}
// 獲取選擇范圍
const range=selection.getRangeAt(0)
// 獲取選擇內(nèi)容
const rangeClone=range.cloneContents()
// 判斷選擇內(nèi)容里面有沒有節(jié)點(diǎn)
if (rangeClone.childElementCount > 0) {
// 創(chuàng)建 div 標(biāo)簽
const container=document.createElement('div')
// div 標(biāo)簽 append 復(fù)制節(jié)點(diǎn)
container.appendChild(rangeClone)
// 如果復(fù)制的內(nèi)容長(zhǎng)度為 0
if (!selection.toString().trim().length) {
// 判斷是否有選擇特殊節(jié)點(diǎn)
const isSpNode=hasSpNode(container)
return isSpNode
? {
type: 'html',
content: container.innerHTML
}
: null
}
return {
type: 'html',
content: container.innerHTML
}
} else {
return selection.toString().trim().length
? {
type: 'text',
content: selection.toString().trim()
}
: null
}
} else {
return null
}
}
/**
* 判斷是否包含特殊元素
* @param {Element} parent 父元素
* @returns {boolean} 是否包含特殊元素
*/
const hasSpNode=(parent: Element): boolean=> {
const nodeNameList=['iframe', 'svg', 'img', 'audio', 'video']
const inpList=['input', 'textarea', 'select']
return Array.from(parent.children).some((node)=> {
if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
if (
inpList.includes(node.nodeName.toLocaleLowerCase()) &&
(node as HTMLInputElement).value.trim().length
)
return true
if (node.children) {
return hasSpNode(node)
}
return false
})
}/**
* 獲取框選的文案內(nèi)容
* @returns {string} 返回框選的內(nèi)容
*/
const getSelectTextContent=(): string=> {
const selection=window.getSelection()
return selection?.toString().trim() || ''
}// 是否時(shí)鼠標(biāo)點(diǎn)擊動(dòng)作
let selectionchangeMouseTrack: boolean=false
const selectionChangeFun=debounce(()=> {
const selectContent=getSelectContent()
console.log('selectContent', selectContent)
// todo... 處理上報(bào)
selectionchangeMouseTrack=false
})
// 添加 mousedown 監(jiān)聽事件
document.addEventListener('mousedown', ()=> {
selectionchangeMouseTrack=true
})
// 添加 mouseup 監(jiān)聽事件
document.addEventListener(
'mouseup',
debounce(()=> {
selectionChangeFun()
}, 100)
)
// 添加 selectionchange 監(jiān)聽事件
document.addEventListener(
'selectionchange',
debounce(()=> {
if (selectionchangeMouseTrack) return
selectionChangeFun()
})
)
// 添加 dblclick 監(jiān)聽事件
document.addEventListener('dblclick', ()=> {
selectionChangeFun()
})
// 添加 contextmenu 監(jiān)聽事件
document.addEventListener(
'contextmenu',
debounce(()=> {
selectionChangeFun()
})
)也可以進(jìn)行封裝
/**
* addEventlistener function 類型
*/
export interface IEventHandlerProps {
[eventName: string]: EventListenerOrEventListenerObject
}
let selectionchangeMouseTrack: boolean=false
const eventHandlers: IEventHandlerProps={
// 鼠標(biāo) down 事件
mousedown: ()=> {
selectionchangeMouseTrack=true
},
// 鼠標(biāo) up 事件
mouseup: debounce(()=> selectionChangeFun(), 100),
// 選擇事件
selectionchange: debounce(()=> {
if (selectionchangeMouseTrack) return
selectionChangeFun()
}),
// 雙擊事件
dblclick: ()=> selectionChangeFun(),
// 右鍵事件
contextmenu: debounce(()=> selectionChangeFun())
}
Object.keys(eventHandlers).forEach((event)=> {
document.addEventListener(event, eventHandlers[event])
})function debounce (fn, time=500) {
let timeout=null; // 創(chuàng)建一個(gè)標(biāo)記用來存放定時(shí)器的返回值
return function () {
clearTimeout(timeout) // 每當(dāng)觸發(fā)時(shí)，把前一個(gè) 定時(shí)器 clear 掉
timeout=setTimeout(()=> { // 創(chuàng)建一個(gè)新的 定時(shí)器，并賦值給 timeout
fn.apply(this, arguments)
}, time)
}
}
let selectionchangeMouseTrack=false
document.addEventListener('mousedown', (e)=> {
selectionchangeMouseTrack=true
console.log('mousedown', e)
})
document.addEventListener('mouseup', debounce((e)=> {
console.log('mouseup', e)
selectionChangeFun()
}, 100))
document.addEventListener('selectionchange', debounce((e)=> {
console.log('selectionchange', e)
if (selectionchangeMouseTrack) return
selectionChangeFun()
}))
document.addEventListener('dblclick', (e)=> {
console.log('dblclick', e)
selectionChangeFun()
})
document.addEventListener('contextmenu',debounce(()=> {
selectionChangeFun()
}))
const selectionChangeFun=debounce(()=> {
const selectContent=getSelectContent()
selectionchangeMouseTrack=false
console.log('selectContent', selectContent)
})
const getSelectContent=()=> {
const selection=window.getSelection();
if (selection) {
// 1. 是焦點(diǎn)在 input 輸入框
// 2. 沒有選中
// 3. 選擇的是輸入框
if (selection.isCollapsed) {
return selection.toString().trim().length ? {
type: 'text',
content: selection.toString().trim()
} : null
}
// 獲取選擇范圍
const range=selection.getRangeAt(0);
// 獲取選擇內(nèi)容
const rangeClone=range.cloneContents()
// 判斷選擇內(nèi)容里面有沒有節(jié)點(diǎn)
if (rangeClone.childElementCount > 0) {
const container=document.createElement('div');
container.appendChild(rangeClone);
if (!selection.toString().trim().length) {
const hasSpNode=getSpNode(container)
return hasSpNode ? {
type: 'html',
content: container.innerHTML
} : null
}
return {
type: 'html',
content: container.innerHTML
}
} else {
return selection.toString().trim().length ? {
type: 'text',
content: selection.toString().trim()
} : null
}
} else {
return null
}
}
const getSpNode=(parent)=> {
const nodeNameList=['iframe', 'svg', 'img', 'audio', 'video']
const inpList=['input', 'textarea', 'select']
return Array.from(parent.children).some((node)=> {
if (nodeNameList.includes(node.nodeName.toLocaleLowerCase())) return true
if (inpList.includes(node.nodeName.toLocaleLowerCase()) && node.value.trim().length) return true
if (node.children) {
return getSpNode(node)
}
return false
})
}面是承接上文的知識(shí)點(diǎn)簡(jiǎn)介：
6.表單
對(duì)于功能性的表單，HTML僅僅是產(chǎn)生表單的表面樣子，為后臺(tái)提供數(shù)據(jù)。
創(chuàng)建所有表單 <form></form>
創(chuàng)建一個(gè)滾動(dòng)菜單，size設(shè)置在需要滾動(dòng)前可以看到的表單項(xiàng)數(shù)目 <select multiple name=”NAME” size=</select>
設(shè)置每個(gè)表單項(xiàng)的內(nèi)容 <option>
創(chuàng)建一個(gè)下拉菜單 <select name=”NAME”></select>
文本框區(qū)域，列的數(shù)目設(shè)置寬度，行的數(shù)目設(shè)置高度 <textarea name=”NAME” cols=40 rows=8></textarea>
復(fù)選框，文字在標(biāo)簽后面 <input type=”checkbox” name=”NAME”>
單選框，文字在標(biāo)簽后面 <input type=”radio” name=”NAME” value=”x”>
單行文本輸入?yún)^(qū)域，size設(shè)置以字符計(jì)的寬度 <input type=text name=”foo” size=20>
submit（提交）按鈕 <input type=”submit” value=”NAME”>
使用圖象的submit（提交）按鈕 <input type=”image” border=0 name=”NAME” src=”name.gif”>
reset（重置）按鈕 <input type=”reset”>
本來以為后面還會(huì)有更多知識(shí)點(diǎn)可以分享給大家，誰(shuí)知都是一下雜亂無(wú)章的筆記而已
下面我想和大家分享一下，CSS的選擇器吧
文章如下
在CSS中，選擇器用于選擇需要添加樣式的元素，簡(jiǎn)單的講，就是確定你要把樣式給那個(gè)元素。在我們寫web前端的時(shí)候，選擇器的使用是非常頻繁的，合理的使用選擇器會(huì)精簡(jiǎn)大量的代碼。小松果總結(jié)了下，CSS選擇器大致的歸類為基礎(chǔ)選擇器和符合選擇器兩類。
1、基礎(chǔ)選擇器
a、html標(biāo)簽選擇器：
標(biāo)簽{屬性：屬性值}
div、p、h1、span……
b、class 類選擇器，可以共用重復(fù)：
.name {屬性：屬性值}
標(biāo)簽中有class=”name”的元素
c、id選擇器： 唯一性
#name{屬性：屬性值}
標(biāo)簽中有id=”name”的元素
d、屬性選擇器
*[title] {屬性：屬性值}
所有包含標(biāo)題（title）的元素
e、通配符選擇器，所有的元素：
* {屬性：屬性值}
例：* {margin：0； padding：0}
2、復(fù)合選擇器
a、 后代選擇器：
A B { 屬性：屬性值}
注：A指父級(jí)選擇器 B指子級(jí)選擇器
b、偽類選擇器：
a:link {屬性：屬性值} 默認(rèn)
a:visited {屬性：屬性值} 訪問過的鏈接
a:hover {屬性：屬性值} 鼠標(biāo)經(jīng)過
a:active {屬性：屬性值} 激活狀態(tài)（選中時(shí)的狀態(tài)）
注：順序不能錯(cuò) l v h a，還有一個(gè)a {屬性：屬性值} ，這個(gè)也要寫，里面放超鏈接中相同屬性，不同屬性分別寫在不同的偽類選擇器中。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
