关于js
首先js是一种脚本语言,可以用操作页面元素和浏览器,在js中,有三大核心分别为
- ECMAScript 也就是语法
- DOM 文档对象模型
- BOM 浏览器对象模型(Browser Object Model)
关于js的语法基本和java差不多,不过在类,函数等方面有一些不同,比如for in 等。
下面先讲BOM
BOM
即浏览器对象模型
BOM提供了独立于内容的、可以与浏览器窗口进行互动的对象结构
也就是使用BOM我们可以使用js达到操作浏览器的作用,比如打开窗口,前进,后退等等。
这是BOM的结构
先讲window对象
window对象
window对象的常用属性
- history 有关客户访问过得URL信息
- location 有关当前的URL信息
例如
window.location="http://www.baidu.com";
跳转到百度
window对象的常用方法
- prompt() 显示可以使用户输入的对话框
- alert() 显示一个带有提示信息和一个确定按钮的警示框
- confirm() 显示一个带有提示信息,确定和取消按钮的对话框
- close() 关闭浏览器的窗口
- open() 打开一个新的浏览器窗口,加载指定的URL的文档
- setTimeout() 在指定的毫秒数后调用函数或者计算表达式
- setInterval() 按照指定的周期来调用函数表达式
confirm()与alert ()、 prompt()区别
alert( ):一个参数,仅显示警告对话框的消息,无返回值,不能对脚本产生任何改变
prompt( ):两个参数,输入对话框,用来提示用户输入一些信息,单击“取消”按钮则返回null,单击“确定”按钮则返回用户输入的值,常用于收集用户关于特定问题而反馈的信息
confirm( ):一个参数,确认对话框,显示提示对话框的消息、“确定”按钮和“取消”按钮,单击“确定”按钮返回true,单击“取消”按钮返回false,因此与if-else语句搭配使用
- open()方法
window.open(“弹出窗口的url”,”窗口名称”,”窗口特征”)
history对象
常用方法 - back() 加载history对象的中的前一个URL - forward() 加载history对象中的后一个URL - go() 加载history对象中的具体URL 例如 `history.back() 等价于 history.go(-1)` 同样 `history.forward() 等价于 history.go(1)`location对象
常用属性 - host 设置或返回主机名和当前URL的端口号 - hostname 设置或返回当前URL的主机名 - href 设置或返回完整的URL 常用方法 - reload() 重新加载当前文档 - replace() 用新的文档替换当前的文档 可以使用href实现跳转和刷新Document对象
常用属性 - referrer 返回载入当前文档的URL - URL 返回当前文档的URL 可以通过referrer属性判断是否是通过某个指定的链接来到达指定的网页,用来防止盗链。 常用方法 - getElenmentById() 返回拥有指定ID的第一个对象的引用。 - getElenmentByName() 返回带有指定名称的对象的集合。 - getElenmentByTagName() 返回带有指定标签名的对象的集合。 - write() 向文档写文本,html表达式或者js代码。 可以通过Document对象来改变层,标签中的内容。Javascript内置的对象
- Array:用于在单独的变量名中存储一系列的值
- String:用于支持对字符串的处理
- Date:用于操作日期和时间
- Math:用于执行常用的数学任务,它包含了若干个数字常量和函数
这里js中的数组可以自动调整大小,而且可以当作map使用,使用键值对来存取。
Math来做数学计算,如果要精确到几位的话,只能先扩大该位的数倍,然后取整,然后再除回来。
Dom
DOM:Document Object Model(文档对象模型)
dom分为三个方面,DOM Core,HTML-Dom,CSS-Dom.
访问节点
使用getElenment系列方法范文指定节点
- getElenmentById()
- getElementsByName()
- getElementByTagName()
分别为根据id,根据名字,根据标签名。
根据层次关系访问节点
element的属性
- firstElementChild 返回节点的第一个子节点,最普遍的用法是访问该元素的第一个元素节点
- lastElementChild 返回节点的最后一个元素子节点
- nextElementSibling 下一个元素子节点
- previousElementSibling 上一个元素节点
这里需要注意的就是上一个元素节点,下一个元素节点,对于空格等,文本等都算是一个节点,换行也是。如果在div中有一个小间隙,那么很可能是因为两个div中有一个空格导致的。
节点的信息
- nodeName 节点名称
- nodeValue 节点值
- nodeType 节点类型
其中节点类型是数值,常用类型为如下
- 元素element 1
- 属性attr 2
- 文本text 3
- 注释comments 8
- 文档document 9
操作节点
操作节点的属性
getAttribute("属性名")
得到属性的值
setAttribute("属性名","属性值")
设置属性的值
创建和插入节点
createElement( tagName)
创建一个标签名为tagName的新元素节点
A.appendChild( B)
把B节点追加至A节点的末尾
insertBefore( A,B )
把A节点插入到B节点之前
cloneNode(deep)
复制某个指定的节点
删除和替换节点
removeChild( node)
删除指定的节点
replaceChild( newNode, oldNode)属性attr
用其他节点替换指定的节点
操作节点的样式
- 改变样式的属性
style属性
className属性
通过各种触发事件来改变css样式
触发事件如下:
onclick
当用户单击某个对象时调用事件
onmouseover
鼠标移到某元素之上
onmouseout
鼠标从某元素移开
onmousedown
鼠标按钮被按下
可以直接改变style属性的值,形式为
HTML元素.style.样式属性="值"
举个栗子:
document.getElementById("titles").style.fontSize="25px ";
或者事先写好css样式表
直接改变className
像这样:
HTML元素.className="样式名称"
使用js来改变css可以获得非常强大的效果,通过对元素的显示,隐藏,放大,配合css3的新特性,简单的代码就足以做出简洁优雅的特效。