A股上市公司传智教育(股票代码 003032)旗下技术交流社区北京昌平校区

 找回密码
 加入黑马

QQ登录

只需一步,快速开始

© zhoufan0628 中级黑马   /  2017-12-14 17:08  /  904 人查看  /  3 人回复  /   0 人收藏 转载请遵从CC协议 禁止商业使用本文

周帆
今天上的自习课,所以往后将js重新翻看了一天,其实还是有很多东西没有领悟完全,总之多看几遍笔记加深印象吧
同理,笔记贴上
bom(游览器对象模型)总结:
    所有的游览器都有5个对象:
        window:窗口
        location:定位信息(地址栏)
        history:历史
window对象详解:
    如果文档包含跨国家(frame或者iframe标签)游览器会为HTML文档创建一个window对象
    并未每个框架创建一个额外的window对象
    常用的属性:
        通过window对象可以获得其他四个对象
            window.location 等价于 location
            ......
    常用的方法:
        消息框
            alert("......") 警告框
            confirm("你确定要删除嘛") 确定框 返回值为boolean
            pormpt ("请输入你的名字") 输入框 返回值为你输入的值
        定时器
            两种四个 就不用在重复写了
            setInterval(showAD,400);不加引号不加括号
            setInterval("showAD()",400);加了引号加括号
            
        打开和关闭
            open(url)
            close()
///////////////////////////////////////////////////////////////
location:定位信息
    常用属性:
        href:获取或者设置当前页面的url(定位信息)
        
        location.href:获取url
        location.href = "..." 设置url 相当于a标签
history 历史
    back()后退
    forward()前进
    ★go(int)
        go(-1)相当于back();
        go(1)相当于forward
/////////////////////////////////////////////////////////////////////
提交表单的技术分析
        事件 提交事件onsubmit
             文本框是去焦点 onblur
            
////////////////////////////////////////////////////////////////////
事件总结:
    常见事件
        焦点事件:★
            onfocus
            onblur
        表单事件★
            onsubmit
            onchange:改变
        页面加载事件★
            onload
        鼠标事件
            ondblclic:双击
            onmousedown:按下
            onmouseup:弹起
            onmousemove:移动
            onmouseover:悬停
            onmouseout:移出
        键盘事件
            onkeydown:按下
            onkeyup:弹起
            onkeypress:按住
            
/////////////////////
绑定事件
    两种方式
/////////////////////////
了解
    阻止默认事件发生
    组织事件传播
////////////////////////////
隔行换色
    贴上代码
    var arr = document.getElementsByClassName("itemSelect");
    if(object.checked==true){
        for(var i = 0;i<arr.length;i++){
            arr[i].checked=true;
        }
    } else {
        for(var i = 0;i<arr.length;i++){
            arr[i].checked=false;
        }
    }
//////////////////////////////////
dom(文档对象模型)
    当游览器接收到html代码的时候,游览器会将所有代码装载进内存形成一个数(document)树
    节点(Node)
        文档节点 document
        元素节点 element
        属性节点 attribute
        文本节点 text
    获取节点:
        通过document可以获取其他节点
            常用方法:
                document.getElementById("id值");
                通过标签名获得一个或者多个元素
                document.getElementsByTagName("标签名字")
                document.getElementsByClassName("class属性名")
                document.getElementByName("name属性的值")
        设置和获取节点的value属性
            dom对象.value;获取
            dom对象.value = "";设置
        设置和获取节点的标签体
            dom对象.innerHTML:获取
            dom对象.innerHTML ="":设置
        设置和获取style属性:
            dom对象.style.属性;获取节点的指定style中的值
            dom对象.style.属性 = "";设置
        设置和获取属性:
            dom对象.属性
///////////////////////////////////////////////////
对于htmldom的操作若遭js或者htmldom查不到 去查找xml dom对象        
    关于文档的操作 在 xml dom 的document中
    关于元素的操作 在 xml dom 的element中
        appendChild(dom对象):在一个元素下添加孩子(子节点)
下拉框的案例代码实现
    function leftOne() {
        var arr = document.getElementById("left").options;
        var selectR = document.getElementById("right");
        for(var i = 0; i < arr.length; i++) {
            if(arr[i].selected == true) {
                selectR.appendChild(arr[i]);
                break;
            }
        }
    }

    function leftOther() {
        var arr = document.getElementById("left").options;
        for(var i = 0; i < arr.length; i++) {
            if(arr[i].selected == true) {

                document.getElementById("right").appendChild(arr[i]);
                i--;
            }
        }
    }

    function leftAll() {
        var arr = document.getElementById("left").options;
        for(var i = 0; i < arr.length; i++) {
            document.getElementById("right").appendChild(arr[i]);
            i--;
        }
    }
右移就行了,左移和右移原理一样
注意:我们可以使用select元素上的multiple属性来设置下拉框可以多选
true为可以,false为不可以.
////////////////////////////////////////////////////
省市联动案例
数组
    语法:
        new Array();长度为0
        new Array(size);自定义长度
        new Array(e1,e2,e3.....);指定元素  
        非官方的定义格式
            var arr = ["aa","bb"];
    常用属性:
        length
    注意:
        数组的长度可以变的
        数组可以存放任何值
    常用方法:
        存放值:对内容的操作
            pop():弹 最后一个
            push():插入  最后一个
            shift():删除第一个
            unshift():插入到首位
        打印字符
            jion(分隔符) 将数组按照指定的分割符打印
        拼接:
            concat()
        排序:
            sort()
        反转:
            reverse()
            
//////////////////////////////////////////////////
引用类型总结
    原始类型中的string number boolean 都是伪对象,可以调用相应的方法.
    Array:数组
    String:字符串
        常用方法
            substring(startu,end);[)你懂
            substr(start,size):从指定索引位置开始截取字符 截取size个
            
            charAt(index) 返回指定字符
            indexOf("") 返回指定字符串的索引位置
            replace() 替换
            split() 切割
    Boolean:布尔值
        new Boolean(值|变量);
        Boolean(值|变量)
        非0数字 非空字符串 非空对象 转成true  
    Number:数值
        new Number();
        Number("2")
        null====>0
        false====>0 true=====>1
        字符串数字=======>该字符串对应的数字
        其他全为NaN!!!!!
    Date:时间
        new Date();
        常用方法:
            toLocalString();
    RegExp:正则表达式
        语法:
            直接量语法 /^正则表达式$/参数
            new RegExp("/^正则表达式$/")
            new RegExp("/^正则表达式$/","参数")
            参数
                i:忽略大小写
                g:全局变量
            常用方法
                test() 返回一个boolean
    Math:数学运算类
        Math.常量|方法
    全局:全局变量
        ★
        decodeURI:解码
        encodeURI:编码
   
        Number():强制转换成数字
        String():转换成字符串
        
        parseInt();尝试转换成整数
        parseFloat();尝试转换成小数
   
        eval 计算js字符串 并把它作为脚本代码执行
//////////////////////////////////////////////////////   
dom(★)
    获取元素的方法(4个) document
    操作元素的属性 dom对象.属性
   
引用类型:
    array
    string
        substring
    全局变量
        编码两个
        强制转换两个
        尝试转换两个
        eval()解析字符串形式的js代码
    Math
   
总结结束~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~

3 个回复

倒序浏览
Very  good!
回复 使用道具 举报
good good !
回复 使用道具 举报


回复 使用道具 举报
您需要登录后才可以回帖 登录 | 加入黑马