zoukankan      html  css  js  c++  java

  • JSAP102

    JSAP102

    1、API
    这里写图片描述

    //案例：禁用文本框
<body>
<input type="button" value="禁用" id="btn"/>
<input type="text" value="文本框" id="txt"/>
<script>
document.getElementById("btn").onclick=function () {
    document.getElementById("txt").disabled=true;
};
</script>
    //案例：点击按钮修改列表颜色
<body>
<input type="button" value="变色" id="btn"/>
<ul id="uu">
    <li>汁烧鳗鱼</li>
    <li>汁烧鳗鱼</li>
    <li>汁烧鳗鱼</li>
</ul>
<script>
document.getElementById("btn").onclick=function () {
    document.getElementById("uu").style.backgroundColor="pink";
}
</script>
</body>
    //阻止超链接默认跳转
<body>

<a href="http://www.baidu.com/" onclick="return f()">百度一下</a>
<script>
    //阻止超链接的默认跳转：return false
function f() {
    alert("stop!");
    return false;
}
</script>

    </body>

    案例：点击小图切换大图
<body>
 <a href="timg.jpg" id="ak"><img src="u=2124789894,3346559232&fm=11&gp=0.jpg"></a>
 <img src="" id="big">
<script>
    function my$(id) {
        return document.getElementById(id);
    }
    my$("ak").onclick=function () {
        my$("big").src=this.href;
        return false;
    };
</script>
</body>
    //案例列表隔行变色
<body>
<input type="button" value="隔行变色" id="btn"/>
<ul id="uu">
    <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="pink";
            } else {
                list[i].style.backgroundColor="skyblue";
            }
        }
    };
</script>
</body>
    案例：列表高亮显示
<body>
<ul>
    <li>特价日料</li>
    <li>特价日料</li>
    <li>特价日料</li>
</ul>
<script>
    function my$(id) {
        return document.getElementById(id);
    }

    //注意是鼠标进入和鼠标离开
    var list = document.getElementsByTagName("li");
    for (var i = 0; i < list.length; i++) {
        list[i].onmouseover = function () {
            this.style.backgroundColor = "skyblue";
        }
        list[i].onmouseout=function () {
            this.style.backgroundColor="";
        }
    }
</script>
</body>
    //鼠标浮动显示，离开不显示
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>abc</title>
    <style>
        .show{
            display: block;
        }
        .hide{
            display: none;
        }
    </style>
</head>
<body>
<div>
    <img src="u=2124789894,3346559232&fm=11&gp=0.jpg" id="pic1">
</div>
<div>
    <img src="timg.jpg" id="pic2">
</div>
<script>
    function my$(id) {
        return document.getElementById(id);
    }

    var aObj = my$("pic1");
    aObj.onmouseover=function () {
        my$("pic2").className="show";
    }
    aObj.onmouseout=function () {
        my$("pic2").className="hide";
    }
</script>
</body>
    //根据name属性值获取元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>abc</title>
    <style>

    </style>
</head>
<body>
<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="name3"><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="吃了吗";
        }

    }
    案例：根据类样式的名字获取元素
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>abc</title>
    <style>
        div {
            width: 200px;
            height: 50px;
            background: indianred;
            margin-top: 10px;
        }

        .cls {
            background-color: aqua;
        }
    </style>
</head>
<body>
<p class="cls">你好</p>
<p>你也好</p><br/>
<span>番茄</span><br/>
<span class="cls">芝士</span><br/>
<div class="cls">鸡肉</div>
<div>鱼肉</div>
<input type="button" value="显示效果" id="btn"><br/>
<script>
    //点击按钮设置应用cls类样式的标签背景颜色为绿色
    function my$(id) {
        return document.getElementById(id);
    }

    //点击按钮，改变所有name属性值为name1的文本框中的value属性值
    //根据类样式的名字来获取元素
    my$("btn").onclick = function () {
        var Objs = document.getElementsByClassName("cls");
        for (var i = 0; i < Objs.length; i++) {
            Objs[i].style.backgroundColor = "green";
        }
    }
</script>
</body>
    //其他的获取元素方式及总结
//根据选择器的方式获取元素
.querySelector();
括号内放选择器，即#id名
返回一个元素

.querySelectorAll()
括号内放 .类名
返回伪数组

    这里写图片描述

    //案例：模拟搜索框
<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.length == 0) {
            this.value = "请输入搜索内容";
            this.style.color = "gray";
        }
    }
</script>
</body>
    //案例：验证文本框密码的长度
<body>
<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="green";
        }else {
            this.style.backgroundColor="red";
        }
    }
</script>
</body>

    获取span/p/div等标签内容使用.textContent(ie8不支持，需使用.innerText，其他浏览器也支持)
    如果某属性在浏览器中不支持，那么这个属性的类型是undefined
    2、封装innerText和textContent
    即兼容两种方式 

    //设置任意标签的文本内容
function setInnerText(element,text){
//判断浏览器是否支持该属性即判断该属性的值是不是undefined
if(typeof element.textContent=="undefined"){element.innnerText=text;
}else{
//支持该属性
element.textContent=text;
}
}
//获取任意标签的文本内容
function getInerText(element){
 if(typeof element.textContent=="undefined"){
return element.innerText;
}else{
return element.textContent;
}
}

    3、innerText和innerHTML
    1）设置
    如果使用innerText主要是设置文本的，设置标签内容，是不会进行标签的解析而直接显示文本的，innerHTML可以设置文本内容，也可以解析标签，同时兼容所有浏览器，推荐使用
    2）HTML
    innerText在获取时可以获取标签中间的文本内容，如果标签内还有其他内容，那么也会一并被获取过来，但不会包括标签本身。innerHTML在把文本获取过来时，也会把标签获取过来。

    4、自定义属性操作
    1）程序员自己添加的属性
    可在标签名内设置：

    <li score="95">小勇的数学分数</li>

    但是通过id或类等方式获取该标签而形成的对象，却是不具备该自定义属性的。
    通过.getAttribute(“属性名”));专门获取自定义属性值
    这里写图片描述
    如果要为标签设置，用setAttribute属性

    .setAttribute("属性名",属性值)

    2）移除自定义属性
    这里写图片描述
    移除自定义属性，也可以移除元素自带的属性，如index：
    removeAttribute(“属性名 “)

    <!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);
    }

    //获取最外面的div
    var box = my$("box");
    //获取的是里面的第一个div
    var hd = box.getElementsByTagName("div")[0];
    //获取的是里面第二个div
    var 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的类样式,通过class
            for (var j = 0; j < spans.length; j++) {
                spans[j].removeAttribute("class");
            }
            //第二件事，当前被点击的span应用类样式
            this.className = "current";

            //span被点击时获取存储的索引值
            var num = this.getAttribute("index");
            //获取所有的li标签，每个先全部隐藏
            for(var k=0;k<list.length;k++){
                list[k].removeAttribute("class");
            }
            //当前被点击的标签显示
            list[num].className="current";
        };

    }
</script>
</body>
  • 相关阅读:
    过桥问题
    修改state中数组对象某一个字段(state中某个属性为对象或数组时，需要修改该对象中的某一个属性)
    git 如何提交，新建， 拉取远程分支，git基本操作，git新手教学
    el-image组件大图预览不能定位当前图片的处理
    vue数组遍历动态渲染到页面
    vue路由传参的三基本方式
    git push时报错：error: failed to push some refs to/hint: Updates were rejected because the tip of your current branch is behind/hint: its remote counterpart. Integrate the remote changes
    时间格式转换/时间戳的转换
    Day.js ：一个轻量的处理时间和日期的 JavaScript 库
    node多版本管理（node版本切换、node版本更新及降低版本）
  • 原文地址：https://www.cnblogs.com/Tanqurey/p/10485294.html
Copyright © 2011-2022 走看看