//实现一个函数，可以对JavaScript中的5种主要数据类型（Number，String，Boolean，
//Array，Object）进行复制
function clone(obj){switch(typeof obj){case "undefined":case "number": o=obj-0;case "string": o=obj+"";case "boolean":o=case "object"://可能为null，或者数组，或者对象if(obj===null)o=else{
if(Object.prototype.toString.call(obj).slice(8,-1)==="Array"){
//注意Object.prototype.toString.call(obj)返回的是一个字符串'[object Array]'，slice(8,-1)包括第一个括号，所以是8不是7
o=[];for(var i=0;i&obj.i++){o[i]=obj[i];}console.log(o);}else{
o=new Object();
for(var p in obj){
var name=p;
var value=obj[p];
}}}default:}想做web前端工程师？你需要了解这6大技能！_南昌达内Android培训
想做web前端工程师？你需要了解这6大技能！
发布：转载
来源：网络
想做web前端工程师？你需要掌握哪些技能呢？
这个是简单的，也是基础的。要熟练掌握div、form table、ul li 、p、span、font这些标签，这些都是常用的，特别是div和table，div用于布局、table也可以用于布局，但是不灵活，基本 table是用来和数据打交道。
这里说的css不包括css3，一般我们看到web前端开发工程师的要求里面，有一个会使用css+html 或者 css+div 来进行界面布局，所以css是用于辅助html来布局和展示的，我们称之为“css样式”，为什么会说css+div呢?
因为我上面说了div就是 html主要用于布局的东西，所以div就是核心掌握的东西!那么css肯定必须要配合div来使用才好。css要熟练掌握float、 position、width、height，以及对于的最大最小、会使用百分百、overflow、margin、padding等等，这些都是跟布局 有关系的样式，一点要掌握。
3JavaScript
可能前两个大家觉得还过的去，看到js就蛋疼了，其实吧，js入门很简单的，不需要会很多东西的，只要会根据某个id、或者name拿到网页dom或者样式、或者值，然后会给某个id或者name的元素标签赋值、或者追加数据、追html，这个是跟数据有关系的操作，然后数据逻辑判断，效果方面的，无非就 是跳转、弹框、隐藏什么的，把这些全部结合其他就是实际用途了，代码一点都不难，会了这些基础js，其他的直接百度就好了。然后看多了，用多了，就什么都不是问题了。
jquery是相当于把js封装了一套的一个js插件，目的就是操作起来更方便，代码写的更少，jquery入门也很简单，那些是入门需要学的和js一样，只是换成了jq的代码。其他的一样百度就够了。
5会点后台语言
比如java、php，为什么呢?因为我们前台界面的数据都是从后台来的，如果会点后台代码，就知道怎么跟后台交互数据是更好的， 这样节约时间，也可以让前端代码更规范。不然可能因为你的写法和后端给来的数据不能结合上，那么前端代码又得重新写，那就更蛋疼了。
6学习CSS3 + HTML5
为什么这个放最后呢?哈哈，因为我自己也不太会，毕竟术业有专攻嘛，虽然这个很流行，但是我是搞后端的，在工作中用不到它，只有在自己网站需要改样式，或者朋友网站样式出问题的时候，我才会去临时去研究下。但是如果你们是准备专门搞前端，那么还是学一下的。
在掌握以上几个的条件下，如果你还想让自己变的更优秀，那么你需要的是不断的学习不断的进步，这样你的职业发展才能走的更顺畅。
学长告诉你：为什么要选择达内学习网络营销！
JavaScript初学者应注意哪些细节！
想做web前端工程师？你需要了解这6大技能！
2018年IT行业热门的5个职位，有你吗？
Copyright (C)
Tedu.cn All Rights Reserved 京ICP备号-56 版权所有
选择城市和中心
达内北京亦庄大学生实训基地
达内北京网络营销中心
达内北京会计中心JavaScript概念
什么是JavaScript
JavaScript是由三部分组成：
文档对象模型（DOM）
浏览器对象模型（BOM）
JavaScript 是脚本语言
JavaScript 是一种轻量级的编程语言。
JavaScript 是可插入 HTML 页面的编程代码。
JavaScript 插入 HTML 页面后，可由所有的现代浏览器执行。
JavaScript 很容易学习。
JS的引入方式
#script标签引入JS代码
#引入额外的JS文件
&script src="myscrpits.js"&&/script&
JS代码的注释
//这是单行注释
这是多行的注释
注意：JavaScript中的语句要以分号（；）为结束符。
JS的变量声明
1.JavaScript的变量名可以使用_，数字，字母，$组成，不能以数字开头。
2.声明变量使用 var 变量名; 的格式来进行声明。
var name = "shier"
var age = "16"
变量名是区分大小写的。
推荐使用驼峰式命名规则。
保留字不能用做变量名。
JS的数据类型
1.JS拥有的动态类型
// 此时x是undefined
var x = 1;
//此时x是数字
var x = "shier"
//此时x是字符串
2.JS的数字类型
var b = 12.34;
var c = 20;
var c = 12e5;
//在JS中不分整型和浮点型、只有一种数字类型。
//在JS中海油一种NaN、表示不是一个数字(Not a Number)
parseInt("133")
//如果为数字返回数字否则返回NaN
parseInt("AAA")
parseFloat("123")
3.在JS中拼接字符串一般使用"+"　
string.slice(start, stop)和string.substring(start, stop)：
两者的相同点：
如果start等于end，返回空字符串
如果stop参数省略，则取到字符串末
如果某个参数超过string的长度，这个参数会被替换为string的长度
substirng()的特点：
如果 start & stop ，start和stop将被交换
如果参数是负数或者不是数字，将会被0替换
silce()的特点：
如果 start & stop 不会交换两者
如果start小于0，则切割从字符串末尾往前数的第abs(start)个的字符开始(包括该位置的字符)
如果stop小于0，则切割在从字符串末尾往前数的第abs(stop)个字符结束(不包含该位置字符)
4.JS的字符串
var a = "Hello"
var b = "shier"
var c = a + b
console.log(c) //得到字符串拼接的结果
Helloshier
JS字符串的常用方法：
.trimLeft()
移除左边的空白
.trimRight()
移除右边的空白
.charAt(n)
返回第n个字符
.concat(value, ...)
.indexOf(substring, start)
子序列位置
.substring(from, to)
根据索引获取子序列
.slice(start, end)
.toLowerCase()
.toUpperCase()
.split(delimiter, limit)
5.JS的布尔类型　　
（空字符串）、0、null、undefined，NaN都是false。　
6.JS的数组
var a = [123,"abc"]
console.log(a)
[123, "abc"]
数组常用的方法：
数组的大小
.push(ele)
尾部追加元素
获取尾部的元素
.unshift(ele)
头部插入元素
头部移除元素
.slice(start, end)
.reverse()
.join(seq)
将数组元素连接成字符串
.concat(val, ...)
关于sort排序的问题：
/*如果调用sort方法时没有传入参数，将按字母顺序对数组中的元素进行排序，说得更精确点，是按照字符编码的顺序进行排序。要实现这一点，首先应把数组的元素都转换成字符串（如有必要），以便进行比较。
如果想按照其他标准进行排序，就需要提供比较函数，该函数要比较两个值，然后返回一个用于说明这两个值的相对顺序的数字。比较函数应该具有两个参数 a 和 b，其返回值如下：
若 a 小于 b，在排序后的数组中 a 应该出现在 b 之前，则返回一个小于 0 的值。
若 a 等于 b，则返回 0。
若 a 大于 b，则返回一个大于 0 的值。
// 根据上面的规则自行实现一个排序函数：
function sortNumber(a,b) {
return a - b
// 调用sort方法时将定义好的排序函数传入即可。
stringObj.sort(sortNumber)
var list = [3,4,65,123,4,3,2]
list.sort()
[123, 2, 3, 3, 4, 4, 65]
//未传入函数的排序
list.sort(sortNumber)
[2, 3, 3, 4, 4, 65, 123]
//传入函数之后的排序
遍历数组中的元素：　　
var a = [10,20,30,40];
for (var i=0;i&a.i++) {
console.log(i);
7.null和undefined的区别
1).null表示值是空，一般在需要指定或清空一个变量时才会使用，如 name=
2).undefined表示当声明一个变量但未初始化时，该变量的默认值是undefined。还有就是函数无明确的返回值时，返回的也是undefined。
null表示变量的值是空，undefined则表示只声明了变量，但还没有赋值。
8.JS的类型查询　　
typeof "abc" //string
typeof null //object
typeof true //boolean
typeof 123 //number
typeof是一个一元运算符（就像++，--，！，- 等一元运算符），不是一个函数，也不是一个语句。
对变量或值调用 typeof 运算符将返回下列值之一：
undefined - 如果变量是 Undefined 类型的
boolean - 如果变量是 Boolean 类型的
number - 如果变量是 Number 类型的
string - 如果变量是 String 类型的
object - 如果变量是一种引用类型或 Null 类型的
JS的运算符
1.算术运算
基本的算术运算有+ - * &/ &% ++ --
2.比较运算
需要注意的是：　　
强等于： === 既判断值相不相等还判断类型相不相等
弱等于： == 只判断值相不相等
3.逻辑运算　　
true && false
true || false
4.赋值运算　　
5.流程控制　　
if (a & 5) {
console.log("yes")
console.log("No")
//if-else-if-else
var a = 10
if (a&6) {
console.log("a&5")
}else if(a &6) {
console.log("a&5")
console.log("a=5")
var day = new Date().getDay()
switch (day) {
console.log("Sunday");
console.log("Monday")
console.log("..")
switch中的case子句通常都会加break语句，否则程序会继续执行后续case中的语句。　　
6.for循环　　
for (var i=0;i&10;i++){
console.log(i)
7.while循环　　
while (i&10) {
console.log(i);
8.三元表达式　　
var c = a & b ? a:b
//如果a&b则c=a,否则c=b
JS中的函数
1.函数的定义
//普通的定义
function f1(){
console.log("Hello,word");
Hello,word
//带参数的函数
function f2(a,b){
console.log(arguments);
console.log(arguments.length);
console.log(a,b);
Arguments(2) [1, 3, callee: ?, Symbol(Symbol.iterator): ?]
//带返回值的函数
function sum(a,b){
return a +
//匿名函数
var sum = function(a,b) {
return a +
//立即执行函数
(function(a,b){
return a +
//arguments
function add(a,b){
console.log(a+b);
console.log(arguments.length);
function add(a,b){
console.log(a+b);
console.log(arguments.length);
JS函数的作用域
局部变量：在JS的函数内部声明的变量（var声明）是局部变量，所以只能在函数的内部访问他，（该变量的作用域是函数内部）。只要函数运行完毕，本地变量就会被删除。
全局变量：在函数外部声明的变量是全局变量，网页上的所有脚本和所有的函数都能访问他。
变量的生存周期：JS变量的声明周期从他们被声明的时间开始，局部变量会在函数运行后被删除。全局比那里会在页面关闭后被删除。
作用域：函数内部查找变量的顺序是从局部到全局。
function f(){
var city = "Shanghai";
function inner() {
var city = "ShengZhen";
console.log(city);
ShengZhen //因为函数的变量从内==&外的顺序
var city = "BeiJing";
function Bar() {
console.log(city);
function f() {
var city = "ShangHai";
var ret = f();
//函数内部没有该变量,所以查找全局的变量
var city = "BeiJing";
function f(){
var city = "ShangHai";
function inner(){
console.log(city);
var ret = f();
//和py的类似
JS词法分析
var age = 18;
function foo(){
console.log(age);
var age = 22;
console.log(age);
var age = 18;
function foo(){
console.log(age);
var age = 22;
console.log(age);
function age(){
console.log("呵呵");
console.log(age);
console.log("呵呵");
词法分析过程：
1、分析参数，有一个参数，形成一个 AO.age=
2、分析变量声明，有一个 var age, 发现 AO 上面已经有一个 AO.age，因此不做任何处理
3、分析函数声明，有一个 function age(){...} 声明， 则把原有的 age 覆盖成 AO.age=function(){...};
最终，AO上的属性只有一个age，并且值为一个函数声明
执行过程：
注意：执行过程中所有的值都是从AO对象上去寻找
1、执行第一个 console.log(age) 时，此时的 AO.age 是一个函数，所以第一个输出的一个函数
2、这句 var age=22; 是对 AO.age 的属性赋值， 此时AO.age=22 ，所以在第二个输出的是 2
3、同理第三个输出的还是22, 因为中间再没有改变age值的语句了
JS的内置对象和方法
JS中的所有事物都是对象：字符串，数字，数组，日期，等等。在JS中，对象式拥有属性和方法的数据。
注意var s1 = "abc"和var s2 = new String("abc")的区别：typeof s1 --& string而 typeof s2 --& Object
1.自定义对象
var a = {"name":"shier","age":11};
console.log(a.name)
console.log(a["age"]])
//遍历对象
var a = {"name":"shier","age":11};
for (var i in a) {
console.log(i,a[i])
name shier
//如果没有a[i],返回的结果是对象的key
//创建对象
var person=new Object();
// 创建一个person对象
person.name="shier";
// person对象的name属性
person.age=18;
// person对象的age属性
// 父类构造函数
var Car = function (loc) {
this.loc =
// 父类方法
Car.prototype.move = function () {
this.loc ++;
// 子类构造函数
var Van = function (loc) {
Car.call(this, loc);
// 继承父类的方法
Van.prototype = Object.create(Car.prototype);
// 修复 constructor
Van.prototype.constructor = V
// 扩展方法
Van.prototype.grab = function () {
2.Date对象　　
//不指定参数
var d1 =new Date();
console.log(d1.toLocaleString());
下午10:11:16
//参数为日期字符串
var d2 = new Date(" 11:12");
console.log(d2.toLocaleString());
var d3 = new Date("04/03/20 11:12");
console.log(d3.toLocaleString());
上午11:12:00
上午11:12:00
//参数为毫秒数
var d3 = new Date(5000);
console.log(d3.toLocaleString());
console.log(d3.toUTCString());
上午8:00:05
Thu, 01 Jan :05 GMT
//参数为年月日时分秒
var d4 = new Date(,11,12,0,300);
console.log(d4.toLocaleString())
上午11:12:00
//date对象方法
var d = new Date();
d.getDate();
d.getDay();
d.getMonth();
d.getFullYear();
d.getYear();
d.getHours();
d.getMinutes();
d.getSeconds();
d.getMilliseconds();
d.getTime();
JS之Json对象
var str1 = '{"name":"shier","age":15}';
//字符串对象
var obj1 = {"name":"shier","age":18};
//Json对象
var obj = JSON.parse(str1);
//将字符串对象转换成Json对象
{name: "shier", age: 15}
var str = JSON.stringify(obj1)
//将JSON对象转化成str对象
"{"name":"shier","age":18}"
//RegExp对象
//创建正则对象方式1
// 参数1 正则表达式(不能有空格)
// 参数2 匹配模式：常用g(全局匹配;找到所有匹配，而不是在第一个匹配后停止)和i(忽略大小写)
// 用户名只能是英文字母、数字和_，并且首字母必须是英文字母。长度最短不能少于6位 最长不能超过12位。
//创建reg对象方式 (记住后面不要添加空格)
var reg1 = new RegExp("^[a-zA-Z][a-zA-Z0-9_]{5,11}$");
var s1 = "bc123";
var s2= "Asdf21";
reg1.test(s1);
//位数不够
reg1.test(s1);
//完全匹配
//创建方式2
var reg2 = /^[a-zA-Z][a-zA-Z0-9_]{5,11}$/;
var s1 = 'bc123';
reg2.test(s1);
//string对象的4个方法
var s2 = "hello world";
s2.match(/o/g);
//查找字符串中 符合正则 的内容
["o", "o"]
s2.search(/h/g);
//查找字符串中符合正则表达式的内容位置
s2.split(/o/g);
//按照正则表达式对字符串进行切割
["hell", " w", "rld"]
s2.replace(/o/g,"s");
// 对字符串按照正则进行替换
"hells wsrld"
//关于正则中的g和i
var s1 = "name:shier age:18";
s1.replace(/s/, "哈哈哈");
//只是匹配一次,从前往后匹配
"name:哈哈哈hier age:18"
s1.replace(/h/g, "哈哈哈");
//全局匹配
"name:s哈哈哈ier age:18"
s1.replace(/e/gi, "哈哈哈");
//不区分大小写
"nam哈哈哈:shi哈哈哈r ag哈哈哈:18"
// 注意事项1：
// 如果regExpObject带有全局标志g，test()函数不是从字符串的开头开始查找，而是从属性regExpObject.lastIndex所指定的索引处开始查找。
// 该属性值默认为0，所以第一次仍然是从字符串的开头查找。
// 当找到一个匹配时，test()函数会将regExpObject.lastIndex的值改为字符串中本次匹配内容的最后一个字符的下一个索引位置。
// 当再次执行test()函数时，将会从该索引位置处开始查找，从而找到下一个匹配。
// 因此，当我们使用test()函数执行了一次匹配之后，如果想要重新使用test()函数从头开始查找，则需要手动将regExpObject.lastIndex的值重置为 0。
// 如果test()函数再也找不到可以匹配的文本时，该函数会自动把regExpObject.lastIndex属性重置为 0。
var reg3 = /foo/g;
reg3.test('foo');
reg3.test('foo');
//所以我们在使用test()方法校验一个字符串是否完全匹配时，不推荐添加全局匹配模式g。
var reg4 = /^undefined$/;
reg4.test();
reg4.test(undefined);
reg4.test("undefined");
// 注意事项2(说出来你可能不信系列)：
// 当我们不加参数调用RegExpObj.test()方法时, 相当于执行RegExpObj.test("undefined"), 并且/undefined/.test()默认返回true。
返回数的绝对值。
返回 e 的指数。
对数进行下舍入。
返回数的自然对数（底为e）。
返回 x 和 y 中的最高值。
返回 x 和 y 中的最低值。
返回 x 的 y 次幂。
返回 0 ~ 1 之间的随机数。
把数四舍五入为最接近的整数。
返回数的正弦。
返回数的平方根。
返回角的正切。
BOM（Browser Object Model）是指浏览器对象模型，它使 JavaScript 有能力与浏览器进行“对话”。
window对象
所有的浏览器都支持window对象，他表示浏览器窗口。
所有的JS全局对象，函数以及变量均字典称为window对象的成员。
全局变量是 window 对象的属性。全局函数是 window 对象的方法。
接下来要讲的HTML DOM 的 document 也是 window 对象的属性之一。
一些常用的Window方法：
window.innerHeight - 浏览器窗口的内部高度
window.innerWidth - 浏览器窗口的内部宽度
window.open() - 打开新窗口
window.close() - 关闭当前窗口
1.history对象：
<span style="color: # history.forward()
// 前进一页
<span style="color: # history.back()
// 后退一页
2.localtion对象
window.location 对象用于获得当前页面的地址 (URL)，并把浏览器重定向到新的页面。
常用属性和方法：
<span style="color: # location.href
<span style="color: # location.href="URL" // 跳转到指定页面
<span style="color: # location.reload() 重新加载页面
可以在 JavaScript 中创建三种消息框：警告框、确认框、提示框。
警告框经常用于确保用户可以得到某些信息。
当警告框出现后，用户需要点击确定按钮才能继续进行操作。
<span style="color: # alert("你看到了吗？");
确认框用于使用户可以验证或者接受某些信息。
当确认框出现后，用户需要点击确定或者取消按钮才能继续进行操作。
如果用户点击确认，那么返回值为 true。如果用户点击取消，那么返回值为 false。
confirm("Yes");
//点击确定
//提示输入框
prompt("输入:");
//输入内容
5.计时相关操作
通过使用 JavaScript，我们可以在一定时间间隔之后来执行代码，而不是在函数被调用后立即执行。我们称之为计时事件。
var t=setTimeout("JS语句",5000);
//setTimeout() 方法会返回某个值。在上面的语句中，值被储存在名为 t 的变量中。假如你希望取消这个 setTimeout()，你可以使用这个变量名来指定它。
//setTimeout() 的第一个参数是含有 JavaScript 语句的字符串。这个语句可能诸如 "alert('5 seconds!')"，或者对函数的调用，诸如 alertMsg()"。
//第二个参数指示从当前起多少毫秒后执行第一个参数（1000 毫秒等于一秒）。
6.清除计时器
<span style="color: # cleanTimeout(setTimeout_variable)
//语法格式
<span style="color: # //举个例子
<span style="color: #
<span style="color: # // 在指定时间之后执行一次相应函数
<span style="color: # var timer = setTimeout(function(){alert(123);}, 3000)
<span style="color: # // 取消setTimeout设置
<span style="color: # clearTimeout(timer);
7.setInterval
setInterval() 方法可按照指定的周期（以毫秒计）来调用函数或计算表达式。
setInterval() 方法会不停地调用函数，直到 clearInterval() 被调用或窗口被关闭。由 setInterval() 返回的 ID 值可用作 clearInterval() 方法的参数。
<span style="color: # 语法：setInterval("JS语句",时间间隔)
<span style="color: # 返回值
<span style="color: # 一个可以传递给 Window.clearInterval() 从而取消对 code 的周期性执行的值
//他会不停的出现提示框。
8.clearInterval
clearInterval() 方法可取消由 setInterval() 设置的 timeout。
clearInterval() 方法的参数必须是由 setInterval() 返回的 ID 值。
语法：clearInterval(setinterval返回的ID值)
var timer = setInterval(function(){console.log(123);}, 3000) //每隔一段时间就执行一次相应的函数
clearInterval(timer);
//取消设置
定时器实例：　　
1 &!DOCTYPE html&
2 &html lang="en"&
&meta charset="UTF-8"&
&meta http-equiv="x-ua-compatible" content="IE=edge"&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&title&定时器&/title&
var intervalId;
<span style="color: #
<span style="color: #
function f() {
<span style="color: #
var timeStr = (new Date()).toLocaleString();
<span style="color: #
var inputEle = document.getElementById("i1");
<span style="color: #
inputEle.value = timeS
<span style="color: #
<span style="color: #
<span style="color: #
function start() {
<span style="color: #
<span style="color: #
if (intervalId === undefined) {
<span style="color: #
intervalId = setInterval(f, <span style="background-color: #f5f5f5; color: #00);
<span style="color: #
<span style="color: #
<span style="color: #
function end() {
<span style="color: #
clearInterval(intervalId);
<span style="color: #
intervalId =
<span style="color: #
<span style="color: #
<span style="color: #
<span style="color: # &/head&
<span style="color: # &body&
<span style="color: #
<span style="color: # &input type="text" id="i1"&
<span style="color: # &input type="button" value="开始" id="start" onclick="start();"&
<span style="color: # &input type="button" value="结束" id="end" onclick="end();"&
<span style="color: # &/body&
<span style="color: # &/html&
<span style="color: #
<span style="color: # &!--定期刷当前时间--&
定时器实例
DOM（Document Object Model）是一套对文档的内容进行抽象和概念化的方法。&
当页面被加载的时候，浏览器会创建页面的文档对象模型（DOM）。
HTML文档的DOM树
DOM标准规定HTML文档中的每个成分都是一个节点(node)：
文档节点(document对象)：代表整个文档&
元素节点(element 对象)：代表一个元素（标签）&
文本节点(text对象)：代表元素（标签）中的文本&
属性节点(attribute对象)：代表一个属性，元素（标签）才有属性&
注释是注释节点(comment对象)　&
JavaScript 可以通过DOM创建动态的 HTML：
JavaScript 能够改变页面中的所有 HTML 元素&
JavaScript 能够改变页面中的所有 HTML 属性&
JavaScript 能够改变页面中的所有 CSS 样式&
JavaScript 能够对页面中的所有事件做出反应
DOM查找HTML标签
document.getElementById("start");
//根据ID获取
&input type="button" value="开始" id="start" onclick="start();"&
document.getElementsByClassName("d1")[0];
//根据class name获取
&div class="d1"&呵呵&/div&
document.getElementsByTagName("div")[0];
//根据标签名获取
&div class="d1"&呵呵&/div&
注意：涉及DOM操作的JS代码应该放在文档的body的结尾位置。
间接查找　　
parentElement
// 父节点标签元素
// 所有子标签
firstElementChild
// 第一个子标签元素
lastElementChild
// 最后一个子标签元素
nextElementSibling
// 下一个兄弟标签元素
previousElementSibling
// 上一个兄弟标签元素
语法：var divEle = document.createElement("div");
&追加一个子节点（作为最后的子节点）
somenode.appendChild(newnode)；
把增加的节点放到某个节点的前边。
somenode.insertBefore(newnode,某个节点);
var imgEle=document.createElement("img");
//创建img标签
imgEle.setAttribute("src","http://pic29.photophoto.cn/3_b.jpg"); //设置属性
var d1Ele = document.getElementById("d1");
//获取id为d1的标签
d1Ele.appendChild(imgEle);
//将img添加到div中
语法：获得要删除的元素，通过父元素调用删除。
removeChild（要删除的节点）
1 //获取文本节点的值
2 var divEle = document.getElementById("d1");
3 divEle.innerHTML;
//获取HTML标签
sdfsdfsdfsdfsdfasdfadf
&input type="text" id="i1"&
&input type="button" value="开始" id="start" onclick="start();"&
&input type="button" value="结束" id="end" onclick="end();"&
<span style="color: # divEle.innerT
//获取text文本
<span style="color: # "sdfsdfsdfsdfsdfasdfadf
<span style="color: #
<span style="color: # //设置文本节点的值
<span style="color: # var divEle = document.getElementById("d1");
<span style="color: # divEle
<span style="color: # &div id="d1"&"
<span style="color: #
sdfsdfsdfsdfsdfasdfadf
<span style="color: #
"&input type="text" id="i1"&&input type="button" value="开始" id="start" onclick="start();"&&input type="button" value="结束" id="end" onclick="end();"&&/div&
<span style="color: # divEle.innerT
<span style="color: # "sdfsdfsdfsdfsdfasdfadf
<span style="color: # divEle.innerText='111111';
<span style="color: # "111111"
<span style="color: # divEle
<span style="color: # &div id="d1"&111111&/div&
<span style="color: # divEle.innerHTML="&a&sdfsdfdf&/a&";
<span style="color: # "&a&sdfsdfdf&/a&"
获取值操作
var iEle = document.getElementById("start");
console.log(iEle.value);
//获取值操作适用于 select、input、textarea标签
<span style="color: # className
获取所有样式类名(字符串)
<span style="color: # classList.remove(cls)
删除指定类
<span style="color: # classList.add(cls)
<span style="color: # classList.contains(cls)
存在返回true，否则返回false
<span style="color: # classList.toggle(cls)
存在就删除，否则添加
修改CSS样式
1 var divEle = document.getElementById("d1");
//获取css对象
2 divEle.style.backgroundColor="red";
//修改CSS背景颜色
4 //JS操作css属性的规律
5 //对于没有中横线的CSS样式一搬直接使用style属性就行
6 obj.style.margin
7 obj.style.width
8 obj.style.left
9 obj.style.position
<span style="color: # //对含有中横线的CSS属性，将中横线后面的第一个字母换成大写即可
<span style="color: # obj.style.marginTop
<span style="color: # obj.style.borderLeftWidth
<span style="color: # obj.style.zIndex
<span style="color: # obj.style.fontFamily
当用户点击某个对象时调用的事件句柄。
2 ondblclick
当用户双击某个对象时调用的事件句柄。
元素获得焦点。
// 练习：输入框
元素失去焦点。
应用场景：用于表单验证,用户离开某个输入框时,代表已经输入完了,我们可以对它进行验证.
6 onchange
域的内容被改变。
应用场景：通常用于表单元素,当元素内容被改变时触发.（select联动）
8 onkeydown
某个键盘按键被按下。
应用场景: 当用户在最后一个输入框按下回车按键时,表单提交.
9 onkeypress
某个键盘按键被按下并松开。
<span style="color: # onkeyup
某个键盘按键被松开。
<span style="color: # onload
一张页面或一幅图像完成加载。
<span style="color: # onmousedown
鼠标按钮被按下。
<span style="color: # onmousemove
鼠标被移动。
<span style="color: # onmouseout
鼠标从某元素移开。
<span style="color: # onmouseover
鼠标移到某元素之上。
<span style="color: #
<span style="color: # onselect
在文本框中的文本被选中时发生。
<span style="color: # onsubmit
确认按钮被点击，使用的对象是form。
绑定JS方式
//方式一：
&div id="d1" onclick="changeColor(this);"&点我&/div&
function changeColor(ths) {
ths.style.backgroundColor="green";
this是实参，表示触发事件的当前元素。函数定义过程中的ths为形参。
&div id="d2"&点我&/div&
var divEle2 = document.getElementById("d2");
divEle2.onclick=function () {
this.innerText="呵呵";
搜索框实例：　　
1 &!DOCTYPE html&
2 &html lang="en"&
&meta charset="UTF-8"&
&title&搜索框示例&/title&
&input id="d1" type="text" value="请输入关键字" onblur="blurs()" onfocus="focus()"&
<span style="color: #
<span style="color: # &script&
<span style="color: # function focus(){
<span style="color: #
var inputEle=document.getElementById("d1");
<span style="color: #
if (inputEle.value==="请输入关键字"){
<span style="color: #
inputEle.value="";
<span style="color: #
<span style="color: # }
<span style="color: #
<span style="color: # function blurs(){
<span style="color: #
var inputEle=document.getElementById("d1");
<span style="color: #
var val=inputEle.
<span style="color: #
if(!val.trim()){
<span style="color: #
inputEle.value="请输入关键字";
<span style="color: #
<span style="color: # }
<span style="color: # &/script&
<span style="color: # &/body&
<span style="color: # &/html&
1 &!DOCTYPE html&
2 &html lang="zh-CN"&
&meta charset="UTF-8"&
&meta http-equiv="x-ua-compatible" content="IE=edge"&
&meta name="viewport" content="width=device-width, initial-scale=1"&
&title&select联动&/title&
<span style="color: # &select id="province"&
<span style="color: #
&option&请选择省:&/option&
<span style="color: # &/select&
<span style="color: #
<span style="color: # &select id="city"&
<span style="color: #
&option&请选择市:&/option&
<span style="color: # &/select&
<span style="color: #
<span style="color: # &script&
<span style="color: #
data = {"河北省": ["廊坊", "邯郸"], "北京": ["朝阳区", "海淀区"], "山东": ["威海市", "烟台市"]};
<span style="color: #
<span style="color: #
var p = document.getElementById("province");
<span style="color: #
var c = document.getElementById("city");
<span style="color: #
<span style="color: #
for (var i in data) {
<span style="color: #
var optionP = document.createElement("option");
<span style="color: #
optionP.innerHTML =
<span style="color: #
p.appendChild(optionP);
<span style="color: #
<span style="color: #
p.onchange = function () {
<span style="color: #
var pro = (this.options[this.selectedIndex]).innerHTML;
<span style="color: #
var citys = data[pro];
<span style="color: #
// 清空option
<span style="color: #
c.options.length = <span style="background-color: #f5f5f5; color: #;
<span style="color: #
<span style="color: #
for (var i=<span style="background-color: #f5f5f5; color: #;i&citys.i++) {
<span style="color: #
var option_city = document.createElement("option");
<span style="color: #
option_city.innerHTML = citys[i];
<span style="color: #
c.appendChild(option_city);
<span style="color: #
<span style="color: #
<span style="color: # &/script&
<span style="color: # &/body&
<span style="color: # &/html&
select联动
3 &script type="text/javascript"&
4 function setStyle(x)
6 document.getElementById(x).style.background="yellow"
8 &/script&
<span style="color: #
<span style="color: # &body&
<span style="color: #
<span style="color: # First name: &input type="text"
<span style="color: # onfocus="setStyle(this.id)" id="fname" /&
<span style="color: # &br /&
<span style="color: # Last name: &input type="text"
<span style="color: # onfocus="setStyle(this.id)" id="lname" /&
<span style="color: #
<span style="color: # &/body&
<span style="color: # &/html&
onfocus事件
阅读(...) 评论()