Javascript
js和html的结合方式
-
script标签
<script type ="text/javascript"> js代码 </script>
-
使用script标签,引入外部js文件 src
js的原始类型和声明变量
- string:字符串
- number:数字类型
- boolean:true和false
- null:占位符
- undefined:无赋值
typeof();查看当前变量的数据类型
声明变量:var
js的数组
定义方式
-
第一种:var arr=[1,2,3,4];
-
第二种:使用内置对象 Arrar对象
var arr1= new Array (5); 定义一个数组,数组长度是5
arr1 [0] = “1”;
-
第三种:使用内置对象 Array对象
var arr2 = new Array(3,4,5); 定义一个数组,数组里面元素是3 4 5
属性 length :获取数组的长度 arr.length
js的函数
定义函数(方法)有三种方式
-
第一种方式:
使用关键字 function
function 方法名(参数列表){ 方法体; 返回值可有可无(根据实际需要); } //实现两个数的相加 function add(a,b){ sum = a+b; alert(sum); } add(2,3);
-
第二种方式:
匿名函数
var 命名 = function (参数列表){ 方法体和返回值; } var add = function (a,b){ sum = a+b; alert(sum); } add(2,3);
-
第三种方式:
动态函数
使用到js里面的一个内置对象 Function
var 命名 = new Function("参数列表","方法体和返回值"); var add = new Function("a,b","var sum;sum=x+y;return sum;"); alert(add(2,3));
js的全局变量和局部变量
- 全局变量:在script标签里面定义一个变量,这个变量在页面中js部分都可以使用
- 局部变量:在方法内部定义一个变量,只能在方法内部使用
js的string对象
与html相关的方法
方法 | 描述 |
---|---|
bold() | 加粗 |
fontcolor() | 颜色 |
fontsize() | 字体大小 |
link() | 超链接 |
sub() | 下标 |
sup() | 上标 |
与java相似的方法
方法 | 描述 |
---|---|
concat | 连接字符串 |
charAt | 返回指定位置的字符串 |
indexOf | 返回字符位置 |
split | 切分字符串成数组 |
replace | 替换 |
substr | 截取字符 |
substring | 截取字符 |
js的Array对象
方法 | 描述 |
---|---|
concat | 数组的连接 |
join | 指定字符分割数组 |
push | 向数组末尾添加元素,并返回数组新的长度 |
pop | 删除并放回数组的最后一个元素 |
reverse | 颠倒元素顺序 |
js的Date对象
获取当前时间
var date = new Date();
document.write(dat);
方法 | 描述 |
---|---|
toLocaleString | 转化习惯格式 |
getFullYear | 获取年份 |
getMonth | 获取月份(0-11) |
getDay | 获取星期(0-6) |
getDate | 获取日 |
getHours | 获取小时 |
getMinutes | 获取分钟 |
getSeconds | 获取秒 |
getTime | 1970.1.1至今的毫秒数 |
js的Math对象
方法 | 描述 |
---|---|
ceil | 向上舍入 |
floor | 向下舍入 |
round | 四舍五入 |
random | 随机数(0-1) |
js的全局函数
方法 | 描述 |
---|---|
eval | 直接执行js代码 |
encodeURI | 对字符进行编码 |
decodeURI | 对字符进行解码 |
isNaN | 判断是否数字 |
parseInt | 字符串转化为整数 |
js的bom对象
对象 | 描述 |
---|---|
navigator | 获取浏览器的信息 |
screen | 获取屏幕信息 |
location | 请求url地址 |
history | 请求url的历史记录 |
history属性:
- 到访问的上一个页面
history.back();
history.go(-1);
- 到访问的下一个页面
histoy.forward();
history.go(1);
window
方法 | 描述 | 例子 |
---|---|---|
alert | 页面弹出框 | alert() |
confirm | 确认框 | window.confirm(“显示的内容”) |
prompt | 输入的对话框 | window.prompt(“显示的内容”,“输入框里面的默认值”) |
open | 打开新窗口 | window.open(“新窗口地址”,"",“窗口特征”) |
close | 关闭窗口 | window.close() |
setInterval | 在毫秒数后多次执行js代码 | window.setInterval(“js代码”,毫秒数) |
setTimeout | 在毫秒数后只执行一次js代码 | window.setTimeout(“js代码”,毫秒数) |
clearInterval | 清除setInterval | 通过setInterval返回值清除 |
clearTimeout | 清除setTimeout | 通过setTimeout返回值清除 |
js的dom对象
Document对象
方法 | 描述 |
---|---|
write | 输出变量或html代码 |
getElementById | 通过id得到元素(标签) |
getElementsByName | 通过标签的name属性得到标签,返回一个集合(数组) |
getElementsByTagName | 通过标签名称得到元素 |
createElement | 创建标签 |
createTextNode | 创建文本 |
元素对象(Element对象)
方法 | 描述 |
---|---|
getAttribute | 获取属性里的值 |
setAttribute | 设置属性 |
removeAttribute | 删除属性 |
removeAttribute不能删除value
获取标签下面的子标签
- 使用属性 chiIdNode (兼容性差)
- 唯一有效方法, 使用getElementByTagName方法
Node对象属性
属性 | 标签节点对应的值 | 属性节点对应的值 | 文本节点对应的值 |
---|---|---|---|
nodeName | 1 | 大写标签名称 | null |
nodeType | 2 | 属性名称 | 属性的值 |
nodeValue | 3 | #text | 文本内容 |
-
父节点 parentNode
-
子节点
-
第一个子节点 firstElementChild
-
最后一个子节点 lastElementChild
-
-
同辈节点
- nextElementSibling:返回一个给定节点的下一个兄弟节点
- previousElementSibling:返回一个给定节点的上一个兄弟节点
操作dom树
-
appendChild方法
添加子节点到末尾
类似于剪切粘贴的效果
-
insertBefore(newNode,oldNode)方法
在某个节点之前插入一个新的节点
-
removeChild方法:删除节点
通过父节点删除
-
replaceChild(newNode,oldNode)方法:替换节点
通过父节点替换
-
cloneNode(boolean)方法:复制节点
innerHTML属性
- 获取标签内文本
- 向标签里面设置内容
表单提交方式
onclick:鼠标点击
onchange:改变内容(与select一起使用)
onfoucus:得到焦点
onblur:失去焦点