1、Javascript介绍
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> <script> //如果script里面涉及到操作后面的元素，而又非得把script放在前面的话，需要加上： window.onload = function () { console.log("我是head里面的4"); //这里再写代码（意思是：当整个页面加载完成之后，再执行这里的代码） }//一个页面中只能出现一次window.onload </script> </head> <body> <div></div> <p></p> <script src="index.js"></script> <script> /* 1.JavaScript 是一种脚本语言，是一种动态类型、弱类型 2.JavaScript通常用来操作HTML页面的 html骨架(页面结构)，css是样式(元素大小、颜色、位置、隐藏或显示等)，js是行为(部分动画效果、页面与用户交互等) JS代码写在哪里： script标签里面 写在外部.js后缀文件里面，通过script标签引入 写在标签里面 注意：在引入js文件的script里面，一定不能再写js代码 标签里面写js代码一般情况下不推荐(指行内的样式) script标签的位置： head或者body里面 要注意是否需要加上window.onload 如果说没有什么特别的要求，一般script标签放在body结束之前 */ /* 注释里面是没有要求的 1.严格区分大小写 alert才是js本身自带的，Alert不是自带的 2.语句字符必须是英文符号 3.某些完整的语句后面需要分号 4.引号里面代表字符串，所以不需要满足上面的条件 */ /* 多行注释 */ //单行注释 alert("调试代码");//弹窗 用来调试代码 console.log("调试代码");//打印 用来调试代码 </script> </body> </html>
2、元素获取
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } #box{ width: 100px; height: 100px; background: #c4ff7b; line-height: 100px; text-align: center; } </style> </head> <body> <div id="box">666</div> <p class="box1">1</p> <p class="box1">2</p> <p class="box1">3</p> <p class="box1">4</p> <div id="wrap"> <i class="box2">iiiii1</i> <p class="box3"> <i>iiiiii2</i> </p> </div> <script> /* 那么JS如何操作页面： 其实，要操作页面，就是操作标签，JS要操作标签，就要先获取标签 js获取独有标签 document.title document.head document.body 其他标签的获取，id前面必须是document,其他的前面可以是某个元素(id,document)，但不能是集合 通过id获取元素， document.getElementById() 通过className获取元素(不支持IE8及以下) .getElementsByClassName() 通过标签名获取元素 .getElementsByTagName() 通过选择器的写法获取元素（不兼容IE7及以下） .querySelector() .querySelectorAll() 通过name值获取 document.getElementsByName（） */ document.title = "666"; // 修改别的标签的内容，得用innerHTML(会解析标签)，innerText（不会解析标签） document.body.innerHTML = "888"; // 获取的是确切的某个元素，可以直接操作这个元素 var oBox = document.getElementById("box"); console.log(oBox); oBox.innerHTML += "888"; oBox.innerHTML = "<h1>888</h1>"; oBox.innerText = "<h1>888</h1>" // 获取的是很多元素的集合，设置操作的时候要通过下标（索引、序号）拿到对应的某一个 var aP = document.getElementsByClassName("box1"); aP[0].innerHTML = "666"; console.log(aP.length); var aP = document.getElementsByTagName("p"); aP[0].innerHTML = "666"; // 获取第一个对应的元素 var oI = document.querySelector("#wrap i"); oI.innerHTML += "888"; var oI = document.querySelectorAll("#wrap i"); console.log(oI.length); oI[0].innerHTML += "999"; /* 定义变量规则： 1.不能使用关键字或者保留字,（js里面已经赋予他有意义的词，或者留着备用的词） 2.只能包含 数字 字母 $ _ 并且不能以数字开头 3.严格区分大小写 4.尽量见名知意 用 ，号可以让一个var定义多个变量 var变量时并不要求立马赋值 var a, b, c; */ </script> </body> </html>
3、Javascript鼠标事件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } div{ width: 50px; height: 50px; background: #b864ff; } </style> </head> <body> <div id="box"></div> <script> /* 所谓事件，是指 JavaScript 捕获到用户的操作，并做出正确的响应。 在事件函数里面，有一个关键字this，代表当前触发事件的这个元素 事件：用户的操作 元素.事件 = 函数； 鼠标事件： 左键单击 onclick 左键双击 ondblclick 鼠标移入 onmouseover/onmouseenter *** 鼠标移出 onmouseout/onmouseleave *** */ var oBox = document.getElementById("box"); oBox.onclick = function () { alert("我被点击了"); }; oBox.onmouseenter = function () { console.log("鼠标移入"); this.innerHTML = "<h1>1</h1>"; // oBox.innerHTML = "<h1>1</h1>"; //与上一句效果一样innerHTML会解析标签 }; oBox.onmouseleave = function () { console.log("鼠标移出"); } </script> </body> </html>
4、Javascript操作标签属性
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <a href="http://www.baidu.com" id="box" class="box" target="_black" tz="xp">百度</a> <script> /* js操作元素的标签属性： 规范的标签属性： . 符号直接操作（可读可写） 不规范（自定义）的标签属性： 获取：.getAttribute() 设置：.setAttribute() 移除：.removeAttribute() 注意： 所有的 路径、颜色 获取的结果不一定是你写的内容 通过id获取的元素赋值给变量后，假设修改了id，这个变量还是表示这个元素 自定义标签属性的操作方式，同样可以操作符合规范的标签属性 */ var oA = document.getElementById("box"); // alert(oA.target);//可读 // oA.target = "_self";//可写 // alert(oA.className);//class属性 要用className // oA.className = ""; // alert(oA.getAttribute("tz")); // oA.setAttribute("tz","xxp"); // oA.setAttribute("py","web"); // oA.removeAttribute("class"); // alert(oA.href) //点操作可以直接修改 oA.id = "wrap"; oA.target = "_self"; </script> </body> </html>
5、Javascript操作样式
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } div{ width: 50px; height: 50px; background: #b864ff; } </style> </head> <body> <div id="box"></div> <script> /* 行内样式标签属性：大部分情况下，js都是通过行内样式来达到修改样式的目的 */ //当我们需要修改单个属性的时候，我们一般都是直接.操作去修改元素的行内样式 var oBox = document.getElementById("box"); // oBox.style.width = "300px"; // oBox.style.height = "300px"; // oBox.style.cssText = "width: 300px;height: 300px;background: red;" // 操作复合属性时，要注意用驼峰写法（去掉-号，-号后面的第一个单词大写） // oBox.style.marginLeft = "20px"; // oBox.style["margin-top"] = "50px"; oBox.onmouseenter = function () { this.style.background = "red"; this.style.width = "300px"; this.style.height = "300px"; } </script> </body> </html>
6、Javascript数据类型
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> * { margin: 0; padding: 0; } </style> </head> <body> <div id="box"></div> <script> /* js六大数据类型 number——数字 在js里面的小数和整数统一都是数字 -2^53 -- 2^53 超出范围之后精度就会不准确 string——字符串 boolean——布尔值 true false null undefined——未定义 一个变量声明之后没有赋值就是undefined object——对象 在js里面null属于对象类型，但是它不具有很多对象的共性，所以很多资料将它归为单独一类数据类型null */ // var a = 0.55; //number // var a = "555"; //string // var a = true;//boolean true || false // var a; // var a = function () { // alert(1) // };函数不属于六大数据类型，属于alert(typeof a);弹出function // var a = [];//object // var a = {};//object var a = document.getElementById("box"); alert(typeof a); </script> </body> </html>