文章标题

HJF__JAVA

于 2017-06-25 17:31:57 发布

阅读量213

点赞数

分类专栏： JAVA

本文链接：https://blog.csdn.net/HJF__JAVA/article/details/73719212

版权

JAVA 专栏收录该内容

16 篇文章 0 订阅

订阅专栏

一 BOM编程:

将浏览器的各个部分封装成了不同的对象

1.window对象
1.1open():打开另一个窗口
参数1：打开的网页链接
参数2：打开的方式
参数3：打开窗口的大小

    window.open("1.广告.html","_blank","width=200px;height=300px");

1.2 设置定时器
setInterval(“执行的函数”,”每隔多少秒执行”)— 执行n次
setTimeOut(“执行的函数”,”每隔多少秒执行”) – 执行一次

1.3 清楚定时任务
clearInterval(): 清除定时器
clearTimeout(): 清除定时器
清除任务参数为任务ID

这是开启定时任务的ID： 
intervalId = window.setInterval("testOpen()",3000);
这是清除定时任务：   window.clearInterval(intervalId);

1.4 alert(): 提示框仅仅有确定按钮这个用的比较多，一般不写window

1.5 confirm有确定还有取消的提示框
确定:true
取消:false

function testConfirm(){
    var flag = window.confirm("确定要删除硬盘上的内容吗");
    if(flag){
        alert("内容正在删除中...");
        }else{      
            }
    }

1.6 propmt(): 输入提示框返回值就是用户操作
true: 点击了确定 false：点击了取消

function testPropmt(){
    window.prompt("请输入你的密码");
    }

2.location对象
href属性：代表的是地址栏的URL，可以获取和设置URL。URL表示统一资源定位符
reload方法：刷新当前页面

设置地址栏中的url链接：

       window.location.href="链接"；

获取当前地址栏的url ：

      var url = window.location.href

刷新当前页面：

window.location.reload(); 这个语句包含在一个函数中，需                      要点击按钮才能进行
window.setInterval("刷新的函数名"，1000);每隔1秒加载一次刷新函数，不需   要点击就一直在刷新

3.history对象
forward(): 前进到下一页
back(): 后退上一页
go(): 跳转到某页（正整数：前进负整数：后退） 1 -1

代码演示：

function testForward(){
//window.history.forward();
window.history.go(1);
}

<body>
<a href="3.history2.html">超链接</a>
<input type="button" value="forward" onclick="testForward()" />
</body>

4.screen对象
availHeight和availWidth
是排除了任务栏之后的高度和宽度
width和height
是整个屏幕的像素值

window.screen.width
window.screen.height
window.screen.availWidth
window.screen.availHeight

5.事件分类
5.1 点击相关的：
单击：onclick
双击：ondblclick

5.2 焦点相关的：(获得焦点输入框内的提示内容消失，失去焦点后，自动验证输入的内容是合格，并提示)

    聚焦： onfocus
    失去焦点：onblur

代码演示：这个是获得焦点后输入框的提示内容消失

    //获取id为username的input标签对象
    var username =  document.getElementById("username");

    //将上面的input标签对象的values属性置为空串
    username.value="";

这个是失去焦点后判断用户名是否可用并给予提示

function testBlur(){
    //获取input标签对象的value值和sapn标签的对象
    var username = document.getElementById("username").value;
    var usernameTip = document.getElementById("usernameTip");

    //拿着用户输入的用户名,做匹配,做判断
    if("jack"==username){
        usernameTip.innerHTML="该用户名已经被占用".fontcolor("red");
        }else{
            usernameTip.innerHTML="该用户可用".fontcolor("green");
            }

    }

5.3 选项相关的：改变选项：onchange

function testChange(){
    //1.获取用户选择了哪个选项
    var sheng = document.getElementById("sheng").value;
    var shi = document.getElementById("shi");

    shi.innerHTML="<option>--请选择--</option>";
    //alert(sheng);
    //2.根据用户的选项进行判断,动态的给市级的下拉选中天充对应的option选项
    if(sheng=="shanxi"){
        shi.innerHTML="<option>西安</option><option>渭南</option><option>宝鸡</option>"
        }else if(sheng=="sichuan"){
            shi.innerHTML="<option>成都</option><option>雅安</option><option>广安</option>"
            }else if(sheng=="guangdong"){
            shi.innerHTML="<option>广州</option><option>深圳</option><option>佛山</option>"
            }
    }



<select onchange="testChange()" id="sheng">
<option>--请选择--</option>
<option value="shanxi">陕西</option>
<option value="sichuan">四川</option>
<option value="guangdong">广东</option>
</select>
<select id="shi"></select>

5.4 鼠标相关的：（画一个div区块进行演示）
鼠标经过： onmouseover 鼠标移除： onmouseout

5.5 页面加载相关的：（一般用在body标签中，用于网页加载完毕后还需执行什么操作进行触发）页面加载： onload

6.通过document的集合获得每个标签的对象

查询标签对象：通过document对象获取，document代表一个html页面

all: 获取所有标签对象    var nodeList = document.all;
forms： 获取form标签对象  var nodeList = document.forms;
links: 获取a标签对象    var nodeList = document.links;
images: 获取img标签对象  var nodeList = document.images;

遍历所有的标签对象
alter(nodelist.length)
for(var i=0;i<nodList.length;i++){
    alter(nodeList[i].nodeName);
        }

HJF__JAVA

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
文章标题

一 BOM编程:将浏览器的各个部分封装成了不同的对象1.window对象 1.1open():打开另一个窗口参数1：打开的网页链接参数2：打开的方式参数3：打开窗口的大小 window.open("1.广告.html","_blank","width=200px;height=300px");1.2 设置定时器 setInterval(“执行
复制链接

扫一扫