JavaScript 基础
js hello world
- 三种输出方式
- js编写位置
- js中的注释
- 使用var 定义变量名称
- 如何定义标识符
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>js hello world </title>
<script type="text/jscript">
//三种输出方式
alert("hello js 从入门到放弃");
console.log("js 代码块中写日志");
document.write("js 代码块中写内容");
//js的编写位置
/**
* 1. 使用外部js文件,通过 script 标签引入
2. 在head标签中写
3. 在标签的函数中写 eg：
*/
// 注释方式
// 单行注释
/**
多行注释
*/
//使用var 来定义变量
var a = 123;
//js中的标识符 给变量 、函数 、属性定义名称
</script>
</head>
<body>
</body>
</html>
js 数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
//1 js中的数据类型
//基本类型 string boolean number null undefined
//对象类型 object array math Function
//2 对象类型判断
//typeof 可以判断 string boolean number undefined 不能判断 null和object 、 object和array
//instanceof 判断对象的具体类型
//=== null undefined
var a;
console.log(a ,typeof a,typeof a ==='undefined',a===undefined) //undefined undefined true true
console.log('undefined' === undefined) // false
a = 1;
console.log(typeof a === 'number') //true
a = null;
console.log(typeof a === Object) //false
// console.log(typeof a === object) //报错
console.log(typeof a === null); ///false
console.log('-----------------------------------')
var obj = {
a:[1,"2",true]
// b: function(){
// return function () {
// return 'xfzhang'
// }
// }
};
console.log(obj instanceof Object,obj.a instanceof Array)
console.log("============================")
var obj2 = {
name:"zhangsan",
age: 22,
setName: function(name){
this.name = name;
},
setAge: function(age){
this.age = age;
}
}
console.log(obj2);
obj2.setName("麻子");
console.log(obj)
obj2['setAge'] (44);
console.log(obj2)
</script>
</head>
<body>
</body>
</html>
js 值传递和引用传递
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>值传递和引用传递</title>
<script type="text/javascript">
var a = 12;
function fun1(a){
a = a+1;
}
fun1(a);
console.log(a) // 12
function fun2(){
a = a+1;
}
fun2(a);
console.log(a) //13
function fun3(a){
a = a+1;
return a;
}
fun3(a);
console.log(a) // 13
var obj = {name:'张三'};
function fun4(){
console.log(obj.name)
}
fun4(obj) //张三
function fun5(){
obj.name = "李四";
console.log(obj.name)
}
fun5(obj) //李四
function fun6(obj){
obj.name = "赵六";
console.log(obj.name)
}
fun6(obj) //赵六
</script>
</head>
<body>
</body>
</html>
垃圾回收（GC）
如何确定一个对象或者变量是垃圾对象 ？
在Java中，可以使用引用计数法或者可达性分析算法来确定 该对象是不是一个垃圾对象。在js中，一个对象没有任何变量或者属性对他进行引用,此时，我们无法操作该对象，这个对象就成了一个垃圾。它会占用大量的空间，导致程序运行变慢，这种垃圾必须进行清理。
在JS中如何做 ？
js拥有自动的垃圾回收机制，会自动将这些垃圾对象从内存中销毁，我们不需要也不能进行垃圾回收的操作.我们需要做的只是要将不再使用的对象设置null即可
var obj = new Object();
obj = null;
js中的数组简介（一）
- 名词解释
- 两种创建数组的方式以及有什么区别
- 数组添加和删除的4个API方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组介绍</title>
<script type="text/javascript">
/**
* 名词解释
* 内置对象：是js中已经实现的一些函数和对象， 如具体包括Object,Function,Number,Boolean,Array,String,RegExp,Error,Date,Global,Math等，他们可以直接使用
* 宿主对象：是js代码所在运行环境提供的对象，运行在浏览器上的js，其宿主环境是浏览器，而不同浏览器提供了不同的宿主对象，这些对象是ECMAScript规范之外自主定义并注入到js引擎中，诸如常见的window，console，HTMLElement，Image等
* 自建对象：自己定义的对象 如 person等
*/
//数组
//有两种创建数组的方式
var arr1 = new Array(1,2,3);
var arr2 = [3,2,1];
console.log(arr1)
console.log(arr2)
console.log(typeof arr2);
//两种创建方式有什么不同，如果是多个元素（>1），则没有什么区别，如果仅仅有一个参数
var arr3 = new Array(10); //表示创建一个有10个元素的数组
var arr4 = [10];//一个数组，有一个元素
console.log(arr3)
console.log(arr4)
//数组API
var arr = ["张三","李四","王五","赵六"];
console.log(arr)
//API push :
// 可以向数组的末尾添加一个或多个元素，并返回数组的新的长度 ;该方法会将数组新的长度作为返回值返回
arr.push("哈哈");
console.log(arr)
//API pop
//该方法可以删除数组的最后一个元素,并将被删除的元素作为返回值返回
var item = arr.pop();
console.log(item);
console.log(arr)
//API unshift()
//向数组开头添加一个或多个元素，并返回新的数组长度 ;向前边插入元素以后，其他的元素索引会依次调整
arr.unshift("小二")
console.log(arr)
//API shift
// 可以删除数组的第一个元素，并将被删除的元素作为返回值返回
var item = arr.shift()
console.log(item);
console.log(arr)
</script>
</head>
<body>
</body>
</html>
js数组简介(二)
- 数组API
- 数组遍历
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>数组介绍</title>
<script type="text/javascript">
var arr = ["走起","张三","李四","王五","赵六"];
//API slice
//截取数组 从哪里 到哪里 不改变原数组
var itemArr = arr.slice(1,3);
console.log(itemArr);
console.log(arr);
//API splice ，insert update delete 三种类型的操作都可以
/*
* - 参数：
* 第一个，表示开始位置的索引
* 第二个，表示删除的数量
* 第三个及以后。。
* 可以传递一些新的元素，这些元素将会自动插入到开始位置索引前边
*/
arr.splice(1,1);//删除元素
console.log(arr)
arr.splice(1,0,"adaada")//insert
console.log(arr)
arr.splice(1,1,"测试update")//update
console.log(arr)
//API concat 两个数组合并
var one = [1,2];
var two = [3,4];
console.log(one.concat(two));
//API join
console.log(arr.join("---"));
//API sort 默认排序顺序是根据字符串Unicode码点。
console.log("数组排序"+arr.sort())
//可以自定义 sort 规则
arr.sort(function (a,b){
return a.length -b.length;
});
//API reverse 数组反序
console.log(arr.reverse())
// 遍历数组
// for
for (var i=0;i<arr.length;i++) {
console.log(arr[i])
}
var testArr = [4,3,1];
// forEach
// 第三个参数表示 正常遍历的数组
arr.forEach(function(value,index,testArr){
console.log(value+","+index)
console.log(testArr);
})
</script>
</head>
<body>
</body>
</html>
js创建对象
- js创建对象的三种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>创建对象</title>
<script type="text/javascript">
//方式1
var obj = new Object();
obj.name = "111";
//方式2
var obj2 = {
name:"333"
};
//方式3
function Person(name){
this.name = name;
}
var b1 = new Person("111");
// instanceof 判断对象实例是否属于某个对象
console.log(b1 instanceof Person)
</script>
</head>
<body>
</body>
</html>
js中的原型对象
- js中的原型对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的原型对象</title>
<script type="text/javascript">
function Person(name , age , gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
console.log(this.name);
};
}
//公有方法可以给对象的ptototype属性增加
Person.prototype.caicai = function(){
console.log("oasdaofad")
}
Person.prototype.xiao = "haha";
var p1 = new Person("hahaha",22);
p1.sayName();
p1.caicai();
console.log(p1.__proto__ == Person.prototype) // true
console.log(typeof p1.__proto__.__proto__.__proto__) //object
console.log(name in p1)//false
console.log("name" in p1) //true
console.log(p1.hasOwnProperty("name"))//true
console.log(p1.hasOwnProperty("xiao")) //false
</script>
</head>
<body>
</body>
</html>
js中的call和 apply
- js中的call和 apply
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>call和 apply </title>
<script type="text/javascript">
function Person(name , age , gender){
this.name = name;
this.age = age;
this.gender = gender;
this.sayName = function(){
console.log(this.name);
};
}
var obj = new Person("name",12,"女");
function fun(a,b){
console.log(a);
console.log(b);
}
/*
* call()和apply()
* - 这两个方法都是函数对象的方法，需要通过函数对象来调用
* - 当对函数调用call()和apply()都会调用函数执行
* - 在调用call()和apply()可以将一个对象指定为第一个参数
* 此时这个对象将会成为函数执行时的this
* - call()方法可以将实参在对象之后依次传递
* - apply()方法需要将实参封装到一个数组中统一传递
*
* - this的情况：
* 1.以函数形式调用时，this永远都是window
* 2.以方法的形式调用时，this是调用方法的对象
* 3.以构造函数的形式调用时，this是新创建的那个对象
* 4.使用call和apply调用时，this是指定的那个对象
*/
fun.call(obj,1,2);
fun.apply(obj,[1,2])
</script>
</head>
<body>
</body>
</html>
js中的Date对象
- js中的date对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的Date对象</title>
<script type="text/javascript">
var date = new Date();
console.log(date);
console.log(date.getDate());//获取一个月中的第几天
console.log(date.getDay()); //获取一周中的第几天
console.log(date.getFullYear()); //获取年份
console.log(date.getHours()); //获取 小时
console.log(date.getMinutes()); // 获取 分钟
console.log(date.getSeconds()); // 获取 秒
console.log(date.getMonth());// 获取 月份
console.log("yyyy-MM-dd HH:mm:ss" )
console.log(dateFormat(date))// 时间格式化
var dateStr = dateFormat(date);
console.log(dateStr);
var dateD = new Date();
var dateD2 = new Date(2020,12,10);
console.log(dateD.toLocaleDateString()) //2020年10月21日
console.log(dateD.toLocaleString()); //2020年10月21日 下午12:46:47
console.log(dateD.toLocaleTimeString()) ;//下午12:47:53
function dateFormat (date) {
var y = date.getFullYear();
var m = date.getMonth() + 1;
m = m < 10 ? ('0' + m) : m;
var d = date.getDate();
d = d < 10 ? ('0' + d) : d;
var h = date.getHours();
var minute = date.getMinutes();
minute = minute < 10 ? ('0' + minute) : minute;
var second= date.getSeconds();
second = minute < 10 ? ('0' + second) : second;
return y + '-' + m + '-' + d+' '+h+':'+minute+':'+ second;
};
</script>
</head>
<body>
</body>
</html>
js中的math
- js中的math对象
<script type="text/javascript">
//Math 是js中的一个静态类
//一般常用的都是一些常用方法
//API
console.log(Math.PI)//Π
console.log(Math.abs(-1)) //取绝对值
console.log(Math.ceil(0.9)) //天花板函数
console.log(Math.floor(0.9)) //地板函数
console.log(Math.round(0.9))//四舍五入
console.log(Math.random(1)) //获取随机数
var arr = [1,2,3]
var item = arr.join();
console.log(Math.max(1,2,3));
console.log(Math.min(1,2,3));
</script>
js中的包装类对象
- js中的包装类对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的包装类对象</title>
<script type="text/javascript">
/*
* 基本数据类型
* String Number Boolean Null Undefined
* 引用数据类型
* Object
* 在JS中为我们提供了三个包装类
* String()
* - 可以将基本数据类型字符串转换为String对象
* Number()
* - 可以将基本数据类型的数字转换为Number对象
* Boolean()
* - 可以将基本数据类型的布尔值转换为Boolean对象
*/
var num = new Number(3);
var num2 = new Number(3);
var str = new String("hello");
var str2 = new String("hello");
var bool = new Boolean(true);
var bool2 = true;
</script>
</head>
<body>
</body>
</html>
js中的正则表达式对象
- js中的正则表达式对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的正则表达式对象</title>
<script type="text/javascript">
//var 变量 = new RegExp("正则表达式","匹配模式");
//匹配模式有 i 忽略大小写 g 全局匹配
//创建方式1
var reg = new RegExp("ab","i");
//创建方式2
var reg2 = /a/ig;
//PAI test ：检查一个字符串是否符合正则表达式的规则，
var result = reg.test("aaaabbbbccc");
console.log(result)
console.log(reg2.test("11111abc"))
//PAI
var string1 = "01234567890";
console.log(string1.substring(1,4));// 从哪里截取到哪里
console.log(string1.substr(1,40));//从哪里截取多长的
console.log(string1.slice(1,4));// 从哪里截取到哪里
//规则
/*
* | 或者
* []里的内容也是或的关系
* [ab] == a|b
* [a-z] 任意小写字母
* [A-Z] 任意大写字母
* [A-z] 任意字母
* [0-9] 任意数字
*/
reg = /[A-z]/;
console.log(reg.test("aaabbbccc"))
/*
* [^ ] 除了
*/
reg = /[^A-z]/;
console.log(reg.test("aaabbbccc"))
//API split
var str1 = "1b3c4s1b3";
console.log(str1.split(/[A-z]/))
//search 只会找到满足条件的第一个，如果找不到返回-1，找到返回位置的索引下标
console.log(str1.search(/1[A-z]3/))
// match
var str = "1a2a3a4a5e6f7A8B9C";
var result = str.match(/[a-z]/ig);
console.log(result);
console.log(typeof result);//是个数组
//replace 替换
str = "123aaaa";
console.log(str.replace(/[a-z]/ig,"数字"))
/*
* 量词
* - 通过量词可以设置一个内容出现的次数
* - 量词只对它前边的一个内容起作用
* - {n} 正好出现n次
* - {m,n} 出现m-n次
* - {m,} m次以上
* - + 至少一个，相当于{1,}
* - * 0个或多个，相当于{0,}
* - ? 0个或1个，相当于{0,1}
*/
reg = /(ab){3}/;
reg = /b{3}/;
reg = /ab{1,3}c/;
reg = /ab{3,}c/;
reg = /ab+c/;
reg = /ab*c/;
reg = /ab?c/;
/*
* 检查一个字符串中是否以a开头
* ^ 表示开头
* $ 表示结尾
*/
reg = /^a/; //匹配开头的a
reg = /a$/; //匹配结尾的a
//转义字符处理
//. \.
// \ \\
reg = /\./;
console.log(reg.test("...."))
/*
* \w
* - 任意字母、数字、_ [A-z0-9_]
* \W
* - 除了字母、数字、_ [^A-z0-9_]
* \d
* - 任意的数字 [0-9]
* \D
* - 除了数字 [^0-9]
* \s
* - 空格
* \S
* - 除了空格
* \b
* - 单词边界
* \B
* - 除了单词边界
*/
reg = /\bchild\b/;
console.log(reg.test("hello child ~@)"));
var str = " he llo ";
//str = str.replace(/^\s*|\s*$/g,"");
//console.log(str)
console.log(str.trim())
//手机号 正则：
var phoneReg = /^1[3-9][0-9]{9}$/;
//邮箱正则
var emailReg = /^\w{3,}(\.\w+)*@[A-z0-9]+(\.[A-z]{2,5}){1,2}$/;
</script>
</head>
<body>
</body>
</html>
js中的dom（一）
- js中的dom（一）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的dom(一)</title>
<script type="text/javascript">
//文档的加载顺序：从上到下一行一行解释执行，如果js代码写在最上端，操作页面的元素，但是页面元素还没有加载出来，这不就麻烦了吗
//可以使用window.onload ，它在整个页面加载完成之后才会触发。确保页面元素被加载完成
window.onload = function(){
var button1 = document.getElementById("bt1");
button1.innerHTML="修改后"
button1.onclick = function(){
console.log("被点击了")
}
};
</script>
</head>
<body>
<button id="bt1">小按钮</button>
<!--<script type="text/javascript">
var button1 = document.getElementById("bt1");
button1.innerHTML="修改后"
button1.onclick = function(){
console.log("被点击了")
}
</script>-->
</body>
</html>
js dom操作 获取子节点的三种方式
- 获取子节点的三种方式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
window.onload = function(){
//查找#city下所有li节点
//方法1
var lis = document.getElementById("city").children;
console.log(lis.length)
//方法2
//对于 childNodes，需要使用nodetype 来判断 nodeType来判断是哪种类型的节点，只有当nodeType==1时才是元素节点，2是属性节点，3是文本节点
lis = document.getElementById("city").childNodes;
for (var i=0;i<lis.length;i++) {
if(lis[i].nodeType==1){
console.log(lis[i].innerHTML);
}
}
//方法3
lis = document.getElementById("city").getElementsByTagName("li");
console.log(lis.length)
};
</script>
</head>
<body>
<div id="total">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
</body>
</html>
js dom 操作（二）
- js dom 操作（二）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js中的dom(二)</title>
<script type="text/javascript">
window.onload = function(){
var bj = document.getElementById("bj");
console.log(bj.innerHTML); //北京
console.log(bj.nodeName); //LI
console.log(bj.nodeType); //I
console.log(bj.nodeValue); //null
// previousElementSibling 获取前一个兄弟元素，ie8以下不支持
var sh = document.getElementById("sh");
var item = sh.previousElementSibling;
console.log(item.innerHTML)
// previousSibling 获取前一个元素节点，也有可能是 空白文本
item = sh.previousSibling;
console.log(item) //[object Text]
console.log(document.getElementById("username").value)
};
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li id="sh">上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
<p>
你手机的操作系统是?
</p>
<ul id="phone"><li>IOS</li><li id="android">Android</li><li>Windows Phone</li></ul>
</div>
<div class="inner">
gender:
<input class="hello" type="radio" name="gender" value="male"/>
Male
<input class="hello" type="radio" name="gender" value="female"/>
Female
<br>
<br>
name:
<input type="text" name="name" id="username" value="abcde"/>
</div>
</div>
<div id="btnList">
<div><button id="btn01">查找#bj节点</button></div>
<div><button id="btn02">查找所有li节点</button></div>
<div><button id="btn03">查找name=gender的所有节点</button></div>
<div><button id="btn04">查找#city下所有li节点</button></div>
<div><button id="btn05">返回#city的所有子节点</button></div>
<div><button id="btn06">返回#phone的第一个子节点</button></div>
<div><button id="btn07">返回#bj的父节点</button></div>
<div><button id="btn08">返回#android的前一个兄弟节点</button></div>
<div><button id="btn09">返回#username的value属性值</button></div>
<div><button id="btn10">设置#username的value属性值</button></div>
<div><button id="btn11">返回#bj的文本值</button></div>
</div>
</body>
</html>
js中 JSON和string转换的方式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JSON和string类型之间相互转换</title>
<script type="text/javascript">
var obj = {name:"张三" , age:28 , gender:"男"};
// console.log(obj)
var str = JSON.stringify(obj);
// console.log(str) // {"name":"张三","age":28,"gender":"男"}
var strJson = '{"name":"张三","age":28,"gender":"男"}';
// console.log(strJson)
//方式1
obj = JSON.parse(strJson);
console.log(obj.age)
//方式2
obj = eval("("+strJson+")");
console.log(obj.name)
</script>
</head>
<body>
</body>
</html>
js 小练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>练习</title>
<script type="text/javascript">
window.onload = function (){
var info = document.getElementById("info");
var prev = document.getElementById("prev");
var next = document.getElementById("next");
var arr = ["one","two","three","four"];
var i = 0;
prev.onclick = function (){
i--;
if(i<0){
i = arr.length -1;
}
info.innerHTML = arr[i];
}
next.onclick = function (){
i++;
if(i>arr.length-1){
i = 0;
}
info.innerHTML = arr[i];
}
}
</script>
</head>
<body>
<div id="outer">
<p id="info">current</p>
<button id="prev">上一个</button>
<button id="next">下一个</button>
</div>
</body>
</html>
js 全选练习
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>全选练习</title>
<script type="text/javascript">
window.onload = function() {
var items = document.getElementsByName("items");
//全选
var checkedAllBtn = document.getElementById("checkedAllBtn");
checkedAllBtn.onclick = function() {
checkedAllBtn.checked = true;
for (var i = 0; i < items.length; i++) {
items[i].checked = true;
}
}
//全不选 checkedNoBtn
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function() {
checkedNoBtn.checked = true;
for (var i = 0; i < items.length; i++) {
items[i].checked = false;
}
}
//反选
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function() {
checkedRevBtn.checked = !checkedRevBtn.checked;
for (var i = 0; i < items.length; i++) {
items[i].checked = !items[i].checked;
}
}
//提交
var arr = [];
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function() {
for (var i = 0; i < items.length; i++) {
if (items[i].checked) {
arr.push(items[i].value)
}
}
console.log(arr)
}
// 全选/全不选
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function() {
checkedAllBox.checked = !checkedAllBox.checked;
for (var i = 0; i < items.length; i++) {
items[i].checked = !items[i].checked;
}
}
//给items绑定事件
for (var i = 0; i < items.length; i++) {
items[i].onclick = function(){
checkedAllBox.checked = true;
for (var j = 0; j < items.length; j++) {
if(!items[j].checked){
checkedAllBox.checked = false;
break;
}
}
}
}
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是？<input type="checkbox" id="checkedAllBox" />全选/全不选
<br />
<input type="checkbox" name="items" value="足球" />足球
<input type="checkbox" name="items" value="篮球" />篮球
<input type="checkbox" name="items" value="羽毛球" />羽毛球
<input type="checkbox" name="items" value="乒乓球" />乒乓球
<br />
<input type="button" id="checkedAllBtn" value="全 选" />
<input type="button" id="checkedNoBtn" value="全不选" />
<input type="button" id="checkedRevBtn" value="反 选" />
<input type="button" id="sendBtn" value="提 交" />
</form>
</body>
</html>
js dom获取其他元素
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom获取其他元素</title>
<script type="text/javascript">
window.onload = function(){
//获取body标签
var body = document.body;
console.log(body)
//获取html
var html = document.documentElement;
console.log(html)
//document.all代表页面中所有的元素
var all = document.all;
console.log(all)
//页面中所有的元素
var all2 = document.getElementsByTagName("*")
console.log(all2)
//根据className获取元素 getElementsByClassName ie8和ie8以下的浏览器
//但是可以使用querySelector方法再ie8 和ie8 以下使用
//使用该方法总会返回唯一的一个元素，如果满足条件的元素有多个，那么它只会返回第一个
//querySelectorAll
var box1 = document.getElementsByClassName("box1");
console.log(box1.length)
var ie8box1 = document.querySelector(".box1 div");
console.log(ie8box1.innerHTML)
var ie8box1All = document.querySelector(".box1");
console.log(ie8box1All)
//getElementsByTagName
var div = document.getElementsByTagName("div");
console.log(div.length)
}
</script>
</head>
<body>
<div id="box2"></div>
<div class="box1">
我是第一个box1
<div>我是box1中的div</div>
</div>
<div class="box1">
<div>我是box1中的div</div>
</div>
<div></div>
</body>
</html>
js dom 增删改
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom增删改查</title>
<script type="text/javascript">
window.onload = function() {
//创建一个"广州"节点,添加到#city下
var btn01 = document.getElementById("btn01");
btn01.onclick = function(){
//获取city节点
var city = document.getElementById("city");
var li = document.createElement("li");
var text = document.createTextNode("广州");
li.appendChild(text);
city.appendChild(li);
}
//将"广州"节点插入到#bj前面
var btn02 = document.getElementById("btn02");
btn02.onclick = function(){
//获取city节点
var city = document.getElementById("city");
var li = document.createElement("li");
var text = document.createTextNode("广州");
li.appendChild(text);
var bj = document.getElementById("bj");
//父节点.insertBefore(新节点,旧节点);
city.insertBefore(li,bj)
}
//使用"广州"节点替换#bj节点
var btn03 = document.getElementById("btn03");
btn03.onclick = function(){
//获取city节点
var city = document.getElementById("city");
var li = document.createElement("li");
var text = document.createTextNode("广州");
li.appendChild(text);
var bj = document.getElementById("bj");
city.replaceChild(li,bj)
}
//删除#bj节点
var btn04 = document.getElementById("btn04");
btn04.onclick = function(){
//获取city节点
var city = document.getElementById("city");
var bj = document.getElementById("bj");
city.removeChild(bj)
}
//读取#city内的HTML代码
var btn05 = document.getElementById("btn05");
btn05.onclick = function(){
//获取city节点
var city = document.getElementById("city");
console.log(city.innerHTML)
}
//设置#bj内的HTML代码
var btn06 = document.getElementById("btn06");
btn06.onclick = function(){
var bj = document.getElementById("bj");
bj.innerHTML = "12121"
}
//
}
</script>
</head>
<body>
<div id="total">
<div class="inner">
<p>
你喜欢哪个城市?
</p>
<ul id="city">
<li id="bj">北京</li>
<li>上海</li>
<li>东京</li>
<li>首尔</li>
</ul>
</div>
</div>
<div id="btnList">
<div><button id="btn01">创建一个"广州"节点,添加到#city下</button></div>
<div><button id="btn02">将"广州"节点插入到#bj前面</button></div>
<div><button id="btn03">使用"广州"节点替换#bj节点</button></div>
<div><button id="btn04">删除#bj节点</button></div>
<div><button id="btn05">读取#city内的HTML代码</button></div>
<div><button id="btn06">设置#bj内的HTML代码</button></div>
</div>
</body>
</html>
js table CUUD1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>domCRUD2</title>
<script type="text/javascript">
window.onload = function (){
//新增
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick = function (){
var name = document.getElementById("empName").value;
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
var tr = document.createElement("tr");
var nametd = document.createElement("td");
var emailtd = document.createElement("td");
var salarytd = document.createElement("td");
var deletetd = document.createElement("td");
var a = document.createElement("a");
var nameText = document.createTextNode(name);
var emailText = document.createTextNode(email);
var salaryText = document.createTextNode(salary);
var deleteText = document.createTextNode("Delete");
a.href = "javascript:;";
a.onclick = function (){
var tr = this.parentNode.parentNode;
//获取name
var name = tr.children[0].innerHTML;
// console.log(name);
var flag = confirm ("要删除"+name+"?");
if(flag){
tr.parentNode.removeChild(tr)
}
//取消默认行为
return false;
}
nametd.appendChild(nameText);
emailtd.appendChild(emailText);
salarytd.appendChild(salaryText);
a.appendChild(deleteText)
deletetd.appendChild(a)
tr.appendChild(nametd);
tr.appendChild(emailtd)
tr.appendChild(salarytd)
tr.appendChild(deletetd)
document.getElementById("employeeTable").appendChild(tr);
}
//删除
var as = document.getElementsByTagName("a")
for (var i = 0; i < as.length; i++) {
as[i].onclick = function (){
var tr = this.parentNode.parentNode;
//获取name
var name = tr.children[0].innerHTML;
// console.log(name);
var flag = confirm ("要删除"+name+"?");
if(flag){
tr.parentNode.removeChild(tr)
}
//取消默认行为
return false;
}
}
}
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
js tableCRUD2 update
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>domCRUD3</title>
<script type="text/javascript">
window.onload = function (){
//新增
var addEmpButton = document.getElementById("addEmpButton");
addEmpButton.onclick = function (){
var name = document.getElementById("empName").value;
var email = document.getElementById("email").value;
var salary = document.getElementById("salary").value;
var tr = document.createElement("tr");
tr.innerHTML = ""+name+" "+email+" "+salary+" Delete "
// var nametd = document.createElement("td");
// var emailtd = document.createElement("td");
// var salarytd = document.createElement("td");
// var deletetd = document.createElement("td");
// var a = document.createElement("a");
// var nameText = document.createTextNode(name);
// var emailText = document.createTextNode(email);
// var salaryText = document.createTextNode(salary);
// var deleteText = document.createTextNode("Delete");
// nametd.appendChild(nameText);
// emailtd.appendChild(emailText);
// salarytd.appendChild(salaryText);
// a.appendChild(deleteText)
// deletetd.appendChild(a)
// tr.appendChild(nametd);
// tr.appendChild(emailtd)
// tr.appendChild(salarytd)
// tr.appendChild(deletetd)
var a = tr.getElementsByTagName("a")[0];
a.href = "javascript:;";
a.onclick = function (){
var tr = this.parentNode.parentNode;
//获取name
var name = tr.children[0].innerHTML;
// console.log(name);
var flag = confirm ("要删除"+name+"?");
if(flag){
tr.parentNode.removeChild(tr)
}
//取消默认行为
return false;
}
document.getElementById("employeeTable").appendChild(tr);
}
//删除
var as = document.getElementsByTagName("a")
for (var i = 0; i < as.length; i++) {
as[i].onclick = function (){
var tr = this.parentNode.parentNode;
//获取name
var name = tr.children[0].innerHTML;
// console.log(name);
var flag = confirm ("要删除"+name+"?");
if(flag){
tr.parentNode.removeChild(tr)
}
//取消默认行为
return false;
}
}
}
</script>
</head>
<body>
<table id="employeeTable">
<tr>
<th>Name</th>
<th>Email</th>
<th>Salary</th>
<th> </th>
</tr>
<tr>
<td>Tom</td>
<td>tom@tom.com</td>
<td>5000</td>
<td><a href="javascript:;">Delete</a></td>
</tr>
<tr>
<td>Jerry</td>
<td>jerry@sohu.com</td>
<td>8000</td>
<td><a href="deleteEmp?id=002">Delete</a></td>
</tr>
<tr>
<td>Bob</td>
<td>bob@tom.com</td>
<td>10000</td>
<td><a href="deleteEmp?id=003">Delete</a></td>
</tr>
</table>
<div id="formDiv">
<h4>添加新员工</h4>
<table>
<tr>
<td class="word">name: </td>
<td class="inp">
<input type="text" name="empName" id="empName" />
</td>
</tr>
<tr>
<td class="word">email: </td>
<td class="inp">
<input type="text" name="email" id="email" />
</td>
</tr>
<tr>
<td class="word">salary: </td>
<td class="inp">
<input type="text" name="salary" id="salary" />
</td>
</tr>
<tr>
<td colspan="2" align="center">
<button id="addEmpButton" value="abc">
Submit
</button>
</td>
</tr>
</table>
</div>
</body>
</html>
js for循环中增加事件 注意点
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>for循环中增加事件</title>
<script type="text/javascript">
window.onload = function (){
var as = document.getElementsByTagName("a");
for (var i = 0; i < as.length; i++) {
as[i].onclick = function (){
console.log(i) // i 为 数组长度
// console.log(this.innerHTML)
//取消默认行为
return false;
}
}
}
</script>
</head>
<body>
<p><a href = "javascript:;">测试1</a></p>
<p><a href = "javascript:;">测试2</a></p>
</body>
</html>
js dom操作内联样式|显示当期显示的样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom操作内联样式|显示当期显示的样式</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: aquamarine;
}
</style>
<script type="text/javascript">
window.onload = function (){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
btn01.onclick = function () {
// 通过stype操作的是内联样式
// alert(box1.style.width)
// alert(box1.style.backgroundColor)
box1.style.width = "300px";
box1.style.backgroundColor = "red";
}
var btn02 = document.getElementById("btn02");
btn02.onclick = function () {
//获取元素的当前显示的样式，如果没有设置，则获取它的默认值
//元素.currentStyle.样式名 currentStyle 只有ie支持，其他不支持
//其他浏览器可以使用 getComputedStyle(元素,null).样式名;
//这两种方式获取的当前样式，只能读，不能修改
//console.log(getComputedStyle(box1,null).width)
console.log(getStype(box1,"width"))
}
//获取某个元素当前显示的某个样式 公用方法
function getStype(obj,name){
if(window.getComputedStyle){
return getComputedStyle(obj,null)[name];
}else {
return obj.currentStyle[name];
}
}
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<button id="btn02">点我一下</button>
<div id="box1"></div>
</body>
</html>
js dom操作其他样式
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>dom其他样式</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: red;
padding: 10px;
border: 10px solid yellow;
}
#box2{
padding: 100px;
background-color: #bfa;
}
#box4{
width: 200px;
height: 300px;
background-color: #bfa;
overflow: auto;
}
#box5{
width: 450px;
height: 600px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function(){
var box1 = document.getElementById("box1");
var btn01 = document.getElementById("btn01");
var box4 = document.getElementById("box4");
btn01.onclick = function () {
//clientWidth clientHeight
//可见元素的高度 宽度 返回数字,只读 不能修改
// console.log(box1.clientHeight) //100
box1.clientWidth = 10+"px";//不能生效
//offsetWidth offsetHeight
//获取元素的整个的宽度和高度，包括内容区、内边距和边框
console.log(box1.offsetWidth);//140
//offsetParent
//会获取到离当前元素最近的开启了定位的祖先元素 如果所有的祖先元素都没有开启定位，则返回body
console.log(box1.offsetParent.id)//box2
console.log(box1.offsetParent)
// offsetLeft
//当前元素相对于其定位父元素的水平偏移量
//offsetTop
//当前元素相对于其定位父元素的垂直偏移量
console.log(box1.offsetLeft)
//scrollWidth
//scrollHeight
//可以获取元素整个滚动区域的宽度和高度
console.log(box4.scrollHeight) //600
//scrollLeft
//可以获取水平滚动条滚动的距离
//scrollTop
//可以获取垂直滚动条滚动的距离
console.log(box4.scrollTop)
//当满足scrollHeight - scrollTop == clientHeight 说明垂直滚动条滚动到底了
console.log(box4.clientHeight)
console.log(box5.clientHeight)
console.log(box4.scrollHeight-box4.scrollTop )
}
}
</script>
</head>
<body>
<button id="btn01">点我一下</button>
<br /><br />
<div id="box4">
<div id="box5"></div>
</div>
<br /><br />
<div id="box3">
<div id="box2" style="position: relative;">
<div id="box1"></div>
</div>
</div>
</body>
</html>
js 滚动test
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>滚动</title>
<style type="text/css">
#info{
width: 300px;
height: 100px;
background-color: #bfa;
overflow: auto;
}
</style>
<script type="text/javascript">
window.onload = function (){
//给p标签绑定事件
var info = document.getElementById("info");
var inputs = document.getElementsByTagName("input");
info.onscroll = function (){
if(info.scrollHeight - info.scrollTop == info.clientHeight){
console.log(info.scrollHeight - info.scrollTop)
inputs[0].disabled = false;
inputs[1].disabled = false;
}
}
}
</script>
</head>
<body>
<p>请查看</p>
<p id="info">
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
哈哈哈
</p>
<!-- 如果为表单项添加disabled="disabled" 则表单项将变成不可用的状态 -->
<input type="checkbox" disabled="disabled" />我已仔细阅读协议，一定遵守
<input type="submit" value="注册" disabled="disabled" />
</body>
</html>
js event01
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jsonmousemove</title>
<style type="text/css">
#areaDiv {
border: 1px solid black;
width: 300px;
height: 50px;
margin-bottom: 10px;
}
#showMsg {
border: 1px solid black;
width: 300px;
height: 20px;
}
</style>
<script type="text/javascript">
window.onload = function (){
var areaDiv = document.getElementById("areaDiv");
var showMsg = document.getElementById("showMsg");
areaDiv.onmousemove = function (event){
showMsg.innerHTML = "x="+event.clientX +"y="+event.clientY;
}
}
</script>
</head>
<body>
<div id="areaDiv"></div>
<div id="showMsg"></div>
</body>
</html>
js 事件的绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件的绑定</title>
<script type="text/javascript">
window.onload = function (){
// 对象.事件 这种方式 只能为单个对象绑定函数，如果有多个对象，难道需要 挨个绑定吗 ？这种方式不可取
var b1 = document.getElementById("b1");
//绑定响应函数方法
//addEventListener 这个方法在ie8 和 ie8 以下不支持，如果要在ie中，则需要使用 attachEvent，
// b1.addEventListener("click",function(){
// console.log("我是通过addEventListener()函数绑定的")
// },false)
// //ie 中
// b1.attachEvent(("click",function(){
// console.log("我是通过addEventListener()函数绑定的")
// })
bind(b1,"click",function(){
console.log("hahahahaha")
})
//定义一个通用的函数
function bind(obj,event,callback){
if(window.addEventListener){
obj.addEventListener(event,callback,false);
}else {
obj.attachEvent("on"+event,callback);
}
}
}
</script>
</head>
<body>
<button id="b1">你点我试试</button>
</body>
</html>
js 事件的委派
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件的委派</title>
<script type="text/javascript">
window.onload = function (){
var btn01 = document.getElementById("btn01");
btn01.onclick = function (){
var u1 = document.getElementById("u1");
var li = document.createElement("li");
li.innerHTML = "超链接";
u1.appendChild(li);
}
// 为每一个超链接添加一个事件
// var allA = document.getElementsByTagName("a");
// for (var i = 0; i < allA.length; i++) {
// allA[i].onclick = function (){
// console.log(this.innerHTML)
// }
// }
//
//获取父元素，利用事件冒泡机制
var u1 = document.getElementById("u1");
u1.onclick = function(event){
console.log(event.target.className)
if(event.target.className == "link"){
console.log("触发点击函数")
}
}
}
</script>
</head>
<body>
<button id="btn01">添加超链接</button>
<ul id="u1" style="background-color: #bfa;">
<li><p>我是p元素</p></li>
<li><a href="javascript:;" class="link">超链接一</a></li>
<li><a href="javascript:;" class="link">超链接二</a></li>
<li><a href="javascript:;" class="link">超链接三</a></li>
</ul>
</body>
</html>
js 事件冒泡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>事件冒泡</title>
<style type="text/css">
#d1{
width: 300px;
height: 200px;
border: 10px black;
background-color: #DEB887;
}
#s1{
width: 100px;
height: 100px;
border: 10px black;
background-color: #FFFF00;
}
</style>
<script type="text/javascript">
window.onload = function(){
var d1 = document.getElementById("d1");
var s1 = document.getElementById("s1");
d1.onclick = function(event){
console.log(d1.innerHTML);
}
s1.onclick = function(){
console.log(s1.innerHTML);
event = event||window.event;
event.cancelBubble = true; //取消事件的冒泡行为
}
}
</script>
</head>
<body>
<div id="d1">
我是box1
<span id="s1">我是span</span>
</div>
</body>
</html>
js 定时器|倒计时
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>定时器|倒计时</title>
<script type="text/javascript">
window.onload = function (){
var input = document.getElementsByTagName("input")[0];
console.log(input)
var date = new Date();
date = date.toLocaleTimeString();
input.value = date;
var i = 1;
var timer = setInterval(function(){
input.value = date;
i++;
if(i==10){}
clearInterval(timer)
}
},1000)
//延时调用
var t = setTimeout(function(){
console.log("3秒后")
},3000);
clearTimeout(t);
}
</script>
</head>
<body>
当前时间:<input type="text" />
</body>
</html>
js div随着鼠标移动
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>div随着鼠标移动</title>
<style type="text/css">
#box1{
width: 100px;
height: 100px;
background-color: burlywood;
/*
* 开启box1的绝对定位
*/
position: absolute;
}
</style>
<script type="text/javascript">
window.onload = function (){
var box1 = document.getElementById("box1");
document.onmousemove = function (event){
//兼容性问题
event = event || window.event;
//获取滚动条滚动的距离
//chrome浏览器 滚动条是body的 firfox浏览器的滚动条是html的
var top = document.body.scrollTop || document.documentElement.scrollTop;
var left = document.body.scrollLeft || document.documentElement.scrollLeft;
//获取鼠标的坐标
var clientX = event.clientX;
var clientY = event.clientY;
box1.style.top = top + clientY + "px";
box1.style.left = left + clientX + "px";
}
}
</script>
</head>
<body style="height: 1000px;width: 2000px;">
<div id="box1"></div>
</body>
</html>
js操作css—class
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>js操作css—class</title>
<style type="text/css">
.b1{
width: 100px;
height: 100px;
background-color: red;
}
.b2{
height: 300px;
background-color: yellow;
}
</style>
<script type="text/javascript">
window.onload = function (){
//获取box
var box = document.getElementById("box")
var btn01 = document.getElementById("btn01")
btn01.onclick = function () {
//可以通过box的style来操作内联样式
//想在可以通过 对象.className = ""
// box.className = ""; 取消元素的样式
// console.log(box.className)
// if(box.className.indexOf("b2")<0){
// box.className +=" " + "b2";
// }
toggleClass(box,"b2");
}
function toggleClass(obj,classStr){
if(obj.className.indexOf(classStr)>0){
console.log(box.className)
obj.className = obj.className.replace(classStr,"");//移除样式
}else {
obj.className += " " +classStr;
}
}
}
</script>
</head>
<body>
<button id="btn01">点击按钮以后修改box的样式</button>
<br /><br />
<div id="box" class="b1"></div>
</body>
</html>
ajax简介
ajax是什么？
使用xmlhttpRequest对象异步向服务器发送请求
服务器返回部分的数据，而不是一个完整的页面，以页面无刷新的效果更改页面中的局部数据。
function getXhr(){
var xhr = null;
if(window.XMLHttpRequest){
xhr = new XMLHttpRequest();
}else{
xhr = new ActiveObject(“Microsoft.XMLHttp”);
}
return xhr;
}
异步对象的属性和方法：
open
send
getRequestHeader
getAllRequestHeaders
readyState
onreadystatechange
responseText
responseXML
status:
发送ajax请求的步骤：
获取ajax对象：xmlhttprequest
设置回调函数：为ajax对象的readystatechange事件设定响应函数
创建请求：调用xmlhttprequest的open方法
发送请求：调用ajax对象的send方法
编写回调函数：
xhr.onreadystatechange=function(){
if(xhr.readyState==4 && xhr.status ==200){
var txt = xhr.responseText;
//DOM操作
}
}
创建请求–get请求
xhr.get(“get”,“xx.do”,true);
注意：
true：表示发送异步请求，（当ajax对象发送请求时，用户然让能够对当前页面做其他处理）
false:表示发送同步请求，（当ajax对象发送请求时，浏览器会锁定当前页面，用户不能够做其他的操作）
创建POst请求：
xhr.open(“post”,“xx.do”,true);
xhr.setRequesHeader(‘content-type’,‘applicationn/x-www-form-urlencoded’);
setRequestHeader的作用：因为http协议要求发送post请求，必须有content-type消息头，但是默认的情况下
xhr不会添加消息头，所以，需要调用setRequestHeader,添加这个消息头。
发送请求：
get xhr.send(null)
post xhr.send(name=value & name=value);
get请求：send方法内传递null
若需要提交数据，则在open方法内的url后面追加
xhr.open(“get”,“xx.do?name=value&name=value”,true);
编写服务器段代码：
public void service(HttpServletRequest request,HttpServetReaponse response){
request.setCharacterEncoding();
response.setContentType(“text/html;charset=utf-8”);
out.println(“用户名已经存在”);
}
ajax的应用：
输入的值需要校验，如果检测注册的用户名是否已经被占用
搜索是出现的自动提示列表
级联操作
数据录入和列表显示在同一个界面
不需要刷新界面
post请求时的乱码问题：
所有的额浏览器提供的ajax对象对请求参数使用utf-8进行编码
服务器默认使用iso-8859-1
编码和解码不一致就会产生乱码
request.setCharacterEncoding(“utf-8”);
注意：火狐就不能使用这句代码，因为这个浏览器会在发送的请求数据包中告诉
服务器，他是那种方式进行数据编码
get请求时的乱码：
IE浏览器提供的ajax对象会使用gbk字符集对请求参数进行编码。而其他浏览器会使用utf-8
来编码
服务器默认使用iso-8859-1
编码和解码不一致就会产生乱码
解决get请求时的乱码问题：
文档小，解析速度快
json结构：主要分为两种，
–名称/值 的集合，不同的语言理解为对象，记录，结构等
–值的有序列表，数组
{属性名:属性值，属性名：属性值}
属性值：可以是String number boolean null object
属性名需要使用""起来
属性值如果是String，必须使用双引号括起来
json可以表示数组：
[{},{}]
对象：{“”:“”,“”:[]}
json字符串–jacascript对象：eval() paese() parseJSON()
eval(“(”+str+“)”);
var obj = JSON.parse(str);
var obj = str.parseJSON();
还有prototype中的一个函数：
var obj= str.evalJSON（）;
将java对象转化成为json对象：
JSON提供的API JSONObject JSONArray
缓存问题：
IE浏览器提供的ajax对象，在发送get请求时，会查看是否访问过这个地址，如果已经
访问过，那么浏览器就不在发送请求。
各种浏览器对同一地址的处理：
IE 不再发送
Firefox 继续发送
Chormme 继续发送
解决方式：
方式一：在请求地址后面添加一个随机数
xhr.open(“get”,“getNumber.do?”+Math.random(),“true”);
方式二：发送post请求
发送同步请求：
var obj = str.eval();
var obj2 = str.parseJSON();//需要使用json.js
var obj3 = JSON.parse(str);
var obj4 = str.evalJSON();
将json对象转化成为json字符串：
var str = obj.toJSONStirng();//需要json.js
vat str2 = JSON.stringify(obj);
什么是JQuery对象：
JQuery为了解决浏览器的兼容性问题而提供的一种统一封装后的对象描述
将dom对象转化成为JQuery对象
$(dom对象)
var $obj = $(obj);
$obj.html();
DOM—Jquery:
( d o m 对象 ) . g e t ( 0 ) / (dom对象).get(0)/ (dom对象).get(0)/(dom对象).get()[0];
jquery的选择器：
能够实现内容和行为的分离：
$(‘#id’)
$(‘.s1’)
$(‘div’)
合并选择器：
$(‘#di,.s1,p’).css();
$(‘*’)
层次选择器：
$(‘#d1 div’)
$(‘#d1>div’):只查找直接子节点
$(‘#d1+div’):表示下一个兄弟节点
$(‘#d2~div’):代表下面的所有兄弟
基本过滤选择器：以： 或者[] 开始
:first
:last
:not(selector) 把selector排除在外
:even 挑选偶数行
：odd 计数行
:eq()
:gt（index） 大于下标
:lt(index) 下标小于index
内容过滤选择器：
:contains(text)
:empty
:has(selector)
:parent 含有子元素和文本的元素
可见性过滤选择器：
:hidden 匹配所有不可见元素 或者type为hidden的元素
:visible 匹配所有的可见元素
属性过滤选择器：
[attribute]
[attribute=value]
[attribute!=value]
子元素过滤选择器：
:nth-child(index/even/odd)将为每一个父元素匹配子元素 index从1开始
:eq(index)
表单对象属性过滤选择器：
:enabled
:disabled
:checked
:selected
表单选择器：
:input
:text
:password
Jquery操作DOM --查询
html():读取或者修改html内容
text():读取或者修改html内容
val() :读取或者修改节点value属性值
attr(): 读取或者修改节点的属性
JQuery创建 插入 删除：
创建节点：
$(html)
var $obj = $(‘
hello
’);
( ′ b o d y ′ ) . a p p e n d ( ('body').append( (′body′).append(obj);
简写：$(‘body’).append(‘
hello
’);
插入dom节点：
append():
prepend():作为第一个子节点添加
after(): 作为下一个兄弟节点添加进来
berfore():
删除节点：
remove（）：
remove(selector):
empty():清空节点
复制节点：
clone():
clone(true):复制的节点也具有行为，将处理代码一起复制
样式操作：
attr(“class”,“”) 获取和设置
addClass(“”)
removeClass(“”)
removeClass()
toggleClass():切换样式
hasClass(“”):是否有某个样式
css(“”) 读取css的值
css(“”,“”) 设置多个样式
遍历节点：
children()/children(selector):只考虑直接子节点
next()/next(selector)
prev()/prev(selector)
siblings()/
find(selector):查找满足条件的后代
parent() 父节点（没有选择器）
JQuery中的事件处理：
使用JQuery事件绑定：
$obj.bind(事件类型，事件处理函数)
$obj.bind(‘click’,function(){});他的简写形式：
$obj.click(funciton(){});
代表触发click函数
获取事件对象：
只需要为事件处理函数传递任意的一个参数
$obj.click(function(e){});
e就是事件对象，但是已经经过JQuery对底层事件对象的封装。
封装后的事件对象可以方便的兼容各种浏览器。
事件对象的常用属性：
var obj = e.target;
获取事件源：返回的是dom对象
获取鼠标点击的坐标：
e.pageX
e.pageY
事件冒泡：
子节点产生的事件会依次向上抛给父节点：
e.stopPropagation();取消事件冒泡
JQuery中的合成事件：
hover(mouseenter,mouseleave):模拟光标悬停事件
toggle():多个事件响应中切换：
模拟操作的语法：
$obj.trigger(事件类型):
$obj.trigger(‘focus’);
$obj.focus();
show() /hide()
通过改变元素的高度和宽度来实现下你是或者隐藏。
$obj.show(时间，会调函数);
执行时间：slow normal fast 或者毫秒数
slideDown()/slidUp()
fadeIn() fadeOut()
自定义函数：
animate(js对象，执行时间，回调函数):
js对象，描述动画执行之后元素的样式，
$(‘div’).click(function(){
$(this).animate({‘left’:‘500px’},4000);
$(this).animate({‘top’:‘300px’},2000).fadeOut(‘slow’);
});
JQuery中的类数组：
JQuery中封装了多个DOM对象，
类：指的是类似，
具备自己特有的操作方法
类数组的操作：
length
each(fn):遍历类数组，fn用来处理DOM对象，在fn中this表示正在遍历的那个DOM对象。
fn函数可以提那家一个参数i用来表示正在比你阿里的DOM对象的下标。
eq(index)
get():返回一个DOM对象组成的数组
index(obj):返回DOM或者JQuery对象在类数组中的下标
JQuery对ajax的支持：
load：作用将服务器返回的数据字节添加到符合要求的节点之上。
$obj.load(请求地址，请求参数);
请求参数：username=tom &age = 22
有参数，发送post请求，否则发送get请求
post():
$.post(‘’,function(){},‘’);
get():发送get请求
用法:$.get(请求地址，请求参数，回调函数，服务器返回的数据类型)
回调函数添加的参数是服务器返回的数据
服务器返回的数据类型：
html:html文本，
text:文本，
JSON：js对象
xml：XML文档
script：javascript脚本
ajax():
$.ajax({});
{}类可以设置的选项参数：
url:
type:
data:
dataType:
success:服务器处理正常对应的回调函数
error:服务器出错对应的回调函数
async:true当值为false是表示发送同步请求
js 使用向外暴露函数的方式和使用闭包的方式进行模块化操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
<script src="./test1.js" type="text/javascript" charset="utf-8"></script>
<script src="./test2.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
//使用向外暴露函数的方式
var module1 = new Module1();
module1.msgLower();
module1.msgUpper();
//使用闭包的方式
Module2.msgLower();
Module2.msgUpper();
</script>
</head>
<body>
webDemo
</body>
</html>
使用向外暴露函数的方式js
function Module1(){
var msg = 'helo world';
function msgUpper(){
console.log(msg.toUpperCase());
}
function msgLower(){
console.log(msg.toLowerCase())
}
return {
msgUpper:msgUpper,
msgLower:msgLower
}
}
使用闭包的方式 js
(function Module1(){
var msg = 'helo world';
function msgUpper(){
console.log(msg.toUpperCase());
}
function msgLower(){
console.log(msg.toLowerCase())
}
window.Module2 = {
msgUpper:msgUpper,
msgLower:msgLower
}
})()
js 闭包面试题
<script type="text/javascript">
//代码片段一
var name = "The Window";
var object = {
name : "My Object",
getNameFunc : function(){
return function(){
return this.name;
};
}
};
alert(object.getNameFunc()()); //? the window
//代码片段二
var name2 = "The Window";
var object2 = {
name2 : "My Object",
getNameFunc : function(){
var that = this;
return function(){
return that.name2;
};
}
};
alert(object2.getNameFunc()()); //? my object
</script>
js 事件机制简介
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<button type="button">bt1</button>
<script type="text/javascript">
/**
* 浏览器是单进程还是多进程？
* 有的是单进程： Firefox 、老板的IE
* 有的是多进程： chrome 、新版的IE
*
* 如何查看浏览器是多进程还是单进程？
* 从任务管理器中查看
*
* 浏览器运行都是 多进程
*
* 浏览器内核指什么？
* 支持浏览器运行的核心程序（这真是扯犊子啊）
*
* 不同的浏览器的内核不一样
* chrome、safari: webkit
* firefox:Gecko
* IE： trident
*
* 浏览器内核由多种模块组成：
* html、css 文档解析模块 负责页面文本解析
* dom、css模块 负责dom、css 在内存中的相关处理
* 布局和渲染模块 负责也买你布局和效果绘制
*
* 定时器模块、网络请求模块、事件响应模块等
*
* 定时器并不是真的保证真正定时执行，有误差
*
* 定时器回调函数是在分线程中执行的吗 ？
* 不是，是在主线程执行的，js是单线程
* 定时器的实现原理：事件循环模型
*/
// document.getElementsByTagName('button')[0].onclick = function(){
// console.log("start")
// setTimeout(function(){
// console.log("ing")
// },1000);
// console.log("end")
// for (var i = 0; i < 100000000000000; i++) {
// }
// }
/**
* 如何证明js是单线程的？
* 定时器中的回调函数是在主线程中执行的，只有主线程中的代码执行完，才会执行定时器中的代码
*
* 为啥js要使用单线程，而不是用多线程？
* 和它的主要用途有关，它主要是和用户交互，不能是多线程
*
* 代码的分类： 初始化代码和回调代码
*
* js引擎执行代码的流程：
* 先执行初始化代码(一些特殊的代码 设置定时器、绑定事件监听、发送ajax请求)，
* 然后执行回调方法（回调函数中的代码）
*
* js引擎模型中两个重要的组成部分：事件（定时器、DOM事件、ajax）管理模块、回调队列
*
* js引擎模型处理流程：
* 执行初始化代码，将事件回调函数交给对应的模块
* 当事件发生时，管理模块将会将回调函数添加到回调队列中
* 只有当初始化代码执行完后，才会遍历读取回调队列中的回调函数
*/
</script>
</body>
</html>
js 计算 斐波那契数字
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>斐波那契数字</title>
</head>
<body>
<input type="text" name="" id="t1" value="" placeholder="请输入数字" />
<button type="button" id="b1">计算斐波那契数字</button>
<script type="text/javascript">
document.getElementById('b1').onclick = function(){
var num = document.getElementById('t1').value;
console.log(fun(num))
}
function fun(n){
if(n<=2) {
return 1;
}else {
return fun(n-1) + fun(n-2)
}
}
</script>
</body>
</html>
js 创建对象的几种方法
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
<script type="text/javascript">
// 1.使用Object的方式创建对象
// 语句太多
// var obj = new Object{};
// obj.name = "笨比";
// obj.age = 22;
// 2.使用对象字面量的方式创建对象
// 一个对象就需要创建一个var 太麻烦
// var obj = {
// name:"笨比",
// age:22,
// setName:function(name){
// this.name = name
// }
// };
// obj.setName("真是个笨比a")
// 3.使用工厂的方式创建对象
// 对象没有一个具体的类型，返回的都是object类型
// function createPerson(name,age){
// var obj = {
// name:name,
// age:age
// setName:function(name){
// this.name = name;
// }
// }
// return obj;
// }
// var obj = createPerson('笨比',22);
// obj.setName("真是个笨比");
// 4. 使用自定义函数的形式创建对象
// 不同的类型就需要不同的function，太多了
// function Person(name,age){
// this.name = name,
// this.age = age,
// setName: function(name){
// this.name = name
// }
// }
// var obj = new Person('笨比',22);
//5. 仅仅使用构造函数, 加上原型链
// function Person(name,age){
// this.name = name,
// this.age = age
// }
// Person.prototype.setName = function(name){
// this.name = name
// }
// var obj = new Person('笨比',22);
// obj.setName("真是笨比");
</script>
</head>
<body>
webDemo
</body>
</html>
js 中使用原型链的方式实现继承
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
<script type="text/javascript">
function Father(name,age){
this.msg = "我是你爸爸";
}
Father.prototype.sayFatherWhois = function(){
console.log(this.msg)
}
function Sun(){
this.msg2 = "儿子"
}
Sun.prototype = new Father(); // 关键
Sun.prototype.constructor = Sun; // 关键 to
Sun.prototype.saySunWhois = function(){
console.log(this.msg2)
}
var father = new Father();
father.sayFatherWhois();
var sun = new Sun();
sun.saySunWhois();
sun.sayFatherWhois();
console.log(sun);
</script>
</head>
<body>
webDemo
</body>
</html>
js 使用构造函数和call\apply 函数实现假继承
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
<script type="text/javascript">
// 使用构造函数 和 call 或者apply 来实现假继承
function Father(name,age){
this.name = name,
this.age = age
}
function Sun(name,age,jj){
Father.call(this,name,age);
this.jj = jj;
}
var f = new Father('baba',22);
var erzi = new Sun('baba',22,'jj');
console.log(erzi)
</script>
</head>
<body>
webDemo
</body>
</html>
js 使用构造函数和原型链实现继承操作
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
<script type="text/javascript">
function Father(name,age){
this.name = name,
this.age = age
}
Father.prototype.sayWhois = function(name){
console.log(this.name)
}
Sun.prototype = new Father();
Sun.prototype.constructor = Sun;
function Sun(name,age,jj){
Father.call(this,name,age);
this.jj = jj;
}
var f = new Father('baba',22);
var erzi = new Sun('erzi',2,'jj');
erzi.sayWhois();
</script>
</head>
<body>
webDemo
</body>
</html>
js 中的变量提升和函数提升
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
<script type="text/javascript">
// 变量 var 声明的变量，在语句定义之前就可以访问
// 函数 function 声明的函数，在函数定义之前就可以访问
console.log(a); //undefined
var a = '123';
say();
function say(){
console.log("笨比")
}
</script>
</head>
<body>
webDemo
</body>
</html>
js 中的上下文
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
<script type="text/javascript">
/**
* 执行上下文分为 全局执行上下文 函数执行上下文
* 全局执行上下文：
* 在执行全局代码前，将Window确定为全局执行上下文
* 对全局执行上下文的预处理：
* var声明的变量，设置为undefined 并添加为windwo的属性
* function申明的全局函数 赋值 添加为window的方法
* this 指向window
* 开始执行全局代码
*
* 函数执行上下文：
* 在调用函数，准备执行函数体之前，创建对应的函数执行上下文 （虚拟的，存在于栈中）
* 对局部数据进行预处理
* 形参变量赋值为实参 -- 添加为执行上下文的属性
* arguments对象赋值实参列表，添加为执行上下文的属性
* var 定义的局部变量- undefined，添加为上下文的属性
* function声明的函数 赋值fun，添加为上下文的方法
* this 赋值调用函数的对象
* 开始执行函数体代码
*/
console.log(a1,window.a1) //undefined undefined
window.a2();
console.log(this)
var a1 = '222'
function a2(){
console.log('a2')
}
console.log(a1)
</script>
</head>
<body>
webDemo
</body>
</html>
js中的闭包
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>index</title>
</head>
<body>
webDemo
<button>b1</button>
<button>b2</button>
<button>b3</button>
<script type="text/javascript">
var btns = document.getElementsByTagName('button');
//循环遍历加监听
// for (var i = 0; i < btns.length; i++) {
// 错误的示例
// btns[i].onclick = function(){
// console.log(i)
// }
// 正确 采用增加属性的方式操作
// btns[i].index = i;
// btns[i].onclick = function(){
// console.log(this.index)
// }
// 正确 采用闭包的方式操作
// (function(j){
// btns[j].onclick = function(){
// console.log(j)
// }
// })(i)
// }
// 1.理解闭包产生的条件：函数嵌套，内部函数引用了外部函数的变量或者方法
// function a(){
// var name = '笨比';
// var age = 22;
// function b(){ //在函数定义的额时候就产生闭包 而不是调用构造函数
// console.log(name);
// }
// //b();
// }
// a();
// 可以在浏览器中的sourse - local -[[scopses]] 中查看，但是有的浏览器不支持查看闭包
// function f1(){
// var msg = 'haha';
// function f2(){
// console.log(msg)
// }
// }
// f1();
//2. 常见的闭包 ：将函数作为一个另一个函数的返回值 ；定时器
// function f1(){
// var a = 2;
// function f2(){
// a++;
// console.log(a)
// }
// return f2;
// }
// var f = f1();
// f(); //3
// f(); //4
// f = null ;这时候 闭包生命周期 就结束了
// function ff(msg,time){
// setInterval(function(){
// console.log(msg)
// },time)
// }
// ff('1秒钟',1000);
// 3. 闭包有什么作用呢 ？使用函数内部的变量在函数执行完成之后依旧在内存中存活（延长了局部变量的生命周期）；让函数外可以操作函数内部的变量或者方法
// 例如 f1中的函数
// 4. 闭包的生命周期：
// 在函数定义的时候产生；在外部函数对象死亡，也就是没有任何引用指向该对象时，闭包就死亡了
// 5. 闭包的缺点：延长了局部变量的生命周期，占用内存的时间也就变长了，如果没有及时清理，则会导致内存泄露
</script>
</body>
</html>
js 原型链1
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
console.log(Date.prototype === Object); //false
console.log(Date.prototype, typeof Date.prototype)
console.log(Date.prototype.constructor===Date) //true
function fun(){
}
console.log(typeof fun.prototype)// object
fun.prototype.test = function (){
console.log("1122")
}
var a = new fun();
a.test();
console.log(fun.prototype); // {"constructor":"function fun(){\n\t\t\t\t\n\t\t\t}","test":"function (){\n\t\t\t\tconsole.log(\"1122\")\n\t\t\t}"}
console.log(a.__proto__); // {"constructor":"function fun(){\n\t\t\t\t\n\t\t\t}","test":"function (){\n\t\t\t\tconsole.log(\"1122\")\n\t\t\t}"}
console.log(a.__proto__ === fun.prototype) //true
console.log(fun.prototype instanceof Object) //true
console.log(Object.prototype instanceof Object) //false
console.log(Function.prototype instanceof Object) // true
console.log(Function.__proto__ instanceof Object) // true
console.log(Object.prototype.__proto__); //null
fun.prototype.name = "张三";
console.log(a.name);//张三
a.name = "李四";
console.log(a.name);//"李四"
var aa = new fun();
console.log(aa.__proto__ == a.__proto__) //true
</script>
</head>
<body>
</body>
</html>
js 原型链2
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function A () {
}
A.prototype.n = 1
var b = new A()
A.prototype = {
n: 2,
m: 3
}
var c = new A()
console.log(b.n, b.m, c.n, c.m) //1 undefined 2 3
function F (){}
Object.prototype.a = function(){
console.log('a()')
}
Function.prototype.b = function(){
console.log('b()')
}
var f = new F()
f.a()
// f.b()
F.a()
F.b()
console.log(f)
console.log(Object.prototype)
console.log(Function.prototype)
</script>
</head>
<body>
</body>
</html>