基础介绍
https://blog.csdn.net/weixin_45525272/article/details/107671639
common.js
function my$(id) { return document.getElementById(id); } //设置任意的标签中间的任意文本内容 function setInnerText(element,text) { //判断浏览器是否支持这个属性 if(typeof element.textContent =="undefined"){//不支持 element.innerText=text; }else{//支持这个属性 element.textContent=text; } } //获取任意标签中间的文本内容 function getInnerText(element) { if(typeof element.textContent=="undefined"){ return element.innerText; }else{ return element.textContent; } }
案例：图册
<!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <style> body { font-family: "Helvetica", "Arial", serif; color: #333; background-color: #ccc; margin: 100px 20%; } h1 { color: #333; /*transparent是全透明黑色(black)的速记法，即一个类似rgba(0,0,0,0)这样的值。*/ background-color:transparent; font-weight: bold; text-decoration: none; } ul { padding: 0px; } li { float: left; padding: 1em; list-style-type: none ; } #imagegallery { list-style: none; } #imagegallery li { margin: 0px 20px 20px 0px; padding: 0px; display: inline; } #imagegallery li a img { border: 0; } </style> </head> <body> <h2>我的画廊</h2> <ul id="imagegallery"> <li><a href="image/1.jpg" title=“照片1”><img src="image/1.jpg-small.jpg" alt="加载错误" width="100"></a></li> <li><a href="image/2.jpg" title=“照片2”><img src="image/2.jpg-small.jpg" alt="加载错误" width="100"></a></li> <li><a href="image/3.jpg" title=“照片3”><img src="image/3.jpg-small.jpg" alt="加载错误" width="100"></a></li> <li><a href="image/3.jpg" title=“照片4”><img src="image/3.jpg-small.jpg" alt="加载错误" width="100"></a></li> </ul> <!--清除同行元素，不允许其bai它元素与之在一行内。--> <div style="clear:both"></div> <img id="image" src="images/placeholder.png" alt="" width="450"/> <p id="des">选择一个图片</p> <script src="common.js"></script> <script> //点击a标签,把a标签中的href的属性值给id为image的src属性 //把a的title属性的值给id为des的p标签赋值 // 获取所有a标签 var aObjs=my$("imagegallery").getElementsByTagName("a"); // 循环遍历 for (var i=0;i<aObjs.length;i++){ aObjs[i].οnclick=function (ev) { my$("image").src=this.href; //为p标签赋值 my$("des").innerText=this.title; //阻止超链接默认的跳转 return false; } } </body> </html>
案例：二维码的指针悬浮显示与隐藏
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> .nodeSmall { width: 50px; height: 50px; background: url(images/bgs.png) no-repeat -159px -51px; position: fixed; right: 10px; top: 10%; } .erweima { position: absolute; top: 0; left: -150px; } .nodeSmall a { display: block; width: 50px; height: 50px; } .hide { display: none; } .show { display: block; } </style> </head> <body> <div class="nodeSmall" id="node_small"> <a href="#"></a><!--锚定--> <div class="erweima hide" id="er"> <img src="images/456.png" alt=""/> </div> </div> <script src="common.js"></script> <script> //获取鼠标要进入的a标签 //先获取最外面的div var aObj=my$("node_small").getElementsByTagName("a")[0]; //为a注册鼠标进入 aObj.onmouseover=function () { my$("er").className="erweima show"; }; //为a注册鼠标离开 aObj.onmouseout=function () { my$("er").className="erweima hide"; }; </script> </body> </html>
案例：搜索框模拟
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <style> input { color: gray; } </style> </head> <body> <input type="text" value="请输入搜索内容" id="txt"/> <script src="common.js"></script> <script> //获取文本框 //注册获取焦点的事件 my$("txt").onfocus = function () { //判断文本框的内容是不是默认的内容 if (this.value == "请输入搜索内容") { this.value = "";//清空文本框 this.style.color = "black"; } }; //注册失去焦点的事件 my$("txt").onblur = function () { if (this.value.length == 0) { this.value = "请输入搜索内容"; this.style.color = "gray"; } }; </script> </body> </html>
案例：获取与设置元素文本值
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>$永远的24k纯帅$</title> </head> <body> <!--<input type="text" value="文本框" id="txt"/>--> <input type="button" value="按钮" id="btn"/> <p>这是p</p> <script src="common.js"></script> <script> my$("btn").onclick=function () { console.log(document.getElementsByTagName("p")[0].innerText); }; // my$("txt").οnblur=function () { // this.value="哈哈"; // console.log(this.id); // }; </script> </body> </html>
