1.模拟搜索
<input type="text" value="请输入搜索的具体内容" id="btn" style="color: grey;"/>
<script> //要让搜索框产生焦点的时候为空,失去焦点的时候默认填入“请输入搜索的具体内容” 并且文字为灰色 //产生焦点操作 my$("btn").onfocus = function () { if (this.value == "请输入搜索的具体内容") { this.value = ""; this.style.color = "black"; } }; //失去焦点操作 my$("btn").onblur = function () { if (this.value == "") { this.value = "请输入搜索的具体内容"; this.style.color = "grey"; } }; </script>
失去焦点:
获得焦点:
2.获取和设定自定义属性
<ul id="uu"> <li>Chandler的成绩</li> <li>Monica的成绩</li> <li>Rachel的成绩</li> <li>Ross的成绩</li> <li>Joey的成绩</li> </ul>
<script> var LiObj = my$("uu").getElementsByTagName("li"); for (var i = 0; i < LiObj.length; i++) { LiObj[i].setAttribute("score", (10 * i) + 2); LiObj[i].onclick = function () { alert(this.getAttribute("score")); } } </script>
点击前:
点击后:
3.移除自定义/自带属性
<style> div { width: 30px; height: 100px; background-color: red; } .cls { width: 30px; height: 100px; background-color: aqua; } </style>
<input type="button" value="移除属性" id="btn"/> <div id="dv" class="cls" score="10"> </div>
<script> my$("btn").onclick = function () { //移除自定义属性 my$("dv").removeAttribute("score"); //移除自带属性 my$("dv").removeAttribute("class"); } </script>
点击前:
点击后:
4.tab切换实现
<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>
<div class="box" id="box"> <!--上一面的一个div 控制标题--> <!--第一个current:控制的是背景颜色(为紫色)--> <div class="hd"> <span class="current">体育</span> <span>娱乐</span> <span>新闻</span> <span>综合</span> </div> <!--第二个div 控制内容--> <!--第二个current:控制的是模块的显示和消失(block和none)--> <div class="bd"> <ul> <li class="current">我是体育模块</li> <li>我是娱乐模块</li> <li>我是新闻模块</li> <li>我是综合模块</li> </ul> </div> </div>
<script> /* * * 1.两个div是完全分离的部分 * 第一个div(dv1)存储的是标题: * * 体育 娱乐 新闻 综合 * * 第二个div(dv2)存储的是内容 * * 我是体育模块 我是娱乐模块 我是新闻模块 我是综合模块 * * 2.要求只点击的dv1就能够触发dv2的切换 * * 为dv1的四个标题(span)注册点击事件,产生以下操作: * * (1)存储span的四个索引,0 1 2 3,将其作为自定义属性存入span中 * (2)将所有span的class都清空 * (3)将被点击的span设置为current,也就是变为紫色 * (4)获取dv2的li,并进行遍历 * (5)将所有li的class都清空 * //下一步有运用到所取到的index,也就是索引,这样子就可以让li知道究竟要让那个li变为block * (6)将被点击的li设定为current,也就是变为block * */ //获取最外面的div var box = my$("box"); //获取的是里面的第一个div var hd = box.getElementsByTagName("div")[0]; //获取的是里面的第二个div var bd = box.getElementsByClassName("bd")[0]; //获取第一个div,也就是显示内容中的li var list = bd.getElementsByTagName("li"); //获取第二个div,也就是标题中的span var spans = hd.getElementsByTagName("span"); //对span,也就是标题进行遍历同时添加点击事件 for (var i = 0; i < spans.length; i++) { //存储span,也就是标题的索引,即给每一个span都添加一个自定义属性index spans[i].setAttribute("index", i); //为每一个span注册点击事件 spans[i].onclick = function () { //首先将所有的class都清空,也就是样式都为空,这样所有标题都回归粉色,也就是排他操作 for (var j = 0; j < spans.length; j++) { //下面两种方法都可以,一种是将class置为空,一种是移除class //spans[j].className = ""; spans[j].removeAttribute("class"); } //然后将被选中的span添加class,也就是将被点中的标题置为紫色 this.className = "current"; //获取被点击到的span的自定义属性index var num = this.getAttribute("index"); //对内容,也就是li进行遍历 for (var k = 0; k < list.length; k++) { //将所有class都置为无,也就是将class隐藏掉 list[k].removeAttribute("class"); } //根据存储的索引,将被点击到的class设定为current,也就是将li显示出来 list[num].className = "current"; } } </script>
效果: