一、html使用js的三种方式
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> </title> </head> <!-- js的三种使用方式 --> <!-- 1、行间事件 --> <button type="button" id="btn" onclick="alert('python')">登录</button> <!-- 2、通过src引入外部js文件 --> <script type="text/javascript" src="new_file.js"> </script> <!-- 3、在script标签中写 --> <script type="text/javascript"> console.log("打印log") </script> <body> </body> </html>
练习
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js练习</title> </head> <body> <p id="demo" style="font-size: 30px;color: blue;">这是一个段落</p> <!-- 对事件的反应 --> <button onclick='alert("python")'>弹窗</button> <!-- onclick引用js方法 --> <button onclick="myFunction()">改变段落元素内容</button> <input id="text" type="text"> <button onclick="checkNumber()">请输入数字</button> <br> <img id="img" onclick="changeImg()" src="../img/123.jpg" style=" 300px;height: 300px;"> <script> // 直接写入 HTML 输出流 document.write("<h1>这是一个标题</h1>"); function myFunction() { x = document.getElementById("demo"); // 找到元素 x.innerHTML = "Hello JavaScript!"; // 改变内容 x.style.color = "red"; // 改变样式 } function changeImg() { x = document.getElementById("img"); if (x.src.match("123")) { // match匹配 x.src = "../img/444.jpg" } else { x.src = "../img/123.jpg" } } function checkNumber(){ x = document.getElementById("text").value;// 获取元素内容 if (x=="" || isNaN(x)){ // isNaN() 函数可确定值是否为非数字，不能判断纯空格 alert("不是数字") }else{ alert(x) } } </script> </body> </html>
二、语法学习
JavaScript数据类型：
值类型(基本类型)： 字符串（String）、数字(Number)、布尔(Boolean)、对空（Null）、未定义（Undefined）、Symbol。
引用数据类型： 对象(Object)、数组(Array)、函数(Function)。
注：Symbol 是 ES6 引入了一种新的原始数据类型，表示独一无二的值；数组属于对象
var e; function hanshu(){} console.log("数据类型:",typeof(1)) console.log("数据类型:",typeof("1")) console.log("数据类型:",typeof(true)) console.log("未赋值变量的数据类型:",typeof(e)) console.log("null的数据类型:",typeof(null)) console.log("数组数据类型:",typeof([])) console.log("对象的数据类型:",typeof({})) console.log("函数的数据类型:",typeof(hanshu)) console.log("Symbol的数据类型:",typeof(Symbol('id'))) // 数据类型: number // 数据类型: string // 数据类型: boolean // 未赋值变量的数据类型: undefined // null的数据类型: object // 数组数据类型: object // 对象的数据类型: object // 函数的数据类型: function // Symbol的数据类型: symbol
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> </head> <body> <script> // 一、变量和常量 // 1、var，可以跨代码块访问 // 2、let，块级作用域变量 // 3、const，常量，块级作用域访问（必须赋值，不可修改，） if (true) { var a = 1; let b = 2; const c = 3 } // 运行结果>> 测试变量常量访问范围： 1 undefined undefined console.log("测试变量常量访问范围：", a, b, c); // 二、数据类型 // 1、通过typeof()查看变量的数据类型 // 2、可以先申明，再赋值；也可以申明的时候赋值；也可以同时申明多个变量并赋值 var a = 1, b = "python", c = true, d = null, e, f = [1, 2, "jjjj"]; // 求数组长度length console.log(f.length); // push添加数组元素（index在最后），pop删除最后一个元素 f.push("qaz"); f.push("ppp"); f.pop(); // 通过下标取值 console.log(f[0]); // 三、运算符 // 算术运算符：+（加）、 -（减） *（乘）、 /（除）、 %（求余） // 赋值运算符：= 、+= 、-= 、/= 、%= 、++ 、-- // 比较运算符：== 、=== 、> 、>= 、< 、<= 、！= // 逻辑运算符：&& 、||、！ // 下面重新赋值abc，依然正常运行，说明js是动态语言 var a = 1, b = "1", c = 1; console.log(a == b); // 虽然数据类型不同，但结果为true console.log(a === b); // 数据类型不同 // 四、条件语句 // if else var a = 200; if (a > 200) { console.log("a大于200"); } else if (a = 200) { console.log("a等于200"); } else { console.log("a小于200"); } // 五、函数 function work(a, b) { return a + b } // 六、箭头函数(匿名函数) (a, b) => a + b; // 七、对象 // 下面是两种创建方式 var objA = new Object; // 类似pyhton字典，但是key不需要引号 var objB = { name: 11, age: 22 }; // log可以使用printf风格的占位符。不过，占位符的种类比较少，只支持字符（%s）、整数（%d或%i）、浮点数（%f）和对象（%o）四种 console.log("年龄是：%d==测试==", objB.age); console.log("年龄是：", objB["age"], "==测试=="); // 对象中定义方法 var methA = { name: "小王", fun: function(a, b) { return a + b } } console.log(methA.fun(1, 3)); // 八、循环 // while var i = 0; while (i < 5) { console.log("while循环", i); i++; } // for var list = [11, 22, 33, 44, 55, 66]; var objF = { name: "张三", age: 55 }; // 吐槽：封号、括号、花括号都是java的写法，但语法又和python相似 for (i in list) { // i是索引 console.log("for循环", i, list[i]); } // 循环对象，i是key for (i in objF) { console.log("循环对象：", i, objF[i]); } // 类似java的循环写法（三条语句：循环前执行、执行条件、每次循环后执行） for (var i = 0; i < 5; i++) { console.log("类似java循环的写法：", i) } // 九、数据遍历 var arr = [11, 22, 33, 44] console.log("测试数据：", arr); // 1、forEach，不知道为啥3个参数依次是：数组元素、元素下标、数组 arr.forEach(function(item, index, array) { // 可以批量修改数组中的数据 array[index] = item * 10 console.log("打印forEach的三个参数", item, index, array); }) // 2、filter，不知道为啥2个参数依次是：数组元素、元素下标 var res = arr.filter((item, index, array) => { console.log("好像filter的参数和forEach一致", item, index, array); return item > 300 }) console.log(res); // 3、find ，找到第一个符合条件的数据，没找到则是返回undefined var find = arr.find(function(item) { // return + 筛选条件，不知道为啥可以这么写（包括上面的filter），注释是我认为正确的写法 return item == 220 }) // var find = arr.find(function(item) { // if (item == 11) { // return item // } // }) console.log("find查找第一个符合条件的数据：", find); // 4、findIndex ，根据条件查找数据的索引 var findIndex = arr.findIndex(function(item) { // return + 筛选条件，不知道为啥可以这么写（包括上面的filter），注释是我认为正确的写法 return item == 220 }) console.log("find查找第一个符合条件的数据的索引：", findIndex); // 十、箭头函数的使用 var obj = { name: "小王", fun1: function(a, b) { console.log("fun1函数"); return a + b }, fun2: function() { // this，对象本身 console.log("fun2函数"); console.log(this); console.log("fun2调用fun1：", this.fun1(1, 2)); console.log("fun2调用fun3：", this.fun3()); }, fun3: () => { // this，代表的是外层对象 console.log(this); console.log("fun3函数"); return "fun3函数" } } obj.fun2(); </script> </body> </html>
三、操作页面
html代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>js修改元素</title> <style type="text/css"> .title { color: red; font-size: 30px; } </style> <script type="text/javascript" src="new_file.js"> </script> </head> <body> <div id="box1" class="boxClass">这个是最开始的文本</div> <div id="box2"> <a href="">百度</a> </div> <button type="button" id="btn">按钮</button> </body> </html>
js代码
// 因为html是直接从上往下加载的，而我们把js引用放在head中，导致加载的时候找不到元素 // 所以我们需要等window所有内容加载完毕，再去执行js window.onload = function() { // 一、获取元素 box1 = document.getElementById("box1"); box2 = document.getElementsByClassName("boxClass"); box3 = document.querySelector("#box2 a") console.log(box1); console.log(box2); // 这个打印出来的是一个HTMLCollection对象 console.log(box3); // 二、修改元素文本 // innerText document.querySelector("#box1").innerText = "这个是修改后的文本" // innerHTML document.querySelector("#box1").innerHTML = "<h4>修改为标题标签</h4>" // js修改元素的属性 document.querySelector("#box2 a").href = "http://www.baidu.com"; document.querySelector("#box2 a").className = "title"; document.querySelector("#box2 a").style.color = "blue" // 注意:font-size这种多单词组成的样式，需要小驼峰命名--> fontSize document.querySelector("#box2 a").style.fontSize = "50px" // 给元素绑定事件 document.querySelector("#btn").onclick = function() { document.querySelector("#box2 a").style.color = "red" } }