摘要：<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery選擇器學習總結</title> <script type="text/javascript" src=&quo
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery選擇器學習總結</title>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<style type="text/css">
.SubCategoryBox{margin:0 auto; width:800px;border:1px solid #ccc;overflow: hidden;font-size: 16px;}
.SubCategoryBox li{float: left;width: 240px;list-style: none;}
.showmore{clear: both;text-align: center;padding: 5px 0 5px;}
.showmore a{display: inline-block;border:1px solid green;padding:5px;}
.showmore a:hover{background-color: green;}
</style>
</head>
<body>
<div>
<ul>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">索尼</a><i>(27220)</i></li>
<li><a href="#">三星</a><i>(20808)</i></li>
<li><a href="#">尼康</a><i>(17821)</i></li>
<li><a href="#">松下</a><i>(12289)</i></li>
<li><a href="#">卡西歐</a><i>(8242)</i></li>
<li><a href="#">其他品牌相機</a><i>(7275)</i></li>
</ul>
<div>
<a href="more.html"><span>顯示全部品牌</span></a>
</div>
</div>
</body>
</html>
<script>
// -------------------------------------------------------------------------------------------------------------------------------------
// 基本選擇器
// 語法
// $("#id名")獲取HTML元素的ID選擇器 //$('#box').css('background','red')
// $(".class名")獲取HTML元素的class選擇器 //$('.box').css('background','blue')
// $("element")獲取HTML元素名稱 // $('span').css('font-size','38px')
// $("*")獲取HTML的所有元素 // $('*').css('font-family','宋體')
// $("#id,class名,element")多個元素的選擇和css一樣用逗號直接隔開 $('#box,.box,span').css('border','solid 10px #ccc')
// $(document).ready(function(){
// $('#box').css('background','red')
// $('.box').css('background','blue')
// $('span').css('font-size','38px')
// $('*').css('font-family','宋體')
// $('#box,.box,span').css('border','solid 10px #ccc')
// })
// -------------------------------------------------------------------------------------------------------------------------------------
//層級選擇器（ 相當于父類和子類的元素 ） // $('ul>li').css('list-style','none')
//給定的父級元素下匹配的子元素：$('父級元素 > 子級元素') // $('ul li').css('list-style','none')
//匹配跟緊prev元素后面的next元素：$('prev + next')(同級的元素在主元素的后一個) // $('label+input').css('height','50px')
//匹配prev元素后面所有的siblings元素：$('pre ~ siblings') // $('label~input').css('background','red')
// -------------------------------------------------------------------------------------------------------------------------------------
// // 順序選擇器
// 1、順序：
// 第一個元素
// $(':first') //$('p:first').css('color','red')
// 最后一個元素
// $(':last') //$('p:last').css('background','green')
// 2、比較 x的值c從0開始
// 表示大于值X的元素
// $('：gt(x)') //$('p:lt(2)').css('background','red')
// 表示小于值x的元素
// $(':lt(x)') //$('p:eq(3)').css('background','red')
//表示等于X值的元素
// $(':eq(x)') //$('p:gt(2)').css('background','red')
// 3、奇偶順序
// 奇數(shù)順序
// $(':odd') //$('p:odd').css('background','red')
// 偶數(shù)順數(shù)
// $('：even') //$('p:even').css('background','red')
// 4、非
// 匹配不足selector的所有元素
// $(':not(selector)') // $('p:not(#selector)').css('background','red')
// -------------------------------------------------------------------------------------------------------------------------------------
// //內容選擇器
// 語法：
// 匹配包含給定文本（text）的元素
// $(':contains(text)') //$('div:contains(jion)').css('background','blue')
//匹配包含特定選擇器元素的元素
// $(':has(selector)') //$('div:has(span)').css('color','yellow')
// 匹配不含有內容的元素（即 不包含子元素或者文本的空元素）
// $(':empty') //$('div:empty').css('background','green')
// 匹配含有子元素或者文本元素
// $(':parent') //$('div:parent').css('background','#000')
// -------------------------------------------------------------------------------------------------------------------------------------
// // 屬性選擇器
// 匹配包含給定屬性的元素
// $('[屬性名]') //// $('input[type]').css('background','pink')
// 匹配給定熟悉是某個特定的值的元素
// $('[attribute=value]') //// $('input[type=button]').css('background','blue')
// 匹配所以不含有指定的值的元素，或者屬性不等于特定值的元素
// $('[attribute != value]') //// $('input[type !=text]').css('background','red')
// 匹配給定的屬性以某些值開始的元素
// $('[attribute] ^= value') //// $('input[type ^= t]').css('background','red')
// 匹配給定的屬性以某些值結尾的元素
// $('[attribute] $= value') //// $('input[type $= d]').css('background','red')
// 匹配給定熟悉包含某些值的元素
// $('[attribute] *= value') //// $('input[type *=o]').css('background','blue')
// 復合選擇器，需要同時滿足多個條件時使用
// $('attsel[i] attrsel[i] attrsel[i]') //$('input[id][name*=n]').css('background','red')
// -------------------------------------------------------------------------------------------------------------------------------------
//表單選擇器
//語法
// $(':enabled')所有激活的input元素（可以使用的input元素） // $(':enabled').css('background','red')
// $(':disabled')所有禁用的input元素（不可以使用的input元素） // $(':disabled').css('background','yellow')
// $(':selected')所有被選取的元素，針對于select元素 // $(':selected').css('background','yellow')
// $(':checked')所有被選中的input元素 //$(':checked').parent().css('background','yellow')
</script><!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jquery選擇器學習總結</title>
<script type="text/javascript" src="jquery/jquery-3.3.1.min.js"></script>
<style type="text/css">
.SubCategoryBox{margin:0 auto; width:800px;border:1px solid #ccc;overflow: hidden;font-size: 16px;}
.SubCategoryBox li{float: left;width: 240px;list-style: none;}
.showmore{clear: both;text-align: center;padding: 5px 0 5px;}
.showmore a{display: inline-block;border:1px solid green;padding:5px;}
.showmore a:hover{background-color: green;}
</style>
<script type="text/javascript">
//$ Jquery預加載文件
$(document).ready(function(){
$('i:contains(30440)').css('color','red');
$('i:contains(9520)').css('color','red');
$('i:contains(1466)').css('color','red');
$('i:contains(3091)').css('color','red');
})
</script>
</head>
<body>
<div>
<ul>
<li><a href="#">佳能</a><i>(30440)</i></li>
<li><a href="#">索尼</a><i>(27220)</i></li>
<li><a href="#">三星</a><i>(20808)</i></li>
<li><a href="#">尼康</a><i>(17821)</i></li>
<li><a href="#">松下</a><i>(12289)</i></li>
<li><a href="#">卡西歐</a><i>(8242)</i></li>
<li><a href="#">富士</a><i>(14894)</i></li>
<li><a href="#">柯達</a><i>(9520)</i></li>
<li><a href="#">賓得</a><i>(2195)</i></li>
<li><a href="#">理光</a><i>(4114)</i></li>
<li><a href="#">奧林巴斯</a><i>(12205)</i></li>
<li><a href="#">明基</a><i>(1466)</i></li>
<li><a href="#">愛國者</a><i>(3091)</i></li>
<li><a href="#">其他品牌相機</a><i>(7275)</i></li>
</ul>
<div>
<a href="jquery選擇器 - 學習總結.html"><span>精簡顯示品牌</span></a>
</div>
</div>
</body>
</html>
<script>
// -------------------------------------------------------------------------------------------------------------------------------------
// 基本選擇器
// 語法
// $("#id名")獲取HTML元素的ID選擇器 //$('#box').css('background','red')
// $(".class名")獲取HTML元素的class選擇器 //$('.box').css('background','blue')
// $("element")獲取HTML元素名稱 // $('span').css('font-size','38px')
// $("*")獲取HTML的所有元素 // $('*').css('font-family','宋體')
// $("#id,class名,element")多個元素的選擇和css一樣用逗號直接隔開 $('#box,.box,span').css('border','solid 10px #ccc')
// $(document).ready(function(){
// $('#box').css('background','red')
// $('.box').css('background','blue')
// $('span').css('font-size','38px')
// $('*').css('font-family','宋體')
// $('#box,.box,span').css('border','solid 10px #ccc')
// })
// -------------------------------------------------------------------------------------------------------------------------------------
//層級選擇器（ 相當于父類和子類的元素 ） // $('ul>li').css('list-style','none')
//給定的父級元素下匹配的子元素：$('父級元素 > 子級元素') // $('ul li').css('list-style','none')
//匹配跟緊prev元素后面的next元素：$('prev + next')(同級的元素在主元素的后一個) // $('label+input').css('height','50px')
//匹配prev元素后面所有的siblings元素：$('pre ~ siblings') // $('label~input').css('background','red')
// -------------------------------------------------------------------------------------------------------------------------------------
// // 順序選擇器
// 1、順序：
// 第一個元素
// $(':first') //$('p:first').css('color','red')
// 最后一個元素
// $(':last') //$('p:last').css('background','green')
// 2、比較 x的值c從0開始
// 表示大于值X的元素
// $('：gt(x)') //$('p:lt(2)').css('background','red')
// 表示小于值x的元素
// $(':lt(x)') //$('p:eq(3)').css('background','red')
//表示等于X值的元素
// $(':eq(x)') //$('p:gt(2)').css('background','red')
// 3、奇偶順序
// 奇數(shù)順序
// $(':odd') //$('p:odd').css('background','red')
// 偶數(shù)順數(shù)
// $('：even') //$('p:even').css('background','red')
// 4、非
// 匹配不足selector的所有元素
// $(':not(selector)') // $('p:not(#selector)').css('background','red')
// -------------------------------------------------------------------------------------------------------------------------------------
// //內容選擇器
// 語法：
// 匹配包含給定文本（text）的元素
// $(':contains(text)') //$('div:contains(jion)').css('background','blue')
//匹配包含特定選擇器元素的元素
// $(':has(selector)') //$('div:has(span)').css('color','yellow')
// 匹配不含有內容的元素（即 不包含子元素或者文本的空元素）
// $(':empty') //$('div:empty').css('background','green')
// 匹配含有子元素或者文本元素
// $(':parent') //$('div:parent').css('background','#000')
// -------------------------------------------------------------------------------------------------------------------------------------
// // 屬性選擇器
// 匹配包含給定屬性的元素
// $('[屬性名]') //// $('input[type]').css('background','pink')
// 匹配給定熟悉是某個特定的值的元素
// $('[attribute=value]') //// $('input[type=button]').css('background','blue')
// 匹配所以不含有指定的值的元素，或者屬性不等于特定值的元素
// $('[attribute != value]') //// $('input[type !=text]').css('background','red')
// 匹配給定的屬性以某些值開始的元素
// $('[attribute] ^= value') //// $('input[type ^= t]').css('background','red')
// 匹配給定的屬性以某些值結尾的元素
// $('[attribute] $= value') //// $('input[type $= d]').css('background','red')
// 匹配給定熟悉包含某些值的元素
// $('[attribute] *= value') //// $('input[type *=o]').css('background','blue')
// 復合選擇器，需要同時滿足多個條件時使用
// $('attsel[i] attrsel[i] attrsel[i]') //$('input[id][name*=n]').css('background','red')
// -------------------------------------------------------------------------------------------------------------------------------------
//表單選擇器
//語法
// $(':enabled')所有激活的input元素（可以使用的input元素） // $(':enabled').css('background','red')
// $(':disabled')所有禁用的input元素（不可以使用的input元素） // $(':disabled').css('background','yellow')
// $(':selected')所有被選取的元素，針對于select元素 // $(':selected').css('background','yellow')
// $(':checked')所有被選中的input元素 //$(':checked').parent().css('background','yellow')
</script>
批改老師：滅絕師太批改時間：2018-11-28 14:11:18
老師總結：比較全面呀！算是一個課程總結，作業(yè)總結習慣很棒！繼續(xù)！