JS基本语法
1.数据类型
变量的基本类型有number、string、boolean、undefined、null五种。 u n n s b
在Java中,当一个变量未被初始化的时候,Java中是null或者基本数据类型的默认值。
在JavaScript中,当一个变量未被初始化的时候,它的值为undefined。当一个引用不存在时,它为Null。
2.JS的三种使用方式
第一种方式:在<script>标签中,script可以放在网页中任何位置
第二种方式:使用外部JavaScript文件,把js代码放入单独的文件中 ,这个文件的扩展名.js
第三种方式: 放在标签中的事件属性中,常见事件 ,onclick
3.系统函数
提示框 alert() 这是一个只能点击确定的弹窗
确认框 confirm(); 这是一个你可以点击确定或者取消的弹窗
输入框 prompt() 这是一个你可以输入文本内容的弹窗
parseInt(); 字符串转换整数
? parseFloat(); 字符串转成小数
? isNaN(); 判断数字是不是不是一个数字
4.事件
onchangeHTML 元素内容改变(离开光标触发)
onclick 用户点击 HTML 元素
onmouseover 光标移动到HTML元素
onmouseout 光标离开HTML元素
onkeydown 用户按下键盘按键onload浏览器已完成页面的加载
JS的DOM和BOM
1.获取HTML元素
1)通过 id 找到 HTML 元素
var x=document.getElementById("intro");
如果未找到该元素,则 x 将包含 null。
2)通过标签名找到 HTML 元素
本例查找 id="main" 的元素,然后查找 id="main" 元素中的所有 <p> 元素:
var x=document.getElementById("main");
var y=x.getElementsByTagName("p");
3)通过类名找到HTML 元素
本例通过 getElementsByClassName 函数来查找 class="intro" 的元素:
var x=document.getElementsByClassName("intro");
2.修改HTML元素
改变HTML内容
修改 HTML 内容的最简单的方法时使用 innerHTML 属性。
如需改变 HTML 元素的内容,请使用这个语法:
document.getElementById(*id*).innerHTML="*abcd*";
document.getElementById(*id*).innerText="xxxx";
改变HTML属性
如需改变 HTML 元素的属性,请使用这个语法:
document.getElementById(*id*).*attribute=新属性值*
3.修改CSS样式
改变HTML的样式:
如需改变 HTML 元素的样式,请使用这个语法:
document.getElementById(*id*).style.*property*=*新样式*
4.元素操作
创建新元素
这段代码创建新的<p> 元素:
var para=document.createElement("p");
如需向 <p> 元素添加文本,您必须首先创建文本节点。
这段代码创建了一个文本节点:
var node=document.createTextNode("这是一个新段落。");
然后必须向 <p> 元素追加这个文本节点:
para.appendChild(node);
最后必须向一个已有的元素追加这个新元素。
这段代码找到一个已有的元素:
var element=document.getElementById("div1");
以下代码在已存在的元素后添加新元素:
element.appendChild(para);
删除已有的 HTML 元素
找到 id="div1" 的元素:
var parent=document.getElementById("div1");
找到 id="p1" 的 <p> 元素:
var child=document.getElementById("p1");
从父元素中删除子元素:
parent.removeChild(child);
5.DOM事件
onload 和 onunload 事件会在用户进入或离开页面时被触发。
onchange 事件常结合对输入字段的验证来使用
onmouseover 和 onmouseout 事件可用于在用户的鼠标移至 HTML 元素上方或移出元素时触发函数。
6.EventListoener
addEventListener() 方法
在用户点击按钮时触发监听事件:
document.getElementById("myBtn").addEventListener("click", displayDate);
addEventListener() 方法用于向指定元素添加事件句柄。
addEventListener() 方法添加的事件句柄不会覆盖已存在的事件句柄。
addEventListener() 方法可以更简单的控制事件(冒泡与捕获)。
你可以使用 removeEventListener() 方法来移除事件的监听。
7.window方法
- window.open() - 打开新窗口
- window.close() - 关闭当前窗口
8. Location
window.location 对象用于获得当前页面的地址 (URL),并把浏览器重定向到新的页面。
- location.href 属性返回当前页面的 URL。
- location.hostname 返回 web 主机的域名
- location.pathname 返回当前页面的路径和文件名
- location.port 返回 web 主机的端口 (80 或 443)
- location.protocol 返回所使用的 web 协议(http:// 或 https://)
9. History
window.history 对象包含浏览器的历史。
- history.back() - 与在浏览器点击后退按钮相同
history.forward() - 与在浏览器中点击按钮向前相同
10. 时间
Date
?
setInterval(); 周期执行函数
?
setTimeOut(); 延迟执行函数