博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
1月25日 JavaScript的DOM操作
阅读量:5366 次
发布时间:2019-06-15

本文共 3676 字,大约阅读时间需要 12 分钟。

一、Windows对象操作

(1)、用代码打开窗口:window.open("第一部分","第二部分","第三部分","第四部分")

 第一部分:写页面地址。

 第二部分:打开的方式:_blank打开新窗口   self在原窗口打开。

 第三部分:控制打开窗口的格式,可以写多个,用空格隔开。

toolber=no  //无工具条  menuber=no  //无菜单栏   status=no  //无状态栏  windth=100px height=100px //窗口大小  left=0 top=0   //窗口位置  resiable=no  //窗口大小不可调  scrollbars=yes //出现滚动条  location=yes   //有地址栏 例:

可以将打开的新窗口赋给一个变量,若有多个新窗口可以赋给一个数组。

例: var a=window.open();        

<input type="bottom" οnclick="函数名()">   //点击按钮调用函数

 (2)、 用代码关闭窗口:window.close()    

           关闭的窗口为调用出来的窗口,直接关闭,没有任何提示。若关闭的为自身,浏览器会提示是否关闭。

(3)、间隔和延迟(主要使用window.setTimeout)

(4)、调整页面:

//常用window.scrollTo(x,y);          //滚动页面至哪里//不常用    window.navigator("url/网址");   //跳转至目标页面window.moveTo(x,y);             //移动页面至某一位置window.resizeTo("宽","高");       //调整页面宽高

(5)、模态和非模态对话框

      1、打开模态:window.showModalDialog("url","向目标对话框中传的值","窗口特征参数")

       特征参数:用分号隔开,像素用px。

        查询方法:在搜索引擎上输入window.showModalDialog MSDN

       2、打开非模态:window.showModelessDialog()

二、window.history对象

//常用window.history.go(n);  //n代表往前走几个,可以为负数//不常用window.history.back();window.history.forward();

三、window.location对象

window.location.href="网址";   //修改页面地址,会跳转页面

四、window.status对象

status是状态栏

window.status="要在状态栏显示的内容";

五、window.document对象

(1)、找到元素:

var d = window.document.getElementById("id");   //根据id找,最多找一个。var d = window.document.getElementsByName("name"); //根据name找,找出来的是数组var d = window.document.getElementsByTagName("name");//根据标签名找,找出来的是数组var d = window.document.getElementsByClassName("name");//根据classname找,找出来的是数组

(2)、操作内容

    1、表单(value)

获取:var d = window.document.getElementById("id");

     赋值:d.value="内容";

     取值:alert(d.value);

    2、非表单

获取:var d = window.document.getElementById("id");

     赋值:d.innerHTML="内容";

     取值:alert(d.innerHTML);   

             alert( d.innerText);

  例:d.innerHTML="<h1>内容<h1>"

       alert(d.innerHTML);    //输出h1大小的内容

       alert( d.innerText);    //输出<h1>内容<h1>   冒号内的元素原样输出

(3)、操作属性

    1.获得属性值
    getAttribute("属性名"),返回的是属性值。

    2.给属性赋值(添加属性,修改属性)

    setAttribute("属性名","属性值")

    3.删除属性

    removeAttribute("属性名")

(4)、操作样式

获取:var d = window.document.getElementById("id"); 操作:d.style.样式="";    //样式为css中的样式,所有的样式都可以用代码操作
操作body:document.body.style.backgroundColor="颜色"; //对窗口的背景色进行操作
操作class:d.className="样式表中的classname"    案例一、打开关闭窗口
                                                      

执行页面:

 

案例二、邮箱验证:

    
用户名
密码
确认密码
邮箱
用户服务条款

效果:

1、执行开始:

2、什么都不填,点击注册。

3、填入的两次密码不一样。

4、点击用户服务条款

服务条款代码:

用户服务条款

同意
不同意

效果:

1、点击不同意时,下一步不可用

2、点同意时

3、点击下一步,返回注册页面。

 

案例三、

屏幕上有红色、绿色、蓝色。点红色屏幕变为红色、点绿色屏幕变为绿色、点蓝色屏幕变为蓝色

红色               //οnclick="setColor('red')"   ---点击触发函数setColor('red')    red是函数传入的参数绿色蓝色

效果图:

案例四、

显示、隐藏

显示

效果图:

点击隐藏时:

点击显示时:

 

案例五、

qq面板,点我的好友时其他都关闭,点陌生人时其他的自动关闭,只能保证一个开。

代码:

我的好友
陌生人
黑名单

 

效果图:

转载于:https://www.cnblogs.com/tzq9308/p/4248126.html

你可能感兴趣的文章
成员函数对象类的const和非const成员函数的重载
查看>>
机器学习实战-----八大分类器识别树叶带源码
查看>>
eclipse git 新的文件没有add index选项
查看>>
java 泛型
查看>>
VC NetShareAdd的用法
查看>>
java web项目中后台控制层对参数进行自定义验证 类 Pattern
查看>>
图论学习一之basic
查看>>
Java的Array和ArrayList
查看>>
记录Ubuntu 16.04 安装Docker CE
查看>>
安东尼奥·维瓦尔第——巴洛克音乐的奇葩
查看>>
pandas的增删改查
查看>>
HDU 5933/思维
查看>>
字节对齐
查看>>
Design Tic-Tac Toe
查看>>
SQL中的去重操作
查看>>
uva 12097 - Pie(二分,4级)
查看>>
mongodb索引
查看>>
nginx源码学习资源(不断更新)
查看>>
【bzoj2882】工艺 后缀自动机+STL-map
查看>>
[redis] redis
查看>>