首页/编程百科

js篇--学习web-api第二天（DOM的学习）

 2023-09-05 阅读 55 评论 0

摘要：案例 1.点击按钮，禁用文本框 <input type="button" value="点击" id="btn"/> <input type="text" value="哈哈，我好帅啊！" id="txt"> <script>function my$

案例

1.点击按钮，禁用文本框

<input type="button" value="点击" id="btn"/>
<input type="text" value="哈哈，我好帅啊！" id="txt">
<script>function my$(id) {return document.getElementById(id);}my$("btn").onclick=function () {my$("txt").disabled=true;};
</script>

2.点击按钮，修改列表背景颜色

<input type="button" value="点击" id="btn"/>
<ul id="uu"><li>我是周杰伦</li><li>我是周杰伦</li><li>我是周杰伦</li><li>我是周杰伦</li><li>我是周杰伦</li>
</ul>
<script>function my$(id) {return document.getElementById(id);}my$("btn").onclick=function () {my$("uu").style.backgroundColor="yellow";};
</script>

3.阻止超链接跳转

<script>//点击超链接弹出对话框//阻止超链接的默认的跳转:return false
</script><!--&lt;!&ndash;第一种写法:&ndash;&gt;未能阻止-->
<a href="http://www.baidu.com" onclick=alert("我被点了"); return=false;>百度</a><!--第二种写法-->
<script>function f1() {alert("哇，好漂亮");return false;}
</script>
<a href="http://www.baidu.com" onclick="return f1()">百度</a><!--第三种写法:-->
<a href="http://www.baidu.com" id="ak">百度</a>
<script>document.getElementById("ak").onclick=function () {alert("哇，好神奇");return false;};
</script>

4.点击小图，切换大图

<a href="images/1.jpg" id="ak"><img src="images/1-small.jpg" alt=""></a>
<img src="" alt="" id="big">
<script>function my$(id) {return document.getElementById(id);}//点击小图,下面显示大图//点击超链接my$("ak").onclick=function () {my$("big").src=this.href;return false;};</script>

5.美女相册

<style type="text/css">body {font-family: "Helvetica", "Arial", serif;color: #333;background-color: #ccc;margin: 1em 10%;}h1 {color: #333;background-color: transparent;}a {color: #c60;background-color: transparent;font-weight: bold;text-decoration: none;}ul {padding: 0;}li {float: left;padding: 1em;list-style: 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="images/1.jpg" title="美女A"><img src="images/1-small.jpg" width="100" alt="美女1"/></a></li><li><a href="images/2.jpg" title="美女B"><img src="images/2-small.jpg" width="100" alt="美女2"/></a></li><li><a href="images/3.jpg" title="美女C"><img src="images/3-small.jpg" width="100" alt="美女3"/></a></li><li><a href="images/4.jpg" title="美女D"><img src="images/4-small.jpg" width="100" alt="美女4"/></a></li>
</ul>
<div style="clear:both"></div>
<!--显示大图的-->
<img id="image" src="images/placeholder.png" alt="" width="450"/>
<p id="des">选择一个图片</p><script>//点击a标签,把a标签中的href的属性值给id为image的src属性//把a的title属性的值给id为des的p标签赋值function my$(id) {return document.getElementById(id);}//从ul中标签获取获取所有的a标签var aObjs=my$("imagegallery").getElementsByTagName("a");//循环遍历所有的a标签for(var i=0;i<aObjs.length;i++){//为每个a标签注册点击事件aObjs[i].onclick=function () {//为id为image的标签的src赋值my$("image").src=this.href;//为p标签赋值my$("des").innerText=this.title;//阻止超链接默认的跳转return false;};}
</script></body>

6.列表隔行变色

<input type="button" value="隔行变色" id="btn"/>
<ul id="uu"><li>红旗</li><li>五菱宏光</li><li>奔驰</li><li>兰博基尼</li><li>哈弗</li><li>奥拓</li><li>奥迪</li><li>悍马</li>
</ul>
<script>function my$(id) {return document.getElementById(id);}//奇红偶黄//点击按钮//  my$("btn").onclick=function () {//      //获取所有的li标签//    var list=my$("uu").getElementsByTagName("li");//    for(var i=0;i<list.length;i++){//      if(i%2==0){//        //偶数//        list[i].style.backgroundColor="red";//      }else{//        //奇数//        list[i].style.backgroundColor="yellow";//      }//    }//  };my$("btn").onclick = function () {//获取所有的li标签var list = my$("uu").getElementsByTagName("li");for (var i = 0; i < list.length; i++) {list[i].style.backgroundColor = i % 2 == 0 ? "red" : "yellow";}};</script>

7.列表的高亮显示

ul><li>金士百</li><li>雪花</li><li>百威</li><li>燕京</li><li>青岛</li><li>崂山</li><li>珠江</li><li>华丹</li>
</ul>
<script>//鼠标进入和鼠标离开两个事件//获取所有的li标签var list = document.getElementsByTagName("li");for (var i = 0; i < list.length; i++) {//为li注册鼠标进入事件list[i].onmouseover = function () {this.style.backgroundColor = "yellow";};//为li注册鼠标离开事件list[i].onmouseout = function () {//恢复到这个标签默认的颜色this.style.backgroundColor = "";};}</script>

8.显示和隐藏二维码

<!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: 40%;}.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>function my$(id) {return document.getElementById(id);}//获取鼠标要进入的a标签//先获取最外面的divvar 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>

9.根据name属性值获取元素

<input type="button" value="显示效果" id="btn"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name2"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name3"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<input type="text" value="您好" name="name1"/><br/>
<script>function my$(id) {return document.getElementById(id);}//点击按钮,改变所有name属性值为name1的文本框中的value属性值my$("btn").onclick=function () {//通过name属性值获取元素-------表单的标签var inputs=document.getElementsByName("name1");for(var i=0;i<inputs.length;i++){inputs[i].value="我很好";}};
</script>

10.根据类样式的名字获取元素

<style>div {width: 200px;height: 50px;background-color: green;margin-top: 10px;}.cls {background-color: yellow;}</style>
</head>
<body>
<p>这是一个p</p>
<p class="cls">这是另一个p</p>
<span class="cls">这是第一个span</span><br/>
<span>这是第二个span</span><br/>
<div class="cls">这是第一个div</div>
<div>这是第二个div</div>
<input type="button" value="显示效果" id="btn"/><br/>
<script>function my$(id) {return document.getElementById(id);}//点击按钮设置应用cls类样式的标签的背景颜色为红色//getElementsByClassName();------>h5的my$("btn").onclick = function () {//根据类样式的名字来获取元素var objs = document.getElementsByClassName("cls");for (var i = 0; i < objs.length; i++) {//设置每个元素的背景颜色objs[i].style.backgroundColor = "red";}};
</script>
</body>

11.根据选择器的方式获取元素

<style>.cls{background-color: red;}</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<p>这是一个p</p>
<p class="cls">这是一个p</p>
<span>这是一个span</span>
<span class="cls">这是一个span</span>
<script>//点击按钮弹出对话框//根据选择器的方式获取元素
// var btnObj= document.querySelector("#btn");
//  btnObj.onclick=function () {
//      alert("哈哈,我又变帅了");
//  };var objs=document.querySelectorAll(".cls");for(var i=0;i<objs.length;i++){objs[i].style.backgroundColor="green";}
</script>

12.总结：获取元素的方式

/*** 根据id属性的值获取元素,返回来的是一个元素对象* document.getElementById("id属性的值");** 根据标签名字获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象* document.getElementsByTagName("标签名字");** 下面的几个,有的浏览器不支持** 根据name属性的值获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象* document.getElementsByName("name属性的值")* 根据类样式的名字来获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象* document.getElementsByClassName("类样式的名字")* 根据选择器获取元素,返回来的是一个元素对象* document.querySelector("选择器的名字");** 根据选择器获取元素,返回来的是一个伪数组,里面保存了多个的DOM对象* document.querySelectorAll("选择器的名字")*** */

13.div的高亮显示

  <style>*{margin: 0;padding: 0;}div{width: 200px;height: 150px;background-color: green;float: left;margin-left: 10px;border: 2px solid green;}</style>
</head>
<body>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script>//获取所有的//divvar dvObjs=document.getElementsByTagName("div");for(var i=0;i<dvObjs.length;i++){//为每个div添加鼠标进入的事件dvObjs[i].onmouseover=function () {this.style.border="2px solid red";};//为每个div添加鼠标离开的事件dvObjs[i].onmouseout=function () {this.style.border="";};}
</script>
</body>

14.模拟搜索框

  <style>input {color: gray;}</style>
</head>
<body>
<input type="text" value="请输入搜索内容" id="txt"/>
<script>function my$(id) {return document.getElementById(id);}//获取文本框//注册获取焦点的事件my$("txt").onfocus = function () {//判断文本框的内容是不是默认的内容if (this.value == "请输入搜索内容") {this.value = "";//清空文本框this.style.color = "black";}};//注册失去焦点的事件my$("txt").onblur = function () {
//    if (this.value == "") {
//      this.value = "请输入搜索内容";
//      this.style.color = "gray";
//    }if (this.value.length == 0) {this.value = "请输入搜索内容";this.style.color = "gray";}};
</script>

15.验证文本框密码的长度

<input type="text" value="" id="txt"/>
<script>function my$(id) {return document.getElementById(id);}//获取文本框my$("txt").onblur=function () {//判断密码的长度if(this.value.length>=6&&this.value.length<=10){this.style.backgroundColor="red";}else{this.style.backgroundColor="green";}};
</script>

16.设置和获取文本框的值

<!--<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").onblur=function () {
//    this.value="哈哈";
//    console.log(this.id);
//  };
</script>

17.innerText和textContent以及兼容代码

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><style>div {width: 200px;height: 150px;border: 2px solid red;}</style>
</head>
<body><input type="button" value="设置值" id="btn"/>
<div id="dv">哦,太神奇了</div><script src="common.js"></script>
<script>//设置标签中的文本内容,应该使用textContent属性,谷歌,火狐支持,IE8不支持//设置标签中的文本内容,应该使用innerText属性,谷歌,火狐,IE8都支持//如果这个属性在浏览器中不支持,那么这个属性的类型是undefined//判断这个属性的类型 是不是undefined,就知道浏览器是否支持//兼容代码//设置任意的标签中间的任意文本内容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;}}//测试my$("btn").onclick=function () {//console.log(getInnerText(my$("dv")));setInnerText(my$("dv"),"哈哈,我又变帅了");};//点击按钮设置div中的文本内容//my$("btn").onclick = function () {//设置标签中间的文本内容,应该使用textContent属性//my$("dv").textContent="this is div标签";//my$("dv").innerText = "啊,这是div";//获取标签中间的文本内容//console.log(my$("dv").innerText);//console.log(my$("dv").textContent);
//  };</script>
</body>
</html>

17.innerText和innerHtml的区别

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><style>div{width: 300px;height: 200px;border: 2px dotted red;}</style>
</head>
<body>
<input type="button" value="显示效果" id="btn"/>
<input type="button" value="显示效果获取" id="btn2"/>
<div id="dv">这是div
<p>这是一个p</p>
</div>
<script src="common.js"></script>
<script>//总结:如果使用innerText主要是设置文本的,设置标签内容,是没有标签的效果的//总结:innerHTML是可以设置文本内容//总结:innerHTML主要的作用是在标签中设置新的html标签内容,是有标签效果的//总结:想要设置标签内容,使用innerHTML,想要设置文本内容,innerText或者textContent,或者innerHTML,推荐用innerHTML//获取的时候://innerText可以获取标签中间的文本内容,但是标签中如果还有标签,那么最里面的标签的文本内容也能获取.---获取不到标签的,文本可以获取//innerHTML才是真正的获取标签中间的所有内容my$("btn").onclick=function () {//my$("dv").innerText="哈哈";//设置文本//my$("dv").innerText="<p>这是一个p</p>";//设置html标签的代码//my$("dv").innerHTML="哈哈";//my$("dv").innerHTML="<p>这是一个p</p>";//设置Html标签的};//获取my$("btn2").onclick=function () {//可以获取标签中的文本内容//console.log(my$("dv").innerText);console.log(my$("dv").innerHTML);};//结论://如果想要(获取)标签及内容,使用innerHTML//如果想要设置标签,使用innerHTML//想要设置文本,用innerText,或者innerHTML,或者textContent</script>
</body>
</html>

18.自定义属性的引入–getAttribute

  <style>ul{list-style-type: none;cursor: pointer;}</style>
</head>
<body>
<ul id="uu"><li score="10">助教的数学成绩</li><li score="20">班主任的成绩</li><li score="30">小苏的成绩</li><li score="40">小杰老师成绩</li><li score="50">乔峰成绩</li>
</ul>
<script src="common.js"></script>
<script>//html标签中有没有什么自带的属性可以存储成绩的----没有//本身html标签没有这个属性,自己(程序员)添加的,----自定义属性---为了存储一些数据//在html标签中添加的自定义属性,如果想要获取这个属性的值,需要使用getAttribute("自定义属性的名字")才能获取这个属性的值//获取所有的li标签var list=document.getElementsByTagName("li");for(var i=0;i<list.length;i++){list[i].onclick=function () {//alert(this.score);//不能//可以alert(this.getAttribute("score"));};}
</script>

19.自定义属性设置和获取

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><style>ul{list-style-type: none;cursor: pointer;}</style>
</head>
<body>
<ul id="uu"><li>助教的数学成绩</li><li>班主任的成绩</li><li>小苏的成绩</li><li>小杰老师成绩</li><li>乔峰成绩</li>
</ul>
<script src="common.js"></script>
<script>//总结:设置自定义属性:setAttribute("属性的名字","属性的值");//获取自定义属性的值:getAttribute("属性的名字")//获取所有的li标签,然后为每个标签中动态的添加自定义属性和值//点击的时候获取该标签的自定义属性的值//根据id获取ul标签,并且或者该标签中所有的livar list=my$("uu").getElementsByTagName("li");//循环遍历for(var i=0;i<list.length;i++){//先为每个li添加自定义属性//list[i].score=(i+1)*10;//此方式,自定义属性在DOM对象上,不在标签中list[i].setAttribute("score",(i+1)*10);//点击每个li标签,显示对应的自定义属性值list[i].onclick=function(){alert(this.getAttribute("score"));};}</script></body>
</html>

20.移除某个元素的自定义属性

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>$永远的24k纯帅$</title><style>div{width: 200px;height: 100px;background-color: yellow;}.cls{background-color: green;}</style>
</head>
<body>
<input type="button" value="移除自定义属性" id="btn"/>
<div id="dv" score="10" class="cls"></div>
<script src="common.js"></script>
<script>//移除自定义属性:removeAttribute("属性的名字")//点击按钮移除元素的自定义属性my$("btn").onclick=function () {//my$("dv").removeAttribute("score");//移除元素的类样式//值没有了,但是属性还是有的//my$("dv").className="";//也可以移除元素的自带的属性my$("dv").removeAttribute("class");};
</script>
</body>
</html>

21.tab切换的实现

<!DOCTYPE html>
<html>
<head lang="en"><meta charset="UTF-8"><title></title><style>* {margin: 0;padding: 0;}ul {list-style-type: none;}.box {width: 400px;height: 300px;border: 1px solid #ccc;margin: 100px auto;overflow: hidden;}.hd {height: 45px;}.hd span {display: inline-block;width: 90px;background-color: pink;line-height: 45px;text-align: center;cursor: pointer;}.hd span.current {background-color: purple;}.bd li {height: 255px;background-color: purple;display: none;}.bd li.current {display: block;}</style></head>
<body>
<div class="box" id="box"><div class="hd"><span class="current">体育</span><span>娱乐</span><span>新闻</span><span>综合</span></div><div class="bd"><ul><li class="current">我是体育模块</li><li>我是娱乐模块</li><li>我是新闻模块</li><li>我是综合模块</li></ul></div>
</div><script>function my$(id) {return document.getElementById(id);}//获取最外面的divvar box=my$("box");//获取的是里面的第一个divvar hd=box.getElementsByTagName("div")[0];//获取的是里面的第二个divvar bd=box.getElementsByTagName("div")[1];//获取所有的li标签var list=bd.getElementsByTagName("li");//=================================//获取所有的span标签var spans=hd.getElementsByTagName("span");//循环遍历的方式,添加点击事件for(var i=0;i<spans.length;i++){//在点击之前就把索引保存在span标签中spans[i].setAttribute("index",i);//================================spans[i].onclick=function () {//第一件事,所有的span的类样式全部移除for(var j=0;j<spans.length;j++){spans[j].removeAttribute("class");}//第二件事,当前被点击的span应用类样式this.className="current";//span被点击的时候获取存储的索引值//alert(this.getAttribute("index"));var num=this.getAttribute("index");//==============================//获取所有的li标签,每个li标签先全部隐藏for(var k=0;k<list.length;k++){list[k].removeAttribute("class");}//当前被点击的span对应的li标签显示list[num].className="current";};}</script>
</body>
</html>

版权声明：本站所有资料均为网友推荐收集整理而来,仅供学习和研究交流使用。

原文链接：https://808629.com/893.html

上一篇：dota 英雄使用 暮色酒馆《3》
下一篇：springboot——任务处理

发表评论:

最新文章
阅读排行
猜你喜欢
热门标签

本站为非赢利网站，部分文章来源或改编自互联网及其他公众平台，主要目的在于分享信息，版权归原作者所有，内容仅供读者参考，如有侵权请联系我们删除！

Copyright © 2022 86后生记录生活 Inc. 保留所有权利。

底部版权信息