前端全栈学习第十四天-js-WebAPI-第二天

阳光穿透心脏的1/2处 2021-09-18 11:40 229阅读 0赞

1：元素的样式操作案例

2：innerText和innerContent兼容代码

3：自定义属性

1：元素的样式操作案例
    案例1：小图大图的切换
    思路：大图放在a链接里面，是看不到的,里面再包一个img小图
    当你点击小图的时候，其实就是在点大图的链接，然后把大图的href赋值给指定的图片，如果不想丢掉当前页面，可以组织超链接默认跳转，return  false
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    <a href="../../images/1.jpg" id="ak"><img src="../../images/1-small.jpg" alt=""/></a>
    <img src="" alt="" id="big"/>
    <script src="../../common.js"></script>
    <script>
        my$("ak").onclick = function () { //看到的是小图，但是大图是链接，看不到，当你一点及的时候就会跳转，也就是会变成大图，这时候赋值给新的ing来接收
            my$("big").src = this.href;
    //        return false; //阻止跳转
        }
    </script>
    </body>
    </html>
    案例2：美女相册
    思路：思路和点一张图片跳到另一个图片一样，只不过注意一点
    Src是图片的默认属性，所以赋值的时候不用style；
    Return false 阻止超链接默认跳转
    
    
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <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 src="../../common.js"></script>
    <script>
        var a = my$("imagegallery").getElementsByTagName("a");
        for (var i = 0; i < a.length; i++) {
            a[i].onclick = function () {
                my$("image").src = this.href; //这里是image的默认属性，所以不用style
                my$("des").innerHTML = this.title;
                return false;
            }
        }
    
    </script>
    
    </body>
    </html>
    3：列表各行变色
    用的原理是先获取所有的列表，然后for循环 简单点三木运算，复杂点if判断
    //        list[i].style.backgroundColor = i%2==0?"pink":"yellow";
    
    4：通过name获取元素的值(多使用与表单中)
    var inputObjs = document.getElementsByName("name1");
    5:模拟搜索框：主要还是value是默认值，所以不用style
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>$永远的24k纯帅$</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 == "") {
    //            this.value = "请输入搜索内容";
    //            this.style.color = "gray";
    //        } 判断数字比判段字符串快
            if (this.value.length == 0) {
                this.value = "请输入搜索内容";
                this.style.color = "gray";
            }
        }
    
    
    </script>
    </body>
    </html>
    
    6：封装innerText和textContent -----重点，都是设置标签中文本内容
    InnerText：谷歌，火狐支持，ie8不支持
    TextContent：谷歌，ie8支持，火狐不支持
    注意的是封装完方法以后，该怎么调用
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
        <style>
            #dv{
                width: 200px;
                height: 200px;
                border: 1px solid #000;;
            }
        </style>
    </head>
    <body>
    <input type="button" value="点我" id="bt"/>
    <div id="dv">哈哈哈哈哈哈哈哈</div>
    <script src="../../common.js"></script>
    <script>
    //设置标签中的文本内容,使用innerText属性，谷歌，火狐，ie8都支持
    //    innerContent属性，谷歌，火狐支持，ie8不支持
    //    兼容代码
    //    设置任意的标签中的文本内容
    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$("bt").onclick =function(){
            console.log(getInnerText(my$("dv")))
            setInnerText(my$("dv"),"安抚")
        }
    </script>
    </body>
    </html>
    
    7：自定义属性
    setAttribute(name,value)  getAttribute(name);
    <!DOCTYPE html>
    <html>
    <head lang="en">
        <meta charset="UTF-8">
        <title></title>
    </head>
    <body>
    
    <ul>
        <li>打击假货</li>
        <li>打击假货</li>
        <li>打击假货</li>
        <li>打击假货</li>
        <li>打击假货</li>
    </ul>
    <script src="../../common.js"></script>
    <script>
        var list = document.getElementsByTagName("li");
        for (var i = 0; i < list.length; i++) {
            list[i].setAttribute("score", (i + 1) * 10);
            list[i].onclick = function () {
                console.log("哈哈");
                alert(this.getAttribute("score"));
            }
        }
        //    移除自定义属性
        //    list[i].removeAttribute()
        //    list[i].className =""
    </script>
    </body>
    </html>
    
    8:table切换
    关键是怎么将上面的索引和下面的索引一一对应，并且点击上面的，下面也会切换。排他效果
    在循环的时候，就将索引存储起来。然后在需要的时候读取
    <!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 src="../../common.js"></script>
    <script>
    
        //    先把该获取的获取了
        var dv = my$("box");
        var hd = dv.children[0];
        var spanObj = hd.getElementsByTagName("span");
        var bd = dv.children[1];
        var list = bd.getElementsByTagName("li");
        for (var i = 0; i < spanObj.length; i++) {
    //    存储索引值
            var num = spanObj[i].setAttribute("index", i);
            spanObj[i].onclick = function () {
                for (var j = 0; j < spanObj.length; j++) {
                    spanObj[j].className = "";
                }
                this.className = "current";
                var num = this.getAttribute("index");
                for (var k = 0; k < list.length; k++) {
                    list[k].className = "";
                }
                list[num].className = "current";
            }
        }
    
    
    </script>
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    </body>
    </html>