• web-03-js-01


    1、js外部对象

    BOM对象(Browser Object Model):浏览器对象模型(主要操作浏览器的),主要操作浏览器窗口,不跟页面发生直接联系

    DOM对象(Document Object Model):文档对象模型(主要操作html的),主要是用来实现对html页面的操作(增删改查-页面的节点),在js中已经事先定义了访问和操作html文档的标准方法

    2、window(BOM对象):浏览器窗口对象

    所有js的全局对象,函数和变量都在window中

        1)常用属性

    -1. history:可以获取浏览器的历史记录对象

    -2. document:用于获取窗口中显示的html文档对象

    -3. location:用于获取窗口文件地址对象

    -4. screen:获取当前的屏幕对象

    -5. navigator:获取浏览器信息对象

        2)常用方法

    -1. 对话框

    alert();    confirm();  -属于确定对话框

    -2. 定时器

    一般用来制作网页时钟、倒计时、 轮播

    1)周期性定时器
    var tid=setInterval(执行语句/函数名,间隔毫秒数,[回调函数]) -回调函数是在执行语句后执行的操作
    clearInterval(tid) -关闭指定计时器

    2)一次性定时器
    var tid=setTImeOut(执行语句/函数名,间隔毫秒数);
    clearTimeOut(tid);

        3)常用对象

    -1. Location

    href属性:指的是当前窗口正在浏览的网页地址

    Location.href="http://www.baidu.com";

    reload():重新加载当前页面(等同于按下刷新按钮)

    -2. Screen -包含客户端的显示屏信息,常用于获取分辨率

    width/height:当前屏幕的宽高

    availWidth/availHeight:当前屏幕的可用宽高

    -3. Navigator:包含浏览器的相关信息

    userAgent

    -4. History:用户通过浏览器访问过得URL

    back(); //回退
    forward(); //前进
    go(num); //num>0前进 num<0后退

    -5. Document

    3、document

    DOM树:在页面加载时由浏览器创建的,通过js可以创建动态的html,js可以修改html的属性、样式、事件

    3.1 DOM操作

    前提:

    节点.属性  -用于获取属性的值
    节点.属性=值 -用于修改节点上属性的值
    节点.fangf () -获取方法
    节点.方法(值) -修改值

        1)查找节点

    document.getElementById("id的值");  //查询的整个html文档,如果找不到,返回的是null

    document.getElementsByTagName("标签名称"); //返回的是数组(含多个)
    -> 返回指定的标签名元素组成的数组
    -> 若找不到返回空数组[],可以通过下标获取数组中的指定元素

    document.querySelectorAll("选择器"); //根据选择器查询所有

    document.querySelector("选择器"); //找单个节点
    如:var uname_E=document.querySelector("[type='text']"); //根据属性名找到用户名节点

        2)读取    ----   属性/值(前提找到节点)

    innerHTML:获取双标记中间的html内容
    innerText:获取双标记中间的文本内容
    修改双标记内容:
    innerHTML=html值;
    div_E.innerHTML="<span>大家好</span>"; //向div中添加span节点

    修改样式:
    style=值;
    style.属性名(驼峰)=值;
    className=值;

    4、js操作DOM

        1)增加元素

    -字符串拼接

    -通过方法创建

    -1)document.createElement(元素名称);
    -2)parentNode.appendChild(新节点); //将新节点作为父节点的最后一个子元素添加进去
    parentNode.insertBefore(新节点,在哪个节点前面添加);

        2)删除元素

    -字符串删除

    -parentNode.removeChild(要删除的节点);

        3)改元素

    -改属性(改样式)

    -改事件

    5、js中的事件

        1)什么是事件

    页面的元素状态变化,触发的动作

    * 鼠标事件

    * 键盘事件

    * 状态改变

        2)常见事件

    onclick:单击

    onchange:状态发生改变

    onblur:失去焦点

    onfocus:获取焦点

    onsubmit:提交

    onload:页面完成加载

        3)事件的定义方式

    -1)元素上添加<a onclick="f1()">点击</a>

    -2)元素节点.onclick=function(){}

           元素节点.onclick=f1;

    -3)事件冒泡(是默认的)

    当内层节点事件触发时,会默认向上触发祖先节点的同名事件

    要取消事件冒泡:event.cancelBubble=true;

    -4)事件对象 (event)

    * 任何事件触发后都会产生一个event对象

    * 记录事件触发时鼠标的位置,键盘的状态,触发对象等信息

        event.target/event.srcElement

        event.clientX/event.clientY    //横纵坐标

    6、js中的自定义对象

       1)模拟构造器创建对象

    function UserModel(){
    this.name="";
    this.age=0;
    }
    val u1=new UserModel();
    u1.name="张三"; //给name赋值,JSON格式{"属性":值,"属性":值},json是一种数据交换格式
    var user={"id":001,"sex":"男"};
    var user1={
    'id':002,
    'age':25,
    'name':'王五',
    'sayHello':function(){
    var str=this.age+"岁的"+this.name+"你好";
    alert(str);
    }
    };
    //调用自定义方法
    user1.sayHello();
    //若为多个对象
    var users=[{},{},{}]; //{}会转为true,在需要定义不确定是否存在的对象时,就需要赋值为""/underfine,清空对象,需要对象=null
  • 相关阅读:
    (转)游戏设备的三大未来趋势
    (转)零基础学习 Hadoop 该如何下手?
    (转)如何系统地学习数据挖掘?
    (转)大数据最核心的价值是什么?
    (转)面向对象编程的弊端是什么?
    (转)处理器架构、指令集和汇编语言,三者有何关系?
    (转)游戏界人士如何看待《征途》这款游戏?
    (转)想从事游戏开发,1 年内能精通 C++ 吗,还需要学习什么?
    (转)数据库老兵:NewSQL才是未来
    (转)神舟飞船上的计算机使用什么操作系统,为什么是自研发不是 Linux?
  • 原文地址:https://www.cnblogs.com/xslzwm/p/9619463.html
Copyright © 2020-2023  润新知