初次接触JS(二)


    一、进阶篇主要学什么

    在JavaScript入门篇中,我们学习了如何插入JS、输出内容及简单的DOM操作,JavaScript进阶篇让您进一步的了解JS的变量、数组、函数、语法、对象、事件、DOM操作,制作简单的网页动态效果。

    二、数组


    1. 创建数组: var myarr = new Array();
    2. 给数组赋值:
                var myarr = new Array(3);
                myarr[0] = 88;
                myarr[1] = 90;
                myarr[3] = 68;
            注意:虽然创建数组时,指定了长度,但实际上数组都是变长的,也就是说即使指定了长度为3,仍然可以将元素存储在规定长度以外。

    三、流程控制语句(和java的相同)


    1. if(){}else{}
    2. switch{
            case 1:
                break;
            default:
        }
    3. for(var i=0 ; i <= arr.length-1 ; i++){}
    4. while(){}
    5. do{}while(){}
    6. break
    7. continue

    四、函数


    1. 定义函数: function 函数名{
                        函数体;
                  }

    五、事件响应,让网页交互


    主要事件:
            onclick : 鼠标单击事件
            onmouseover: 鼠标经过事件
            onmouseout: 鼠标移开事件
            onchange: 文本框内容改变事件
            onselect: 文本框内容被选中事件
            onfocus: 光标聚集
            onblur: 光标离开
            onload: 网页导入
            onunload: 关闭网页

    六、浏览器对象


    1. Window: window对象是BOM的核心,window对象指当前的浏览器窗口.
    2. 计时器:
            setTimeout(执行时间 , 时间): 指定的延迟时间之后执行代码
            clearTimeout(): 取消setTimeout()设置
            setInterval(): 每隔指定的时间执行代码
            clearInterval(): 取消setInterval()设置
    3. History 对象:history对象记录了用户曾经浏览过的页面(URL),并可以实现浏览器前进与后退相似导航的功能。
            window.history.[属性|方法]
                属性:length返回浏览器历史列表中URL的数量
                方法:back()加载history列表的上一个url
                      forward()加载history列表的下一个url
                      go()加载history列表中一个具体的url

    4. Location对象:location用于获取或设置窗体的URL,并且可以用于解析URL。

       

            location.[属性|方法]
                属性:hash 设置或返回从#开始的url(锚)
                      host 设置或返回主机名和当前url的端口号
                      hostname 设置或返回当前的url的主机名
                      href 设置或返回完整的url
                      pathname 设置或返回当前的url路径部分
                      port 设置或返回当前的url的端口号
                      protocol 设置或返回当前url的协议
                      search 设置或返回从?开始的url(查询部分)
                方法:assign() 加载新的文档
                      reload() 重新加载当前文档
                      replace()用新的文档替换新的文档
    5. Navigator对象:Navigator 对象包含有关浏览器的信息,通常用于检测浏览器与操作系统的版本。
                属性:appCodeName 浏览器代码名的字符串表示
                      appName 返回浏览器的名称
                      appVersion 返回浏览器的平台和版本信息
                      platform 返回运行浏览器的操作系统平台
                      userAgent 返回由客户机发送服务器的user-agent头部的值
    6. screen对象: screen对象用于获取用户的屏幕信息
                属性:availHeight 窗口可以使用的屏幕高度,单位像素
                      availWidth 窗口可以使用的屏幕宽度,单位像素
                      colorDepth 用户浏览器表示的颜色位数,通常32位(每像素的位数)
                      height 屏幕的高度
                      width 屏幕的宽度

    七、认识DOM对象:

            文档对象模型DOM(Document Object Model)定义访问和处理HTML文档的标准方法。DOM 将HTML文档呈现为带有元素、属性和文本的树结构(节点树)。

    1. document.getElementById("id"); 根据id获取对应的元素
    2. document.getElementsByNmae("name");  因为文档中的 name 属性可能不唯一,所有 getElementsByName() 方法返回的是元素的数组,而不是一个元素。
    3. document.getElementsByTagName("标签名"); 返回带有指定标签名的节点对象的集合。返回元素的顺序是它们在文档中的顺序。
    4. elementNode.getAttribute(name): 1. elementNode:使用getElementById()、getElementsByTagName()等方法,获取到的元素节点。
                                       2. name:要想查询的元素节点的属性名字
        elementNode.setAttribute(name,value)
    5. 节点的三个重要属性:nodeName : 节点的名称
                           nodeValue :节点的值
                           nodeType :节点的类型
    6. elementNode.childNodes : 访问选定元素节点下的所有子节点的列表,返回的值可以看作是一个数组,他具有length属性。
发布了34 篇原创文章 · 获赞 0 · 访问量 9327
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章