码迷,mamicode.com
首页 > 编程语言 > 详细

javascript

时间:2018-09-14 23:55:30      阅读:209      评论:0      收藏:0      [点我收藏+]

标签:onkeyup   显示   html网页   use   api   文本处理   控制台   return   表达式   

javascript 浏览器脚本语言
1) 基本数据类型:数字,字符串, 布尔值, null, undefined
2) 复杂数据类型:
数组
var array = new Array();
var array = [1,2,3,4];
访问元素 array[下标]
for(var i = 0; i < array.length; i++) {
array[i]
}
.push(值); .pop();
.unshift(值); .shift();
.splice(下标, 个数);
.sort(); // 对数组进行排序,但会把元素视为字符串类型
.sort( (a,b)=>{ a - b } );

对象
var obj = new Object();
var obj = {name:"值", age:17};
obj.sex = "男";
delete obj.sex;

函数
function 函数名(形参名1, 形参名2, ... 形参名n) {
return
}

函数名(实参1, ... 实参 n)

js中函数没有重载特性,同名函数只能有一个,后定义的会覆盖前面定义的

日期
var date = new Date();
var date = new Date(毫秒值);
.getFullYear();
.getMonth();
..

正则表达式
var reg = /正则表达式/;

[0-9] [a-zA-Z]
? , +, *, {m,n}

reg.test("目标字符串"); // true, false

字符串对象.replace(reg , "替换内容");

3) html网页中使用js
<script>
js代码
</script>
F12 控制台窗口

1.js配合html实现网页编程

DOM API (用js来操作html的一套api)
document 文档 Object 对象 Model 模型
可以把整个html视为一个树状结构,html中的每个标签都是树上的一个节点
document
|- html
|-head
|-meta
|-title
|-style
|-script
|-body
|-p
|-form
|-table
|-ul

1.1 查找元素

document.getElementById(标签id值); // 在设计id时要避免重复,id的取值应当唯一
document.getElementsByTagName(标签名字); // 根据标签的名字查找多个元素
父元素.getElementsByTagName(标签名字); // 查找从属于此父元素的所有与标签名称符合的子标签, 缩小了查找范围

通过选择器语法进行查找
#id, .class值, 元素

document.querySelector("选择器"); // 查找与选择器匹配的标签, 匹配第一个
document.querySelectorAll("选择器"); // 查找与选择器匹配的标签, 匹配所有

1.2 修改

修改内容
.innerText 在赋值时,把字符串当做普通文本处理,如果字符串中包含了html标签,那么这些标签会照原样输出
.innerHTML 在赋值时,把字符串当做html代码处理,会解析html标签再显示
修改属性
.属性名 = "新值";
修改样式
.className="新class" // 对应访问class属性 (推荐使用class属性修改样式)
.style.具体样式名="新值"; // 注意style 优先级较高,会覆盖其它样式

1.3 删除

父元素.removeChild(子元素);

1.4 新增

父元素.appendChild(子元素); // 建立父子元素关系
document.createElement("标签"); // 创建新的标签元素

2. DOM事件

2. 事件类型

鼠标单击事件 onclick
鼠标双击事件 ondblclick
鼠标移入事件 onmouseover
鼠标移出事件 onmouseout
光标移入事件(获得焦点) onfocus
失去焦点事件 onblur
值改变事件 onchange
键盘 onkeydown 按下按键时
onkeypress 按下按键时
onkeyup 松开按键时

javascript

标签:onkeyup   显示   html网页   use   api   文本处理   控制台   return   表达式   

原文地址:http://blog.51cto.com/13852519/2175462

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!