概述
JS输出语句
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/* 控制浏览器弹出一个警告框
alert("这是我的第一行js代码");
*/
/*向body内容中输出一个内容
document.write();*/
/*向控制台输出内容
console.log("控制")
*/
console.log("控asdadsasdasd制");
</script>
</head>
<body>
</body>
</html>
js语句位置
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--1可以将js代码编写到外部js文件中 然后 通过script引入
2写到外部文件可以在不同的文件引入
3一旦引入外部文件 就不能编写代码 写也没用
4可以在创建一个script编写
-->
<script type="text/javascript" src="js/js.js">
</script>
</head>
<body>
</body>
</html>
数据类型
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--STring 字符串
Number 数值
Boolean 布尔值
Null 控制
Undefined 未定义
Onject 对象
前五个疏忽引用类型 Object是引用类型
-->
<!--String字符串
-js中字符串需要引号引起来
-使用单引号双引号都可以 但不要混用
-双引号不能嵌套双引号
-->
<!--1Number 包括所有整数和小数
2Number.MAX_VALUE 表示最大的数
3字符串和整数输出结果一样使用typeof 关键字 返回数据类型小写
4如果使用的值超过最大值 就返回 Infinity 表示正无穷
5如果使用的值超过最小值 就返回 -Infinity 表示负无穷
6使用 typeof 检查Infinity 会返回number
7NaN表示 Not A Number
8使用typeof检查NaN也会返回一个number
9如果进行浮点运算 结果不精确
-->
<!--Boolean 布尔值
treu false
-->
<!--1内建对象Math Function
2宿主对象 BOM DOM
3自定义对象
-->
<!--
var obj = new Object();
-->
<!--删除属性 delete 对象.属性-->
<!--如果属性名是特殊字符 就不能用点了 对象名["属性名"]-->
<!--检查对象中是否有某一个属性 console.log("agse" in obj); -->
<!--基本类型和引用类型的区别 如果俩个变量保存的同一个引用 一个改变另一个也会改变-->
<!--对象字面量：在创建对象的时候指定属性值
var obj={属性名1:属性值,属性名2:属性值,属性名3:属性值,也能写对象}
-->
<!-- 函数 也是一个对象封装代码 调用
Function
方式1：var a = new Function("要执行的代码");
调用：函数对象名();
-->
<!--方式2:
function fun(参数列表){
方法体
}
-->
<!--方式3:
var fun = function(参数列表){
方法体
}; 这相当于赋值语句 加分号
-->
<!--参数
function fun(a,b){
console.log(a+b);
}
fun(1,2);
解释器不会检查实参类型 解释器也不会检查实参数量 多余的参数不会传进去
少的实参 魂被定义为undefined
-->
<!-- return 返回值 如果屁股后面不跟任何值 默认undefined-->
<!--函数作为对象的属性就变成了方法
var obj = new Object;
obj.fun1=function(a,b){
return a+b;
};
console.log(obj.fun1(1,2));
-->
<script>
var obj = new Object;
obj.fun1=function(a,b){
return a+b;
};
console.log(obj.fun1(1,2));
</script>
</head>
<body>
</body>
</html>
作用域
<!DOCTYPE html>
<html>
<!--
作用域 ：
-全局作用域和局部作用域
全局作用域：
直接写在script中的代码都是全局变量
在打开页面时创建 关闭页面时结束
在全局作用域中有一个全局对象window
它代表浏览器的一个窗口由浏览器创建
在全局作用域中：
创建的变量都会作为window对象的属性保存
创建的方法都作为window的函数使用
不写 var a 相当于window.a
声明在引用的下面 属性：
我们使用var关键字声明的所有变量 会在所有代码执行之前被声明，
会在执行到那个语句的时候赋值
但是如果没写var 会报错
声明在引用的下面 方法：
function声明的函数会在所有的代码执行之前被创建
所以可以再声明之前调用
var声明的和属性一样 虽然被提前声明 但是赋值不会提前 不能提前调用
局部作用域：
调用的时候创建函数作用域 函数执行完毕以后 被销毁
每调用一次 产生一个作用域 之间是独立的
在函数中变量不写 var 就会成为全局变量
-->
<script>
var a=10;
var a=20;
console.log(a)
</script>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
</body>
</html>
原型对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*
每次调用构造方法的时候
* */
/*我们创建的每一个函数 解析器都会向函数中添加一个
属性prototype
这个属性对应一个对象，这个对象就是原型对象
如果函数作为普通函数调用没有任何作用
一般用来在构造方法中放 所有对象 共有的东西
可以通过d对象名.__proto__来访问该属性
当我们访问对象的方法和属性时 他会先在对象
中寻找，如果没有就去原型对象中寻找,在没有就去原型的原型里找
function Person(){
}
var p1 = new Person();
var p2 = new Person();
console.log(p1.__proto__==p2.__proto__);//"true"
*/
window.a
</script>
</head>
<body>
</body>
</html>
toString方法
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<script>
/*
* 当输出对象的时候打印 "[object Object]"其实时调用了toString方法
* 这个方法在对象的原型的原型里
* 重写原型 即可
*/
function Person(name,age){
this.name=name;
this.age=age;
}
var p1 = new Person("张三",15);
var p2 = new Person("张三",15);
/*p1.__proto__.toString = function(){
return "aaaa";
}*/
p1.toString=function(){
return "ccc"
}
console.log(p1.toString());
console.log(p2);
</script>
<body>
</body>
</html>
垃圾回收
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body><!--当对象没有引用时js会自动回收，我们不需要也不能进行垃圾回收操作
我们要做的就是把不用的对象设置为null
-->
</body>
</html>
数组
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
/*var arr = new Array();
arr[0]=1;
arr[1]=1;
arr[arr.length]=8 //向末尾添加一个数
//leghth还能设置长度
//如果修改的长度小于元素数量 多余的元素会被删除
console.log(arr);//"1,1" leghth还能设置长度
js的数组什么都能放 跟java的集合一样
* 常用方法
* push()向末尾添加一个元素或多个元素 返回值为数组新的长度
* pop() 删除并返回最后一个元素
* unshift 向前添加元素 其他的会靠后 并返回新的数组长度
* shift 删除第一个元素 其他的会靠前 并返回被删除的元素
* slice(start ,end) 从数组提取指定元素，如果传负数 就是从后往前算
* splice(start,end,XXX)删除元素 并插入新元素到start之前并返回被删除的元素 之后的元素向前移动
* concat(X,X,X...)连接多个数组 也可以是元素 不会改变原数组
* join()将数组转成字符串 参数可以填连接符
* reverse()反转数组
* sort() 对数组排序 影响原数组
* */
arr = [5,35,3,34,534,]
arr.sort(function(a,b){
return b-a;
});
console.log(arr);
</script>
</head>
<body>
</body>
</html>
arguments
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--再调用函数时 传递的实参都会保存到 arguments
通过索引可以拿到具体的参数值 通过length可以获取长度
-->
<script type="text/javascript">
function fun(a,b){
console.log(a+b)
console.log(arguments[0]);//aa
}
fun("aa",2);
</script>
</head>
<body>
</body>
</html>
Date对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head><!--
-->
<body>
<script type="text/javascript">
/*var a = new Date();
console.log(a)
console.log(a.getFullYear());//"2020"
console.log(a.getDay());//"1" 第几周
console.log(a.getMonth());//2 0代表1月 以此类推。。
console.log(a.getTime());//"1583160582545" 时间*/
var a = new Date("1/1/1970 8:0:1");
console.log(a.getTime());
</script>
</body>
</html>
Math对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
-->
<script type="text/javascript">
//console.log(Math);//"[object Math]"
//console.log(Date);//"function Date() { [native code] }"
//Math是一个定义好的对象 不用new 可以直接用
/*生成0-10之间的随机数
* Math。random()可以生成0-1之间的小数
* Math.round()四舍五入
* console.log(Math.round(Math.random()*9)+1);//1-10的随机数
* Math.max(X,x,X) 返回最大值
* Math.min(X,x,X) 返回最小值
*/
//console.log(Math.abs(-10));
function Person(){
this.name=123;
this.a =function(){
console.log(Math.abs(-10));
}
};
var p1 = new Person();
var p2 = new Person();
p1.a();
</script>
</head>
<body>
</body>
</html>
String对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title><!--
charAt() 返回指定索引的字符
-->
<script type="text/javascript">
var str = "aasd sad";
//console.log(str.length);//"8"
//console.log(str.charAt(2));//s
//console.log(str.charCodeAt(0));//97
//console.log(str.concat("111"));//拼接字符串 元字符串不变
//console.log(str.indexOf("sad")); 返回指定字符串第一次出现的索引
//console.log(str.slice(0,2)); //截取字符串 不改变原字符串
console.log(str.substr(" ")[0]);
</script>
</head>
<body>
</body>
</html>
正则表达式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*语法 var 变量 = new RegExp("正则表达式","匹配模式")
test()这个方法检测字符串是否符合规则 返回boolean
第二个参数 可以是
i:忽略大小写
g:全局匹配模式
* */
/*var a = new RegExp("a","i");
console.log(a.test("SdA"))*/
/*var s="/a/i";
console.log(s.test("SdA"));*/
/*|:代表或
[] 中括号里的内容也代表或
[a-z]：a-z小写范围
[A-Z]：a-z大写范围
[A-z]：所有字母范围
[^ab]除了a和b
^a 不带[] 表示以a开头
a$ 表示以a结尾
^a$ 表示 只能有一个字符且是a
*
*
* //不需要指定全局 删除符合规则的
* var a ="ababa bab";
var result = a.split(可以传递正则表达式)[0];
*
*
* 查找符合规则的索引的字符串
* var a ="acb 2a3 ba ba12b";
var result = a.search(/2[A-z]3/);"4"
*
* 匹配所有符合规则的字符串 放到数组
* var a ="acb 2a3 ba ba12b";
var result = a.match(/[A-z]/g); "a,c,b,a,b,a,b,a,b"
*
*
* 替换所有符合规则的 需要只当全局
*
* var a ="acb 2a3 ba ba12b";
var result = a.replace(/[A-z]/g,"1"); "111 213 11 11121"
量词
a{3} a正好出现3次
(ab){3} ab出现3次
(ab){1,3}ab出现1次到3次
(ab){3,}ab出现3次以上
+ 表示至少一个 相当于{1,}
* 表示0个或多个 相当于{0,}
* ？表示0个或一个相当于{0,1}
电子邮件正则表达式
*
* */
var a ="1a429@qq.com";
var reg = /^([A-z]|[0-9]){3,8}@[A-z]{2,5}.[A-z]{1,5}$/;
var result = reg.test(a);
console.log(result);
</script>
</head>
<body>
</body>
</html>
DOM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id="btn">我是按钮</button>
<script type="text/javascript">
/*DOM 文档对象模型
文档：整个HTML页面
对象：网页中的每个部分都变成对象
模型：表示对象之间的关系 */
/*浏览器为我们提供了文档节点，对象是window属性
*/
var bt = document.getElementById("btn");
bt.innerHTML="嗯"//改变了html的内容
console.log();
</script>
</body>
</html>
事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<button id ="a">按钮</button>
</body>
<script type="text/javascript">
/*点击按钮 移动鼠标 关闭窗口 都是事件*/
//获取按钮对象
var bt = document.getElementById("a");
//给按钮绑定单击事件
bt.onclick=function(){
alert("讨厌~");
}
</script>
</html>
文档的加载
DOM查询
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--
innerHTML用于获取元素内部html代码
自闭和标签没有html代码 我们可以直接.name/value/type读取其他内容
docoment.getElementById(id) 通过id属性获取一个元素节点对象
docoment.getElementsByTagName(标签名) 通过标签获取一组元素节点对象
docoment.getElementsByName(标签名) 通过name值获得一组对象
-->
<!--上面通过window的方法document获取了元素节点
该元素节点是整个页面的 当一个标签有子类的时候 我们想单独拿到子类的某个标签
就需要使用以获得的元素节点的：下面这些方法元素几点同样有
docoment.getElementById(id) 通过id属性获取一个元素节点对象
docoment.getElementsByTagName(标签名) 通过标签获取一组元素节点对象
docoment.getElementsByName(标签名) 通过name值获得一组对象
-->
</head>
<body>
</body>
</html>
DOM案例
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var bt = document.getElementById("checkAllBut")
bt.onclick=function(){
var arr = document.getElementsByName("item")
for(var i=0;i<arr.length;i++){
arr[i].checked=true;
}
}
var bt1 = document.getElementById("checkNoBut")
bt1.onclick=function(){
var arr = document.getElementsByName("item")
for(var i=0;i<arr.length;i++){
arr[i].checked=false;
}
}
var bt2 = document.getElementById("checkRevBut")
bt2.onclick=function(){
var arr = document.getElementsByName("item")
for(var i=0;i<arr.length;i++){
arr[i].checked=!arr[i].checked ;
}
}
var bt3 = document.getElementById("submita")
bt3.onclick=function(){
var arr = document.getElementsByName("item")
for(var i=0;i<arr.length;i++){
if(arr[i].checked){
alert(arr[i].value);
}
}
}
};
</script>
</head>
<body>
<form action="">
<input type="checkbox" name="item" value="足球" />足球
<input type="checkbox" name="item" value="篮球" />篮球
<input type="checkbox" name="item" value="橄榄球" />橄榄球
<input type="checkbox" name="item" value="乒乓球" />乒乓球
<input type="button" id="checkAllBut" value="全选" />
<input type="button" id="checkNoBut" value="全不选" />
<input type="button" id="checkRevBut" value="反选" />
<input type="submit" id="submita" value="提交" />
</form>
</body>
</html>
DOM增删改
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
var bt = document.getElementById("bt0");
bt.onclick=function(){
// 创建节点<li></li>元素
var li = document.createElement("li")
//创建文本内容
var text = document.createTextNode("南京")
//将内容放到li标签
li.appendChild(text);
//将<li>南京</li>放到ul
var city = document.getElementById("city");
city.appendChild(li);
}
var bt1 = document.getElementById("bt1");
bt1.onclick=function(){
// 创建节点<li></li>元素
var li = document.createElement("li")
//创建文本内容
var text = document.createTextNode("南京")
//将内容放到li标签
li.appendChild(text);
//将<li>南京</li>放到ul
var city = document.getElementById("city");
var sj =document.getElementById("sj");
city.insertBefore(li,sj);
}
var bt2 = document.getElementById("bt2");
bt2.onclick=function(){
// 创建节点<li></li>元素
var li = document.createElement("li")
//创建文本内容
var text = document.createTextNode("广西")
//将内容放到li标签
li.appendChild(text);
//将<li>南京</li>放到ul
var city = document.getElementById("city");
var sh =document.getElementById("sh");
//新节点替换旧节点
city.replaceChild(li,sh);
}
var bt3 = document.getElementById("bt3");
bt3.onclick=function(){
var sh = document.getElementById("sh");
//如果点确认执行代码
if(confirm("确认删除"+sh.innerHTML +"吗？")){
//或者 这种更常用 不用获取父节点了
sh.parentNode.removeChild(sh)
}
/*var city = document.getElementById("city");
var sh = document.getElementById("sh");
city.removeChild(sh);*/
}
}
</script>
</head>
<body>
</body>
<div id="total">
<ul id = "city">
<li id ="sj">深圳</li>
<li>北京</li>
<li id ="sh">上海</li>
<li>青岛</li>
</ul>
</div>
<div id=bt>
<button id = "bt0"> 添加南京</button>
<button id = "bt1"> 添加南京到第一个</button>
<button id = "bt2"> 用广西替换上海</button>
<button id = "bt3"> 删除上海</button>
</div>
</html>
DOM操作样式
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 200px;
height: 100px;
background-color: black;
}
</style>
<script>
window.onload=function(){
var c = document.getElementById("box1");
var bt =document.getElementById("bt");
bt.onclick=function(){
//js修改css的语法
//元素对象.style.样式=样式值
//注意css样式如果含有-号 不合法 比如background-color
//需要将这种样式编程驼峰命名
//我们通过js设置的属性都是内联样式 内联样式优先级高与样式表
//如果要读取css样式 默认读取的是内联样式 要想读到样式表里的
//以下这俩种只读 不能修改
//获取当前生效的样式值 语法：元素.currentStyle.样式名 只有ie支持
//其他浏览器 window.getComputedStyle(css对象) 返回css对象
//css对象.样式 获取生效的样式值 ie8或以下不支持
/*alert(getComputedStyle(c,null).backgroundColor);
alert(getComputedStyle(c,null).width);*/
//alert(c.currentStyle.backgroundColor);
//上面的问题是读取样式 的俩个方式 都不能完全兼容所有浏览器怎么办？
//定义一个方法 传入css对象和样式名
//如果有这个对象说不不是ie8以下的浏览器
var getStyle =function(obj,style){
if(window.getComputedStyle){//必须加window 加了就是对象的变量 没加就是变量 如果找变量没找到会报错 对象的属性没找到就是undefined
return getComputedStyle(obj)[style];
}//否则就是ie8或以下的浏览器
else{
return obj.currentStyle.style;
}
}
alert(getStyle(c, "backgroundColor"));
}
}
</script>
</head>
<body>
<button id ="bt">变成红色</button>
<div id="box1"></div>
</body>
</html>
事件对象
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box{
width: 50px;
height: 50px;
border: 1px solid red ;
margin-bottom: 10px;
}
#box1{
width: 50px;
height: 50px;
border: 1px solid black ;
}
</style>
<script>
window.onload=function(){
var div1 = document.getElementById("box");
var div2 = document.getElementById("box1");
/*onmousemove
* -该事件将会在鼠标移动在元素中被触发
*
*事件对象：
* -当事件被触发后 浏览器每次都会将一个事件对象作为实参传递给响应函数
*在该对象中封装了事件的一切信息 比如 鼠标坐标 键盘按下等等
*
*
* 在ie8以下的浏览器中 事件对象是作为window对象的属性保存的
* 用的时候用window调用即可 但是不兼容火狐浏览器 再做判断是否有event
*
* event=event||window.event;
*/
div1.onmousemove=function(event){
var x = event.clientX;
var y = event.clientY;
div2.innerHTML="x="+x+","+"y="+y
}
}
</script>
</head>
<body>
<div id="box"></div>
<div id="box1"></div>
</body>
</html>
事件的委派
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
//之前的连接绑定了事件那么新创建的连接如何绑定连接
//绑定给父元素 利用事件的冒泡 这就叫事件的委派
//但是这就引发了另一个问题 这个父元素下的所有元素都会触发这个事件 怎么办？
//事件的target保存了用户具体点击了那个元素
var ul = document.getElementById("ul");
ul.onclick=function(event){
event=event||window.event;
if(event.target.className=="link"){
alert(event.target);
}
}
//之前的连接绑定了事件那么新创建的连接如何绑定连接
var bt = document.getElementById("bt");
bt.onclick=function(){
var ul = document.getElementById("ul");
var li = document.createElement("li");
li.innerHTML="<a href='#'>超链接4</a>";
ul.appendChild(li);
}
}
</script>
</head>
<body>
<button id ="bt">添加超链接</button>
<ul id= "ul" style="background-color: red;">
<li><a href="javascript:;" class="link">超链接1</a></li>
<li><a href="javascript:;" class="link">超链接2</a></li>
<li><a href="javascript:;" class="link">超链接3</a></li>
</ul>
</body>
</html>
事件的绑定
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--使用对象.事件 =函数的形式为一个按钮绑定2个事件 后面的会覆盖前面的
要同时触发多个事件怎么办
ie8以下不支持
addEventListener()
-事件的字符串 click 不要写onclick
-回调函数
-是否在捕获阶段触发事件 需要一个布尔值 一般是false
this是绑定的对象
按照绑定顺序依次执行
ie8一下支持的:
attachEvent()
-事件的字符串 onclick
-回调函数
按照绑定顺序逆序执行
this是window
-->
<script>
window.onload=function(){
var bt =document.getElementById("bt")
bind(bt,"click",function(){
alert("1");
})
}
function bind(obj,event,callBack){
if(obj.addEventListener()){
obj.addEventListener(event,callBack,false);
}else{
obj.attachEvent("on"+event,callBack);
}
}
</script>
</head>
<body>
<button id ="bt">按钮</button>
</body>
</html>
拖拽块元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script>
/*鼠标按下 onmousedown
* 鼠标移动onmousemove
* 鼠标松开onmouseup
*/
window.onload=function(){
//求出偏移量
var div = document.getElementById("div");
div.onmousedown=function(event){
//求出偏移量
var ol = event.clientX-div.offsetLeft;
var ot = event.clientY-div.offsetTop;
document.onmousemove=function(event){
event=event||window.event;
div.style.left=event.clientX-ol+"px";
div.style.top=event.clientY-ot+"px";
}
document.onmouseup=function(){
//鼠标松开 这俩个事件就没用了
document.onmousemove=null;
document.onmouseup=null;
}
//文字无法拖拽
return false;
}
}
</script>
</head>
<body>
asdas
<div id="div"></div>
</body>
</html>
键盘事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
window.onload=function(){
/*当onkeydown连续触发时 第一次和第二次间隔时间长 后面很快*/
document.onkeydown=function(){
console.log("按下")
}
document.onkeyup=function(){
console.log("松开");
}
//通过keycode获取按键
document.onkeydown=function(event){
console.log(event.keyCode)
}
}
</script>
</head>
<body>
</body>
</html>
键盘移动块元素
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#div{
width: 100px;
height: 100px;
background-color: red;
position: absolute;
}
</style>
<script>
window.onload=function(){
var div = document.getElementById("div");
document.onkeydown=function(event){
switch(event.keyCode){
case 37:
div.style.left=div.offsetLeft-100+"px";
break;
case 38:
div.style.top=div.offsetTop-100+"px";
break;
case 39:
div.style.left=div.offsetLeft+100+"px";
break;
case 40:
div.style.top=div.offsetTop+100+"px";
break;
}
}
}
</script>
</head>
<body>
<div id="div"></div>
</body>
</html>
BOM
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
/*BOM对象
-window
-代表浏览器窗口
Navigator
-代表浏览器的信息 该对象可以识别不同浏览器
由于历史原因他的属性大多数已经不能帮我们识别浏览器了
一般用userAgent判断浏览器信息
Edge：Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/70.0.3538.102 Safari/537.36
Edge/18.18362
charme：
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36
(KHTML, like Gecko) Chrome/80.0.3987.122 Safari/537.36
IE11:
Mozilla/5.0 (Windows NT 10.0; WOW64; Trident/7.0; .NET4.0C;
.NET4.0E;
.NET CLR 2.0.50727;
.NET CLR 3.0.30729;
.NET CLR 3.5.30729; rv:11.0) like Gecko
IE8:Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 10.0;
WOW64; Trident/7.0; .NET4.0C; .NET4.0E; .NET CLR 2.0.50727;
.NET CLR 3.0.30729; .NET CLR 3.5.30729)
判断是不是IE结局方案
if("ActiveXObject in window") 如果是true 就是IE
-Location
-代表浏览器的地址栏信息
-History
-代表浏览器的历史纪录 只能访问当次的上次下次*/
if("ActiveXObject" in window){
alert("你是IE");
}else
{
alert("你不是IE")
}
</script>
</head>
<body>
</body>
</html>
定时器
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<!--需求:页面上显示1，2，3，4 来回变换-->
<script>
window.onload=function(){
var ss = document.getElementById("ss");
//如果希望程序间隔一段时间运行
/*for(var i=0;i<100;i++){
ss.innerHTML=i;
}*/
//setInterval(a,b) window的方法 可以直接调
//-函数
//-每次调用间隔时间
//返回值 int类型 作为定时器的标识
var num =1;
var as = setInterval(function(){
ss.innerHTML=num++;
if(num==20){
clearInterval(as)
}
},100)
//关闭定时器 clearInterval
}
</script>
</head>
<body>
<div id="ss">1</div>
</body>
</html>
延时调用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script>
//延时调用只会调用一次
setTimeout(function(){
console.log("sss");
},1000)
</script>
</head>
<body>
</body>
</html>
块跟随鼠标
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 50px;
background-color: red;
position: absolute;
}
</style>
<script>
window.onload=function(){
/* 给div绑定是错误的 因为他的范围太小
var box = document.getElementById("box1");
box.οnmοusemοve=function(event){
event=event||window.event;
var x = event.clientX;
var y = event.clientY;
box.style.left=x+"px";
box.style.top=y+"px";
}*/
var box = document.getElementById("box1");
document.onmousemove=function(event){
event=event||window.event;
var x = event.clientX;
var y = event.clientY;
box.style.left=x+"px";
box.style.top=y+"px";
}
}
</script>
</head>
<body>
<div id="box1"></div>
</body>
</html>
DOM补充
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript">
var body =document.body; //获取body元素
var html = document.documentElement //获取html元素
var all = document.all //获取所有元素
var div =document.querySelector(".box div") 找class为box的div下的所有div
</script>
</head>
<body>
</body>
</html>
类的操作
/*
*/
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#box1{
width: 100px;
height: 50px;
background-color: red;
}
#div2{
width: 10px;
height: 5px;
background-color: black;
}
</style>
<script type="text/javascript">
var div1 = document.getElementsById("div1");
//下面这种方式修改 是不好的 每行代码都会让浏览器重新渲染 三十个样式就渲染三十遍 性能低
div1.style.width=100px;
div1.style.heigth=100px;
div1.style.background=100px;
//我们可以该类名一行代码修改多条样式
div.className=box1;
</script>
</head>
<body>
<div class = "div1"></div>
</body>
</html>
JSON
前端与后台交互 传递js对象数据怎么办？
既然别人不认识js对象那就把对象转成字符串传递 所有语言都认识字符串
在js中有一个工具JSON 将json转成对象
JSON.pares（json字符串）
JSON.stringify（js对象）
最后
以上就是虚幻龙猫为你收集整理的JavaScript的全部内容，希望文章能够帮你解决JavaScript所遇到的程序开发问题。
如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。
本图文内容来源于网友提供，作为学习参考使用，或来自网络收集整理，版权属于原作者所有。
发表评论 取消回复