day04：自定义属性

day04：自定义属性

目录

• 一、列表隔行换色效果
• 二、列表高亮显示
• 三、显示隐藏二维码模板
• 四、通过name属性获取元素
• 五、根据类样式获取元素
• 七、获取元素的其他方式
• 八、总结
• 九、鼠标经过显示边框
• 十、扩展搜索效果
• 十一、扩展输入密码长度
• 十二、设置和获取文本框的值
• 十三、设置自定义属性

一、列表隔行换色效果

<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 src="publick.js"></script>
<script>// 需求：奇红偶黄my$("btn").onclick = function(){// 获取所有的livar list = my$("uu").getElementsByTagName("li");//集合--伪数组// 循环遍历for(var i = 0; i < list.length; i++){// 判断if(i % 2 == 0){//表示的是偶数(因为我们的下标是从0开始)list[i].style.backgroundColor = "red";}else{list[i].style.backgroundColor = "yellow";}}}
</script>

二、列表高亮显示

<style>ul{list-style: none;cursor: pointer;}
</style>
<ul><li>金士百</li><li>雪花</li><li>百威</li><li>燕京</li><li>青岛</li><li>崂山</li><li>珠江</li><li>华丹</li><li>勇闯天涯</li><li>江小白</li><script src="publick.js"></script><script>var list = ElementsByTagName("li");//集合// 循环遍历for(var i = 0; i < list.length; i++){// 鼠标经过list[i].onmouseover = function(){// 当前，自己，自身this.style.backgroundColor = "pink";}// 鼠标离开list[i].onmouseout = function(){this.style.backgroundColor = "";}}</script>
</ul>

三、显示隐藏二维码模板

<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>
<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="publick.js"></script>
<script>// 获取外面div里面的a链接var aObj = my$("node_small").getElementsByTagName("a")[0];// 鼠标经过和鼠标离开useover = function(){my$("er").className = "erweima show";}// 鼠标离开useout = function(){my$("er").className = "erweima hide";}
</script>

四、通过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 />
<input type="text" value="大家继续棒棒哒，给力" name="name1"><br />
<script src="publick.js"></script>
<script>my$("btn").onclick = function(){// 通过name属性获取元素var inputs = ElementsByName("name1");//集合--伪数组// 遍历循环for(var i = 0; i < inputs.length; i++){inputs[i].value = "大家继续优秀";}}
</script>

五、根据类样式获取元素

<style>div{width: 300px;height: 50px;background: pink;margin-top: 10px;}.cls{background: skyblue;}
</style>
<input type="button" value="显示效果" id="btn">
<p class="cls">这是第一个段落标签</p>
<p>这是第二个段落标签</p>
<span class="cls">这是第一个span标签</span><br />
<span >这是第二个span标签</span><br />
<div class="cls">这是第一个div</div>
<div>这是第二个div</div><script src="publick.js"></script>
<script>// getElementsByClassName() --- 这个是H5新增加的// 需求：点击这个按钮实现只要是带cls这个类，都变背景色my$("btn").onclick = function(){var objs = ElementsByClassName("cls");//集合--为数组（注意cls前面没有点）// 循环遍历for(var i = 0; i < objs.length; i++){objs[i].style.backgroundColor = "red";}}
</script>

七、获取元素的其他方式

<input type="button" value="显示效果" id="btn">
<p class="cls">这是第一个段落标签</p>
<p>这是第二个段落标签</p>
<div class="cls">这是第一个div</div>
<div>这是第二个div</div>
<script src="publick.js"></script>
<script>// 总结：归类这两个都是根据选择器的方式来获取元素的// var btn = ElementById("btn")--这是我们第一个学习的// var btnObj = document.querySelector("#btn");//这个写法前面必须加#号// lick = function(){//     alert("哈哈，大家厉害了，我们学习全面啊，详细啊")// }var objs = document.querySelectorAll(".cls");//集合--伪数组// 循环遍历for(var i = 0; i < objs.length; i++){objs[i].style.backgroundColor = "orangered";}
</script>

八、总结

获取元素的方式大总结：
根据id获取元素
1、ElementById(“id的属性值”)
根据标签获取元素
2、ElementsByTagName(“标签的名字”)
根据name的属性值获取元素
3、ElementsByName(“name的属性值”)
根据类样式的名字获取元素
4、ElementsByClassName(“类样式的名字”)

根据选择器的方式来获取元素
5、document.querySelector(“#btn”)
6、document.querySelectorAll(“.cls”)
7、document.body 专门获取body标签

扩展： 获取html的元素— document.documentElement–这个是专门来获取html这个标签的）

九、鼠标经过显示边框

<style>*{margin: 0;padding: 0;}div{width: 200px;height: 150px;float: left;background: pink;margin-left: 10px;border:2px solid pink;/*小技巧，默认给个边框，这个边框的颜色就是背景色*/}
</style>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<script src="publick.js"></script>
<script>var divs = ElementsByTagName("div");//集合 ---伪数组// 循环遍历for(var i = 0; i < divs.length; i++){// 鼠标经过divs[i].onmouseover = function(){// 自身，自己this.style.border = "2px solid #f40";}// 鼠标离开divs[i].onmouseout = function(){// 自身，自己this.style.border = "";}}
</script>

十、扩展搜索效果

<style>input{color:gray;outline: none;}
</style>
<input type="text" value="请输入搜索内容" id="txt"><script src="publick.js"></script><script>// 获取焦点事件 onfocusmy$("txt").onfocus = function(){// 判断if(this.value == "请输入搜索内容"){this.value = "";//表示清空lor = "black";}}// 失去焦点事件 onblurmy$("txt").onblur = function(){// 判断if(this.value == ""){this.value = "请输入搜索内容";lor = "gray";}}
</script>

十一、扩展输入密码长度

<input type="password" value="" id="txt">
<script src="publick.js"></script>
<script>// 需求：判断密码长度，我们要求的是密码长度是>=6并且 <=10 //(长度不能小于6位，不能超过10位)my$("txt").onblur = function(){if(this.value.length >= 6 && this.value.length <= 10){this.style.backgroundColor = "pink";}else{this.style.backgroundColor = "red";}}// 密码长度判断，工作里面正则表达式
</script>

十二、设置和获取文本框的值

<input type="text" value="我是内容" id="txt">
<script src="publick.js"></script>
<script>my$("txt").onblur = function(){// 设置文本框的值this.value = "看我72变化，哈哈";//设置文本框的值console.log(this.value);//获取文本框的值console.pe);//获取文本框的类型console.log(this.id);//获取文本框的id}
</script>

十三、设置自定义属性

<style>ul{list-style: none;cursor: pointer;}
</style>
<ul id="uu"><li>小明的成绩</li><li>小丽的成绩</li><li>小花的成绩</li><li>小李的成绩</li><li>乔峰的成绩</li>
</ul>
<script src="publick.js"></script>
<script>// 设置自定义属性：setAttribute("属性的名字","属性的值");// 获取自定义属性: getAttribute("属性的名字")// 根据id获取ul标签里面的所有的livar list = my$("uu").getElementsByTagName("li");//集合--伪数组// 循环遍历for(var i = 0; i < list.length; i++){list[i].setAttribute("score",(i+1) * 20);// 点击每个li标签，显示对应的自定属性的值list[i].onclick = function(){Attribute("score"));}}// 应用场景就是tab栏切换
</script>