☆getElementsByClassName getElementsByClassName() 方法返回文档中所有指定类名的元素集合，作为 NodeList 对象。
<button id="btn" class="btnlist" name="btninfo">按钮</button> var btn=document.getElementsByClassName("btnlist"); console.log(btn[0]);★getElementsByName getElementsByName() 方法可返回带有指定名称的对象的集合。
<button id="btn1" class="btnlist" name="btninfo">按钮</button> var btn2=document.getElementById("btn"); console.log(btn2);☆getElementById getElementById() 方法可返回对拥有指定 ID 的第一个对象的引用。
var btn2=document.getElementById("btn"); console.log(btn2);★ getElementsByTagName getElementsByTagName() 方法可返回带有指定标签名的对象的集合。
<button id="btn" class="btnlist" name="btninfo">按钮</button> var btn3=document.getElementsByTagName("button"); console.log(btn3[0]); <html> <head> <script type="text/javascript"> function getElements() { var x=document.getElementsByTagName("input"); alert(x.length); } </script> </head> <body> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <input name="myInput" type="text" size="20" /><br /> <br /> <input type="button" onclick="getElements()" value="How many input elements?" /> </body> </html>☆querySelector querySelector() 方法返回文档中匹配指定 CSS 选择器的一个元素。
var btn4=document.querySelector(".btnlist"); console.log(btn4);★querySelectorAll querySelectorAll() 方法返回文档中匹配指定 CSS 选择器的所有元素，返回 NodeList 对象。
var btn5=document.querySelectorAll("#btn"); console.log(btn5);☆parseFloat() parseFloat() 函数可解析一个字符串，并返回一个浮点数。
<script> document.write(parseFloat("10") + "<br>"); document.write(parseFloat("10.33") + "<br>"); document.write(parseFloat("34 45 66") + "<br>"); document.write(parseFloat(" 60 ") + "<br>"); document.write(parseFloat("40 years") + "<br>"); document.write(parseFloat("He was 40") + "<br>"); </script>运行结果 10 10.33 34 60 40 NaN ★parseInt() parseInt() 函数可解析一个字符串，并返回一个整数。
//我们将使用 parseInt() 来解析不同的字符串 document.write(parseInt("10") + "<br>"); document.write(parseInt("10.33") + "<br>"); document.write(parseInt("34 45 66") + "<br>"); document.write(parseInt(" 60 ") + "<br>"); document.write(parseInt("40 years") + "<br>"); document.write(parseInt("He was 40") + "<br>"); document.write("<br>"); document.write(parseInt("10",10)+ "<br>"); document.write(parseInt("010")+ "<br>"); document.write(parseInt("10",8)+ "<br>"); document.write(parseInt("0x10")+ "<br>"); document.write(parseInt("10",16)+ "<br>");运行结果 10 10 34 60 40 NaN
10 10 8 16 16 ☆charAt() charAt()方法可返回指定位置的字符。
<script type="text/javascript"> var str="Hello world!" document.write(str.charAt(1)) </script>运行结果 e 将返回位置1的字符 ★toUpperCase toUpperCase() 方法用于把字符串转换为大写。
<script type="text/javascript"> var str="Hello World!" document.write(str.toUpperCase()) </script>☆substr() substr() 方法可在字符串中抽取从 start 下标开始的指定数目的字符。
<script type="text/javascript"> var str="Hello world!" document.write(str.substr(3)) </script>输出 lo world!
<script type="text/javascript"> var str="Hello world!" document.write(str.substr(3,7)) </script>输出 lo worl ★splice() splice() 方法向/从数组中添加/删除项目，然后返回被删除的项目。
//在本例中，我们将创建一个新数组，并向其添加一个元素： <script type="text/javascript"> var arr = new Array(6) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" arr[3] = "James" arr[4] = "Adrew" arr[5] = "Martin" document.write(arr + "<br />") arr.splice(2,0,"William") document.write(arr + "<br />") </script>输出 George,John,Thomas,James,Adrew,Martin George,John,William,Thomas,James,Adrew,Martin ☆push() push() 方法可向数组的末尾添加一个或多个元素，并返回新的长度。
//在本例中，我们将创建一个数组，并通过添加一个元素来改变其长度： <script type="text/javascript"> var arr = new Array(3) arr[0] = "George" arr[1] = "John" arr[2] = "Thomas" document.write(arr + "<br />") document.write(arr.push("James") + "<br />") document.write(arr) </script>输出 George,John,Thomas 4 George,John,Thomas,James
★
pageX -= (block.offsetLeft + parseInt(ceng.style.width) / 2);获取当前元素的偏移量 offsetLeft 左偏移 offsetTop 上偏移 ☆parseInt(ceng.style.width) parselint只取数值不取单位 取该值的时候 width应为行内元素 把style中的width的设置值挪到 行内（跟class名同行） ★
var bigleft = parseInt(this.style.width) - parseInt(ceng.style.width); pageX = pageX <= 0 ? 0 : (pageX >= bigleft) ? bigleft : pageX;判断当pageX小于等于0时令pageX取0 判断当pageX大于于等于0时令pageX取bigleft ☆
middleblock.onmouseenter = function () {}onmouseenter 事件在鼠标指针移动到元素上时触发
middleblock.onmouseleave = function () {}onmouseenter 事件在鼠标指针离开元素上时触发 ★自定义属性
<style> background-image: url("./img/big1.jpg"); </style> <div class="smalllist" data-middle="middle1.jpg" data-big="big1.jpg"> <img src="./img/small1.jpg" alt=""/> </div> <script> //获取当前元素的自定义属性 middleimage.src = "./img/" + this.getAttribute("data-middle"); //当图片设置为某块的背景图时的获取方式 bigblock.style.backgroundImage = "url(./img/" + this.getAttribute("data-big") + ")";☆NaN not a number 用来判断输入的是数字还是符号 ★innerHTML innerHTML属性可以设置或者返回指定元素的HTML内容
if (this.innerHTML != ".") { txtval.value += this.innerHTML; }☆ 关于script计算器的代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } table { border: 1px solid black; width: 300px; margin: auto; border-collapse: collapse; } td { width: 75px; border: 1px solid black; } td > input { width: 98.5%; height: 40px; text-align: right; font-size: 20px; outline: none; } td > button { width: 100%; height: 40px; font-size: 17px; } </style> </head> <body> <table> <tr><td colspan="4"><input class="text" type="text" value="0"/></td></tr> <!-- value=0 屏幕默认值为0--> <tr> <td colspan="2"><button class="btn">del</button></td> <td colspan="2"><button class="btn">c</button></td> </tr> <tr> <td><button class="btn">7</button></td> <td><button class="btn">8</button></td> <td><button class="btn">9</button></td> <td><button class="btn">*</button></td> </tr> <tr> <td><button class="btn">4</button></td> <td><button class="btn">5</button></td> <td><button class="btn">6</button></td> <td><button class="btn">/</button></td> </tr> <tr> <td><button class="btn">1</button></td> <td><button class="btn">2</button></td> <td><button class="btn">3</button></td> <td><button class="btn">-</button></td> </tr> <tr> <td><button class="btn">0</button></td> <td><button class="btn">.</button></td> <td><button class="btn">+</button></td> <td><button class="btn">=</button></td> </tr> </table> <script> /* * 1.获取所有的按钮 * 2.点击的按钮 值给到文本框 * 3.区分符号数字点 * 4.处理屏幕上显示值的问题 * 5.按符号+ - * / 清屏 * */ var btnlist = document.getElementsByClassName("btn"); // 获取文本框 文本框名 txtval 取集合里第0个 var txtval = document.getElementsByClassName("text")[0]; var res = []; // 用空数组 存储 输入的值 for (var i = 0; i < btnlist.length; i++) { btnlist[i].onclick =addclick; function addclick() { /*标签的文本值 innerHTML innerText */ if (!isNaN(this.innerHTML) || this.innerHTML == ".") // 如果是 数字和点的时候可以上屏幕 ||或者 { if (txtval.value != "0") // 字符串“0” // txtval.value获取值 当 value值不等于0的时候 { if (txtval.value.indexOf(".") != -1) // indexof检测当前字符是否出现过 不等于-1 点已经出现过 { if (this.innerHTML != ".") // 如果当前按的不是点 就拼接上去 { txtval.value += this.innerHTML; // +=拼接 不然只可以打一个数字 } } else // 没有点 { txtval.value += this.innerHTML; } } else // 当value 值等于0的时候 { if (this.innerHTML == ".") // 如果当前输入的值是点 { txtval.value = "0" + this.innerHTML; // 则输出 0+点 即0.几 } else { txtval.value = this.innerHTML; // value的值等于0的时候 直接给值 覆盖 } } } else { //非数字 switch (this.innerHTML) { case "+": save(this); break; case "-": save(this); break; case "*": save(this); break; case "/": save(this); break; case "=": res.push(txtval.value); //计算表达式 //js里面运算表达式的 eval() // res.join("")数组转化为表达式 // txtval.value = eval(res.join("")); // 把得到的值给value console.log(res); var result=eval(res.join("")); if(result="Infinity"){ removeroradd("remove"); } txtval.value=eval(res.join(""))=="Infinity"?"除数不能为0":eval(res.join("")); // 清空数组 res=[]; break; case"del": save(this); break; case"c": txtval.value = "0"; res=[]; removeroradd("add"); break; } } } } //计算的方法 function save(obj) { if(!isfuhao){ res[res.length-1]=obj.innerHTML; } else{ res.push(txtval.value);// 存储值 res.push(obj.innerHTML);// 存储运算符 // 不能写 this.innerHTML 函数中的当前对象是window 用 this 传给 function txtval.value = "0";// 按符号 清0 isfuhao=false; } } //关于C键清空的操作 function removeroradd(r){ for (var i = 0; i < btnlist.length; i++) { if (r == "add") { btnlist[i].onclick = addclick; } else { if (btnlist[i].innerHTML != "c") { btnlist[i].onclick = null; } } } } </script> </body> </html>★关于放大镜的代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { margin: 0; padding: 0; } .block { width: 350px; height: 510px; margin: auto; position: relative; } .middle { position: relative; border: 1px solid silver; overflow: hidden; } .small{ position: relative; width: 350px; height: 110px; text-align: center; /*background-color: red;*/ } .smalllist{ display: inline-block; /*background-color: red;*/ border: 2px solid transparent; width: 54px; height: 55px; margin: 10px 0px; } .hover_ceng { position: absolute; width: 220px; height: 250px; background: url("./img/bg.png"); background-size: 4px 4px; z-index: 1; display: none; } .bigblock { position: absolute; left: 350px; top: 0; width: 350px; height: 400px; border: 1px solid silver; background-repeat: no-repeat; display: none; background-image: url("./img/big1.jpg"); } .small > span { position: absolute; top: 15px; display: block; width: 20px; height: 50px; background: #d9d9d9; color: #717171; font-size: 20px; line-height: 50px; cursor: pointer; } .small > span:nth-child(1) { left: 0; } .small > span:nth-child(3) { right: 0; } .list { display: inline-block; width: 250px; text-align: left; overflow: hidden; } .list > ul { width: 500px; height: auto; overflow: hidden; transition: all .5s linear; } .list > ul > li { width: 250px; float: left; list-style: none; } </style> </head> <body> <div class="block"> <div class="middle" style="width: 350px;height: 400px;"> <div class="hover_ceng"style="width: 153.508px;height: 200px;"></div> <img id="middleimg" src="./img/middle1.jpg" width="100%" height="100%" alt=""/> </div> <div class="small"> <span class="leftbtn"><</span> <div class="list"> <ul class="ulmenu"> <li> <div class="smalllist" data-middle="middle1.jpg" data-big="big1.jpg"><img src="./img/small1.jpg" width="100%" height="100%" alt=""/></div> <div class="smalllist" data-middle="middle2.jpg" data-big="big1.jpg"><img src="./img/small2.jpg" width="100%" height="100%" alt=""/></div> <div class="smalllist" data-middle="middle3.jpg" data-big="big1.jpg"><img src="./img/small3.jpg" width="100%" height="100%" alt=""/></div> <div class="smalllist" data-middle="middle4.jpg" data-big="big1.jpg"><img src="./img/small4.jpg" width="100%" height="100%" alt=""/></div> </li> <li> <div class="smalllist" data-middle="middle1.jpg" data-big="big1.jpg"><img src="./img/small1.jpg" width="100%" height="100%" alt=""/></div> <div class="smalllist" data-middle="middle2.jpg" data-big="big1.jpg"><img src="./img/small2.jpg" width="100%" height="100%" alt=""/></div> <div class="smalllist" data-middle="middle3.jpg" data-big="big1.jpg"><img src="./img/small3.jpg" width="100%" height="100%" alt=""/></div> <div class="smalllist" data-middle="middle4.jpg" data-big="big1.jpg"><img src="./img/small4.jpg" width="100%" height="100%" alt=""/></div> </li> </ul> </div> <span class="rightbtn">></span> </div> <div class="bigblock"> </div> </div> <script> var smallblock=document.getElementsByClassName("smalllist"); var middleimage = document.getElementById("middleimg"); var middleblock = document.getElementsByClassName("middle")[0]; var ceng=document.getElementsByClassName("hover_ceng")[0]; var block = document.getElementsByClassName("block")[0]; //大图 var bigblock = document.getElementsByClassName("bigblock")[0]; //左右滑动 var leftbtn = document.getElementsByClassName("leftbtn")[0]; var rightbtn = document.getElementsByClassName("rightbtn")[0]; var ulmenu = document.getElementsByClassName("ulmenu")[0]; var before=null; // 小图遇到鼠标变红 for(var i=0;i<smallblock.length;i++){ smallblock[i].onmouseenter=function(){ if(before)before.style.borderColor="transparent"; this.style.borderColor="red"; before=this; // this.getAttribute("data-middle","") middleimage.src = "./img/" + this.getAttribute("data-middle"); bigblock.style.backgroundImage = "url(./img/" + this.getAttribute("data-big") + ")"; } } // 小图对应中图 给元素添加自定义属性 middleblock.onmouseenter=function(){ this.style.cursor="move"; ceng.style.display="block"; bigblock.style.display = "block"; } middleblock.onmouseleave = function () { ceng.style.display = "none"; bigblock.style.display = "none"; } middleblock.onmousemove = function (e){ var pageX = e.pageX || e.clientX; var pageY = e.pageY || e.clientY; pageX -= (block.offsetLeft + parseInt(ceng.style.width) / 2);// 把左边的数减去右边的数的值赋给左边的数 pageY -= (block.offsetTop + parseInt(ceng.style.height) / 2); var bigleft = parseInt(this.style.width) - parseInt(ceng.style.width); var bigtop = parseInt(this.style.height) - parseInt(ceng.style.height); pageX = pageX <= 0 ? 0 : (pageX >= bigleft) ? bigleft : pageX; pageY = pageY <= 0 ? 0 : (pageY >= bigtop) ? bigtop : pageY; ceng.style.left = pageX + "px"; ceng.style.top = pageY + "px"; bigblock.style.backgroundPosition = (-pageX * 2.28) + "px " + (-pageY * 2) + "px"; } leftbtn.onclick = function () { ulmenu.style.marginLeft = "0px"; } rightbtn.onclick = function () { ulmenu.style.marginLeft = "-250px"; } </script> </body> </html>