js引入方法:
1.内嵌
<script>
//JS的内容
</script>
2：外联
<script src="JS/test.js"></script>
3：直接写在元素的事件属性上（所有以on开头命名的属性
<div onclick="alert('hello world!')">点我点我！！</div>
JS--基本数据类型
1.字符串（文字）string:只要有引号都是文字
2.数字number:正数、负数、浮点（小数）
3.未定义/未知类型 undefined
4.空值 null ，空对象
5.布尔值 boolean：true /false
6.Symbol：ES6 表示独一无二的值
引用数据类型：
1.Object
2.Array
3.Function*/
输出方式：
console.log("在控制台输出");
alert(“弹框输出”);
document.write(“文档输出”);
数字==》字符串
let myStr1=String(myNo);
let myStr2=myNo.toString();
字符串==》数字
myNo2=Number(myNo2);
parseInt-转成整数
parseFloat-保留小数点，一个一个转,直到无法再转为止
布尔值==》数字
true 1
false 0
字符串==》布尔值
字符串转布尔值的时候，除了空字符串 转为false，其他都是true(包括空格)
数字==>布尔值
除了0转为false，别的数字都转true
自定义保留小数点
var myNo3=13.22;
console.log(myNo3.toFixed(1));
/*三元运算符
* 表达式?值1（true）: 值2（false） */
if判断
单分支
if(条件){
执行语句
}
双分支
if(条件){
执行语句1
}else{
执行语句2
}
多分支
if(条件1){
执行语句1
}else if(条件2){
执行语句2
}
if嵌套
if(条件1){
执行语句
if(条件2){
执行语句
}
}
先循环后验证
do{
循环体
}while(条件)
先验证后循环
while(条件){
循环体
}
先验证后循环
for(声明变量以及初始化;条件;循环体执行完后对变量重新赋值){
循环体
}
for循环嵌套
for(声明变量以及初始化;条件;循环体执行完后对变量重新赋值){
循环体1
for(声明变量以及初始化;条件;循环体执行完后对变量重新赋值){
循环体2
}
}
数组声明
let arr = new Array();new可省略
let arr = [];
添加内容
arr[0]=100;//下标从0开始
arr[1]=300;//下标从0开始
arr[2]=200;//下标从0开始
/*2.创建数组的时候定义数组的长度
* 在括号里面直接输入一个数字，代表定义数组的长度*/
var arr2=Array(10);//length:10
console.log(arr2);//空数组
/*3.创建数组的时候初始化数组*/
var arr3=Array(10,20,"hello",null,true);//length
console.log(arr3.length);
console.log(arr3[1]);
es6的数组
//=================Array.of=================
//1.Array.of 用于将一组值转为数组
let myArr=Array.of(11,2,8);
console.log(Array.of());
console.log(Array.of(1));
console.log(myArr);
//Array 和 Array.of的区别
// console.log(Array());//空数组
// console.log(Array(3));//数组长度为3
// console.log(Array(3,11,8));//创建数组并且初始化数据
/*Array方法：没有参数，一个参数，两个以上参数,返回的结果都不一样，只有当参数多于2时，
* Array方法才会返回由参数组成的新数组
*
* Array.of:总是返回参数值组成的数组，如果没有参数，就返回一个空数组*/
//===================copyWithin,替换数组========================
/*Array.copyWithin(参1，参2，参3)
*
* 参1：target(必须)：从该位置开始替换数据
* 参2：start(可选)：从该位置开始读取数据，0开始读取
* 参数3：end(可选)：到该位置前停止读取数据，默认等于数组长度
* */
let myCopyArr=[1,2,3,4,5].copyWithin(1,3);
console.log(myCopyArr);
数组的遍历
var arr1=["a","b","c","d",5,6];
// console.log(arr1.length);
for(let i=0;i<arr1.length;i++){//i=3
console.log(arr1[i])
}
math方法
/*Math对象用于执行数学任务
* 1.随机数：Math.random() ：0-1之间的随机数 */
let random=parseInt(Math.random()*11);
document.write(random);//
/*40-60
* (Math.random()*（大-小）+小 )*/
random= parseInt(Math.random()*20+40); /*40.55-59.99*/
console.log(random);
//四舍五入取整：round()
console.log(Math.round(Math.random()*20+40));
//向下取整 floor()
console.log(Math.floor(25.9));
//向上取整 ceil()
console.log(Math.ceil(25.0001));
//绝对值
console.log(Math.abs(-21));
console.log(Math.pow(2,3));
console.log(Math.min(1,2,3,4,5,6,7));//最小值
console.log(Math.max(1,2,3,4,5,6,7));//最大值
//有参函数
function juxing(hang,lie) {//形参，在函数内部可以当做变量使用
console.log(hang);
console.log("列"+lie);
for(let j=0;j<hang;j++){//行
for(let i=0;i<lie;i++){//列
document.write("*");
}
document.write("<br>")
}
}
console.log(hang);
juxing(8,30);//实参
juxing(6,20);
//无参函数
function guess() {
let myNo=parseInt(Math.random()*101);
alert(myNo);
for(let i=1;i<=5;i++){
let guess=parseInt(prompt("猜猜随机数"));
if(guess==myNo){
alert("聪明");
break;
}else if(guess>myNo){
alert("第"+i+"次，你输入的是"+guess+"大了");
}else if(guess<myNo){
alert("第"+i+"次，你输入的是"+guess+"小了");
}
}
}
guess();//函数的调用 :函数名()
//匿名函数
let myF=function () {
console.log("呱呱~！")
};
myF();
/*es6 中的函数，用箭头函数的方式表示 */
//无参
myF= ()=> {
console.log("hahaha");
};
myF();
//有参
myF= (n)=> {
console.log(n);
};
myF("嘿嘿嘿");
//有参函数可以简写为
myF= n =>{
console.log(n);
};
myF("呵呵呵呵");
myF= n => n<4;
myF=function (n) {
let result;
if(n<4){
result=true
}else{
result=false
}
return result;
};
let myNo=myF(6);
console.log(myNo);
//es6:可以对数组解构赋值，
// let [a,b,c]=[1,2,3];//可以从数组中提取值，对变量赋值
只要等号两边的模式相同，左边的变量就会被赋予对应的值
//不完全解构：等号左边只能匹配一部分等号右边的数组
// let [x,y]=[1,2,3];
//字符串解构赋值
// const [a11,b11,c11,d11]="love";
/*对象的解构赋值*/
let {foo:baz1,bar:bar}={foo:"aaa",bar:"bbb"};
/*字面量方式创建对象：{}
* 在花括号的内部，对象的属性以 属性名称：值 的形式定义 ，属性由逗号分隔*/
let cat={
catName:"kitty",
sex:"man",
age:5
};
console.log(cat.catName);//获取对象属性
//对象和数组结合使用
//[{},{},{}]
let cats=[
{catName:"桃桃",catSex:"男",catAge:2},
{catName:"飞飞",catSex:"男",catAge:2},
{catName:"真真",catSex:"女",catAge:1},
];
对象遍历
for(var i=0;i<cats.length;i++){
console.log(cats[i].catName);
}
/*扩展运算符 ... : 可以将一个数组转为用逗号分隔的参数序列
* 解构赋值可以和扩展运算符一起使用*/
// let [head,...tail]=[1,2,3,4,5,6];
/*Array Math String Date*/
//系统当前时间
let d=new Date();
console.log("创建的日期对象："+d);
console.log("获取年份："+d.getFullYear());
console.log("获取月份："+(d.getMonth()+1));//月份从0开始
console.log("获取日期："+d.getDate());
console.log("获取星期几："+d.getDay());
console.log("获取时："+d.getHours());
console.log("获取分："+d.getMinutes());
console.log("获取秒："+d.getSeconds());
console.log("获取豪秒："+d.getMilliseconds());
console.log("显示系统语言的日期方式："+d.toLocaleString());//包含时分秒
console.log("显示系统语言的日期方式："+d.toLocaleDateString());//只是日期
/*正则表达式
* 语法： /^规则$/ */
let reg1=/^abc$/;
let text1="ac";
/*方法1：值为主，规则为次，用值去匹配规则
* 字符.match(规则)*/
let result=text1.match(reg1);
console.log(result);//如果匹配，返回测试的字符串，如果不匹配，返回Null
/*方法2：规则为主，值为次，用规则去匹配值
* 规则.test(值)
* 如果匹配返回true,否则返回false*/
result=reg1.test(text1);
console.log(result);
//必须是两个字符，第一个字符0-9 第二个字符a-zA-Z. []-代表一个字符
let reg2=/^[0-9][0-9][a-zA-Z]$/;
let text2="11A";
console.log(reg2.test(text2));
//第一个字符是以英文字母开头，后面跟数字（不限多少位）
//+：出现一次及以上 *：出现0次及以上
let reg3=/^[a-zA-Z][0-9]*$/;
let text3="D";
console.log(reg3.test(text3));
//第一个字符以数字开头，后面是英文，总共至少出现5个英文
/*
* {5,8} 代表前一个字符出现5-8位
* {5，}代表前一个字符至少出现5位
* {8} 代表前一个字符必须出现8次
* */
let reg4=/^[0-9][a-zA-Z]{3}$/;
let text4="9aaa";
console.log(reg4.test(text4));
//除了a 之外的单个字符
let reg5=/^[^a]$/;
let text5="四";
console.log(reg5.test(text5));
/*
* \d 代表数字 \D 除了数字
*
* \w a-zA-Z0-9 \W 除了字母和数字
*
* \s 代表空格
*
* */
let reg6=/^\s*$/;
let text6=" ";
console.log(reg6.test(text6));
/*hello@163.com*/
var regEmail=/^\w[-\w.+]*@([A-Za-z0-9][-A-Za-z0-9]+\.)+[A-Za-z]{2,14}$/;
// let regEmail=/^(\w){5,8}@(\w){2,}.(\w){2,}$/;
let email="hello@163.com";
console.log(regEmail.test(email));
//match：返回数组
let str="1 plus 2 equals 3";
let myResult=str.match(/\w/g); // g全局匹配
console.log(myResult);
/* () 子表达式
*
* replace("要替换的内容"，“被替换的字符串”)
*
*$1代表第一个子表达式(java)
* $2代表 (script)
* */
var str2="javascript";
/**/
myResult=str2.replace(/(java)(script)/,"$2$1");
console.log(myResult);
/*创建字符串的方法及区别*/
// let str="hello";//字面量方法 基本类型值
// let str1=new String("hello");//String 对象
/*字符串的方法*/
/*1.charAt():返回下标对应的字符串*/
let str="hello world";
var result=str.charAt(4);//下标从0开始
console.log(result);
//2.截取字符串，从起始下标开始，到结束下标（不包含结束下标）
// 字符串.slice（起始下标，结束下标）
result=str.slice(2,6);
console.log(result);
//3.截取字符串 substr(起始下标，截取多少个字符)
result=str.substr(1,5);
console.log(result);
//4.字符第一次出现的下标位置
//indexOf("字符") ，如果没有出现过该字符，返回-1
result=str.indexOf("a");
console.log(result);//7
//5.替换字符：replace("被替换的字符"，“要替换成的字符”)
//返回一个替换掉的string
result=str.replace("world","单身狗");
console.log(result);
//6.搜索字符存不存在：search(“搜索的字符串”);
// -1 没有 ， 如果有则返回起始下标
result=str.search("a");
console.log(result);//7
//7.字符串分割 split(“分割符”) ,返回数组，分割符会被去掉
result=str.split(" ");
console.log(result);
//8.合并字符串 str1.concat(str2......),返回合并好的字符串
let str2="bye";
let str3="~bye~";
result=str.concat(str2,str3);
console.log(result);
console.log(str2);
//9.清除前后空格 trim()
let str4=" 桃 桃 ";
console.log(str4);
result=str4.trim();
console.log(result);//不会清除文字之间的空格
console.log("hello"==" hello");//false
/*查询是否有子节点，返回true/false*/
let myHasChildNodes=document.body.hasChildNodes();
console.log(myHasChildNodes);//true
//查询所有子节点：childNodes
let myChildNodes=document.body.childNodes;
console.log(myChildNodes);
//通过id获取节点
let content1=document.getElementById("content1");
console.log(content1);
//通过className获取节点
let divClass=document.getElementsByClassName("red");
console.log(divClass);
for(let i=0;i<divClass.length;i++){
console.log(divClass[i]);
}
//通过元素标签名获取节点
let myh1=document.getElementsByTagName("h1");
console.log(myh1[0]);
//通过Name获取节点
let byName=document.getElementsByName("username");
console.log(byName[1]);
节点操作
//1.找到需要操作的节点
let div1=document.getElementById("div1");
console.log(div1.attributes);//获取元素属性集合
console.log(div1.attributes[0]);//获取单个属性
console.log(div1.getAttribute("id"));//获取指定属性值
console.log(div1.getAttributeNode("class").nodeName);//class
console.log(div1.getAttributeNode("id").nodeType);//2
console.log(div1.getAttributeNode("class").nodeValue);//red
// //1.找到父节点
// let div1=document.getElementById("div1");
// //2.找到子节点
// let myAge=document.getElementById("myAge");
// //3.通过父节点删除子节点
// div1.removeChild(myAge);
//如果需要删除所有子节点？？
//1.找到父节点
let div1=document.getElementById("div1");
//2.找到所有子节点
let sonList=div1.childNodes;
// console.log(sonList);
// console.log(sonList.length);
//3.删除子节点
for(let i=sonList.length-1;i>=0;i--){// i=2
div1.removeChild(sonList[i]);
/*[1,2,3,4,5,6,7,8] ---初始数组 length:8
* [2,3,4,5,6,7,8] ---第一次删除完毕：length:7
* [2,4,5,6,7,8] ---第2次删除完毕：length:6
* [2,4,6,7,8] ---第3次删除完毕：length:6
*
*
* */
}
/*
* 1.找到父节点
* 2.通过父节点添加子节点
* 3.子节点添加文本内容
* */
//1.找到父节点
let div1=document.getElementById("div1");
console.log(div1);
//2.创建子节点
let myDivElement=document.createElement("div");//
//3.把创建的子节点放入父节点中
div1.appendChild(myDivElement);
//4.为子节点添加文本内容
//4-1 添加文本节点
let myTextNode=document.createTextNode("跪求粘人妹纸~~CP~~！！");
//4-2 将文本节点放入新创建的div中
myDivElement.appendChild(myTextNode);
let box=document.getElementById("box");
function getColor() {
console.log(box.style.backgroundColor);//获取的也是内联样式
}
function changeColor() {
// box.style.backgroundColor="#482bcc";
// box.style.backgroundColor="red";
//JS里面的css属性采用的是驼峰命名法
box.style.background="rgb(0,200,122)";//改变的是内联样式
box.style.width="500px";
//box.style.transition="all .3s"
//box.style.marginLeft
}
/*获取最终样式表：
document.defaultView.getComputedStyle(box,null).backgroundColor; */
let finalWidth;
console.log(box.currentStyle.width); //IE
if(box.currentStyle==undefined){
finalWidth=document.defaultView.getComputedStyle(box,null).backgroundColor;//DOM
}else {
finalWidth=box.currentStyle.width;//IE
}
innerHTML
let main=document.getElementById("main");
function getInnerHtml() {
console.log(main.innerHTML);//获取
// main.innerHTML+="<h1>你们不要打我！！！</h1>"
main.innerHTML=""
}
function getOuterHtml() {
console.log(main.outerHTML);
// main.outerHTML="";
main.outerHTML="<div>尿飞~快点儿尿~！</div>";
}
function getInnerText() {
console.log(typeof main.innerText);
console.log(document.getElementsByTagName("h1")[0].innerText);
document.getElementsByTagName("h1")[0].innerText+="现在想想，还是幼儿园好混~！";
}
console.log(document.body.innerText);
/*替换节点： 父节点.replaceChild（新节点，被替换的节点）*/
function myReplace() {
let box=document.getElementById("box");
let replace=document.getElementsByClassName("replace")[0];
//1. 新创建一个节点去替换旧节点
// let newDiv=document.createElement("div");
// newDiv.innerHTML="我是飞飞~毛许强嘿嘿嘿~！";
//
// box.replaceChild(newDiv,replace);
//2. 用已有的节点替换旧节点
let title=document.getElementsByClassName("title")[0];
box.replaceChild(title,replace)
}
let box=document.getElementById("box");
let replace=document.getElementsByClassName("replace")[0];
let title=document.getElementsByClassName("title")[0];
/*父元素.insertBefore（新节点，插入在哪个节点的前方）*/
function myInsertBefore(){
//创建一个新节点
let newDiv=document.createElement("div");
newDiv.innerHTML="我是飞飞~毛许强嘿嘿嘿~！";
//用已有的节点
box.insertBefore(title,replace);
}
//复制节点
/*要复制的节点.cloneNode(布尔值)
* true:复制自己+所有子节点
* false：只复制自己，不包含子节点的内容
*
* 复制完毕之后会返回复制的节点
*
* */
let box=document.getElementById("box");
function myClone() {
let newClone=box.cloneNode(true);
console.log(newClone);
let mySection=document.getElementsByTagName("section")[0];
mySection.appendChild(newClone);
}
获取其他节点
let title=document.getElementsByClassName("title")[0];
function getNode() {
//找到上一个兄弟节点
let box=title.previousElementSibling;
// console.log(box);
//下一个兄弟节点
let lastDiv=title.nextElementSibling.nextElementSibling;
console.log(lastDiv);
//console.log(title.parentElement);//父元素
// console.log(title.parentNode);//父节点
}
/*文本节点的操作
* appendData（）
* insertData()
* deleteData()
* replaceData()*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body onclick="showMsg3()">
<div onclick="showMsg2()">
<button onclick="showMsg()">按钮</button>
</div>
<script>
/*button*/
function showMsg() {
alert("button");
}
/*div*/
function showMsg2() {
alert("div")
}
/*body*/
function showMsg3() {
alert("body");
}
</script>
<!-- event对象
事件源 =========================================指派事件的处理程序
（保存跟这次事件相关的信息：事件类型，用户按键，鼠标点击坐标）
网页上的元素
按钮--鼠标事件
文本框--键盘事件
滚动条--html事件
-->
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="myDiv">
<button id="btn">按钮</button>
</div>
<script>
let btn=document.getElementById("btn");
let myDiv=document.getElementById("myDiv");
btn.addEventListener("click",showMsg,true);//true捕获 false --冒泡
myDiv.addEventListener("click",showMsg2,true);//true捕获 false --冒泡
document.body.addEventListener("click",showMsg3,true);//true捕获 false --冒泡
/*button*/
function showMsg() {
alert("button");
}
/*div*/
function showMsg2() {
alert("div")
}
/*body*/
function showMsg3() {
alert("body");
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
div{
height: 100px;
background-color: #28beff;
}
</style>
</head>
<body>
<!--鼠标事件-->
<div onclick="myClick()" onmousedown="myDown()" onmouseup="myUp()" onmouseover="myOver()" onmouseout="myOut()" onmousemove="myMove()">
</div>
<script>
function myClick() {
console.log("鼠标点击事件");
}
function myDown() {
console.log("鼠标按下")
}
function myUp() {
console.log("鼠标弹起")
}
function myOver() {
console.log("鼠标移入");
// document.getElementsByTagName("div")[0].style.backgroundColor="#2190ff"
}
function myOut() {
console.log("鼠标移出");
// document.getElementsByTagName("div")[0].style.backgroundColor="#28beff"
}
function myMove() {
console.log("鼠标移动")
}
</script>
</body>
</html>
<body>
<!--键盘-->
<input type="text" onkeydown="myKeyDown()" onkeyup="myKeyUp()" onkeypress="myKeyPress()">
<script>
function myKeyDown() {
console.log("键盘按下");
}
function myKeyUp() {
console.log("键盘弹起");
}
/*keypress只能在字符类*/
function myKeyPress() {
console.log("keyPress");
}
</script>
</body>
<body>
<input type="text" onfocus="myFocus()" onblur="myBlur()">
<img src="close-16x16.png" alt="">
<script>
document.getElementsByTagName("img")[0].onload=function () {
console.log("图片资源加载完毕")
};
function myFocus() {
console.log("获取焦点")
}
function myBlur() {
console.log("失去焦点");
}
console.log("11111");
window.onresize=function () {
console.log("窗口改变事件");
};
window.onscroll=function () {
console.log("滚动条事件");
}
/*onchange
* 传统事件绑定
* 现代事件绑定
*
*
* 默认事件 a form */
</script>
</body>
<body>
<select name="sheng" onchange="changCity()">
<option value="0">--请选择--</option>
<option value="1">四川省</option>
<option value="2">广东省</option>
<option value="3">湖北省</option>
</select>
<select name="shi" >
<option value="0">成都</option>
<option value="1">乐山</option>
<option value="2">绵阳</option>
<option value="3">峨眉</option>
</select>
<!--input的onchange,是在失去焦点之后才触发的-->
<input type="text" onchange="InputOnchange()">
<input type="checkbox" onchange="checkBoxOc()">
<script>
function checkBoxOc() {
console.log("checkbox的onchange事件")
}
function InputOnchange() {
console.log(11111);
}
function changCity() {
console.log("触发事件");
let sheng=document.getElementsByName("sheng")[0];
let shi=document.getElementsByName("shi")[0];
console.log(sheng.value);
if(sheng.value==1){
shi.innerHTML=" <option value=\"0\">成都</option>\n" +
" <option value=\"1\">乐山</option>\n" +
" <option value=\"2\">绵阳</option>\n" +
" <option value=\"3\">峨眉</option>"
}else if(sheng.value==2){
shi.innerHTML=" <option value=\"0\">番禺</option>\n" +
" <option value=\"1\">广州</option>\n" +
" <option value=\"2\">深圳</option>\n" +
" <option value=\"3\">东莞</option>"
}
}
</script>
</body>
<body>
<!--<a href="1.event.html" onclick="return false">a标签跳转</a>-->
<a href="1.event.html" onclick="return confirmRedirect()">a标签跳转</a>
<form action="3.eventType.html" onsubmit="myPrevent()">
<input type="text" name="username">
<button >提交表单</button>
</form>
<script>
function confirmRedirect() {
let ans= confirm("确定要跳转吗");
console.log(ans);
return ans;
}
function myPrevent() {
let usernameV=document.getElementsByName("username")[0].value;
console.log(usernameV);
let e=window.event||arguments[0];//事件对象
e.preventDefault();//阻止form的提交
//e.returnValue=false//IE阻止提交
let form=document.getElementsByTagName("form")[0];
form=document.forms[0];
console.log(usernameV!="");
if(usernameV!=""){//username的输入框不为空
form.submit();//表单提交
}
}
</script>
</body>
<body>
<!--1.直接通过事件属性在元素上绑定-->
<button onclick="showMsg('hello')" id="btn1">传统1</button>
<!--2传统绑定2-->
<button id="btn2">传统2</button>
<!--3.传统绑定的取消-->
<button id="btn3">取消传统指派</button>
<script>
/*传统绑定*/
function showMsg(str) {
console.log(str)
}
/**/
let btn2=document.getElementById("btn2");
btn2.onclick=function () {//btn1绑定了一个匿名函数
showMsg2("传递参数")
};
btn2.onclick=function () {
alert("我还想要给btn2的点击绑定一个事件");
};
function showMsg2(str) {
console.log("传统绑定2")
}
// btn2.onclick=showMsg; //没有括号 showMsg()
let btn3=document.getElementById("btn3");
let btn1=document.getElementById("btn1");
btn3.onclick=function () {
btn2.onclick=null;
}
</script>
</body>
<body>
<button id="btn1">现代绑定</button>
<button id="btn2">取消现代绑定</button>
<script>
let btn1=document.getElementById("btn1");
let btn2=document.getElementById("btn2");
/*事件源.addEventListener("事件名,去掉on",事件处理程序,布尔值-可选)
* true-捕获 false-冒泡（默认）*/
// btn1.addEventListener("click",showMsg);
btn1.addEventListener("click",function () {
showMsg("桃桃")
});
btn1.addEventListener("click",function () {
showMsg("飞飞")
});
function showMsg(str) {
alert("现代指派"+str);
// alert("现代指派");
}
//移除事件监听
btn2.addEventListener("click",function () {
btn1.removeEventListener("click",showMsg)//现代事件的绑定，匿名函数无法移除事件监听
})
/*传统绑定，现代绑定
* 1.传统绑定一个事件只能绑定一次，反复多次绑定只执行最后的一次
* 传统绑定取消的时候直接：事件源.事件类型=null
*
* 2.现代绑定可以反复绑定多次，并且每次绑定都会被执行
* 事件源.removeEventListener() ,并且匿名函数无法取消事件绑定
*
* */
/*
* IE现代绑定： 事件源.attachEvent("onclick",函数 )
* IE取消绑定：事件源.detachEvent(“onclick”,函数); //IE 11 以下版本
*
*
*
*
* */
</script>
</body>
<body>
<div onclick="myEvent()"></div>
<input type="text" onkeyup="myEvent2()">
<!--当事件发生，就会产生事件对象，记录所有和事件相关的信息-->
<a href="3.bom.html">测试</a>
<script>
function myEvent() {
let e=window.event||arguments[0];//获取事件对象
//事件类型
console.log(e.type);
//鼠标在页面上的坐标位置
console.log(e.clientX);
console.log(e.clientY);
//鼠标在屏幕上的坐标位置
// console.log(e.screenX);
// console.log(e.screenY);
//鼠标在事件源的坐标位置，相对于div的左上角
console.log(e.offsetX);
console.log(e.offsetY);
}
let div=document.getElementsByTagName("div")[0];
div.style.marginTop="0px";
function myEvent2() {
let e=window.event||arguments[0];
console.log(e.keyCode);//按键码
console.log(e.key);//按键
if(e.keyCode==32){
alert("毛许强要飞~~~！@");
}else if(e.keyCode==87){//w ，前进
alert("前进");
div.style.marginTop=(parseInt(div.style.marginTop)-20)+"px";
}
}
</script>
</body>
<body>
<button onclick="myLocation()">窗口跳转</button>
<button onclick="myHistory()">History对象</button>
<button onclick="myOpen()">window对象打开</button>
<button onclick="myClose()">window对象关闭</button>
<script>
/*系统对话框*/
// window.alert("abc");
// window.prompt("输入");
// window.confirm("确认");
console.log(window);
/*screen对象*/
console.log("屏幕分辨率宽度=========="+screen.width);
console.log("屏幕分辨率高度=========="+screen.height);
/*document对象*/
console.log("页面宽度============="+document.documentElement.clientWidth);
console.log("页面高度============="+document.documentElement.clientHeight);
/*location对象*/
function myLocation() {
console.log(location);
location.href="1.eventObj.html";//跳内部
// location.href="http://www.baidu.com";//跳外部
}
/*history对象*/
function myHistory() {
// history.back();//后退一页
// history.forward();//前进一页
history.go(1);//正数 前进N页 负数 后退N页
}
/*Navigator对象
*
* userAgent属性用于浏览器识别的
* */
// alert("浏览器信息"+navigator.userAgent);
var ua=navigator.userAgent.toLowerCase();//全部转为小写
console.log(ua);
if(/mobi|android|touch|mini/i.test(ua)){
//手机浏览器
console.log("移动端")
}else {
//非手机浏览器
console.log("非移动端")
}
/*window对象*/
function myOpen() {
window.open("hw.html","newwindow","width=200,height=200")
}
/*只能关闭被打开的窗口*/
function myClose() {
window.close();
}
</script>
</body>
<body>
<button onclick="changeColor()">改变颜色</button>
<button onclick="myTimeout()">500毫秒之后再执行改变颜色</button>
<button onclick="myClearTimeOut()">清除setTimeout</button>
<div id="box"></div>
<script>
let box=document.getElementById("box");
let timeout;
//直接改色
function changeColor() {
box.style.backgroundColor="#ef0254"
}
//500ms再改色
function myTimeout() {
/*setTimeout(要执行的函数，延迟时间-毫秒)*/
timeout=window.setTimeout(changeColor,2000);
}
//清除timeout
function myClearTimeOut() {
//clearTimeout(要清除的定时器)
clearTimeout(timeout)
}
</script>
</body>
<body>
<button onclick="changeSize()">改变宽度，宽度每次+20</button>
<button onclick="myInterval()">重复执行changeSize</button>
<button onclick="myClearInterval()">清除setInterval</button>
<div id="box"></div>
<script>
let box=document.getElementById("box");
let interval;
function changeSize() {
//console.log(box.style.width);
if(box.style.width=="")box.style.width="200px";
// console.log(box.style.width);
box.style.width=(parseInt(box.style.width)+20)+"px"
}
//重复执行
function myInterval() {
//setInterval(函数，毫秒)
interval=setInterval(changeSize,500);
}
//清除重复调用
function myClearInterval() {
clearInterval(interval);
}
</script>
</body>
<body>
<header id="top"></header>
<div></div>
<input type="button" value="Back" onclick="setTop()">
<!--<a href="#top">回到顶部</a>-->
<button onclick="ts()">测试</button>
<script>
//获取滚动条当前高度
//alert(document.documentElement.scrollTop); //DOM获取
// alert(window.scrollY); //BOM获取方法，只读，不可设置
function ts() {
window.scrollTo(0,50);//BOM设置方法。
// document.documentElement.scrollTop=50;
}
//直接跳回顶部
// function setTop() {
// document.documentElement.scrollTop=0;
// }
//缓慢滑动到顶部
let scrollInter;
function backTop() {
// if(document.documentElement.scrollTop<=0){
if(window.scrollY<=0){
clearInterval(scrollInter)
}else{
// document.documentElement.scrollTop=document.documentElement.scrollTop-20;
window.scrollTo(0,window.scrollY-20)
}
}
function setTop() {
scrollInter=setInterval(backTop,20);
}
</script>
</body>
<body>
<!--简单调用-->
<!--<div>-->
<!--<input type="button" value="打印" onclick="myPrint()">-->
<!--</div>-->
<!--分页打印-->
<div>
<input type="button" value="打印" onclick="myPrint()">
</div>
<div id="page1">
<!--page-break-after: always 在元素后插入分页符，实现分页-->
<table width="100%" border="0" cellpadding="0" cellspacing="0" style="page-break-after: always">
<tr>
<td>第一页打印内容</td>
</tr>
</table>
</div>
<div id="page2">
<table width="100%" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td>第二页打印内容</td>
</tr>
</table>
</div>
<script>
/*简单调用*/
// function myPrint() {
// window.print();
// }
/*分页打印*/
function myPrint() {
let printStr="<html><head><meta http-equiv='Content-Type' content='text/html;charset=utf-8'></head><body>";
let content="";
//获取打印的页面内容
let str=document.getElementById("page1").innerHTML;
content=content+str;
str=document.getElementById("page2").innerHTML;
content=content+str;
// console.log(content);
printStr=printStr+content+"</body></html>";
console.log(printStr);
let pwin=window.open("print.html","print");
pwin.document.write(printStr);
pwin.document.close(); //必须
pwin.print();
}
</script>```JS基础知识总结
©著作权归作者所有,转载或内容合作请联系作者
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
平台声明：文章内容（如有图片或视频亦包括在内）由作者上传并发布，文章内容仅代表作者本人观点，简书系信息发布平台，仅提供信息存储服务。
