《javascript从入门到精通》第三篇 javascript高级应用
来源：互联网 发布：linux 网络性能测试 编辑：程序博客网 时间：2024/06/05 02:27
第三篇 高级应用
第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);//取整并*5var 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 参考
Parameter 参考
控件的值
<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>
- 《javascript从入门到精通》第三篇 javascript高级应用
- javascript从入门到精通
- 【JavaScript】从入门到精通
- JavaScript从入门到精通
- 《javascript从入门到精通》第二篇 javascript核心技术
- JavaScript教程--从入门到精通(一)
- JavaScript教程--从入门到精通
- JavaScript教程--从入门到精通(1)
- JavaScript教程--从入门到精通(3)
- JavaScript教程--从入门到精通(4)
- JavaScript教程--从入门到精通(5)
- JavaScript教程--从入门到精通(6)
- JavaScript教程--从入门到精通(7)
- JavaScript教程--从入门到精通(8)
- JavaScript教程--从入门到精通(9)
- JavaScript教程--从入门到精通
- JavaScript教程--从入门到精通 [1]
- [JavaScript][jQuery]jQuery从入门到精通
- 深入理解Java之线程池
- 找个更换头像的地方都没有
- Java8学习(3)- Lambda 表达式
- NYOJ 1112 求次数（map容器）
- Play framework使用java代码自定义标签--FastTags
- 《javascript从入门到精通》第三篇 javascript高级应用
- 如何才能用C语言代码帅气地获取现在是今年的第几天呢？
- 挂载nfs磁盘
- [leetcode] 103.Binary Tree Zigzag Level Order Traversal
- qtcretor通过gdb和gdbserver远程调试arm程序
- 哎妈呀
- mybatis 拼接动态表名、字段名
- 从尾到头打印链表每个节点的值。
- jquery扩展插件
