收藏
批改狀態(tài)：合格
老師批語(yǔ)：
本次直接上代碼閱讀
請(qǐng)選擇自己習(xí)慣的和常用的，其他的則記住既可
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>選擇器</title>
</head>
<body>
<h1>選擇器的基本總結(jié)</h1>
<p>1.基本選擇器</p>
<pre>
$("#id") ID選擇器
$("p") 元素選擇器
$(".class") 類選擇器
</pre>
<p>2.內(nèi)容過(guò)濾選擇器</p>
<pre>
$("#id:contains('內(nèi)容')") 包含指定文本
$("p:empty") 元素內(nèi)為空
$(".class:parent") 包含指定元素的父元素
$(".class:has()") 包含指定元素
</pre>
<p>3.過(guò)濾選擇器器</p>
<pre>
$("li:first') 第一個(gè)li
$("li:last') 最后一個(gè)li
$("li:even') 第奇數(shù)個(gè)li（實(shí)際是偶數(shù)）
$("li:first') 第偶數(shù)個(gè)li（實(shí)際是奇數(shù)）
$("li:eq(2)") 第二個(gè)li
$("li:gt(2)') 大于2的li
$("li:lt(2)') 小于2的li
</pre>
<p>4.表單選擇器</p>
<pre>
$(":input") 匹配所有input元素
$(":text") 匹配所有帶有 type="text" 的 input 元素
其他type為password，submit等的都一樣
</pre>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
再看看實(shí)際上運(yùn)用，這些選擇器其實(shí)都是想通，可以換著用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery 效果- 隱藏和顯示</title>
<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
</head>
<body>
<pre>
jQuery隱藏與顯示
隱藏 hide()
顯示 show()
切換 toggle()
參數(shù)：時(shí)間，函數(shù)
</pre>
<button>點(diǎn)擊隱藏</button>
<button>點(diǎn)擊顯示</button>
<button>點(diǎn)擊切換</button>
<div style="width: 100px;height: 200px; background: #ffeba9"></div>
<script>
$('button:first').click(function(){
$(":empty").hide(1000)
})
$('button:first').next().click(function(){
$("div").show(1000)
})
$('button:last').click(function(){
$("div[style]").toggle(1000)
})
</script>
</body>
</html>點(diǎn)擊 "運(yùn)行實(shí)例" 按鈕查看在線實(shí)例
微信掃碼
關(guān)注PHP中文網(wǎng)服務(wù)號(hào)
技術(shù)交流群
QQ掃碼
加入技術(shù)交流群
Copyright 2014-2025 http://ipnx.cn/ All Rights Reserved | php.cn | 湘ICP備2023035733號(hào)