zoukankan      html  css  js  c++  java
  • JavaWeb的学习--第五天 javascript03

    1、 js的bom对象
    ** bom:broswer object model: 浏览器对象模型

    ** 有哪些对象?
    *** navigator: 获取客户机的信息(浏览器的信息)
    - navigator.appName
    - document.write(navigator.appName);

    *** screen: 获取屏幕的信息
    - document.write(screen.width);
    document.write("<br/>");
    document.write(screen.height);

    *** location: 请求url地址
    - href属性
    **** 获取到请求的url地址
    - document.write(location.href);

    **** 设置url地址
    - 页面上安置一个按钮,按钮上绑定一个事件,当我点击这个按钮,页面可以跳转到另外一个页面
    - location.href = "hello.html";

    **** <input type="button" value="tiaozhuan" onclick="href1();"/>
    - 鼠标点击事件 onclick="js的方法;"

    *** history:请求的url的历史记录
    - 创建三个页面
    1、创建第一个页面 a.html 写一个超链接 到 b.html
    2、创建b.html 超链接 到 c.html
    3、创建c.html

    - 到访问的上一个页面
    history.back();
    history.go(-1);

    - 到访问的下一个页面
    history.forward();
    history.go(1);

    **** window(****)
    * 窗口对象
    * 顶层对象(所用的bom对象都是在window里面操作的)

    ** 方法
    - window.alert() : 页面弹出一个框,显示内容
    ** 简写alert()

    - confirm(): 确认框
    - var flag = window.confirm("显示的内容");

    - prompt(): 输入的对话框
    - window.prompt("please input : ","0");
    - window.prompt("在显示的内容","输入框里面的默认值");

    - open() : 打开一个新的窗口
    ** open("打开的新窗口的地址url","","窗口特征,比如窗口宽度和高度")
    - 创建一个按钮,点击这个按钮,打开一个新的窗口
    - window.open("hello.html","","width=200,height=100");

    - close(): 关闭窗口(浏览器兼容性比较差)
    - window.close();

    - 做定时器
    ** setInterval("js代码",毫秒数) 1秒=1000毫秒
    - 表示每三秒,执行一次alert方法
    window.setInterval("alert('123');",3000);

    ** setTimeout("js代码",毫秒数)
    - 表示在毫秒数之后执行,但是只会执行一次

    - 表示四秒之后执行js代码,只会执行一次
    window.setTimeout("alert('abc');",4000);

    ** clearInterval(): 清除setInterval设置的定时器
    var id1 = setInterval("alert('123');",3000);//通过setInterval会有一个返回值
    clearInterval(id1);

    ** clearTimeout() : 清除setTimeout设置的定时器
    var id2 = setTimeout("alert('abc');",4000);
    clearTimeout(id2);

    8、js的dom对象(****)
    * dom:document object model: 文档对象模型
    ** 文档:
    超文本文档(超文本标记文档) html 、xml
    ** 对象:
    提供了属性和方法
    ** 模型:使用属性和方法操作超文本标记型文档

    *** 可以使用js里面的dom里面提供的对象,使用这些对象的属性和方法,对标记型文档进行操作

    *** 想要对标记型文档进行操作,首先需要 对标记型文档里面的所有内容封装成对象
    -- 需要把html里面的标签、属性、文本内容都封装成对象

    *** 要想对标记型文档进行操作,解析标记型文档
    - 画图分析,如何使用dom解析html

    *** 解析过程
    根据html的层级结构,在内存中分配一个树形结构,需要把html中的每部分封装成对象,
    - document对象:整个文档
    - element对象:标签对象
    - 属性对象
    - 文本对象

    -- Node节点对象:这个对象是这些对象的父对象
    *** 如果在对象里面找不到想要的方法,这个时候到Node对象里面去找

    DOM模型有三种:
    DOM level 1:将html文档封装成对象。
    DOM level 2:在level 1的基础上添加新的功能,例如:对于事件和css样式的支持。
    DOM level 3:支持xml1.0的一些新特性。

    * DHTML:是很多技术的简称
    ** html: 封装数据
    ** css:使用属性和属性值设置样式
    ** dom:操作html文档(标记型文档)
    ** javascript:专门指的是js的语法语句(ECMAScript)

    9、document对象
    * 表示整个的文档

    ** 常用方法
    **** write()方法:
    (1)向页面输出变量(值)
    (2)向页面输出html代码
    - var str = "abc";
    document.write(str);
    document.write("<hr/>");

    **** getElementById();
    - 通过id得到元素(标签)
    - //使用getElementById得到input标签
    var input1 = document.getElementById("nameid"); //传递的参数是标签里面的id的值
    //得到input里面的value值
    alert(input1.name); //标签对象.属性名称
    //向input里面设置一个值value
    input1.value = "bbbbb";

    **** getElementsByName();
    - 通过标签的name的属性值得到标签
    - 返回的是一个集合(数组)
    - //使用getElementsByName得到input标签
    var inputs = document.getElementsByName("name1"); //传递的参数是 标签里面的name的值
    //alert(inputs.length);
    //遍历数组
    for(var i=0;i<inputs.length;i++) { //通过遍历数组,得到每个标签里面的具体的值
    var input1 = inputs[i]; //每次循环得到input对象,赋值到input1里面
    alert(input1.value); //得到每个input标签里面的value值
    }

    **** getElementsByTagName("标签名称");
    - 通过标签名称得到元素
    - //演示getElementsByTagName
    var inputs1 = document.getElementsByTagName("input"); //传递的参数,是标签名称
    //alert(inputs1.length);
    //遍历数组,得到每个input标签
    for(var m=0;m<inputs1.length;m++) {
    //得到每个input标签
    var input1 = inputs1[m];
    //得到value值
    alert(input1.value);
    }

    **** 注意地方
    **** 只有一个标签,这个标签只能使用name获取到,这个使用,使用getElementsByName返回的是一个数组,
    但是现在只有一个元素,这个时候不需要遍历,而是可以直接通过数组的下标获取到值
    //通过name得到input标签
    var inputs2 = document.getElementsByName("name11")[0];
    alert(inputs2.value);

    var inputss = document.getElementsByTagName("input")[0];
    alert(inputss.value);

  • 相关阅读:
    Rsa加密类
    Des加密类
    AES对称加密解密类
    用字符串生成二维码
    ViedoUtil获取视频的缩略图
    UmUtils得到友盟的渠道号
    UiUtils
    StringUtils
    ShockUtil振动工具类
    SHA加密
  • 原文地址:https://www.cnblogs.com/guodong-wang/p/6523286.html
Copyright © 2011-2022 走看看