【无标题】

最新推荐文章于 2024-02-17 12:36:47 发布

King~LL

最新推荐文章于 2024-02-17 12:36:47 发布

阅读量40

点赞数 2

文章标签： javascript 学习前端

本文链接：https://blog.csdn.net/SLKLl0808/article/details/123244384

版权

BOM编程

***今天我们学习的是JavaScript.03.BOM编程，接下来由LL来给您介绍BOM编程。

BOM：是一个浏览器对象模型，用来获取或设置浏览器的属性，行为，例如：新建窗口，获取屏幕分辨率，浏览器版号等。

访问页面元素：
接下来我们学习如何访问页面的元素，也就是说如何动态改变层，标签中的内容。
例如：


<input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input
        type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input
        type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input
        type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input
        type="text"><input type="text"><input type="text"><input type="text"><input type="text"><input
        type="text"><input type="text"><input type="text"><input type="text">
<button onclick="fn1('哈哈')">哈哈</button>
<button onclick="fn1('喜喜')">喜喜</button>
<script>

    function fn1(a) {
        //1.拿到所有的输入框
        var is=document.getElementsByTagName("input")
        //2.更改值
        for(var i of is){
            i.value=a
        }
    }

    找到页面中所有的输入框
    给所有的输入框赋值（失去焦点事件，获得焦点事件）
    (()=>{
        var is=document.getElementsByTagName("input")
        要碰到foreach循环 不能用var
        使用let(定义局部变量)
        for(let i of is){
            给元素的获得焦点事件赋值
            i.onfocus=()=>{
                i.value=""
            }
            给元素的失去焦点事件赋值
            i.onblur=()=>{
                i.value="巴拉巴拉"
            }
        }
    })();

</script>
(1)通过name访问
（1）获取name为"s2"的文本框的总数量。
<script type="text/javascript">
       function mya(){
           获取所有文本框的值
           var sum=document.getElementsByName("s2");
           输出sum的长度
           alert(sum.length);//结果为5
}
</script>

<script>
    var b=1;
    箭头函数就是正常函数的简写
    setInterval(()=>{
        操作元素（html）的css
        d1.style.backgroundImage='url("images/a'+(b%3)+'.jpg")'
        b++;
    },1000)

    function fn1(){
        操作属性
        m1.src="images/a1.jpg"
    }
</script>

①getElementById()
按元素的ID名称来访问
②getElementsByName()
按元素的name名称来访问
③getElementsByTagName()
按标签来访问

复选框全选效果

使用getElementsByName()方法访问同名复

function check(){
 var oInput=document.getElementsByName("product");
 for (var i=0;i<oInput.length;i++){
     if (document.getElementById("all").checked==true){
 	    oInput[i].checked=true;
 	 }
   }
}

visibility

visibility属性的值

object.style.visibility="值"

在这里插入图片描述

display

display属性的值
object.style.display="值"
在这里插入图片描述

隐藏和显示图片

  <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div{
            width: 100px;
            height: 100px;
            background: red;
        }
    </style>
</head>
<body>
<div id="d1"></div>
<button onclick="fn1()">点我隐藏</button>
<button onclick="fn2()">点我隐藏</button>
<hr>
<ul>
    <li><i onclick="fn3('u1')">家电</i>
        <ul id="u1">
            <li>萍乡</li>
            <li>袭击及</li>
            <li>点至</li>
        </ul>
    </li>
    <li><span onclick="fn3('u2')">水果</span>
        <ul id="u2">
            <li>冰果</li>
            <li>记挂</li>
            <li>弄罗</li>
        </ul>
    </li>
</ul>
<hr>
<table border>
    <tr>
        <td><input type="checkbox" onclick="fn4(this.checked)"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
        <td><input type="checkbox"></td>
    </tr>
</table>
<script>
    
    function fn4(status) {
        拿到所有的多选框
        设置选中为第一个都选课的装填 status
        var is=document.getElementsByTagName("input")
        for(let i of is){
            i就是每一个多选框
            i.checked=status
        }
    }

    function fn3(id) {
        根据id拿出对应的元素
        var li=document.getElementById(id)
        将对应元素设置为不显示
        if(li.style.display==="none"){
            li.style.display="block"
        }else{
            li.style.display="none"
        }
    }

    function fn1() {
        document.getElementById()
        如果显示 那么隐藏
        如果隐藏 那么显示
        if(d1.style.display==="none"){
            d1.style.display="block"
        }else{
            d1.style.display="none"
        }
    }

    function fn2() {
         document.getElementById()
        如果显示 那么隐藏
        如果隐藏 那么显示
        if(d1.style.opacity==0){
            d1.style.opacity=1
        }else{
            d1.style.opacity=0
        }
    }

</script>