第三篇 高级应用
第15章，页面打印
第16章，使用cookie
第17章，图像处理
17.2.1 图像的预装载
预装在是在HTTP请求图像之前将其下载到缓存的一种方式，当页面需要图像时，图像可以立即从缓存中取出，将其显示在页面上。
javascript有一个内嵌的Image类，使用该类进行图像的预装载，将图像的URL传递给该对象的src之后，浏览器进行装载请求，将与装载的图像保存在cache中，如果有乳香请求时，将调用cache内的图像，将图像立即显示。
var preimg=new Image();
preimg.src="a.gif";
进行多个图像的预装载时，讲这些图像放入数组中，循环将其放入缓存中。
var test=['img1','img2','img3'];
var test2=[];
for(var i=0;i<test.length;i++){
test2[i]=new Image();
test2[i].src=test[i]+".gif";
}
循环显示图片
<html>
<head>
<script language="javascript">
var j=0;
var test=new Array(15);
for(var i=0;i<=14;i++)
{
test[i]=i;
}
var test2=new Array(15);
for(var i=0;i<test.length;i++)
{
test2[i]=new Image();
test2[i].src=test[i]+'.gif';
}
function showpic()
{
if(j==14)
j=0;
else
++j;
var imagestr=test2[j].src.split("/");
var imagesrc=imagestr[imagestr.length -1];
str=" <img src='image/" + imagesrc+"'/>";
div1.innerHTML=str;
}
</script>
</head>
<body onload="var begin=setInterval('showpic()',1000);">
<div id='div1' align="center"></div>
</body>
</html>
17.2.2 图片随机显示
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>按时间随机变化的网页背景</title>
</head>
<body onLoad="randompic();">
<script language="javascript">
function randompic()
{
var i = Math.floor(Math.random()*5);//取整并*5
var src = "";
switch(i)
{
case 0 :
src = "0.jpg";
break;
case 1:
src = "1.jpg";
break;
case 2:
src = "2.jpg";
break;
case 3:
src = "3.jpg";
break;
case 4:
src = "4.jpg";
break;
}
document.body.background=src;
setTimeout("randompic()",1000);
}
</script>
</body>
</html>
进度条显示
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>进度条的显示</title>
<link href="CSS/progress.css" rel="stylesheet" type="text/css">
<script language="javascript">
function progressTest(n){
var prog=document.getElementById('progress');
prog.firstChild.nodeValue=n+"%";
prog.style.width=(n*2)+"px";
n+=20;
if(n>100){
n=100;
}
setTimeout('progressTest('+n+')',1000);
}
</script>
</head>
<body>
<p id="test"><span id="progress">10%</span></p>
<script language="javascript">
progressTest(10);
</script>
</body>
</html>
17.2.9 图片闪烁
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>不断闪烁的图片</title>
<SCRIPT LANGUAGE="JavaScript">
var counter = 0;
function glint()
{
div1.style.visibility = (div1.style.visibility == "hidden") ? "visible" : "hidden";
counter += 1;
setTimeout("glint()", 200);
}
</SCRIPT>
<body onload="glint();">
<DIV ID="div1" >
<a href="http://www.mingrisoft.com" target="_blank">
<img name="image1" src="Temp.jpg">
</a>
</DIV>
</body>
</html>
第18章 浏览器检测
第19章 嵌入式对象
19.5 flash
19.5.1 嵌入flash
在HTML中嵌入Flash可以使用<embed>标记和<object>标记
(1)<embed>标记
该标记可以再网页中嵌入多媒体文件，包括音频文件和视频文件。
<embed src="mrsoft.swf" width="300" height="300" id="flashTest"></embed>
(2)object标记
使用<object>标记将Flash嵌入到HTML中，需要指定applet的MIME类型，applet的类型为"application/x-java-applet/x-java-applet"
<object align="texttop" data="mrsoft.swf" width="200" height="200" type="application/x-shockwave-flash" id="f1">
<param name="movie" value="mrsoft.swf"/>
</object>
19.5.2 使用javascript控制flash，播放暂停重新播放。
Object 参考
| 属性 | 定义 |
|---|---|
| classid | 对象的唯一 id。 |
| height | 对象的高度。以像素或百分比计。 |
| width | 对象的宽度。以像素或百分比计。 |
Parameter 参考
| 属性 | 定义 |
|---|---|
| src | RealAudio 或 RealVideo 片断的源。 |
| controls | 控件的可见性。（请参阅下文）。 |
| console | 链接多个控件的控制台名称。 |
| autostart | 自动播放。 (true | false). |
| nolabels | 禁止控件窗口的 label 文本。 |
| reset | 重置播放列表控件 (true | false). |
| autogotoURL | 如何处理 URL。(true | false) |
| True | 指向浏览器的向前 URL 事件。 |
| False | 使用 VBScript 代之。 |
控件的值
| 值 | 显示 |
|---|---|
| All | 显示带有所有控件的完整播放器。 |
| InfoVolumePanel | 标题、作者、版权以及音量滑块。 |
| InfoPanel | 标题、作者以及版权。 |
| ControlPanel | 位置滑块、播放、暂停以及停止按钮。 |
| StatusPanel | 消息、当前时间位置以及片断长度。 |
| PlayButton | 播放和暂停按钮。 |
| StopButton | 停止按钮。 |
| VolumeSlider | 音量滑块。 |
| PositionField | 位置和片断长度。 |
| StatusField | 消息。 |
| ImageWindow | 视频图像。 |
| StatusBar | 状态、位置和频道。 |
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>用JavaScript控制Flash</title>
<script language="javascript">
<!--
function play()
{
var dv=document.getElementById("demo");
if(!dv.IsPlaying())
{
dv.Play();
}else
{
alert("flash已经运行！")
}
}
function stop()
{
var dv=document.getElementById("demo");
if(dv.IsPlaying())
{
dv.StopPlay();
}else
{
alert("flash已经暂停！")
}
}
function resetD()
{
var dv=document.getElementById("demo");
dv.Rewind();
dv.Play();
}
</script>
</head>
<body>
<object align="texttop" border="1" data="mrsoft.swf" width="200" height="200" type="application/x-shockwave-flash" id="demo" >
<param name="movie" value="mrsoft.swf"/>
<param name="Play" value="false">
<param name="quality" value="best">
<param name="Menu" value="false">
</object><br />
<input type="button" value="开始" onclick="play();" />
<input type="button" value="停止" onclick="stop();" />
<input type="button" value="重新开始" onclick="resetD();" />
</body>
</html>
第23章 jquery技术
jquery是一套javascript脚本库。
23.2.1 下载jquery
www.jquery.com
23.2.3 配置jquery
<script language="javascript" src="xxxx.min.js" ></script>或者
<script src="xxxxx.min.js" type="text/javascript"></script>
23.3 jquery 插件
23.3.1 插件的使用
把下载的插件包含到<head>标记内，并确保它位于主jquery源文件之后。
包含一个自定义的javascript文件，并在其中使用插件创建，插件扩展的方法。
23.4 jquery选择器
23.4.1 jquery的工厂函数
jquery使用选择符需要从“$”和“()”开始，‘()’中通常使用字符串参数
在参数中使用标记名
$("div") 用于获取文档中全部的<div>
在参数中使用ID
$("#uaername") ：用于获取文档中ID属性值为username的一个元素
在参数中使用css类名
$(".btn_grey") ：用于获取文档中使用css类名为btn_grey的所有元素
23.4.2 基本选择器
jquery基本选择器包括：ID选择器，元素选择器，类名选择器，复合选择器和通配符选择器。
1，ID选择器(#id)
利用DOM元素的id属性值来匹配元素，并以jquery封装集的形式返回给对象，
$("#id"); 如：$("#user")
在页面中添加一个id属性值为testInput的文本框和一个按钮，单击按钮获取文本框的输入值。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ID选择器的示例</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("input[type='button']").click(function(){
var inputValue = $("#testInput").val();
alert(inputValue);
});
});
</script>
</head>
<body>
<input type="text" id="testInput" name="test" value=""/>
<input type="button" value="输入的值为"/>
</body>
</html>
2，元素选择器element
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>元素选择器的示例</title>
<script type="text/javascript" src="jquery-3.2.1.min.js"></script>
<style type="text/css">
img{
border:1px solid #777;
}
div{
padding:5px;
font-size:12px;
}
</style>
<script type="text/javascript">
$(document).ready(function(){
$("input[type='button']").click(function(){
$("div").eq(0).html("<img src='strawberry1.jpg'/>这里长出了一片草莓");
$("div").get(1).innerHTML="<img src='fish1.jpg'/>这里没有鱼了";
});
});
</script>
</head>
<body>
<div><img src="strawberry.jpg"/>这里种植了一颗草莓</div>
<div><img src="fish.jpg"/>这里养殖了一条鱼</div>
<input type="button" value="some years later" />
</body>
</html>
3，类名选择器.class
通过元素拥有的css类的名称查找匹配的DOM元素
$(".class");
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>类名选择器的示例</title>
<style type="text/css">
div{
border:1px solid #003a75;
background-color:#cef;
margin:5px;
height:35px;
width:75px;
float:left;
font-size:12px;
padding:5px;
}
</style>
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var myClass = $(".myClass"); //选取Dom元素
myClass.css("background-color","#C50210");//为选取的Dom元素设置背景颜色
myClass.css("color","#FFF");//为选取的Dom元素设置文字颜色
});
</script>
</head>
<body>
<div class="myClass">注意观察我的样式</div>
<div>我的样式是默认的</div>
</body>
</html>
4，复合选择器
复合选择器将多个选择器，id选择器，元素选择器，类名选择器，结合在一起，之间用逗号分开，只要符合其中一个筛选条件就会被匹配。
$("selector1,selector2,selectorN");
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复合选择器的示例</title>
<style type="text/css">
.default{
border:1px solid #003a75;
background-color:yellow;
margin:5px;
width:90px;
float:left;
font-size:12px;
padding:5px;
}
.change{
background-color:#C50210;
color:#FFF;
}
</style>
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input[type=button]").click(function(){ //绑定按钮的单击事件
$("div,#span").addClass("change"); //添加所使用的CSS类
});
});
</script>
</head>
<body>
<p class="default">p元素</p>
<div class="default">div元素</div>
<span class="default" id="span">ID为span的元素</span>
<input type="button" value="为div元素和ID为span的元素换肤" />
</body>
</html>
5，通配符选择器(*)
$("*")，将获得页面上所有的DOM元素集合的jquery包装集。
23.4.3 层级选择器
层级选择器，根据页面DOM元素之间父子关系来作为匹配的筛选条件。
jquery提供了ancestor descendan选择器，parent>child选择器,prev+next选择器，prev~siblings选择器。
1，ancestor descendan选择器。
ancestor代表祖先，descendan代表子孙，用于在给定的祖先元素下匹配所有的后代元素。
$("ancestor descendant")
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>ancestor descendan选择器的示例</title>
<style type="text/css">
body{
margin:0px;
}
#bottom{
background-image:url(images/bg_bottom.jpg);/*设置背景*/
width:800px;/*设置宽度*/
height:58px;/*设置高度*/
clear: both;/*设置左右两侧无浮动内容*/
text-align:center;/*设置居中对齐*/
padding-top:10px;/*设置顶边距*/
font-size:9pt;/*设置字体大小*/
}
.copyright{
color:#FFFFFF;/*设置文字颜色*/
list-style:none;/*不显示项目符号*/
line-height:20px;/*设置行高*/
}
</style>
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("div ul").addClass("copyright");//为div元素的子元素ul添加样式
});
</script>
</head>
<body>
<div id="bottom">
<ul>
<li>技术服务热线：xxxx传真：xxxx 企业邮箱：xxxx</li>
<li>Copyright © xxxx All Rights Reserved! </li>
</ul>
</div>
<ul>
<li>技术服务热线：xxxx 传真：xxx 企业邮箱：xxx</li>
<li>Copyright © xxx All Rights Reserved! </li>
</ul>
</body>
</html>
2，parent>child选择器
parent代表父元素，child代表子元素，只能选择父元素的直接的子元素
$("parent>child");
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>parent > child选择器的示例</title>
<style type="text/css">
input{
margin:5px;/*设置input元素的外边距为5像素*/
}
.input {
font-size: 12pt;/*设置文字大小*/
color: #333333;/*设置文字颜色*/
background-color:#cef;/*设置背景颜色*/
border: 1px solid #000000;/*设置边框*/
}
</style>
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#change").click(function(){//绑定"换肤"按钮的单击事件
$("form>input").addClass("input");//为表单元素的直接子元素input添加样式
});
$("#default").click(function(){//绑定“恢复默认”按钮的单击事件
$("form>input").removeClass("input");//移除为表单元素的直接子元素input添加的样式
});
});
</script>
</head>
<body>
<form id="form1" name="form1" method="post" action="">
姓 名：<input type="text" name="name" id="name" />
<br />
籍 贯：<input name="native" type="text" id="native" />
<br />
生 日：<input type="text" name="birthday" id="birthday" />
<br />
E-mail：<input type="text" name="email" id="email" />
<br />
<span>
<input type="button" name="change" id="change" value="换肤"/>
</span>
<input type="button" name="default" id="default" value="恢复默认"/>
<br />
</form>
</body>
</html>
3，prev+next选择器
用于匹配prev元素后的next元素，prev和next是两个相同级别的元素。
$("prev + next");
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prev + next选择器的示例</title>
<style type="text/css">
.background{background:#cef}
body{font-size:12px;}
</style>
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<script type="text/javascript" charset="GBK">
$(document).ready(function() {
$("label+p").addClass("background");
});
</script>
</head>
<body>
<div>
<label>第一个label</label>
<p>第一个p</p>
<fieldset>
<label>第二个label</label>
<p>第二个p</p>
</fieldset>
</div>
<p>div外面的p</p>
</body>
</html>
4，prev~siblings选择器
用于匹配prev元素之后所有的siblings元素，prev和siblings是两个同辈元素。
$("prev~siblings");
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>prev ~ siblings选择器的示例</title>
<style type="text/css">
.background{background:#cef}
body{font-size:12px;}
</style>
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div~p").addClass("background");
});
</script>
</head>
<body>
<div>
<p>第一个p</p>
<p>第二个p</p>
</div>
<p>div外面的p</p>
</body>
</html>
5，隔行换色并让鼠标指向行变色的表格。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Ancestor descendan选择器的示例</title>
<style type="text/css">
table{ border:0;border-collapse:collapse;}/*设置表格整体样式*/
td{font:normal 12px/17px Arial;padding:2px;width:100px;}/*设置单元格的样式*/
th{/*设置表头的样式*/
font:bold 12px/17px Arial;
text-align:left;
padding:4px;
border-bottom:1px solid #333;
}
.odd{background:#cef;}/*设置奇数行样式*/
.even{background:#ffc;}/*设置偶数行样式*/
.light{background:#00A1DA;}/*设置鼠标移到行的样式*/
</style>
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("tbody tr:even").addClass("odd");//为偶数行添加样式
$("tbody tr:odd").addClass("even");//为奇数行添加样式
$("tbody tr").hover( //为表格主体每行绑定hover方法
function() {$(this).addClass("light");},
function() {$(this).removeClass("light");}
);
});
</script>
</head>
<body>
<table>
<thead>
<tr>
<th>产品名称</th>
<th>产地</th>
<th>厂商</th>
</tr>
</thead>
<tbody>
<tr>
<td>爱美电视机</td>
<td>福州</td>
<td>爱美电子</td>
</tr>
<tr>
<td>美好微波炉</td>
<td>北京</td>
<td>美好集团</td>
</tr>
<tr>
<td>理想电脑</td>
<td>沈阳</td>
<td>理想科技</td>
</tr>
<tr>
<td>编程词典</td>
<td>长春</td>
<td>明日科技</td>
</tr>
</tbody>
</table>
</body>
</html>
23.4.4 过滤选择器
过滤选择器包括简单过滤器，内容过滤器，可见性过滤器，表单对象的属性过滤器和子元素选择器。
1，简单过滤器
指以冒号开头，通常用于实现简单过滤效果的过滤器。
过滤器 说明 示例
:first 匹配找到的第一个元素$("tr:first")匹配表格的第一行
:last 匹配找到的最后一个元素$("tr:last")匹配表格的最后一行
:even 匹配所有索引值为偶数的元素$("tr:even")匹配索引值为偶数的行
:odd 匹配所有索引值为奇数的元素$("tr:odd")匹配索引值为奇数的行
:eq(index) 匹配一个给定索引值的元素$("tr:eq(1)")匹配第二个div元素
:gt(index) 匹配所有大于给定索引值的元素$("tr:gt(0)")匹配第二个及以上的div元素
:lt(index) 匹配所有小于给定索引值的元素$("tr:lt(2)")匹配第二个及以下的div元素
:header 匹配如 h1,h2,h3之类的标题元素 $(":header")匹配全部的标题元素
:not(selector) 去除所有与给定选择器匹配的元素 $("input:not(:checked)")匹配没有被选中的input元素
:animated 匹配所有正在执行动画效果的元素$(":animated")匹配所有正在执行的动画
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单过滤器的示例</title>
<style type="text/css">
td{
font-size:12px;/*设置单元格的样式*/
padding:3px;/*设置内边距*/
}
.th{
background-color:#B6DF48;/*设置背景颜色*/
font-weight:bold;/*设置文字加粗显示*/
text-align:center;/*文字居中对齐*/
}
.even{
background-color:#E8F3D1;/*设置偶数行的背景颜色*/
}
.odd{
background-color:#F9FCEF;/*设置奇数行的背景颜色*/
}
</style>
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("tr:even").addClass("even");//设置奇数行所用的CSS类
$("tr:odd").addClass("odd");//设置偶数行所用的CSS类
$("tr:first").removeClass("even");//移除even类
$("tr:first").addClass("th");//添加th类
});
</script>
</head>
<body>
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#3F873B">
<tr>
<td width="11%" height="27">编号</td>
<td width="14%">祝福对象</td>
<td width="12%">祝福者</td>
<td width="33%">字条内容</td>
<td width="30%">发送时间</td>
</tr>
<tr>
<td height="27">1</td>
<td>琦琦</td>
<td>妈妈</td>
<td>愿你健康快乐的成长！</td>
<td>2011-07-05 13:06:06</td>
</tr>
<tr>
<td height="27">2</td>
<td>wgh</td>
<td>无语</td>
<td>每天有份好心情！</td>
<td>2011-07-05 13:26:17</td>
</tr>
<tr>
<td height="27">3</td>
<td>天净沙小晓</td>
<td>wgh</td>
<td>煮豆燃豆萁，豆在釜中泣。本是同根生，相煎何太急。</td>
<td>2011-07-05 13:36:06</td>
</tr>
<tr>
<td height="27">4</td>
<td>xxxxx</td>
<td>wgh</td>
<td>xxxxxxx</td>
<td>2011-07-05 13:46:06</td>
</tr>
</table>
</body>
</html>
2，内容过滤器
过滤器 说明 示例
:contains(text) 匹配包含给定文本的元素$("li:contains('DOM')") 匹配含有DOM文本内容的li元素
:empty 匹配所有不包含子元素或者文本的空元素$("td:empty")匹配不包含子元素或者文本的单元格
:has(selector) 匹配含有选择器所匹配元素的元素$("td:has(p)") 匹配表格的单元格中含有<p>标记的单元格
:parent 匹配含有子元素或者文本元素$("td:parent") 匹配不为空的单元格，即在该单元格中还包括子元素或者文本。
应用内容过滤器匹配为空的单元格，不为空的单元格和包含指定文本的单元格。
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>内容过滤器的示例</title>
<style type="text/css">
td{
font-size:12px;/*设置单元格的样式*/
padding:3px;/*设置内边距*/
background-color:#F9FCEF;/*设置背景颜色*/
}
</style>
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("td:parent").css("background-color","#E8F3D1");//为不为空的单元格设置背景颜色
$("td:empty").html("暂无内容");//为空的单元格添加默认内容
$("td:contains('wgh')").css("color","red");//将含有文本wgh的单元格的文字颜色设置为红色
});
</script>
</head>
<body>
<table width="98%" border="0" align="center" cellpadding="0" cellspacing="1" bgcolor="#3F873B">
<tr>
<td width="11%" height="27" align="center">编号</td>
<td width="14%" align="center">祝福对象</td>
<td width="12%" align="center">祝福者</td>
<td width="33%" align="center">字条内容</td>
<td width="30%" align="center">发送时间</td>
</tr>
<tr>
<td height="27">1</td>
<td>琦琦</td>
<td>妈妈</td>
<td>愿你健康快乐的成长！</td>
<td>2011-07-05 13:06:06</td>
</tr>
<tr>
<td height="27">2</td>
<td>wgh</td>
<td>无语</td>
<td>每天有份好心情！</td>
<td>2011-07-05 13:26:17</td>
</tr>
<tr>
<td height="27">3</td>
<td>天净沙小晓</td>
<td>wgh</td>
<td>煮豆燃豆萁，豆在釜中泣。本是同根生，相煎何太急。</td>
<td>2011-07-05 13:36:06</td>
</tr>
<tr>
<td height="27">4</td>
<td>xxx</td>
<td>wgh</td>
<td></td>
<td>2011-07-05 13:46:06</td>
</tr>
</table>
</body>
</html>
3，可见性过滤器
元素可见状态分为隐藏状态和显示状态，visible和hidden过滤器
<html >
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>可见性过滤器的示例</title>
<script type="text/javascript" src="JS/jquery-1.6.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var visibleVal = $("input:visible").val();//取得显示的input的值
var hiddenVal1 = $("input:hidden:eq(0)").val();//取得隐藏的input的值
var hiddenVal2 = $("input:hidden:eq(1)").val();//取得隐藏的input的值
alert(visibleVal+"\n\r"+hiddenVal1+"\n\r"+hiddenVal2); //alert取得的信息
});
</script>
</head>
<body>
<input type="text" value="显示的input元素">
<input type="text" value="我是不显示的input元素" style="display:none">
<input type="hidden" value="我是隐藏域">
</body>
</html>
4，表单对象的属性过滤器
表单对象的属性过滤器通过表单元素的状态属性(选中，不可用等)匹配元素，包括:checked过滤器，:disabled过滤器，:enabled过滤器，:selected过滤器。
过滤器 说明 示例
:checked 匹配所有选中的元素$("input:checked") 匹配属性为checked的input元素
:disabled 匹配所有不可用元素$("input:disabled") 匹配属性为disabled的input元素
:enabled 匹配所有可用的元素$("input:enabled") 匹配属性为enabled的input元素
:selected 匹配所有选中的option元素$("select option:selected") 匹配select元素中被选中的option元素
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单对象的属性过滤器的示例</title>
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("input:checked").css("background-color","red");//设置选中的复选框的背景颜色
$("input:disabled").val("我是不可用的"); //为灰色不可用按钮赋值
});
function selectVal(){ //下拉列表框变化时执行的方法
alert($("select option:selected").val()); //显示选中的值
}
</script>
</head>
<body>
<form>
复选框1： <input type="checkbox" checked="checked" value="复选框1"/>
复选框2： <input type="checkbox" checked="checked" value="复选框2"/>
复选框3： <input type="checkbox" value="复选框3"/><br />
不可用按钮： <input type="button" value="不可用按钮" disabled><br />
下拉列表框：
<select onchange="selectVal()">
<option value="列表项1">列表项1</option>
<option value="列表项2">列表项2</option>
<option value="列表项3">列表项3</option>
</select>
</form>
</body>
</html>
5，子元素选择器
选择器 说明 示例
:first-child 匹配给定元素的第一个子元素$("ul li:first-child") 匹配ul元素中的第一个子元素li
:last-child 匹配给定元素的最后一个子元素$("ul li:last-child") 匹配ul元素中最后一个子元素li
:only-child 匹配元素中唯一的子元素$("ul li:only-child") 匹配只含有一个li元素的ul元素中的li
:nth-child(index/ 匹配其父元素下的第N个子元素$("ul li:nth-child(even)") 匹配ul中索引值为偶数的li元素
even/odd/equation) 或奇偶元素，index从1开始$("ul li:nth-child(3)") 匹配ul中第三个li元素
23.4.5 属性选择器
23.4.6 表单选择器
选择器 说明 示例
:input 匹配所有的input元素$(":input")匹配所有input元素；$("form :input")匹配<form>标记中所有input元素，form与:之间有一个空格
:button 匹配所有的普通按钮$(":button")匹配所有的普通按钮
:checkbox 匹配所有的复选框$(":checkbox")匹配所有的复选框
:file 匹配所有的文件域$(":file")匹配所有的文本域
:hidden 匹配所有不可见元素$(":hidden")匹配所有的隐藏域
:image 匹配所有的图像域......
:password 匹配所有的密码域 ......
:radio 匹配所有的单选按钮 ......
:reset 匹配所有的重置按钮 ......
:submit 匹配所有的提交按钮 ......
:text 匹配所有的但行文本框 ......
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>表单选择器的示例</title>
<script type="text/javascript" src="JS/jquery-3.2.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(":checkbox").attr("checked","checked");//选中复选框
$(":radio").attr("checked","true");//选中单选框
$(":image").attr("src","images/fish1.jpg");//设置图片路径
$(":file").hide();//隐藏文件域
$(":password").val("123");//设置密码域的值
$(":text").val("文本框");//设置文本框的值
$(":button").attr("disabled","disabled");//设置按钮不可用
$(":reset").val("重置按钮");//设置重置按钮的值
$(":submit").val("提交按钮");//设置提交按钮的值
$("#testDiv").append($("input:hidden:eq(1)").val());//显示隐藏域的值
});
</script>
</head>
<body>
<form>
复选框：<input type="checkbox"/>
单选按钮：<input type="radio"/>
图像域：<input type="image"/><br>
文件域：<input type="file"/><br>
密码域：<input type="password" width="150px"/><br>
文本框：<input type="text" width="150px"/><br>
按 钮：<input type="button" value="按钮"/><br>
重 置：<input type="reset" value=""/><br>
提 交：<input type="submit" value=""><br>
隐藏域： <input type="hidden" value="这是隐藏的元素">
<div id="testDiv"><font color="blue">隐藏域的值：</font></div>
</form>
</body>
</html>
