版权说明:本文档由用户提供并上传,收益归属内容提供方,若内容存在侵权,请进行举报或认领
文档简介
screen对属性 功 <!DOCTYPE<html<!DOCTYPE<html <metacharset="UTF- <script varstrh2>输出屏幕的相关信息 str strbr/> strbr/>屏幕的高度:"+screen.availHeight;除了windows的任务栏 属性 功 <!DOCTYPE<html<!DOCTYPE<html <metacharset="UTF- <script varstrh2>输出浏览器的相关信息 str strbr/> if(navigator.appName== InternetExplorer"){ Location对location属性 功 location属性 功 history对history方法 功 加载上一个URL页 DOM对DOM DOMDOMHTMLJSHTMLPHPDOM1,我们要通过JavaScript来操作HTML先要找到这个HTML对2,我们操作的对象这个里面拥有的属性那么这个对象也会同时拥DOM凡是在JS中遇到“集合”两字它就等价于数组 它的方式与数组一样需要通过下 DOM方法 功 ementById(“id的属性值id 名 通 名来获取元素它返回是一个数集合如果要其中的某一个对象要使用下标来进行!就算这个数组里面的元素只有一个那么也是要使用数组下标的方式来进行!祖先对象 名 祖先对象性值
ementsByName(“name的属
通过的name属性值来获取元素它返回是一个数组如果要其中的某一个对象要使用下标来进行!就算这个数组里面的元素只有一个那么也是要使name.geementById(“id的属性值 ID选择 祖先对象 ementsByTagName(“名DOM对象对HTML的属性操<名属性=“值”要操作的对象.属性要操作的对象.属性 对象.属性这种方式来操作的中class属性那么请记得将class这个属性修改为className才可以!要操作的对象我们使用对象.属性名这种方式就要将class这个关键字改为className,如果使用要操作的对象.setAttribute()这个方法来设置class属性时直接写class就可以了!DOM对象对中的style属性操作---→CSS它主要是用来操作的style的属性=操作行内样<名style=”CSS样式”注意:JavaScript它只能操作的行内样式!要操作的对象.style.css属性=“值”div进行显示或者隐藏<!DOCTYPE<!DOCTYPE<html <metacharset="UTF- <style padding: width: margin:100px list-style-type: <div <buttonid="btn">校区管理 <ulid="school"style="display: <script //第一步:要获取id=btn这 对 varbtnObj //第二步:获取id=school这 varulObj //第三步:给btn这 btnObj.onclick= //操作这个 对象的style属性 if(ulObj.style.display== ulObj.style.display= ulObj.style.display= CSS 全选、反选、取<!DOCTYPE<!DOCTYPE<html <metacharset="UTF- <script : 篮球:<inputtype="checkboxname="hobby" 足球:<inputtype="checkbox 乒乓球:<inputtype="checkbox" 桌球:<inputtype="checkbox球:<inputtype="checkbox 保龄球:<inputtype="checkbox" <buttonid="btn">全选 <buttonid="quxiao">取消 <buttonid="fanxuan">反选 <script //先获取到id=btn varbtnObj= varquxiao= varfanxuan= //通过name varinputsObj varinputsObjLength= btnObj.onclick= for(var inputsObj[i].checkedtrue;//是被选中 quxiao.onclick= for(var inputsObj[i].checkedfalse;// fanxuan.onclick fanxuan.onclick= for(var //判断当前的checkbox是否选中如果选中就让它不选中 inputsObj[i].checked= inputsObj[i].checked= 事js是一门事件驱动式的语言JS说明:所谓的行内绑定事件是将事件写在HTML里面<名事件名=“函数名()”JS代码里面通过JS获取对象.事件名=事件的处理程序 W3C才认事件名没有on前缀比如:click 当页面加载完成后指body里面所有的都加载完成以后再来执行onload事件onload事件要和window对象来绑 onload还可以写在 onmouseover当鼠标经过时 当表单提交时它主要是用来实现表单验证这个事件要绑定给 onsubmit事件它主要是用来 false true false true <!DOCTYPE<!DOCTYPE<html <metacharset="UTF- 红:<inputtype="rangemin="0max='255id="btn1"绿:<inputtype="rangemin="0max='255id="btn2"蓝:<inputtype="rangemin="0max='255id="btn3"<script //通过 varinputsObj //给每一个 对象绑定onchange事 for(var inputsObj[i].onchange= //要分别获取到其value varred vargreen varblue .body.style.backgroundColor= 表单验证案 <html<html" <metahttp-equiv="Content-Type"content="text/html;charset=UTF- <formname='form1'onsubmit='returncheckForm()' <tablewidth='600'align='center' <tdalign='right'width='150'>用户名 <tdwidth='100'><inputtype='text'name='username'id="username"onfocus='focus_username()'onblur='blur_username()'/></td> <td><span <!DOCTYPEhtmlPUBLIC"-//W3C//DTDXHTML<tdalign='right' <tdwidth='100'><inputtype='password'id="password"name='password'onfocus='focus_password()'onblur='blur_password()'/></td> <td><span <td><inputtype='submitvalue='提交 <script //获取id=user_res这 varspanUserObj= varinputUserObj= varspanPassObj= varinputPassObj= //点时户 function spanUserObj.innerHTMLfontcolor='#f00'>请输入用户名 //当用户名输入框失去焦点时 2.验证用户名的长度是否合法长度5~18 function varuserValue= varuserValueLengthuserValue.length;//获取用户名的长 if(userValueLength== spanUserObj.innerHTMLfontcolor='#f00'> return }elseif(userValueLength<5||userValueLength> //长度必须要在5~18位之间不合法才提 spanUserObj.innerHTMLfontcolor='#f00'>长度必须要在5~18位之 return }else spanUserObj.innerHTMLfontcolor='#f00'>用户名有特殊符 return spanUserObj.innerHTMLfontcolor='#00f'>用户名合法 return 输入框获取焦点时要提示用户请输 function spanPassObj.innerHTML spanPassObj.innerHTML="<fontcolor='#f00'>请输 的长度是否合法长度5~18 合 function 框的value属 varpassValue= varpassValueLength= if(passValueLength== return }elseif(passValueLength<5||passValueLength spanPassObj.innerHTML spanPassObj.innerHTMLfont 必须在5~20 return spanPassObj.innerHTML spanPassObj.innerHTMLfont return var vararr= vararrLength= varuserLength= for(var for(var if(user[i]== return return function //什么情况下
温馨提示
- 1. 本站所有资源如无特殊说明,都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
- 2. 本站的文档不包含任何第三方提供的附件图纸等,如果需要附件,请联系上传者。文件的所有权益归上传用户所有。
- 3. 本站RAR压缩包中若带图纸,网页内容里面会有图纸预览,若没有图纸预览就没有图纸。
- 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
- 5. 人人文库网仅提供信息存储空间,仅对用户上传内容的表现方式做保护处理,对用户上传分享的文档内容本身不做任何修改或编辑,并不能对任何下载内容负责。
- 6. 下载文件中如有侵权或不适当内容,请与我们联系,我们立即纠正。
- 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。
最新文档
- 电子产品代理经销合同
- 智能语音语义平台开发合同
- 房屋中介销售合同范本模板
- 房屋地基买卖合同格式文本
- 房屋买卖合同修改方法
- 企业与个人借款合同范本
- 热处理设备购买协议范本
- 优惠旅游服务合同
- 挖掘机租赁合同格式
- 食品调料供货合同协议
- 商场用电安全培训
- 《中小学教育惩戒规则(试行)》宣讲培训
- 结清货款合同范例
- 开题报告:职普融通与职业教育高质量发展:从国际经验到中国路径创新
- 变、配电站防火制度范文(2篇)
- 九年级上册人教版数学期末综合知识模拟试卷(含答案)
- 重大版小英小学六年级上期期末测试
- 微积分知到智慧树章节测试课后答案2024年秋铜陵学院
- 金融科技UI设计
- 《头脑风暴》课件
- 安全生产知识考试题库(有答案)-安全考试题库
评论
0/150
提交评论