javascript学习简记:
运行结果:
完整的JavaScript是由ECMAScript(语法)、Browser Object(DOM\BOM)(特性)组成的!
前面的语法部分基本上看看都懂,啥时候碰上了不懂的,就在上面加上,在现在看的视频中需要重点了解的就是后面的部分了!
获取节点的三种方式:
getElementsByTagName
getElementById
getElementsByClassName
属性获得的方式
类似
href属性就可以直接在js代码中通过a.href调用
注意,class属性除外,class属性的获取不能写成:this.class 而应该写成this.claasName
而可以在style中写的属性可以通过p.style.color来获取和设置!
onsubmit事件的触发是因为表单中的提交按钮被点击,但是绑定的话是在表单中绑定,而不是提交按钮!
事件的绑定最好都写在js代码而不是html代码上!
onkeydown : 用户按下键盘中某个键
onkeyup : 用户放开之前按下的键
onkeypress : 用户按键,包括前面两个动作!
keycode : 返回的是前三个事件触发键的键码!
点击上下左右显示的键码。
掌握BOM的核心——window对象
掌握什么是BOM
掌握Windows对象的控制和窗口弹出的方法!
window对象是浏览器的一个实例,在浏览器中,window对象有双重角色:它既是js访问浏览器窗口的一个接口,又是ECMAScript定义的一个Global对象!
alert(text):弹出显示text的提示窗口。
comfirm(text):弹出确认窗口,点击OK返回true,Cancel返回false
prompt(text,defaultText):弹出一个输入框,两个参数的作用如下图,点击ok返回输入框中的文本,未输入返回空字符串,点击dancel的话返回null!
open(pageurl, name,parameters)方法
parameters有这些属性:
close()方法:功能就是关闭浏览器窗口!
学习目标:掌握超时调用和间歇调用。
我们应该知道的是,JavaScript是单线程语言,代码的执行必须按照顺序!
首先我们先了解下 超时调用
语法:setTimeout(code, millisec)
功能:在指定毫秒数后调用函数或计算表达式
参数说明 : 执行代码前等待的毫秒数!
返回值:返回一个ID唯一表示这个超时调用,id可以用于清除超时调用!
清除超时调用的方法clearTimeout
语法:clearTimeout(id_of_setTimeout)
参数:id_of_setTimeout表示某个生成超时调用的方法返回的id值!
功能:取消生成id_of_setTimeout的方法设置的超时调用!
间歇调用
语法:setInterval(code,millisec)
功能:每个interval时间执行一次前面的code代码!
返回值:返回一个id唯一确定前面的间歇性调用!用于取消间谢调用。
清除间谢调用的方法clearInterval与上面clearTimeout同理!
属性:
语法:location.href
功能:返回当前加载页面的完整url
语法:location.hash
功能:返回url中的hash(即#号后跟零个或多个字符)如果不包含就返回空字符串!
示例例如回到最顶部(最顶部有一个标签的id为top),可以在相应的按钮注册点击事件,响应的方法中直接将location.hash = “#top”即可返回最顶端!
语法:location.host
功能:返回服务器名称和端口号(如果有!)例如百度的host就是“www.baidu.com”
语法:location.hostname
功能:返回服务器名称(不带端口)
语法:location.pathname
功能:返回url中的目录或文件名
语法:location.port
功能:返回url中的端口,没有返回空字符串
语法:location.protocol
功能:返回网站使用的协议
语法:location.search
功能:返回url中的查询字符串,即url中?后的属性
学习目标:
掌握位置操作
掌握location.reaplace()
掌握location.reload
改变浏览器位置的方法:
前面的方法会在浏览器中留下历史记录,如果不想留可以用下面一种方法!
location.reaplace(“www.baidu.com”)
location.reload重新加载目前的页面!在不指定参数时是从浏览器中的缓存中刷新,如果添加一个true的bool参数,就会从服务器中重新获取资源强制刷新!
语法 :history.back()
功能:回到历史记录的上一步(我能想到的实际用途就是,我们在任意一处使用一个需要登录权限的网站功能的时候,需要跳转到登录界面,登陆后又要返回这个地方,就可以用到这个功能!)
说明: 相当于使用了history.go(-1) 参数是负几就退几步!
语法 :history.forward()
功能:回到历史记录的下一步
说明: 相当于使用了history.go(1) 参数是几就退几步!
语法:screen.availWidth
screen.availHeight
功能:浏览器窗口页面可用的宽和高!可用的宽和高指的是浏览器窗口去除上面的什么导航栏、书签等功能区之外显示网页的地方!
具体可以参考这个博客 : http://caibaojian.com/js-name.html
但经过自己在chorme的试验:screen.width 和 screen.availWidth 、 screen.height和screen,availHeight相等,都是代表的是显示网页的高宽!
navigator对象提供了操作系统及浏览器的信息,通过这个对象我们可以了解到我们在什么系统下使用的是什么浏览器什么版本!
学习目标:
UserAgent:用来识别浏览器的名称、版本、引擎已经操作系统等信息的内容!
例如:
alert(Navigator.userAgent)
的显示结果是(这是Chrome运行的!)
可以像视频中那样通过检索返回字段中的浏览器信息来封装成一个方法显示具体浏览器信息: