zoukankan      html  css  js  c++  java
  • html07

    1.复习
    js的外部对象,DOM,BOM
    BOM
    window
    -location -Location对象 : href reload()
    -history -History :back() forward() go(index)
    -screen -width availWidth
    -navigator -userAgent
    -document
    DOM
    1)查找节点
    byID 返回单个节点 没找到 -null
    ByTagname 返回集合 -[]
    byName 集合
    子节点:parentNode -父节点
    父节点:childNodes -子节点
    querySelector(选择器) - 单个节点
    querySelectorAll - 多个节点
    单个没找到,返回null,多个没找到返回空数组[]
    2)读取+修改
    读内容,读值
    ele.innerText : 获取双标记中的文本
    ele.innerHTML : 获取双标记中的html
    该内容
    ele.innerText=值 :
    ele.innerHTML=值 :
    读属性
    ele.属性名(注意是否支持)
    ele.getAttribute(属性名)
    改属性
    ele.属性名=值
    ele.setAttribute(属性名,值);

    ================================================
    1.综合练习:表单的验证

    2.DOM操作
    1)增加节点
    * 通过属性给页面添加节点
    ele.innerHTML="HTML代码"
    * 通过方法给页面添加节点
    a,新建节点
    document.createElement(节点名称);
    如:var divEle=document.createElement("div");
    divEle.innerHTML=值;
    b,添加新节点到指定位置
    父节点.appendChild(新节点);
    如:父节点.appendChild(divEle);
    父节点.insertBefore(新节点,旧节点);//插入的新节点时在父节点的旧节点的前面
    **
    通过js添加的元素,可以被js找到
    但是要注意先后顺序(先添加,再查找)
    **
    2)删除节点
    父节点.removeChild(删除的节点);

    //练习:省市,二级联动

    3.事件
    1)事件是指页面的元素状态方法改变,所触发的动作
    鼠标事件
    单机事件:onclick
    双击事件:ondblclick
    鼠标移入:onmouseover
    鼠标移开:onmouseout
    键盘事件
    键盘按下: onkeydown
    键盘松开: onkeyup
    状态事件 (状态改变)
    选择: onchange (单选 复选 下拉列表)
    失去焦点: onblur
    获取焦点: onfocus
    表单提交: onsubmit

    2)事件的定义
    * 元素上添加对应的事件属性
    如: <input onblur="函数">
    * 在js中
    元素.时间名=function(){}

    元素.事件名=函数名
    function 函数名(){}

    3)event
    任何事件触发之后都会产生1个event对象
    event记录事件发生时鼠标位置 按键的状态
    触发对象等信息

    事件冒泡:若子节点和父节点有相同的事件,若子节点触发事件时,会向上触发父节点的同名事件
    取消事件冒泡:event.cancelBubble=true;

    ========================================
    js中的自定义对象
    {}:对象 多个属性用逗号隔开
    形式1
    var user={
    "name":"zs",
    "age":34,
    "sayHello":function (){
    var info="我是"+this.age+"岁的"+this.name;
    alert(info);
    }
    };
    user.sayHello();

    形式2:
    //类似于构造函数
    function UserModel(){
    this.name="";
    this.age=0;
    }
    //创建对象
    var lisi=new UserModel();
    lisi.name="lisa";
    lisi.age=54;
    console.log(lisi);

  • 相关阅读:
    ASP.NET 后台弹出确认提示问题
    stretchableImageWithLeftCapWidth 自动适应UITableView
    UIBotton UIlabel Ios 下拉框
    cellForRowAtIndexPath UITableViewCell 选中后的背景颜色设置
    iOS 获得键盘的高度 NSNotificationCenter
    UIlabel 最小字体设置。
    NSMutableDictionary 与 NSMutableArray注意的地方
    iOS 背景图片。按钮高亮自定义背景
    iOS 判断当前输入法。UITextInputMode
    AudioServicesPlaySystemSound 系统声音提示 iOS iPad
  • 原文地址:https://www.cnblogs.com/yingyigongzi/p/9232277.html
Copyright © 2011-2022 走看看