Java Web：例子，JQUERY属性选择器和过滤选择器,JSP，PPT，作业，笔记【诗书画唱】
作业：
1、给位于嵌套列表第二个层次的所有li元素添加special类；
2、给位于表格第三列的所有单元格添加year类；
3、为表格中包含文本Tragedy的第一行添加special类；
4、挑战：选择包含链接（a）的所有列表项（li元素），为每个选中的列表项的同辈列表项元素添加afterlink类；
5、挑战：为与.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、给位于嵌套列表第二个层次的所有li元素添加special类；
2、给位于表格第三列的所有单元格添加year类；
3、为表格中包含文本Tragedy的第一行添加special类；
4、挑战：选择包含链接（a）的所有列表项（li元素），为每个选中的列表项的同辈列表项元素添加afterlink类；
5、挑战：为与.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>
<!-- 嵌套列表结束 -->
<!-- 表格开始 -->
<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>
<!-- 表格结束 -->
</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
对手诗人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() {
//为表格中的奇数行（<tr>标签）添加样式类alt
//因为序号从0开始，所以奇数行的序号是偶数，使用even
//$('tr:even').addClass('alt');
//为了使第二个表格也是奇书行引用alt样式，使用:nth-child()
//:nth-child()是jQuery中唯一从1开始计数的选择符
//因为序号从1开始，所以奇数行的序号是奇数，使用odd
$('tr:nth-child(odd)').addClass('alt');
//将td中包含有Henry的内容置为高亮
$('td:contains(Henry)').addClass('highlight');
//给每个包含Henry的单元格的下一个单元格添加样式，prev();
$('td:contains(Henry)').next().addClass('highlight');
//突出显示Henry所在单元格后面的全部单元格,prevAll();
$('td:contains(Henry)').nextAll().addClass('highlight');
//再包含原来的单元格（即包含Henry的那个单元格),使用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>
<!-- 这个horizontal类会将元素浮动到它后面元素的左侧，如果这个元素是一个列表项，那么会移除其项目符号，后再为该元素的每一边各添加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中的所有li子元素，并且没有引用horizontal样式类
$('#selected-plays li:not(.horizontal)').addClass('sub-level');
//给href属性以mailto:开头的a标签添加样式mailto
$('a[href^="mailto:"]').addClass('mailto');
//给href属性以.pdf结尾的a标签添加样式pdflink
$('a[href$=".pdf"]').addClass('pdflink');
//给href属性是以http开头，并且包含有henry的a标签添加样式henrylink
$('a[href^="http"][href*="henry"]').addClass('henrylink');
//连缀，不建议这样书写，因为阅读性差
$('td:contains(Henry)') //取得包含Henry的所有单元格
.parent() //取得它的父元素
.find('td:eq(1)') //在父元素中查找第2个单元格
.addClass('highlight') //为该单元格添加hightlight类
.end() //恢复到包含Henry的单元格的父元素
.find('td:eq(2)') //在父元素中查找第3个单元格
.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元素后面的第一个li元素的字体颜色设置为红色
//$('a + li').css('color','red');
//将a元素后面的跟a元素同级的li元素的字体颜色设置为红色
$('a ~ li').css('color','red');
});
</script>
</head>
<body>
<ul>
<a href="#">AAA</a>
<li>语文</li>
<li>数学
<ul>
<li>微积分</li>
<li>线性代数</li>
<li><a href="#">更多</a></li>
</ul>
</li>
<li>英语</li>
<div>
<li>化学</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(){
//页面一运行，inp元素就自动获得焦点
$('#inp').get(0).focus();
//将页面中获得焦点的元素的背景色设置为红色
$(':focus').css('background-color','red');
//选中页面中的第3个li元素设置为红色
//eq中的数字就是下标，是从0开始的
$('li:eq(2)').css('color','red');
//$('li').eq(2).css('color','red');
//将li元素中的第一个字体颜色设置为蓝色
$('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的元素的字体颜色设置为红色
$('div:contains("java")').css('color','blue');
//将页面中文本中包含有管理的a元素的字体颜色设置为红色
$('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>用户注册</span>
<form id="myForm">
<input id="btn" type="button" value="演示" />
</form>
</div>
<div>Thinking in java</div>
<div>java从入门到精通</div>
<div>Jquery实践</div>
<a href="#">订单管理</a>
<a href="#">个人中心</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标签的字体颜色设置为红色
$('a[id]').css('color','red');
//将页面中input元素中的有name属性的标签的字体颜色这是为蓝色
$('input[name]').css('color','blue');
//选中页面中的性别单选框
var sex = $('input[name="sex"]');
//设置选中女
sex[1].checked = true;
//将页面中显示了admin内容的文本框的字体颜色设置为红色
$('input[value="admin"]').css('color',);'red'
//将页面中所有的id是以ac开头的div元素的字体颜色设置为分红色
$('div[id^="ac"]').css('color','pink');
//以cp结尾的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(){
//将页面中所有的第一个li元素字体颜色设置为红色
$('li:first-child').css('color','red');
$('li:last-child').css('color','blue');
//将页面中的奇数行的背景色设置为灰色
$('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>数学</li>
<li>英语</li>
</ul>
<ul>
<li>JAVA</li>
<li>HTML</li>
<li>C</li>
</ul>
</body>
</html>
例子：
例子：
——————————————————————
个人的理解：因为CSS和JS中的一些代码可能在火狐等的浏览器中不支持，可能会有兼容性的问题，所以CSS和JS的部分能用jquery就用jquery，jquery在大多情况下基本不会有兼容性的问题等等。
注意：focus 过滤器，必须是网页初始状态的已经被激活焦点的元素才能实现元素获取。 而不是鼠标点击或者 Tab 键盘敲击激活的。
可见性过滤器
可见性过滤器根据元素的可见性和不可见性来选择相应的元素。
注意：:hidden过滤器的过滤对象的内容为：CSS样式为display:none、input 表单类型为type="hidden"和visibility:hidden的元素。
概述
DOM是一种文档对象模型。方便开发者对HTML结构元素内容进行展示和修改。在JavaScript中，DOM 不但内容庞大繁杂，而且在开发的过程中需要考虑更多的兼容性、扩展性。而jQuery已经将最常用的DOM 操作方法进行了有效封装，并且不需要考虑浏览器的兼容性。
