Java Web：例子，JQUERY屬性選擇器和過濾選擇器,JSP，PPT，作業(yè)，筆記【詩書畫唱】
作業(yè)：
? ?1、給位于嵌套列表第二個(gè)層次的所有l(wèi)i元素添加special類；
2、給位于表格第三列的所有單元格添加year類；
3、為表格中包含文本Tragedy的第一行添加special類；
4、挑戰(zhàn)：選擇包含鏈接（a）的所有列表項(xiàng)（li元素），為每個(gè)選中的列表項(xiàng)的同輩列表項(xiàng)元素添加afterlink類；
5、挑戰(zhàn)：為與.pdf鏈接接近的祖先元素ul添加tragedy類。
<!doctype html>
<html>
? ? <head>
? ? ? ? <title>homework</title>
<style type="text/css">
? ? html, body {
? margin: 0;
? padding: 0;
}
body {
? font: 62.5% Verdana, Helvetica, Arial, sans-serif;
? color: #000;
? background: #fff;
}
#container {
? font-size: 1.2em;
? margin: 10px 2em;
}
h1 {
? font-size: 2.5em;
? margin-bottom: 0;
}
h2 {
? font-size: 1.3em;
? margin-bottom: .5em;
}
h3 {
? font-size: 1.1em;
? margin-bottom: 0;
}
code {
? font-size: 1.2em;
}
a {
? color: #06581f;
}
h2 {
? clear: left;
}
li {
? padding: 0 3px;
? color: #000;
}
.horizontal {
? float: left;
? list-style: none;
? margin: 10px;
}
.sub-level {
? background: #ccc;
}
a {
? color: #00c;
}
a.mailto {
? background: url(img/email.png) no-repeat 100% 2px;
? padding-right: 18px;
}
a.pdflink {
? background: url(img/pdf.png) no-repeat 100% 0;
? padding-right: 18px;
}
a.henrylink {
? background-color: #fff;
? padding: 2px;
? border: 1px solid #000;
}
a.external {
? background: #fff url(img/external.png) no-repeat 100% 2px;
? padding-right: 16px;
}
ul.tragedy {
? border: 1px solid #999;
}
li.afterlink {
? border-right: 4px solid #090;
}
table {
? border-collapse: collapse;
}
th, td {
? text-align: left;
? padding: 2px 4px;
}
.table-heading {
? background-color: #000;
? color: #fff;
}
.alt {
? background-color: #ccc;
}
.highlight {
? font-weight: bold;
? font-style: italic;
}
.italic {
? font-style: italic;
}
.bold {
? font-weight: bold;
}
.special {
? color: #f00;
}
.year {
? background-color: #888;
? color: #fff;
? padding: 0 10px;
? text-align: center;
}
</style>
<script type="text/javascript" srcc="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
? $('#selected-plays > li > ul > li').addClass('special');
? //$('#selected-plays ul > li').addClass('special');
? //$('#selected-plays ul ul > li').removeClass('special');
? $('tr').find('td:eq(2)').addClass('year');
? $('td:contains(Tragedy)').parent().filter('tr:eq(0)').addClass('special');
? //$('tr:contains(Tragedy)').filter('tr:eq(0)').addClass('special');
? //$('a').parent().parent().children().not('li:has(a)').addClass('afterlink');
? $('a').parent().siblings().not('li:has(a)').addClass('afterlink');
? console.log($('#email').parent().siblings());
? $('a[href$=".pdf"]').parents('ul:eq(0)').addClass('tragedy');
});
? ? $(document).ready(function() {
? ? ? ? $('#selected-plays > li').addClass('horizontal');
? ? ? ? $('#selected-plays li:not(.horizontal)').addClass('sub-level');
? ? ? ? $('a[href^="mailto:"]').addClass('mailto');
? ? ? ? $('a[href$=".pdf"]').addClass('pdflink');
? ? ? ? $('a[href^="http"][href*="henry"]').addClass('henrylink');
? ? ? ? $('a').filter(function() {
? ? ? ? return this.hostname && this.hostname != location.hostname;
? ? ? ? }).addClass('external');
? ? ? ? $('tr:nth-child(odd)').addClass('alt');
? ? ? ? $('td:contains(Henry)') // Find every cell containing "Henry"
? ? .parent() // Select its parent
? ? .find('td:eq(1)') // Find the 2nd descendant cell
? ? .addClass('highlight') // Add the "highlight" class
? ? .end() // Return to the parent of the cell containing "Henry"
? ? .find('td:eq(2)') // Find the 3rd descendant cell
? ? .addClass('highlight'); // Add the "highlight" class
});
</script>
? ? </head>
? ? <body>
? ? ? ? <!--
? ? 1、給位于嵌套列表第二個(gè)層次的所有l(wèi)i元素添加special類；
2、給位于表格第三列的所有單元格添加year類；
3、為表格中包含文本Tragedy的第一行添加special類；
4、挑戰(zhàn)：選擇包含鏈接（a）的所有列表項(xiàng)（li元素），為每個(gè)選中的列表項(xiàng)的同輩列表項(xiàng)元素添加afterlink類；
5、挑戰(zhàn)：為與.pdf鏈接接近的祖先元素ul添加tragedy類。
-->
<div id="container">
? ? <!-- 嵌套列表開始 -->
? ? ? ? ? ? <h2>Selected Shakespeare Plays</h2>
? ? ? ? ? ? <ul id="selected-plays">
? ? ? ? ? ? ? ? <li>Comedies
? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? <li><a href="/asyoulikeit/">As You Like It</a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li>All's Well That Ends Well</li>
? ? ? ? ? ? ? ? ? ? ? ? <li>A Midsummer Night's Dream</li>
? ? ? ? ? ? ? ? ? ? ? ? <li>Twelfth Night</li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li>Tragedies
? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? <li><a href="hamlet.pdf">Hamlet</a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li>Macbeth</li>
? ? ? ? ? ? ? ? ? ? ? ? <li>Romeo and Juliet</li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? <li>Histories
? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? <li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)
? ? ? ? ? ? ? ? ? ? ? ? ? ? <ul>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li>Part I</li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? <li>Part II</li>
? ? ? ? ? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? ? ? ? ? ? ? <li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>
? ? ? ? ? ? ? ? ? ? ? ? <li>Richard II</li>
? ? ? ? ? ? ? ? ? ? </ul>
? ? ? ? ? ? ? ? </li>
? ? ? ? ? ? </ul>
<!-- 嵌套列表結(jié)束 -->
? ? ? ? ? ? <!-- 表格開始 -->
? ? ? ? ? ? <h2>Shakespeare's Plays</h2>
? ? ? ? ? ? <table>
<tr>
<td>As You Like It</td>
<td>Comedy</td>
<td></td>
</tr>
<tr>
<td>All's Well that Ends Well</td>
<td>Comedy</td>
<td>1601</td>
</tr>
<tr>
<td>Hamlet</td>
<td>Tragedy</td>
<td>1604</td>
</tr>
<tr>
<td>Macbeth</td>
<td>Tragedy</td>
<td>1606</td>
</tr>
<tr>
<td>Romeo and Juliet</td>
<td>Tragedy</td>
<td>1595</td>
</tr>
<tr>
<td>Henry IV, Part I</td>
<td>History</td>
<td>1596</td>
</tr>
<tr>
<td>Henry V</td>
<td>History</td>
<td>1599</td>
</tr>
</table>
<h2>Shakespeare's Sonnets</h2>
<table>
<tr>
? <td>The Fair Youth</td>
? <td>1–126</td>
</tr>
<tr>
? <td>The Dark Lady</td>
? <td>127–152</td>
</tr>
<tr>
? <td>The Rival Poet</td>
? <td>78–86</td>
</tr>
</table>
<!-- 表格結(jié)束 -->
? ? ? ? </div>
? ? </body>
</html>
——————
素材：
Shakespeare's Plays
As You Like It Comedy??
All's Well that Ends Well Comedy 1601?
Hamlet Tragedy 1604?
Macbeth Tragedy 1606?
Romeo and Juliet Tragedy 1595?
Henry IV, Part I History 1596?
Henry V History 1599?
Shakespeare's Sonnets
The Fair Youth 1–126?
The Dark Lady 127–152?
The Rival Poet 78–86?
莎士比亞戲劇
你喜歡喜劇嗎
1601年喜劇《萬事如意》
哈姆雷特悲劇1604
麥克白悲劇1606
羅密歐與朱麗葉悲劇1595
亨利四世，第一部分歷史1596
亨利五世歷史1599
十四行詩
《美麗的青春》1-126
《黑娘子》127-152
對(duì)手詩人78-86
——————————————
例子：
<!doctype html>
<html>
? ? <head>
? ? ? ? <title>Document</title>
<style type="text/css">?
? ? tr {? ?
? ? background-color: #fff;??
}?
.alt {? ?
? ? background-color: #ccc;??
}?
.highlight {
? ? font-weight:bold;?
font-style:italic;?
}
</style>
<script type="text/javascript" srcc="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
? ? $(document).ready(function() {
//為表格中的奇數(shù)行（<tr>標(biāo)簽）添加樣式類alt
//因?yàn)樾蛱?hào)從0開始，所以奇數(shù)行的序號(hào)是偶數(shù)，使用even
//$('tr:even').addClass('alt');?
//為了使第二個(gè)表格也是奇書行引用alt樣式，使用:nth-child()
//:nth-child()是jQuery中唯一從1開始計(jì)數(shù)的選擇符
//因?yàn)樾蛱?hào)從1開始，所以奇數(shù)行的序號(hào)是奇數(shù)，使用odd
$('tr:nth-child(odd)').addClass('alt');
//將td中包含有Henry的內(nèi)容置為高亮
$('td:contains(Henry)').addClass('highlight');?
//給每個(gè)包含Henry的單元格的下一個(gè)單元格添加樣式，prev();
$('td:contains(Henry)').next().addClass('highlight');?
//突出顯示Henry所在單元格后面的全部單元格,prevAll();
$('td:contains(Henry)').nextAll().addClass('highlight');?
? ? ? ? ? ? ? ? //再包含原來的單元格（即包含Henry的那個(gè)單元格),使用addBack()
$('td:contains(Henry)').nextAll().addBack().addClass('highlight');?
//選擇所有包含Henry的單元格所在行
$('td:contains(Henry)').parent().children().addClass('highlight');?
});?
</script>
? ? </head>
? ? <body>
? ? ? ? <h2>Shakespeare's Plays</h2>?
<table>? ?
? ? <tr>? ? ?
? ? <td>As You Like It</td>? ? ?
<td>Comedy</td>? ? ?
<td></td>? ?
</tr>? ?
<tr>? ? ?
? ? <td>All's Well that Ends Well</td>? ? ?
<td>Comedy</td>? ? ?
<td>1601</td>? ?
</tr>? ?
<tr>? ? ?
? ? <td>Hamlet</td>? ? ?
<td>Tragedy</td>? ? ?
<td>1604</td>? ?
</tr>? ?
<tr>? ? ?
? ? <td>Macbeth</td>? ? ?
<td>Tragedy</td>? ? ?
<td>1606</td>? ?
</tr>? ?
<tr>? ? ?
? ? <td>Romeo and Juliet</td>? ? ?
<td>Tragedy</td>? ? ?
<td>1595</td>
? ? ? ? ? ? </tr>? ?
<tr>? ? ?
? ? <td>Henry IV, Part I</td>? ? ?
<td>History</td>? ? ?
<td>1596</td>? ?
</tr>? ?
<tr>? ? ?
? ? <td>Henry V</td>? ? ?
<td>History</td>? ? ?
<td>1599</td>? ?
</tr>?
</table>?
<h2>Shakespeare's Sonnets</h2>?
<table>? ?
? ? <tr>? ? ?
? ? <td>The Fair Youth</td>? ? ?
<td>1–126</td>? ?
</tr>? ?
<tr>? ? ?
? ? <td>The Dark Lady</td>? ? ?
<td>127–152</td>? ?
</tr>? ?
<tr>? ? ?
? ? <td>The Rival Poet</td>? ? ?
<td>78–86</td>? ?
</tr>?
</table>
? ? </body>
</html>
例子：
<!doctype html>
<html>
? ? <head>
? ? ? ? <title>Document</title>
<!-- 這個(gè)horizontal類會(huì)將元素浮動(dòng)到它后面元素的左側(cè)，如果這個(gè)元素是一個(gè)列表項(xiàng)，那么會(huì)移除其項(xiàng)目符號(hào)，后再為該元素的每一邊各添加10像素的外邊距。 -->
<style type="text/css">?
? ? .horizontal {? ?
? ? float: left;? ?
list-style: none;? ?
margin: 10px;?
}
.sub-level {? ?
? ? background: #ccc;?
}
a {? ?
? ? color: #00c;??
? ? }?
a.mailto {? ?
? ? background: url(img/email.png) no-repeat right top;? ?
padding-right: 15px;?
}?
a.pdflink {? ?
? ? background: url(img/pdf.png) no-repeat right top;? ?
padding-right: 15px;?
}?
a.henrylink {? ?
? ? background-color: #fff;? ?
padding: 2px;? ?
border: 1px solid #000;?
}
</style>
<script type="text/javascript" srcc="jquery-1.11.1.min.js"></script>
<script type="text/javascript">
? ? ? ? ? ? $(document).ready(function() {? ?
$('#selected-plays > li').addClass('horizontal');?
//選擇id為selected-plays中的所有l(wèi)i子元素，并且沒有引用horizontal樣式類
$('#selected-plays li:not(.horizontal)').addClass('sub-level');
//給href屬性以mailto:開頭的a標(biāo)簽添加樣式mailto
$('a[href^="mailto:"]').addClass('mailto');
//給href屬性以.pdf結(jié)尾的a標(biāo)簽添加樣式pdflink
$('a[href$=".pdf"]').addClass('pdflink');?
//給href屬性是以http開頭，并且包含有henry的a標(biāo)簽添加樣式henrylink
$('a[href^="http"][href*="henry"]').addClass('henrylink');?
? ? ? ? ? ? ? ? //連綴，不建議這樣書寫，因?yàn)殚喿x性差
$('td:contains(Henry)') //取得包含Henry的所有單元格? ?
.parent() //取得它的父元素? ?
.find('td:eq(1)') //在父元素中查找第2個(gè)單元格? ?
.addClass('highlight') //為該單元格添加hightlight類? ?
.end() //恢復(fù)到包含Henry的單元格的父元素? ?
.find('td:eq(2)') //在父元素中查找第3個(gè)單元格? ?
.addClass('highlight'); //為該單元格添加hightlight類?
});?
</script>
? ? </head>
? ? <body>
<ul id="selected-plays" >? ?
<li>Comedies? ? ?
<ul>? ? ? ?
<li><a href="/asyoulikeit/">As You Like It</a></li>? ? ? ?
<li>All's Well That Ends Well</li>? ? ? ?
<li>A Midsummer Night's Dream</li>? ? ? ?
<li>Twelfth Night</li>? ? ?
</ul>? ?
</li>? ?
<li>Tragedies? ? ?
<ul>
<li><a href="hamlet.pdf">Hamlet</a></li>? ? ? ?
<li>Macbeth</li>? ? ? ?
<li>Romeo and Juliet</li>? ? ?
</ul>? ?
</li>? ?
<li>Histories? ? ?
<ul>? ? ? ?
<li>Henry IV (<a href="mailto:henryiv@king.co.uk">email</a>)? ? ? ? ??
<ul>? ? ? ? ? ??
<li>Part I</li>? ? ? ? ? ??
<li>Part II</li>? ? ? ? ? ?
</ul>? ? ? ?
<li><a href="http://www.shakespeare.co.uk/henryv.htm">Henry V</a></li>? ? ? ?<li>Richard II</li>? ? ?
</ul>? ?
</li>?
</ul>?
? ? </body>
</html>
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//將緊接在a元素后面的第一個(gè)li元素的字體顏色設(shè)置為紅色
//$('a + li').css('color','red');
//將a元素后面的跟a元素同級(jí)的li元素的字體顏色設(shè)置為紅色
$('a ~ li').css('color','red');
});
</script>
</head>
<body>
<ul>
<a href="#">AAA</a>
<li>語文</li>
<li>數(shù)學(xué)
<ul>
<li>微積分</li>
<li>線性代數(shù)</li>
<li><a href="#">更多</a></li>
</ul>
</li>
<li>英語</li>
<div>
<li>化學(xué)</li>
</div>
</ul>
<a href="#">BBB</a>
<a href="#">CCC</a>
</body>
</html>
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//頁面一運(yùn)行，inp元素就自動(dòng)獲得焦點(diǎn)
$('#inp').get(0).focus();
//將頁面中獲得焦點(diǎn)的元素的背景色設(shè)置為紅色
$(':focus').css('background-color','red');
//選中頁面中的第3個(gè)li元素設(shè)置為紅色
//eq中的數(shù)字就是下標(biāo)，是從0開始的
$('li:eq(2)').css('color','red');
//$('li').eq(2).css('color','red');
//將li元素中的第一個(gè)字體顏色設(shè)置為藍(lán)色
$('li:first').css('color','yellow');
//$('li').first().css('color','yellow');
$('li:last').css('color','pink');
//$('li').last().css('color','pink');
});
</script>
</head>
<body>
<input type="text" id="inp" />
<ul>
<li>商品管理</li>
<li>用戶管理</li>
<li>訂單管理</li>
<li>日志管理</li>
</ul>
</body>
</html>
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//將頁面中文本中包含有java的元素的字體顏色設(shè)置為紅色
$('div:contains("java")').css('color','blue');
//將頁面中文本中包含有管理的a元素的字體顏色設(shè)置為紅色
$('a:contains("管理")').css('color','red');
//獲取id為btn的元素的父元素
$('#btn').parent().css('background-color','gray');
//獲取id為btn的元素的父輩祖輩
$('#btn').parents().css('background-color','pink');
//追溯祖先到指定的元素
$('#btn').parentsUntil('div').css('background-color','green');
});
</script>
</head>
<body>
<div>
<span>用戶注冊(cè)</span>
<form id="myForm">
<input id="btn" type="button" value="演示" />
</form>
</div>
<div>Thinking in java</div>
<div>java從入門到精通</div>
<div>Jquery實(shí)踐</div>
<a href="#">訂單管理</a>
<a href="#">個(gè)人中心</a>
<a href="#">商品管理</a>
</body>
</html>
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//將有id屬性的a標(biāo)簽的字體顏色設(shè)置為紅色
$('a[id]').css('color','red');
//將頁面中input元素中的有name屬性的標(biāo)簽的字體顏色這是為藍(lán)色
$('input[name]').css('color','blue');
//選中頁面中的性別單選框
var sex = $('input[name="sex"]');
//設(shè)置選中女
sex[1].checked = true;
//將頁面中顯示了admin內(nèi)容的文本框的字體顏色設(shè)置為紅色
$('input[value="admin"]').css('color',);'red'
//將頁面中所有的id是以ac開頭的div元素的字體顏色設(shè)置為分紅色
$('div[id^="ac"]').css('color','pink');
//以cp結(jié)尾的div元素
$('div[id$="cp"]').css('color','orange');
});
</script>
</head>
<body>
<div id="acc">1111</div>
<div id="ack">2222</div>
<div id="acp">3333</div>
<div id="pcp">4444</div>
<div id="mcp">5555</div>
<input type="text" value="admin" />
<a href="#">A</a>
<a id="link" href="#">B</a>
<a href="#">C</a>
<a id="lk" href="#">D</a>
<input type="text" name="act" value="admin" />
<input type="text" name="pwd" value="123" />
<input type="text" value="歡迎使用" />
<input type="radio" name="sex" value="1" />男
<input type="radio" name="sex" value="2" />女
<input type="radio" name="edu" value="1" />本科
<input type="radio" name="edu" value="2" />大專
<input type="radio" name="edu" value="3" />高中
</body>
</html>
例子：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" srcc="js/jquery-1.11.0.js" ></script>
<script>
$(function(){
//將頁面中所有的第一個(gè)li元素字體顏色設(shè)置為紅色
$('li:first-child').css('color','red');
$('li:last-child').css('color','blue');
//將頁面中的奇數(shù)行的背景色設(shè)置為灰色
$('tr:nth-child(odd)').css('background-color','gray');
});
</script>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
<tr>
<td>5</td>
<td>6</td>
</tr>
</table>
<table border="1">
<tr>
<td>7</td>
<td>8</td>
</tr>
<tr>
<td>9</td>
<td>10</td>
</tr>
</table>
<ul>
<li>語文</li>
<li>數(shù)學(xué)</li>
<li>英語</li>
</ul>
<ul>
<li>JAVA</li>
<li>HTML</li>
<li>C</li>
</ul>
</body>
</html>
例子：
例子：
——————————————————————
個(gè)人的理解：因?yàn)镃SS和JS中的一些代碼可能在火狐等的瀏覽器中不支持，可能會(huì)有兼容性的問題，所以CSS和JS的部分能用jquery就用jquery，jquery在大多情況下基本不會(huì)有兼容性的問題等等。
注意：focus 過濾器，必須是網(wǎng)頁初始狀態(tài)的已經(jīng)被激活焦點(diǎn)的元素才能實(shí)現(xiàn)元素獲取。 而不是鼠標(biāo)點(diǎn)擊或者 Tab 鍵盤敲擊激活的。?
可見性過濾器
可見性過濾器根據(jù)元素的可見性和不可見性來選擇相應(yīng)的元素。
注意：:hidden過濾器的過濾對(duì)象的內(nèi)容為：CSS樣式為display:none、input 表單類型為type="hidden"和visibility:hidden的元素。
概述
DOM是一種文檔對(duì)象模型。方便開發(fā)者對(duì)HTML結(jié)構(gòu)元素內(nèi)容進(jìn)行展示和修改。在JavaScript中，DOM 不但內(nèi)容龐大繁雜，而且在開發(fā)的過程中需要考慮更多的兼容性、擴(kuò)展性。而jQuery已經(jīng)將最常用的DOM 操作方法進(jìn)行了有效封裝，并且不需要考慮瀏覽器的兼容性。
