abstract：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, in
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>jquery小案例</title>
<script src="jquery-3.3.1.min.js"></script>
</head>
<body>
//基本選擇器
// 語(yǔ)法
// $('#id名')根據(jù)給定的id來(lái)匹配到元素
// $('.class名')根據(jù)給定的class來(lái)匹配到元素
// $('element')根據(jù)給定的標(biāo)簽名來(lái)匹配到元素
// $('*')匹配所有元素
// $('#id,.class名,element')匹配到頁(yè)面中多個(gè)選擇器
// $(document).ready(function(){
// $('#box').css('background','red')
// $('.box').css('background','blue')
// $('span').css('font-size','30px')
// $('*').css('font-family','宋體')
// $('#box,.box,span').css('color','pink')
// })
// 層級(jí)選擇器（相當(dāng)于父類(lèi)和子類(lèi)的元素關(guān)系）
// 給定的父級(jí)元素下匹配所有的子元素：$('父級(jí)元素 > 子級(jí)元素')
// 給定的祖先元素下匹配所有的后代元素：$('祖先元素 后代元素')
// 匹配緊跟在prev元素后面的next元素：$('prev + next')(同級(jí)的元素)
// 匹配prev元素后面所有的siblings元素：$('prev ~ siblings')
// $(document).ready(function(){
// // $('ul>li').css('list-style','none')
// $('ul li').css('list-style','none')
// $('input+button').css('height','50px')
// $('label~input').css('background','pink')
// })
// 順序選擇器
// 1、順序
// $(':first') 第一個(gè)元素
// $(':last') 最后一個(gè)元素
// 2、比較(x的順序是從0開(kāi)始)
// $(':gt(x)')表示大于值x的元素
// $(':lt(x)')表示小于值x的元素
// $(':eq(x)')表示等于值x的元素
// 3、奇偶數(shù)
// $(':odd')奇數(shù)順序
// $(':even')偶數(shù)順序
// 4、非
// $(':not(selector)')匹配不是selector的所有元素
//$(document).ready(function(){
// $('p:first').css('color','red')
// $('p:last').css('color','blue')
// $('p:gt(1)').css('font-size','30px')
// $('p:lt(2)').css('color','red')
// $('p:eq(1)').css('color','red')
// $('p:odd').css('background','#ccc')
// $('p:even').css('background','pink')
//$('p:not(#box)').css('background','red')
//})
// 內(nèi)容選擇器
// 語(yǔ)法：
// $(':contains(text)') 匹配包含給定文本（text）的元素
// $(':has(selector)')匹配包含特定選擇器元素的元素
// $(':empty')匹配不含有內(nèi)容的元素（即 不包含子元素或者文本的空元素）
// $(':parent')匹配含有子元素或者文本的元素
//$(document).ready(function(){
// $('div:contains(jun)').css('background','blue')
// $('div:has(span)').css('color','red')
// $('div:empty').css('background','red')
// $('div:parent').css('background','red')
//})
// 屬性選擇器
// 語(yǔ)法：
// $('[屬性名]')匹配包含給定屬性的元素
// $('[attribute=value]')匹配給定屬性是某個(gè)特定值的元素
//$('[attribute！=value]')匹配所有不含有指定值的屬性，或者說(shuō)是屬性不等于特定值的元素
// $('[attribute ^= value]')匹配給定屬性是以某些值開(kāi)始的元素
// $('[attribute $= value]')匹配給定屬性是以某些值結(jié)尾的元素
// $('[attribute *= value]')匹配給定屬性包含某些值的元素
//$('attrSel[1] attrSel[1] attrSel[1]')復(fù)合選擇器，需要同時(shí)滿(mǎn)足多個(gè)條件時(shí)使用
//$(document).ready(function(){
// $('input[type]').css('background','pink')
// $('input[type=button]').css('background','blue')
// $('input[type!=text]').css('background','red')
// $('input[type ^=t ]').css('background','red')
// $('input[type $=n ]').css('background','red')
// $('input[type *=o ]').css('background','blue')
// $('input[id][name*=n]').css('background','red')
//})
// 表單選擇器
// 語(yǔ)法：
// $(':enabled')所有激活的input元素（可以使用的input元素）
// $(':disabled')所有禁用的input元素（不可以使用的input元素）
// $(':selected')所有被選取的元素，針對(duì)于select元素
// $(':checked')所有被選中的input元素
<script>
$(document).ready(function(){
$('div').hide()
$('button').click(function(){
$('div').show()
})
})
</script>
<div style="width: 100px;height: 100px;background:pink;"></div>
<button>點(diǎn)擊</button>
</body>
</html>
Correcting teacher：天蓬老師Correction time：2019-08-20 17:29:20
Teacher's summary：咱們使用jQuery, 一個(gè)重要原因, 就是選取元素非常的方便, 但是要注意, 他返回的是一批而不是一個(gè), 默認(rèn)是循環(huán)處理